From b7da97681913db13ee8819735247d04ed17b7f30 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Mon, 23 Dec 2024 20:05:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=9C=8B=E6=9D=BFUDM=E7=AD=BE=E7=BA=A6?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=8E=B7=E5=8F=96x2=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/overview/index.vue | 351 +++++++++++++------------
 1 file changed, 187 insertions(+), 164 deletions(-)

diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue
index e9fde2ac..46b5ce37 100644
--- a/src/views/dashboard/overview/index.vue
+++ b/src/views/dashboard/overview/index.vue
@@ -102,111 +102,82 @@ function fnGetNeState() {
 
 /**获取概览信息 */
 async function fnGetSkim() {
-  // console.log(neCascaderOptions.value);
-  // const resArr = await Promise.allSettled([
-  //   listUDMSub({
-  //     neid: '001',
-  //     pageNum: 1,
-  //     pageSize: 1,
-  //   }),
-  //   listUENumBySMF('001'),
-  //   listUENumByIMS('001'),
-  //   listBase5G({
-  //     neType: 'AMF',
-  //     neId: '001',
-  //   }),
-  //   listBase5G({
-  //     neType: 'MME',
-  //     neId: '001',
-  //   }),
-  // ]);
-
-  // if (resArr[0].status === 'fulfilled') {
-  //   const res0 = resArr[0].value;
-  //   if (res0.code === RESULT_CODE_SUCCESS) {
-  //     skimState.udmSubNum = res0.total;
-  //   }
-  // }
-  // if (resArr[1].status === 'fulfilled') {
-  //   const res1 = resArr[1].value;
-  //   if (res1.code === RESULT_CODE_SUCCESS) {
-  //     skimState.smfUeNum = res1.data;
-  //   }
-  // }
-  // if (resArr[2].status === 'fulfilled') {
-  //   const res2 = resArr[2].value;
-  //   if (res2.code === RESULT_CODE_SUCCESS) {
-  //     skimState.imsUeNum = res2.data;
-  //   }
-  // }
-  // if (resArr[3].status === 'fulfilled') {
-  //   const res3 = resArr[3].value;
-  //   if (res3.code === RESULT_CODE_SUCCESS) {
-  //     skimState.gnbNum = res3.total;
-  //     skimState.gnbUeNum = 0;
-  //     res3.rows.map((item: any) => {
-  //       skimState.gnbUeNum += item.ueNum;
-  //     });
-  //   }
-  // }
-  // if (resArr[4].status === 'fulfilled') {
-  //   const res4 = resArr[4].value;
-  //   if (res4.code === RESULT_CODE_SUCCESS) {
-  //     skimState.enbNum = res4.total;
-  //     skimState.enbUeNum = 0;
-  //     res4.rows.map((item: any) => {
-  //       skimState.enbUeNum += item.ueNum;
-  //     });
-  //   }
-  // }
-
-
   const neHandlers = new Map([
-    ['UDM', {
-      request: (neId: string) => listUDMSub({ neid: neId, pageNum: 1, pageSize: 1 }),
-      process: (res: any) => res.code === RESULT_CODE_SUCCESS && (skimState.udmSubNum += res.total)
-    }],
-    ['SMF', {
-      request: (neId: string) => listUENumBySMF(neId),
-      process: (res: any) => res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data)
-    }],
-    ['IMS', {
-      request: (neId: string) => listUENumByIMS(neId),
-      process: (res: any) => res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data)
-    }],
-    ['AMF', {
-      request: (neId: string) => listBase5G({ neType: 'AMF', neId }),
-      process: (res: any) => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          skimState.gnbNum += res.total;
-          skimState.gnbUeNum += res.rows.reduce((sum: number, item: any) => sum + item.ueNum, 0);
-        }
-      }
-    }],
-    ['MME', {
-      request: (neId: string) => listBase5G({ neType: 'MME', neId }),
-      process: (res: any) => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          skimState.enbNum += res.total;
-          skimState.enbUeNum += res.rows.reduce((sum: number, item: any) => sum + item.ueNum, 0);
-        }
-      }
-    }]
+    [
+      'UDM',
+      {
+        request: (neId: string) =>
+          listUDMSub({ neId: neId, pageNum: 1, pageSize: 1 }),
+        process: (res: any) =>
+          res.code === RESULT_CODE_SUCCESS &&
+          (skimState.udmSubNum += res.total),
+      },
+    ],
+    [
+      'SMF',
+      {
+        request: (neId: string) => listUENumBySMF(neId),
+        process: (res: any) =>
+          res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data),
+      },
+    ],
+    [
+      'IMS',
+      {
+        request: (neId: string) => listUENumByIMS(neId),
+        process: (res: any) =>
+          res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data),
+      },
+    ],
+    [
+      'AMF',
+      {
+        request: (neId: string) => listBase5G({ neType: 'AMF', neId }),
+        process: (res: any) => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            skimState.gnbNum += res.total;
+            skimState.gnbUeNum += res.rows.reduce(
+              (sum: number, item: any) => sum + item.ueNum,
+              0
+            );
+          }
+        },
+      },
+    ],
+    [
+      'MME',
+      {
+        request: (neId: string) => listBase5G({ neType: 'MME', neId }),
+        process: (res: any) => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            skimState.enbNum += res.total;
+            skimState.enbUeNum += res.rows.reduce(
+              (sum: number, item: any) => sum + item.ueNum,
+              0
+            );
+          }
+        },
+      },
+    ],
   ]);
 
-  const requests = neCascaderOptions.value.flatMap((ne: any) =>
-    ne.children?.map((child: any) => {
-      const handler = neHandlers.get(child.neType);
-      return handler ? {
-        promise: handler.request(child.neId),
-        process: handler.process
-      } : null;
-    }).filter(Boolean) || []
+  const requests = neCascaderOptions.value.flatMap(
+    (ne: any) =>
+      ne.children
+        ?.map((child: any) => {
+          const handler = neHandlers.get(child.neType);
+          return handler
+            ? {
+                promise: handler.request(child.neId),
+                process: handler.process,
+              }
+            : null;
+        })
+        .filter(Boolean) || []
   );
 
   const results = await Promise.allSettled(requests.map(r => r.promise));
 
-
   // 重置
   Object.assign(skimState, {
     udmSubNum: 0,
@@ -215,7 +186,7 @@ async function fnGetSkim() {
     gnbNum: 0,
     gnbUeNum: 0,
     enbNum: 0,
-    enbUeNum: 0
+    enbUeNum: 0,
   });
   results.forEach((result, index) => {
     if (result.status === 'fulfilled') {
@@ -293,52 +264,50 @@ const getPopupContainer = () => {
 };
 
 onMounted(() => {
-
-  neInfoStore.fnNelist().then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      if (res.data.length > 0) {
-        let arr: Record<string, any>[] = [];
-        res.data.forEach(i => {
-          if (i.neType === 'UPF') {
-            arr.push({ value: i.neId, label: i.neName, rmUid: i.rmUid });
-          }
-        });
-
-        neOtions.value = arr;
-        if (arr.length > 0) {
-          //queryParams.neRealId = arr[0].value;
-          fnSelectNe(arr[0].value, arr[0]);
-        }
-
-        // 过滤不可用的网元
-        neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
-          (item: any) => {
-            return ['UDM', 'SMF', 'IMS', 'AMF', 'MME'].includes(
-              item.value
-            );
-          }
-        );
-        if (neCascaderOptions.value.length === 0) {
-          message.warning({
-            content: t('common.noData'),
-            duration: 2,
+  neInfoStore
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          let arr: Record<string, any>[] = [];
+          res.data.forEach(i => {
+            if (i.neType === 'UPF') {
+              arr.push({ value: i.neId, label: i.neName, rmUid: i.rmUid });
+            }
           });
-          return;
+
+          neOtions.value = arr;
+          if (arr.length > 0) {
+            //queryParams.neRealId = arr[0].value;
+            fnSelectNe(arr[0].value, arr[0]);
+          }
+
+          // 过滤不可用的网元
+          neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
+            (item: any) => {
+              return ['UDM', 'SMF', 'IMS', 'AMF', 'MME'].includes(item.value);
+            }
+          );
+          if (neCascaderOptions.value.length === 0) {
+            message.warning({
+              content: t('common.noData'),
+              duration: 2,
+            });
+            return;
+          }
         }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
       }
-    } else {
-      message.warning({
-        content: t('common.noData'),
-        duration: 2,
-      });
-    }
-  })
+    })
     .finally(() => {
       fnGetSkim().then(() => {
         loadData();
-      })
-    })
-
+      });
+    });
 });
 
 onBeforeUnmount(() => {
@@ -352,7 +321,11 @@ onBeforeUnmount(() => {
 <template>
   <div class="viewport" ref="viewportDom">
     <div class="brand">
-      <div class="brand-title" @click="toggle" :title="t('views.dashboard.overview.fullscreen')">
+      <div
+        class="brand-title"
+        @click="toggle"
+        :title="t('views.dashboard.overview.fullscreen')"
+      >
         {{ t('views.dashboard.overview.title') }}
         <FullscreenExitOutlined v-if="isFullscreen" />
         <FullscreenOutlined v-else />
@@ -369,17 +342,27 @@ onBeforeUnmount(() => {
             {{ t('views.dashboard.overview.skim.userTitle') }}
           </h3>
           <div class="data">
-            <div class="item toRouter" @click="fnToRouter('Sub_2010')" :title="t('views.dashboard.overview.toRouter')">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Sub_2010')"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
               <div>
-                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
                 {{ skimState.udmSubNum }}
               </div>
               <span>
                 {{ t('views.dashboard.overview.skim.users') }}
               </span>
             </div>
-            <div class="item toRouter" @click="fnToRouter('Ims_2080')" :title="t('views.dashboard.overview.toRouter')"
-              style="margin: 0 12px">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Ims_2080')"
+              :title="t('views.dashboard.overview.toRouter')"
+              style="margin: 0 12px"
+            >
               <div>
                 <img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
                 {{ skimState.imsUeNum }}
@@ -388,7 +371,11 @@ onBeforeUnmount(() => {
                 {{ t('views.dashboard.overview.skim.imsUeNum') }}
               </span>
             </div>
-            <div class="item toRouter" @click="fnToRouter('Ue_2081')" :title="t('views.dashboard.overview.toRouter')">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Ue_2081')"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
               <div>
                 <img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
                 {{ skimState.smfUeNum }}
@@ -407,18 +394,29 @@ onBeforeUnmount(() => {
             {{ t('views.dashboard.overview.skim.baseTitle') }}
           </h3>
           <div class="data">
-            <div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
               <div style="align-items: flex-start">
-                <img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
+                <img
+                  :src="svgBase"
+                  style="width: 18px; margin-right: 8px; height: 2rem"
+                />
                 {{ skimState.gnbNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
             </div>
-            <div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
               <div style="align-items: flex-start">
-                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
                 {{ skimState.gnbUeNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
@@ -433,18 +431,29 @@ onBeforeUnmount(() => {
             {{ t('views.dashboard.overview.skim.baseTitle') }}
           </h3>
           <div class="data">
-            <div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
               <div style="align-items: flex-start">
-                <img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
+                <img
+                  :src="svgBase"
+                  style="width: 18px; margin-right: 8px; height: 2rem"
+                />
                 {{ skimState.enbNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
             </div>
-            <div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')">
+            <div
+              class="item toRouter"
+              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
+              :title="t('views.dashboard.overview.toRouter')"
+            >
               <div style="align-items: flex-start">
-                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
+                <UserOutlined
+                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
+                />
                 {{ skimState.enbUeNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
@@ -497,8 +506,11 @@ onBeforeUnmount(() => {
       <!-- 网络拓扑 -->
       <div class="topology panel">
         <div class="inner">
-          <h3 class="toRouter" @click="fnToRouter('TopologyArchitecture_2128')"
-            :title="t('views.dashboard.overview.toRouter')">
+          <h3
+            class="toRouter"
+            @click="fnToRouter('TopologyArchitecture_2128')"
+            :title="t('views.dashboard.overview.toRouter')"
+          >
             <span>
               <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
               {{ t('views.dashboard.overview.topology.title') }}
@@ -528,10 +540,17 @@ onBeforeUnmount(() => {
 
             <!-- 筛选 -->
             <div class="filter">
-              <span :data-key="v" :class="{ active: upfTFActive === v }" v-for="v in ['0', '7', '30']" :key="v" @click="() => {
-                upfTFActive = v;
-              }
-                ">
+              <span
+                :data-key="v"
+                :class="{ active: upfTFActive === v }"
+                v-for="v in ['0', '7', '30']"
+                :key="v"
+                @click="
+                  () => {
+                    upfTFActive = v;
+                  }
+                "
+              >
                 {{
                   v === '0'
                     ? '24' + t('common.units.hour')
@@ -564,7 +583,11 @@ onBeforeUnmount(() => {
       <!-- 告警统计 -->
       <div class="alarmType panel">
         <div class="inner">
-          <h3 class="toRouter" @click="fnToRouter('HistoryAlarm_2097')" :title="t('views.dashboard.overview.toRouter')">
+          <h3
+            class="toRouter"
+            @click="fnToRouter('HistoryAlarm_2097')"
+            :title="t('views.dashboard.overview.toRouter')"
+          >
             <PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
             {{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
           </h3>