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

fix: 虚拟机利用率

develop
时启龙 2024-08-26 20:30:01 +08:00
parent 6b1e3b6f4c
commit 1e4c72bff2
2 changed files with 76 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,47 +1,45 @@
<template>
<el-container class="setting-wrapper">
<el-container class="setting-container">
<el-main class="setting-main" id="setting-container">
<el-scrollbar style="height: 100%">
<el-row :gutter="20">
<el-col :span="16">
<!-- 待办工单 -->
<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">
<!-- 虚拟机CPU利用率TOP5 -->
<CPU_MEMORY_Top5 class="m-b-md" type="vmCpu" height="320px" />
</el-col>
<el-col :span="12">
<!-- 虚拟机内存利用率TOP5 -->
<CPU_MEMORY_Top5 class="m-b-md" type="vmMem" height="320px" />
</el-col>
</el-row>
<el-row>
<el-col>
<!-- 告警列表 -->
<WarningList />
</el-col>
</el-row>
</el-scrollbar>
<el-container>
<el-main>
<el-row :gutter="20">
<el-col :span="16">
<!-- 待办工单 -->
<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">
<!-- 虚拟机CPU利用率TOP5 -->
<CPU_MEMORY_Top5 class="m-b-md" type="vmCpu" height="320px" />
</el-col>
<el-col :span="12">
<!-- 虚拟机内存利用率TOP5 -->
<CPU_MEMORY_Top5 class="m-b-md" type="vmMem" height="320px" />
</el-col>
</el-row>
<el-row>
<el-col>
<!-- 告警列表 -->
<WarningList />
</el-col>
</el-row>
</el-main>
</el-container>
</el-container>
@ -73,21 +71,12 @@ export default {
DailyAlarmStatistics,
CPU_MEMORY_Top5,
WarningList
},
setup(props, context) {
return {}
}
}
</script>
<style lang="scss" scoped>
.setting-wrapper {
height: calc(100vh - 50px);
overflow: hidden;
flex-direction: column;
font-size: 14px !important;
.setting-container {
height: calc(100% - 50px);
}
}
::v-deep {
.weight600 {

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

@ -6,7 +6,7 @@
</template>
<script>
import { computed } from 'vue'
import { computed, unref, ref } from 'vue'
import useEchart, { commonProps } from '@cmp/cmp-echarts/hooks/useChart'
import { merge } from 'lodash-es'
import echarts from '@cmp/cmp-echarts/hooks/echarts'
@ -34,14 +34,36 @@ function getLinerColor(startColor, endColor) {
}
])
}
const MaxNameLength = 15
export default {
props: {
...commonProps
},
setup(props) {
const yLeft = ref(0)
const getTextWidth = (text, font) => {
let canvas = document.createElement('canvas')
let context = canvas.getContext('2d')
context.font = font
let metrics = context.measureText(text)
return metrics.width
}
const getYLeft = data => {
// 求出y轴标签最长的项
let maxlengthName = data.keys.sort((a, b) => {
return b.length - a.length
})[0]
// 计算最长的名字长度
let maxlength = maxlengthName.length
// 限制label最多显示10位，超出显示省略号
if (maxlength >= MaxNameLength) maxlengthName = maxlengthName.slice(0, MaxNameLength) + '...'
// 求出list中label最长的长度 设置偏移量
yLeft.value = getTextWidth(maxlengthName, '14px Microsoft Yahei') + 50
}
// 数据处理
function handleData(data) {
const { legendLength = 60, series: seriesConfig = {}, colorMap = {} } = props.setting
getYLeft(data)
const { legendLength = 60, series: seriesConfig = {} } = props.setting
const legends = []
const series = []
const { values = [], keys = [] } = data
@ -101,10 +123,9 @@ export default {
},
grid: {
top: 10,
left: '-150',
right: '2%',
left: unref(yLeft),
right: '15%',
bottom: 1,
containLabel: true,
...grid
},
tooltip: {
@ -141,20 +162,21 @@ export default {
{
type: 'category',
inverse: true,
// ...yAxis,
data: keys,
axisLine: {
show: false
},
position: 'left',
axisLabel: {
show: true,
margin: 150,
textStyle: {
align: 'left'
},
align: 'left',
baseline: 'middle',
fontSize: 14,
margin: unref(yLeft),
color: 'rgba(52, 71, 103, 1)',
formatter: function (value, index) {
if (value.length >= MaxNameLength) {
value = value.slice(0, MaxNameLength) + '...'
}
return `{rang${index + 1}|}` + ' ' + value
},
rich: {
@ -207,7 +229,7 @@ export default {
{
type: 'category',
inverse: true,
// ...yAxis,
position: 'right',
data: keys,
axisLine: {
show: false
@ -217,8 +239,8 @@ export default {
formatter: function (value, index) {
return props.data.values[0].data[index] + '%'
},
margin: 40,
width: 10,
margin: 50,
width: 100,
fontSize: 14,
fontWeight: 600
},