fix: 看板告警图统计逻辑优化

src/views/dashboard/overview/components/AlarnTypeBar/index.vue

@@ -1,21 +1,26 @@
-<template>
-  <div ref="alarmTypeBar" class="chart-container"></div>
-</template>
 <script setup lang="ts">
-import { markRaw, onMounted, reactive, ref } from 'vue';
-import { origGet, top3Sel } from '@/api/faultManage/actAlarm';
 import * as echarts from 'echarts/core';
 import {
-  DatasetComponent,
-  GridComponent,
-  TransformComponent,
   TitleComponent,
+  TitleComponentOption,
   TooltipComponent,
+  TooltipComponentOption,
+  GridComponent,
+  GridComponentOption,
   LegendComponent,
+  LegendComponentOption,
 } from 'echarts/components';
-import { BarChart, PieChart } from 'echarts/charts';
+import {
-import { CanvasRenderer } from 'echarts/renderers';
+  PieChart,
+  PieSeriesOption,
+  BarChart,
+  BarSeriesOption,
+} from 'echarts/charts';
 import { LabelLayout } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+import { markRaw, onMounted, ref } from 'vue';
+import { origGet, top3Sel } from '@/api/faultManage/actAlarm';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 
@@ -24,109 +29,106 @@ const { t } = useI18n();
 echarts.use([
   TitleComponent,
   TooltipComponent,
+  GridComponent,
   LegendComponent,
   PieChart,
+  BarChart,
   CanvasRenderer,
   LabelLayout,
-  DatasetComponent,
-  GridComponent,
-  TransformComponent,
-  BarChart,
-  CanvasRenderer,
-  GridComponent,
-  BarChart,
-  CanvasRenderer,
-  GridComponent,
-  BarChart,
-  CanvasRenderer,
-  CanvasRenderer,
 ]);
 
+type EChartsOption = echarts.ComposeOption<
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | LegendComponentOption
+  | PieSeriesOption
+  | BarSeriesOption
+>;
+
 /**图DOM节点实例对象 */
 const alarmTypeBar = ref<HTMLElement | undefined>(undefined);
 
 /**图实例对象 */
 const alarmTypeBarChart = ref<any>(null);
 
-// 将现有数据补全为期望的格式
+/**告警类型数据 */
-function completeData(existingData: any, expectedData: any) {
+const alarmTypeType = ref<any>([
-  const result = expectedData.map((item: any) => {
+  {
-    const found = existingData.find(
+    value: 0,
-      (existingItem: any) => existingItem.name === item.name
+    name: t('views.index.Critical'),
-    );
+  },
-    if (found) return found;
+  {
-    else {
+    value: 0,
-      return item;
+    name: t('views.index.Major'),
-    }
+  },
-  });
+  {
+    value: 0,
+    name: t('views.index.Minor'),
+  },
+  {
+    value: 0,
+    name: t('views.index.Warning'),
+  },
+  {
+    value: 0,
+    name: t('views.index.Event'),
+  },
+]);
 
-  return result;
+/**告警类型Top数据 */
-}
+const alarmTypeTypeTop = ref<any>([
-
-var wantArr = [
-  {
-    value: 0,
-    name: 'Critical',
-  },
-  {
-    value: 0,
-    name: 'Major',
-  },
-  {
-    value: 0,
-    name: 'Minor',
-  },
-  {
-    value: 0,
-    name: 'Warning',
-  },
-  {
-    value: 0,
-    name: 'Event',
-  },
-];
-
-//
-function initPicture() {
-  Promise.allSettled([origGet(), top3Sel()]).then(resArr => {
-    let barArr: any = [
   { name: 'AMF', value: 0 },
   { name: 'UDM', value: 0 },
   { name: 'SMF', value: 0 },
-    ];
+]);
-    let pieArr: any = [];
+
-    let testArr: any = [];
+//
+function initPicture() {
+  Promise.allSettled([origGet(), top3Sel()])
+    .then(resArr => {
       if (resArr[0].status === 'fulfilled') {
         const res0 = resArr[0].value;
-      if (res0.code === RESULT_CODE_SUCCESS) {
+        if (res0.code === RESULT_CODE_SUCCESS && Array.isArray(res0.data)) {
-        testArr = completeData(res0.data, wantArr);
+          for (const item of res0.data) {
-        testArr.map((item: any) => {
+            let index = 0;
-          item.name = t('views.index.' + item.name) + ': ' + item.value;
+            switch (item.name) {
-          pieArr.push(item);
+              case 'Critical':
-        });
+                index = 0;
+                break;
+              case 'Major':
+                index = 1;
+                break;
+              case 'Minor':
+                index = 2;
+                break;
+              case 'Warning':
+                index = 3;
+                break;
+              case 'Event':
+                index = 4;
+                break;
+            }
+            alarmTypeType.value[index].value = Number(item.value);
+          }
         }
       }
       if (resArr[1].status === 'fulfilled') {
         const res1 = resArr[1].value;
-      if (res1.code === RESULT_CODE_SUCCESS) {
+        if (res1.code === RESULT_CODE_SUCCESS && Array.isArray(res1.data)) {
-        res1.data.map((item: any) => {
+          alarmTypeTypeTop.value = alarmTypeTypeTop.value
-          barArr.push(item);
+            .concat(res1.data)
-        });
-      }
-    }
-
-    let firstThreeItems = barArr
             .sort((a: any, b: any) => {
               return b.value - a.value;
             })
             .slice(0, 3);
-    // pieArr.sort((a: any, b: any) => {
+        }
-    //   return b.value - a.value;
+      }
-    // });
+    })
-    const optionData: any = {
+    .then(() => {
+      const optionData: EChartsOption = {
         title: [
           {
-          text: '',
             show: false,
           },
           {
@@ -134,8 +136,7 @@ function initPicture() {
             textStyle: {
               color: '#fff',
               fontSize: '14',
-            fontFamily: 'PingFang',
+              fontWeight: 400,
-            fontWeight: '400',
             },
             top: '50%',
             left: '0%',
@@ -143,7 +144,16 @@ function initPicture() {
         ],
         tooltip: {
           trigger: 'item',
-        formatter: '{b}',
+          formatter: '{b} : {c}',
+        },
+        legend: {
+          orient: 'vertical',
+          right: '2%',
+          top: '10%',
+          data: alarmTypeType.value.map((item: any) => item.name), //label数组
+          textStyle: {
+            color: '#A7D6F4', // 设置图例文字颜色
+          },
         },
         grid: [
           {
@@ -153,33 +163,22 @@ function initPicture() {
             bottom: '10%',
           },
         ],
-      legend: {
-        orient: 'vertical',
-        right: '2%',
-        top: '10%',
-        data: pieArr.map((item: any) => item.name), //label数组
-        textStyle: {
-          color: '#A7D6F4', // 设置图例文字颜色
-        },
-      },
-      // 饼图设置
-      // color: ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'],
-      color: ['#f5222d', '#ffc069', '#fadb14', '#722ed1', '#1677ff'], //红橙黄紫蓝 为告警级别配色 以严重性依次往下！
-
         series: [
           //饼图:
           {
             type: 'pie',
             radius: '35%',
+            color: ['#f5222d', '#ffc069', '#fadb14', '#722ed1', '#1677ff'],
             label: {
-            show: false,
+              show: true,
+              position: 'inner',
+              formatter: ' {c}',
             },
             labelLine: {
               show: false,
             },
             center: ['35%', '25%'],
-          data: pieArr,
+            data: alarmTypeType.value,
-          lineStyle: 'none', // 设置线条样式为无，即可去掉线条
             zlevel: 2, // 设置zlevel为1，使得柱状图在下层显示
             itemStyle: {
               shadowBlur: 10,
@@ -199,7 +198,7 @@ function initPicture() {
               fontSize: 14,
               distance: 14, // label与柱子距离
               formatter: '{c}',
-          }, // 柱子上方的数值
+            },
             itemStyle: {
               borderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
               color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
@@ -208,7 +207,7 @@ function initPicture() {
                 { offset: 1, color: '#2f54eb' },
               ]), // 渐变
             },
-          data: firstThreeItems.map((item: any) => item.value),
+            data: alarmTypeTypeTop.value,
           },
         ],
         // 柱状图设置
@@ -235,7 +234,7 @@ function initPicture() {
               show: false,
             },
             inverse: true,
-          data: firstThreeItems.map((item: any) => item.name),
+            data: alarmTypeTypeTop.value.map((item: any) => item.name),
             axisLabel: {
               color: '#A7D6F4',
               fontSize: 14,
@@ -243,12 +242,13 @@ function initPicture() {
           },
         ],
       };
+
       fnDesign(alarmTypeBar.value, optionData);
     });
 }
+
 function fnDesign(container: HTMLElement | undefined, option: any) {
   if (!container) return;
-  const { clientHeight, clientWidth } = container;
 
   alarmTypeBarChart.value = markRaw(echarts.init(container, 'light'));
   option && alarmTypeBarChart.value.setOption(option);
@@ -268,6 +268,10 @@ onMounted(() => {
 });
 </script>
 
+<template>
+  <div ref="alarmTypeBar" class="chart-container"></div>
+</template>
+
 <style lang="less" scoped>
 .chart-container {
   /* 设置图表容器大小和位置 */