fix: 虚拟机利用率

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

@@ -1,47 +1,45 @@
 <template>
   <el-container class="setting-wrapper">
-    <el-container class="setting-container">
+    <el-container>
-      <el-main class="setting-main" id="setting-container">
+      <el-main>
-        <el-scrollbar style="height: 100%">
+        <el-row :gutter="20">
-          <el-row :gutter="20">
+          <el-col :span="16">
-            <el-col :span="16">
+            <!-- 待办工单 -->
-              <!-- 待办工单 -->
+            <TaskList class="m-b-md" height="918px" />
-              <TaskList class="m-b-md" height="918px" />
+            <!-- 平台容量统计 -->
-              <!-- 平台容量统计 -->
+            <PlatformCapacity class="m-b-md" height="242px" />
-              <PlatformCapacity class="m-b-md" height="242px" />
+            <!-- 告警处理✅ -->
-              <!-- 告警处理✅ -->
+            <AlarmHandling class="m-b-md" height="412px" />
-              <AlarmHandling class="m-b-md" height="412px" />
+          </el-col>
-            </el-col>
+          <el-col :span="8">
-            <el-col :span="8">
+            <!-- 个人信息✅ -->
-              <!-- 个人信息✅ -->
+            <UserInfo class="m-b-md" />
-              <UserInfo class="m-b-md" />
+            <!-- 数据展示 -->
-              <!-- 数据展示 -->
+            <StatisticsDisplay class="m-b-md" height="314px" />
-              <StatisticsDisplay class="m-b-md" height="314px" />
+            <!-- 工单统计 -->
-              <!-- 工单统计 -->
+            <OrderStatistics class="m-b-md" height="226px" />
-              <OrderStatistics class="m-b-md" height="226px" />
+            <!-- 公告✅ -->
-              <!-- 公告✅ -->
+            <NoticeList class="m-b-md" height="378px" />
-              <NoticeList class="m-b-md" height="378px" />
+            <!-- 单日告警统计✅ -->
-              <!-- 单日告警统计✅ -->
+            <DailyAlarmStatistics class="m-b-md" height="412px" />
-              <DailyAlarmStatistics class="m-b-md" height="412px" />
+          </el-col>
-            </el-col>
+        </el-row>
-          </el-row>
+        <el-row :gutter="20">
-          <el-row :gutter="20">
+          <el-col :span="12">
-            <el-col :span="12">
+            <!-- 虚拟机CPU利用率TOP5 -->
-              <!-- 虚拟机CPU利用率TOP5 -->
+            <CPU_MEMORY_Top5 class="m-b-md" type="vmCpu" height="320px" />
-              <CPU_MEMORY_Top5 class="m-b-md" type="vmCpu" height="320px" />
+          </el-col>
-            </el-col>
+          <el-col :span="12">
-            <el-col :span="12">
+            <!-- 虚拟机内存利用率TOP5 -->
-              <!-- 虚拟机内存利用率TOP5 -->
+            <CPU_MEMORY_Top5 class="m-b-md" type="vmMem" height="320px" />
-              <CPU_MEMORY_Top5 class="m-b-md" type="vmMem" height="320px" />
+          </el-col>
-            </el-col>
+        </el-row>
-          </el-row>
+        <el-row>
-          <el-row>
+          <el-col>
-            <el-col>
+            <!-- 告警列表 -->
-              <!-- 告警列表 -->
+            <WarningList />
-              <WarningList />
+          </el-col>
-            </el-col>
+        </el-row>
-          </el-row>
-        </el-scrollbar>
       </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 {

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

@@ -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',
+          left: unref(yLeft),
-          right: '2%',
+          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,
+              align: 'left',
-              margin: 150,
+              baseline: 'middle',
-              textStyle: {
+              fontSize: 14,
-                align: 'left'
+              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,
+              margin: 50,
-              width: 10,
+              width: 100,
               fontSize: 14,
               fontWeight: 600
             },