增加仪表盘累加及UPF下拉框

src/views/dashboard/overview/css/index.css

@@ -79,7 +79,7 @@
 .upfFlow .inner .chart {
   width: 100%;
   height: 100%;
-  margin-top: 1rem;
+  margin-top: 0rem;
 }
 
 /* 网络拓扑 */

src/views/dashboard/overview/hooks/useWS.ts

@@ -1,6 +1,6 @@
 import { RESULT_CODE_ERROR } from '@/constants/result-constants';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
-import { onBeforeUnmount, onMounted } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import {
   eventListParse,
   eventItemParseAndPush,
@@ -12,9 +12,15 @@ import {
   upfFlowParse,
   upfTotalFlowReset,
 } from './useUPFTotalFlow';
-import { topologyReset, neStateParse } from './useTopology';
+import { topologyReset, neStateParse, neStateRequestMap } from './useTopology';
 import PQueue from 'p-queue';
 
+/**UPF-的Id */
+export const upfWhoId = ref<any>('');
+
+/**UPF-的RmUid */
+export const upfWhoRmUid = ref<any>('');
+
 /**websocket连接 */
 export default function useWS() {
   const ws = new WS();
@@ -27,13 +33,12 @@ export default function useWS() {
 
   /**接收数据后回调 */
   function wsMessage(res: Record<string, any>) {
-    // console.log(res);
+    //console.log(res);
     const { code, requestId, data } = res;
     if (code === RESULT_CODE_ERROR) {
       console.warn(res.msg);
       return;
     }
-
     // 网元状态
     if (requestId && requestId.startsWith('neState')) {
       const neType = requestId.split('_')[1];
@@ -72,14 +77,13 @@ export default function useWS() {
         upfTFParse('30', data);
         break;
     }
-
     // 订阅组信息
     if (!data?.groupId) {
       return;
     }
     switch (data.groupId) {
       // kpiEvent 指标UPF
-      case '12_001':
+      case '12_' + upfWhoRmUid.value:
         if (data.data) {
           upfFlowParse(data.data);
         }
@@ -168,7 +172,17 @@ export default function useWS() {
     });
   }
 
-  onMounted(() => {
+  /**重新发送至UPF 12_rmUid */
+  function reSendUPF(rmUid: string) {
+    upfWhoRmUid.value = rmUid;
+    //初始时时无需还原全部属性以及关闭
+    if (ws.state() === WebSocket.OPEN) {
+      ws.close();
+      userActivityReset();
+      upfTotalFlowReset();
+      neStateRequestMap.value = new Map();
+      //topologyReset();
+    }
     const options: OptionsType = {
       url: '/ws',
       params: {
@@ -179,7 +193,7 @@ export default function useWS() {
          * MME_UE会话事件(GroupID:1011_neId)
          * IMS_CDR会话事件(GroupID:1005_neId)
          */
-        subGroupID: '12_001,1010,1011_001,1005_001',
+        subGroupID: '12_' + rmUid + ',1010,1011_001,1005_001',
       },
       onmessage: wsMessage,
       onerror: (ev: any) => {
@@ -187,18 +201,20 @@ export default function useWS() {
       },
     };
     ws.connect(options);
-  });
+  }
 
   onBeforeUnmount(() => {
     ws.close();
     userActivityReset();
     upfTotalFlowReset();
     topologyReset();
+    upfWhoRmUid.value = '';
   });
 
   return {
     wsSend,
     userActivitySend,
     upfTFSend,
+    reSendUPF,
   };
 }

src/views/dashboard/overview/index.vue

@@ -26,10 +26,15 @@ import useWS from './hooks/useWS';
 import useAppStore from '@/store/modules/app';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { useRouter } from 'vue-router';
+import useNeInfoStore from '@/store/modules/neinfo';
+import { message } from 'ant-design-vue';
+import { upfWhoId } from './hooks/useWS';
+
+const neInfoStore = useNeInfoStore();
 const router = useRouter();
 const appStore = useAppStore();
 const { t } = useI18n();
-const { wsSend, userActivitySend, upfTFSend } = useWS();
+const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS();
 
 /**概览状态类型 */
 type SkimStateType = {
@@ -60,6 +65,9 @@ let skimState: SkimStateType = reactive({
   enbUeNum: 0,
 });
 
+/**网元参数 */
+let neCascaderOptions = ref<Record<string, any>[]>([]);
+
 /**总览节点 */
 const viewportDom = ref<HTMLElement | null>(null);
 const { isFullscreen, toggle } = useFullscreen(viewportDom);
@@ -94,62 +102,126 @@ function fnGetNeState() {
 
 /**获取概览信息 */
 async function fnGetSkim() {
-  const resArr = await Promise.allSettled([
+  console.log(neCascaderOptions.value);
-    listUDMSub({
+  // const resArr = await Promise.allSettled([
-      neid: '001',
+  //   listUDMSub({
-      pageNum: 1,
+  //     neid: '001',
-      pageSize: 1,
+  //     pageNum: 1,
-    }),
+  //     pageSize: 1,
-    listUENumBySMF('001'),
+  //   }),
-    listUENumByIMS('001'),
+  //   listUENumBySMF('001'),
-    listBase5G({
+  //   listUENumByIMS('001'),
-      neType: 'AMF',
+  //   listBase5G({
-      neId: '001',
+  //     neType: 'AMF',
-    }),
+  //     neId: '001',
-    listBase5G({
+  //   }),
-      neType: 'MME',
+  //   listBase5G({
-      neId: '001',
+  //     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);
+        }
+      }
+    }]
   ]);
 
-  if (resArr[0].status === 'fulfilled') {
+  const requests = neCascaderOptions.value.flatMap((ne: any) =>
-    const res0 = resArr[0].value;
+    ne.children?.map((child: any) => {
-    if (res0.code === RESULT_CODE_SUCCESS) {
+      const handler = neHandlers.get(child.neType);
-      skimState.udmSubNum = res0.total;
+      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,
+    smfUeNum: 0,
+    imsUeNum: 0,
+    gnbNum: 0,
+    gnbUeNum: 0,
+    enbNum: 0,
+    enbUeNum: 0
+  });
+  results.forEach((result, index) => {
+    if (result.status === 'fulfilled') {
+      requests[index].process(result.value);
     }
-  }
+  });
-  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;
-      });
-    }
-  }
 }
 
 /**初始数据函数 */
@@ -188,10 +260,85 @@ function fnToRouter(name: string, query?: any) {
   router.push({ name, query });
 }
 
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**UPF网元Id */
+let queryParams = reactive({
+  /**45G类型 */
+  neRealId: '',
+});
+
+// UPF实时流量下拉框选择
+function fnSelectNe(value: any, option: any) {
+  queryParams.neRealId = value;
+  upfWhoId.value = value;
+  reSendUPF(option.rmUid);
+  // upfTotalFlow.value.map((item: any) => {
+  //   item.requestFlag = false;
+  // });
+
+  for (var key in upfTotalFlow.value) {
+    upfTotalFlow.value[key].requestFlag = false;
+  }
+  loadData();
+}
+
+// 定义一个方法返回 views 容器
+const getPopupContainer = () => {
+  // 使用 ref 或其他方式来引用你的 views 容器
+  // 如果 views 容器直接在这个组件内部，你可以使用 ref
+  // 但在这个例子中，我们假设它是通过类名来获取的
+  return document.querySelector('.viewport');
+};
+
 onMounted(() => {
-  fnGetSkim().then(() => {
+
-    loadData();
+  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,
+          });
+          return;
+        }
+      }
+    } else {
+      message.warning({
+        content: t('common.noData'),
+        duration: 2,
+      });
+    }
+  })
+    .finally(() => {
+      fnGetSkim().then(() => {
+        loadData();
+      })
+    })
+
 });
 
 onBeforeUnmount(() => {
@@ -205,11 +352,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="viewport" ref="viewportDom">
     <div class="brand">
-      <div
+      <div class="brand-title" @click="toggle" :title="t('views.dashboard.overview.fullscreen')">
-        class="brand-title"
-        @click="toggle"
-        :title="t('views.dashboard.overview.fullscreen')"
-      >
         {{ t('views.dashboard.overview.title') }}
         <FullscreenExitOutlined v-if="isFullscreen" />
         <FullscreenOutlined v-else />
@@ -226,27 +369,17 @@ onBeforeUnmount(() => {
             {{ t('views.dashboard.overview.skim.userTitle') }}
           </h3>
           <div class="data">
-            <div
+            <div class="item toRouter" @click="fnToRouter('Sub_2010')" :title="t('views.dashboard.overview.toRouter')">
-              class="item toRouter"
-              @click="fnToRouter('Sub_2010')"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
               <div>
-                <UserOutlined
+                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
                 {{ skimState.udmSubNum }}
               </div>
               <span>
                 {{ t('views.dashboard.overview.skim.users') }}
               </span>
             </div>
-            <div
+            <div class="item toRouter" @click="fnToRouter('Ims_2080')" :title="t('views.dashboard.overview.toRouter')"
-              class="item toRouter"
+              style="margin: 0 12px">
-              @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 }}
@@ -255,11 +388,7 @@ onBeforeUnmount(() => {
                 {{ t('views.dashboard.overview.skim.imsUeNum') }}
               </span>
             </div>
-            <div
+            <div class="item toRouter" @click="fnToRouter('Ue_2081')" :title="t('views.dashboard.overview.toRouter')">
-              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 }}
@@ -278,29 +407,18 @@ onBeforeUnmount(() => {
             {{ t('views.dashboard.overview.skim.baseTitle') }}
           </h3>
           <div class="data">
-            <div
+            <div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
-              class="item toRouter"
+              :title="t('views.dashboard.overview.toRouter')">
-              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
               <div style="align-items: flex-start">
-                <img
+                <img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
-                  :src="svgBase"
-                  style="width: 18px; margin-right: 8px; height: 2rem"
-                />
                 {{ skimState.gnbNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
             </div>
-            <div
+            <div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
-              class="item toRouter"
+              :title="t('views.dashboard.overview.toRouter')">
-              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
               <div style="align-items: flex-start">
-                <UserOutlined
+                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
                 {{ skimState.gnbUeNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
@@ -315,29 +433,18 @@ onBeforeUnmount(() => {
             {{ t('views.dashboard.overview.skim.baseTitle') }}
           </h3>
           <div class="data">
-            <div
+            <div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
-              class="item toRouter"
+              :title="t('views.dashboard.overview.toRouter')">
-              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
               <div style="align-items: flex-start">
-                <img
+                <img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
-                  :src="svgBase"
-                  style="width: 18px; margin-right: 8px; height: 2rem"
-                />
                 {{ skimState.enbNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
             </div>
-            <div
+            <div class="item toRouter" @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
-              class="item toRouter"
+              :title="t('views.dashboard.overview.toRouter')">
-              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
-              :title="t('views.dashboard.overview.toRouter')"
-            >
               <div style="align-items: flex-start">
-                <UserOutlined
+                <UserOutlined style="color: #4096ff; margin-right: 8px; font-size: 1.1rem" />
-                  style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
-                />
                 {{ skimState.enbUeNum }}
               </div>
               <span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
@@ -365,12 +472,23 @@ onBeforeUnmount(() => {
         <div class="inner">
           <h3
             class="toRouter"
-            @click="fnToRouter('GoldTarget_2104')"
             :title="t('views.dashboard.overview.toRouter')"
+            style="display: flex; align-items: center"
           >
             <AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
-            {{ t('views.dashboard.overview.upfFlow.title') }}
+            <span @click="fnToRouter('GoldTarget_2104')">{{
+              t('views.dashboard.overview.upfFlow.title')
+            }}</span>
+            <a-select
+              v-model:value="queryParams.neRealId"
+              :options="neOtions"
+              :get-Popup-Container="getPopupContainer"
+              class="toDeep"
+              style="width: 100px; color: #fff; margin-left: auto"
+              @change="fnSelectNe"
+            />
           </h3>
+
           <div class="chart">
             <UPFFlow />
           </div>
@@ -379,11 +497,8 @@ onBeforeUnmount(() => {
       <!-- 网络拓扑 -->
       <div class="topology panel">
         <div class="inner">
-          <h3
+          <h3 class="toRouter" @click="fnToRouter('TopologyArchitecture_2128')"
-            class="toRouter"
+            :title="t('views.dashboard.overview.toRouter')">
-            @click="fnToRouter('TopologyArchitecture_2128')"
-            :title="t('views.dashboard.overview.toRouter')"
-          >
             <span>
               <ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
               {{ t('views.dashboard.overview.topology.title') }}
@@ -413,17 +528,10 @@ onBeforeUnmount(() => {
 
             <!-- 筛选 -->
             <div class="filter">
-              <span
+              <span :data-key="v" :class="{ active: upfTFActive === v }" v-for="v in ['0', '7', '30']" :key="v" @click="() => {
-                :data-key="v"
+                upfTFActive = v;
-                :class="{ active: upfTFActive === v }"
+              }
-                v-for="v in ['0', '7', '30']"
+                ">
-                :key="v"
-                @click="
-                  () => {
-                    upfTFActive = v;
-                  }
-                "
-              >
                 {{
                   v === '0'
                     ? '24' + t('common.units.hour')
@@ -456,11 +564,7 @@ onBeforeUnmount(() => {
       <!-- 告警统计 -->
       <div class="alarmType panel">
         <div class="inner">
-          <h3
+          <h3 class="toRouter" @click="fnToRouter('HistoryAlarm_2097')" :title="t('views.dashboard.overview.toRouter')">
-            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>
@@ -488,4 +592,20 @@ onBeforeUnmount(() => {
 
 <style lang="less" scoped>
 @import url('./css/index.css');
+.toDeep {
+  --editor-background-color: blue;
+}
+
+.toDeep :deep(.ant-select-selector) {
+  background-color: #101129;
+  border: none;
+}
+
+.toDeep :deep(.ant-select-arrow) {
+  color: #fff;
+}
+
+.toDeep :deep(.ant-select-selection-item) {
+  color: #fff;
+}
 </style>