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 { CanvasRenderer } from 'echarts/renderers';
+import {
+  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,231 +29,226 @@ 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 result = expectedData.map((item: any) => {
-    const found = existingData.find(
-      (existingItem: any) => existingItem.name === item.name
-    );
-    if (found) return found;
-    else {
-      return item;
-    }
-  });
+/**告警类型数据 */
+const alarmTypeType = ref<any>([
+  {
+    value: 0,
+    name: t('views.index.Critical'),
+  },
+  {
+    value: 0,
+    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;
-}
-
-var wantArr = [
-  {
-    value: 0,
-    name: 'Critical',
-  },
-  {
-    value: 0,
-    name: 'Major',
-  },
-  {
-    value: 0,
-    name: 'Minor',
-  },
-  {
-    value: 0,
-    name: 'Warning',
-  },
-  {
-    value: 0,
-    name: 'Event',
-  },
-];
+/**告警类型Top数据 */
+const alarmTypeTypeTop = ref<any>([
+  { name: 'AMF', value: 0 },
+  { name: 'UDM', value: 0 },
+  { name: 'SMF', value: 0 },
+]);
 
 //
 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 = [];
-    if (resArr[0].status === 'fulfilled') {
-      const res0 = resArr[0].value;
-      if (res0.code === RESULT_CODE_SUCCESS) {
-        testArr = completeData(res0.data, wantArr);
-        testArr.map((item: any) => {
-          item.name = t('views.index.' + item.name) + ': ' + item.value;
-          pieArr.push(item);
-        });
+  Promise.allSettled([origGet(), top3Sel()])
+    .then(resArr => {
+      if (resArr[0].status === 'fulfilled') {
+        const res0 = resArr[0].value;
+        if (res0.code === RESULT_CODE_SUCCESS && Array.isArray(res0.data)) {
+          for (const item of res0.data) {
+            let index = 0;
+            switch (item.name) {
+              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) {
-        res1.data.map((item: any) => {
-          barArr.push(item);
-        });
+      if (resArr[1].status === 'fulfilled') {
+        const res1 = resArr[1].value;
+        if (res1.code === RESULT_CODE_SUCCESS && Array.isArray(res1.data)) {
+          alarmTypeTypeTop.value = alarmTypeTypeTop.value
+            .concat(res1.data)
+            .sort((a: any, b: any) => {
+              return b.value - a.value;
+            })
+            .slice(0, 3);
+        }
       }
-    }
-
-    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 = {
-      title: [
-        {
-          text: '',
-          show: false,
+    })
+    .then(() => {
+      const optionData: EChartsOption = {
+        title: [
+          {
+            show: false,
+          },
+          {
+            text: t('views.dashboard.overview.alarmTypeBar.topTitle'),
+            textStyle: {
+              color: '#fff',
+              fontSize: '14',
+              fontWeight: 400,
+            },
+            top: '50%',
+            left: '0%',
+          },
+        ],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c}',
         },
-        {
-          text: t('views.dashboard.overview.alarmTypeBar.topTitle'),
+        legend: {
+          orient: 'vertical',
+          right: '2%',
+          top: '10%',
+          data: alarmTypeType.value.map((item: any) => item.name), //label数组
           textStyle: {
-            color: '#fff',
-            fontSize: '14',
-            fontFamily: 'PingFang',
-            fontWeight: '400',
+            color: '#A7D6F4', // 设置图例文字颜色
           },
-          top: '50%',
-          left: '0%',
         },
-      ],
-      tooltip: {
-        trigger: 'item',
-        formatter: '{b}',
-      },
-      grid: [
-        {
-          top: '60%',
-          left: '15%',
-          right: '25%',
-          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'], //红橙黄紫蓝 为告警级别配色 以严重性依次往下！
+        grid: [
+          {
+            top: '60%',
+            left: '15%',
+            right: '25%',
+            bottom: '10%',
+          },
+        ],
+        series: [
+          //饼图:
+          {
+            type: 'pie',
+            radius: '35%',
+            color: ['#f5222d', '#ffc069', '#fadb14', '#722ed1', '#1677ff'],
+            label: {
+              show: true,
+              position: 'inner',
+              formatter: ' {c}',
+            },
+            labelLine: {
+              show: false,
+            },
+            center: ['35%', '25%'],
+            data: alarmTypeType.value,
+            zlevel: 2, // 设置zlevel为1，使得柱状图在下层显示
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+          //柱状
+          {
+            type: 'bar',
+            barWidth: 12, // 柱子宽度
+            barCategoryGap: '30%', // 控制同一系列的柱间距离
+            label: {
+              show: true,
+              position: 'right', // 位置
+              color: '#A7D6F4', //淡蓝色
+              fontSize: 14,
+              distance: 14, // label与柱子距离
+              formatter: '{c}',
+            },
+            itemStyle: {
+              borderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: '#f0f5ff' },
+                { offset: 0.5, color: '#adc6ff' },
+                { offset: 1, color: '#2f54eb' },
+              ]), // 渐变
+            },
+            data: alarmTypeTypeTop.value,
+          },
+        ],
+        // 柱状图设置
+        xAxis: [
+          {
+            splitLine: {
+              show: false,
+            },
+            type: 'value',
+            show: false,
+          },
+        ],
+        yAxis: [
+          {
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              //y轴
+              show: false,
+            },
+            type: 'category',
+            axisTick: {
+              show: false,
+            },
+            inverse: true,
+            data: alarmTypeTypeTop.value.map((item: any) => item.name),
+            axisLabel: {
+              color: '#A7D6F4',
+              fontSize: 14,
+            },
+          },
+        ],
+      };
 
-      series: [
-        //饼图:
-        {
-          type: 'pie',
-          radius: '35%',
-          label: {
-            show: false,
-          },
-          labelLine: {
-            show: false,
-          },
-          center: ['35%', '25%'],
-          data: pieArr,
-          lineStyle: 'none', // 设置线条样式为无，即可去掉线条
-          zlevel: 2, // 设置zlevel为1，使得柱状图在下层显示
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)',
-          },
-        },
-        //柱状
-        {
-          type: 'bar',
-          barWidth: 12, // 柱子宽度
-          barCategoryGap: '30%', // 控制同一系列的柱间距离
-          label: {
-            show: true,
-            position: 'right', // 位置
-            color: '#A7D6F4', //淡蓝色
-            fontSize: 14,
-            distance: 14, // label与柱子距离
-            formatter: '{c}',
-          }, // 柱子上方的数值
-          itemStyle: {
-            borderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
-            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-              { offset: 0, color: '#f0f5ff' },
-              { offset: 0.5, color: '#adc6ff' },
-              { offset: 1, color: '#2f54eb' },
-            ]), // 渐变
-          },
-          data: firstThreeItems.map((item: any) => item.value),
-        },
-      ],
-      // 柱状图设置
-      xAxis: [
-        {
-          splitLine: {
-            show: false,
-          },
-          type: 'value',
-          show: false,
-        },
-      ],
-      yAxis: [
-        {
-          splitLine: {
-            show: false,
-          },
-          axisLine: {
-            //y轴
-            show: false,
-          },
-          type: 'category',
-          axisTick: {
-            show: false,
-          },
-          inverse: true,
-          data: firstThreeItems.map((item: any) => item.name),
-          axisLabel: {
-            color: '#A7D6F4',
-            fontSize: 14,
-          },
-        },
-      ],
-    };
-    fnDesign(alarmTypeBar.value, optionData);
-  });
+      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 {
   /* 设置图表容器大小和位置 */