iidi
/
cmc-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 首页接口对接

develop
时启龙 2024-08-26 19:29:49 +08:00
parent f64fb71c66
commit 6b1e3b6f4c
12 changed files with 142 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webs/sms-web/src/main.ts
View File

@ -9,6 +9,4 @@
import { render } from '@cmp/cmp-core/render'
import qiankunRender from '@cmp/cmp-core/qiankunRender'
import echarts from '@cmp/cmp-echarts/hooks/echarts'
console.log(echarts)
export const { bootstrap, mount, unmount } = qiankunRender(render)

6
webs/sms-web/src/views/configs/notice/Dialog.vue
View File

@ -21,7 +21,7 @@
<el-checkbox-group v-model="addData.sendGroups">
<el-checkbox label="ALL">全员</el-checkbox>
<el-checkbox label="MANAGE">管理端用户</el-checkbox>
<el-checkbox label="TENANT">租户端用户</el-checkbox>
<!-- <el-checkbox label="TENANT">租户端用户</el-checkbox> -->
<el-checkbox label="INPUT">指定用户</el-checkbox>
</el-checkbox-group>
</cb-form-item>
@ -33,8 +33,8 @@
<el-checkbox-group v-model="addData.sendWays">
<el-checkbox label="EMAIL">邮件</el-checkbox>
<el-checkbox label="MESSAGE">站内信</el-checkbox>
<el-checkbox label="WECHAT">企业微信</el-checkbox>
<el-checkbox label="DING">钉钉</el-checkbox>
<!-- <el-checkbox label="WECHAT">企业微信</el-checkbox>
<el-checkbox label="DING">钉钉</el-checkbox> -->
</el-checkbox-group>
</cb-form-item>
</el-col>

30
webs/sms-web/src/views/configs/setting_dashboard/index.vue
View File

@ -9,29 +9,30 @@
<TaskList class="m-b-md" height="918px" />
<!-- 平台容量统计 -->
<PlatformCapacity class="m-b-md" height="242px" />
<!-- 告警处理 -->
<!-- 告警处理✅ -->
<AlarmHandling class="m-b-md" height="412px" />
</el-col>
<el-col :span="8">
<!-- 个人信息✅ -->
<UserInfo class="m-b-md" />
<!-- 数据展示 -->
<StatisticsDisplay class="m-b-md" height="314px" />
<!-- 工单统计 -->
<OrderStatistics class="m-b-md" height="226px" />
<!-- 公告 -->
<!-- 公告✅ -->
<NoticeList class="m-b-md" height="378px" />
<!-- 单日告警统计 -->
<!-- 单日告警统计✅ -->
<DailyAlarmStatistics class="m-b-md" height="412px" />
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<!-- 应用 CPUTop5 -->
<CPUTop5 class="m-b-md" height="320px" />
<!-- 虚拟机CPU利用率TOP5 -->
<CPU_MEMORY_Top5 class="m-b-md" type="vmCpu" height="320px" />
</el-col>
<el-col :span="12">
<!-- 虚拟机 CPUTop5 -->
<VMCPUTop5 class="m-b-md" height="320px" />
<!-- 虚拟机内存利用率TOP5 -->
<CPU_MEMORY_Top5 class="m-b-md" type="vmMem" height="320px" />
</el-col>
</el-row>
<el-row>
@ -58,8 +59,7 @@ import PlatformCapacity from './new_dashboard_component/PlatformCapacity.vue'
import NoticeList from './new_dashboard_component/NoticeList.vue'
import AlarmHandling from './new_dashboard_component/AlarmHandling.vue'
import DailyAlarmStatistics from './new_dashboard_component/DailyAlarmStatistics.vue'
import CPUTop5 from './new_dashboard_component/CPUTop5.vue'
import VMCPUTop5 from './new_dashboard_component/VMCPUTop5.vue'
import CPU_MEMORY_Top5 from './new_dashboard_component/CPU_MEMORY_Top5.vue'
import WarningList from './new_dashboard_component/WarningList.vue'
export default {
components: {
@ -71,8 +71,7 @@ export default {
NoticeList,
AlarmHandling,
DailyAlarmStatistics,
CPUTop5,
VMCPUTop5,
CPU_MEMORY_Top5,
WarningList
},
setup(props, context) {
@ -91,6 +90,9 @@ export default {
}
}
::v-deep {
.weight600 {
font-weight: 600;
}
.el-table--group,
.el-table--border {
border: none;
@ -99,7 +101,11 @@ export default {
.el-table td {
border: none;
}
.el-table .cell {
line-height: 32px;
font-size: 14px;
color: #344767;
}
.el-table::before,
.el-table--group::after,
.el-table--border::after {

37
webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/CPUTop5.vue
View File

@ -1,37 +0,0 @@
<template>
<ItemCard title="应用CPU TOP5" v-bind="$attrs">
<BarReverseCharts width="100%" height="100%" :data="barData" unit="%" v-if="barData" :setting="chartSetting"></BarReverseCharts>
</ItemCard>
</template>
<script>
import ItemCard from './ItemCard.vue'
import BarReverseCharts from './echarts/BarReverseCharts.vue'
import { getResTops } from 'services/monitor/index'
const chartSetting = {
barColor: ['rgba(255, 204, 77, 1)', 'rgba(59, 228, 218, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)']
}
export default {
components: { ItemCard, BarReverseCharts },
data() {
return {
barData: null,
chartSetting
}
},
created() {
this.getData()
},
methods: {
getData() {
getResTops({
vendorId: 1,
type: 'vmMem',
limit: 5
}).then(data => {
this.barData = data.data
})
}
}
}
</script>

69
webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/CPU_MEMORY_Top5.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<ItemCard :title="title" v-bind="$attrs">
<el-select v-model="vendorId" @change="getData" slot="operate">
<el-option v-for="item in vendorList" :key="item.id" :value="item.id" :label="item.name"></el-option>
</el-select>
<BarReverseCharts width="100%" height="100%" :data="barData" unit="%" v-if="barData" :setting="chartSetting"></BarReverseCharts>
</ItemCard>
</template>
<script>
import ItemCard from './ItemCard.vue'
import BarReverseCharts from './echarts/BarReverseCharts.vue'
import { getResTops } from 'services/monitor/index'
import { conditionCloudVendor } from 'services/platform/index'
const chartSetting = {
barColor: ['rgba(255, 204, 77, 1)', 'rgba(59, 228, 218, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)']
}
export default {
props: {
type: {
type: String,
default: 'vmCpu'
}
},
components: { ItemCard, BarReverseCharts },
data() {
return {
barData: null,
chartSetting,
vendorList: [],
vendorId: ''
}
},
created() {
this.getVendor()
},
computed: {
title() {
return this.type == 'vmCpu' ? '虚拟机CPU利用率TOP5' : '虚拟机内存利用率TOP5'
}
},
methods: {
async getVendor() {
const data = await conditionCloudVendor({
condition: JSON.stringify({
condition: 'listByTypes',
types: ['OPENSTACK', 'VMWARE', 'MANAGEONE', 'EASYSTACK', 'HWACCESS', 'APSARASTACK', 'ALIYUN', 'HCSO', 'KVM', 'SMARTX', 'KINGCLOUD', 'CNWARE', 'ZSTACK', 'CLOUDOS', 'CTSTACK']
})
})
if (data.success) {
this.vendorList = data.data
if (data.data.length) {
this.vendorId = data.data[0].id
this.getData()
}
}
},
getData() {
getResTops({
vendorId: 1,
type: this.type,
limit: 5
}).then(data => {
this.barData = data.data
})
}
}
}
</script>

62
webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/NoticeList.vue
View File

@ -1,38 +1,47 @@
<template>
<ItemCard title="公告列表" v-bind="$attrs">
<el-button slot="operate" type="primary" plain @click="toMessageList()">查看更多</el-button>
<cb-table
:data="tableList"
:params="params"
:get-list="getItemList"
:total="total"
:otherProps="{
border: false
}"
>
<el-table-column show-overflow-tooltip label="标题" prop="title">
<template slot-scope="{ row }">
<div class="flex">
<el-table-column show-overflow-tooltip label="标题">
<template slot-scope="scope">
<!-- <div class="flex">
<img :src="imgMap[row.type]" alt="" />
<span>{{ row.title }}</span>
</div>
<span>{{ row.name }}</span>
</div> -->
<span class="detail-href" @click="getDetail(scope.row.id)">
{{ scope.row.name }}
</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="内容" prop="content"> </el-table-column>
<el-table-column show-overflow-tooltip label="时间" prop="gmtCreate">
<template slot-scope="scope">
<span class="tip">{{ scope.row.gmtCreate }} </span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="内容" prop="content"></el-table-column>
<el-table-column show-overflow-tooltip label="时间" prop="date"></el-table-column>
<span slot="pagination"></span>
</cb-table>
<detail-dialog :dialog="detailConfig" v-if="detailConfig.visible"></detail-dialog>
</ItemCard>
</template>
<script>
import ItemCard from './ItemCard.vue'
import { mockHttp } from 'services/system/dashboard'
import DetailDialog from '@/views/message/detail.vue'
import { getMessage } from 'services/system/message'
import 红 from './images/通知-红.png'
import 黄 from './images/通知-黄.png'
import 蓝 from './images/通知-蓝.png'
export default {
components: { ItemCard },
components: { ItemCard, DetailDialog },
data() {
return {
imgMap: {
@ -40,27 +49,36 @@ export default {
黄,
蓝
},
tableList: [
{
title: '测试标题',
date: '2020-01-01',
content: '测试内容',
type: '红'
}
],
tableList: [],
params: {
page: 1,
rows: 10
rows: 5,
params: JSON.stringify([{ param: { status: 'UNREAD' }, sign: 'EQ' }])
},
total: 0
// 详情
detailConfig: {
visible: false,
id: 0
}
}
},
created() {
this.getItemList()
},
methods: {
getDetail(id) {
this.detailConfig = {
visible: true,
id
}
},
toMessageList(id = '') {
this.$router.push({ path: '/message', query: { id } })
},
getItemList() {
mockHttp(this.params).then(data => {
getMessage(this.params).then(data => {
if (data.success) {
this.tableList = data.data.rows
this.total = data.data.total
}
})
}

6
webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/OrderStatistics.vue
View File

@ -22,9 +22,9 @@ export default {
data() {
return {
numList: [
{ label: '待办工单', value: 36, bgImg: 待办工单, background: 'rgba(252, 182, 98, 0.1)' },
{ label: '已办工单', value: 20, bgImg: 已办工单, background: 'rgba(70, 216, 171, 0.1)' },
{ label: '总数', value: 20, bgImg: 总数, background: 'rgba(93, 148, 255, 0.1)' }
{ label: '待办工单', value: 0, bgImg: 待办工单, background: 'rgba(252, 182, 98, 0.1)' },
{ label: '已办工单', value: 0, bgImg: 已办工单, background: 'rgba(70, 216, 171, 0.1)' },
{ label: '总数', value: 0, bgImg: 总数, background: 'rgba(93, 148, 255, 0.1)' }
]
}
}

10
webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/StatisticsDisplay.vue
View File

@ -29,13 +29,13 @@ export default {
data() {
return {
numList: [
{ label: '当前用户授权应用数', value: 36, bgImg: 当前用户授权应用数 },
{ label: '数据权限申请数量', value: 20, bgImg: 数据权限申请数量 }
{ label: '当前用户授权应用数', value: 0, bgImg: 当前用户授权应用数 },
{ label: '数据权限申请数量', value: 0, bgImg: 数据权限申请数量 }
],
statistics: [
{ label: '数据调度任务量', value: 36 },
{ label: '运维任务申请表', value: 17 },
{ label: '日志审计任务量', value: 20 }
{ label: '数据调度任务量', value: 0 },
{ label: '运维任务申请表', value: 0 },
{ label: '日志审计任务量', value: 0 }
]
}
}

8
webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/TaskList.vue
View File

@ -5,7 +5,7 @@
<el-table-column type="index" width="50" label="序号"> </el-table-column>
<el-table-column show-overflow-tooltip label="标题" prop="name">
<template slot-scope="scope">
<span class="name">{{ scope.row.name }}</span>
<span class="weight600">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="状态" prop="status"></el-table-column>
@ -13,7 +13,7 @@
<el-table-column show-overflow-tooltip label="时间" prop="time"></el-table-column>
<el-table-column show-overflow-tooltip label="操作" width="60px">
<template slot-scope="scope">
<cb-link @click="handleOperation(scope.row)">审批</cb-link>
<cb-link @click="handleOperation(scope.row)" style="font-size: 14px">审批</cb-link>
</template>
</el-table-column>
</cb-table>
@ -59,10 +59,6 @@ export default {
}
</script>
<style scoped lang="scss">
.name {
font-weight: 600;
color: #344767;
}
v-deep {
.el-table--small {
font-size: 14px !important;

37
webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/VMCPUTop5.vue
View File

@ -1,37 +0,0 @@
<template>
<ItemCard title="虚拟机CPU利用率 TOP5" v-bind="$attrs">
<BarReverseCharts width="100%" height="100%" :data="barData" unit="%" v-if="barData" :setting="chartSetting"></BarReverseCharts>
</ItemCard>
</template>
<script>
import ItemCard from './ItemCard.vue'
import BarReverseCharts from './echarts/BarReverseCharts.vue'
import { getResTops } from 'services/monitor/index'
const chartSetting = {
barColor: ['rgba(255, 204, 77, 1)', 'rgba(59, 228, 218, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)']
}
export default {
components: { ItemCard, BarReverseCharts },
data() {
return {
barData: null,
chartSetting
}
},
created() {
this.getData()
},
methods: {
getData() {
getResTops({
vendorId: 1,
type: 'hostCpu',
limit: 5
}).then(data => {
this.barData = data.data
})
}
}
}
</script>

2
webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/echarts/BarReverseCharts.vue
View File

@ -160,7 +160,7 @@ export default {
rich: {
rang1: {
width: 24,
height: 28,
height: 26,
backgroundColor: {
image: 排名1
}

2
webs/sms-web/src/views/message/detail.vue
View File

@ -1,5 +1,5 @@
<template>
<cb-detail-right v-if="dialog.visible" @goBack="goBack">
<cb-detail-right v-if="dialog.visible" :title="detailData.name" @goBack="goBack">
<div slot="custom_content">
<div class="message-card">
<pre class="site-message-detail">{{ detailData.content }}</pre>