From a76209b54e4db6c482d9fa9f0f5b465c453b6d45 Mon Sep 17 00:00:00 2001
From: lai <371757574@qq.com>
Date: Tue, 30 Jan 2024 18:58:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=A9=BA=E5=80=BC=E6=97=B6?=
 =?UTF-8?q?=E7=9A=84=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AlarnTypeBar/index.vue         | 66 ++++++++++++++++---
 1 file changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue b/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
index d9c4ab73..5afb81e6 100644
--- a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
+++ b/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
@@ -47,6 +47,44 @@ 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;
+    }
+  });
+
+  return result;
+}
+
+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 => {
@@ -56,20 +94,28 @@ function initPicture() {
       { name: 'SMF', value: 0 },
     ];
     let pieArr: any = [];
-
+    let testArr: any = [];
     if (resArr[0].status === 'fulfilled') {
-      resArr[0].value.data.map((item: any) => {
-        item.name = item.name + ':' + item.value;
+      testArr = completeData(resArr[0].value.data, wantArr);
+      testArr.map((item: any) => {
+        item.name = t('views.index.' + item.name) + ':' + item.value;
         pieArr.push(item);
       });
     }
+
     if (resArr[1].status === 'fulfilled') {
-      if (resArr[1].value.data.length) barArr = [];
       resArr[1].value.data.map((item: any) => {
         barArr.push(item);
       });
     }
-    console.log(pieArr);
+    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: [
         {
@@ -87,18 +133,20 @@ function initPicture() {
           left: '6%',
         },
       ],
-
+      tooltip: {
+        trigger: 'item',
+      },
       grid: [
         {
           top: '55%',
           left: '15%',
           right: '25%',
-          bottom:'3%',
+          bottom: '3%',
         },
       ],
       legend: {
         orient: 'vertical',
-        left: '75%',
+        left: '72%',
         top: '10%',
         data: pieArr.map((item: any) => item.name), //label数组
         textStyle: {
@@ -232,8 +280,6 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
   });
   // 监听元素大小变化
   observer.observe(container);
-
-
 }
 
 onMounted(() => {