feat: 同步标准版的看板页面

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

@@ -83,7 +83,7 @@ export default function useWS() {
     }
     switch (data.groupId) {
       // kpiEvent 指标UPF
-      case '12_' + upfWhoId.value:
+      case '12_' + upfWhoRmUid.value:
         if (data.data) {
           upfFlowParse(data.data);
         }
@@ -172,9 +172,9 @@ export default function useWS() {
     });
   }
 
-  /**重新发送至UPF 12_neId */
+  /**重新发送至UPF 12_rmUid */
-  function reSendUPF(neId: string) {
+  function reSendUPF(rmUid: string) {
-    upfWhoId.value = neId;
+    upfWhoRmUid.value = rmUid;
     //初始时时无需还原全部属性以及关闭
     if (ws.state() === WebSocket.OPEN) {
       ws.close();
@@ -193,7 +193,7 @@ export default function useWS() {
          * MME_UE会话事件(GroupID:1011_neId)
          * IMS_CDR会话事件(GroupID:1005_neId)
          */
-        subGroupID: '12_' + neId + ',1010,1011_001,1005_001',
+        subGroupID: '12_' + rmUid + ',1010,1011_001,1005_001',
       },
       onmessage: wsMessage,
       onerror: (ev: any) => {
@@ -208,7 +208,7 @@ export default function useWS() {
     userActivityReset();
     upfTotalFlowReset();
     topologyReset();
-    upfWhoId.value = '';
+    upfWhoRmUid.value = '';
   });
 
   return {

src/views/dashboard/overview/index.vue

@@ -29,20 +29,13 @@ 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, reSendUPF } = useWS();
 
-/**网元参数 */
-let neOtions = ref<Record<string, any>[]>([]);
-
-/**UPF网元Id */
-let queryParams = reactive({
-  /**45G类型 */
-  neRealId: '',
-});
-
 /**概览状态类型 */
 type SkimStateType = {
   /**UDM签约用户数量 */
@@ -238,11 +231,20 @@ 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(value);
+  reSendUPF(option.rmUid);
   // upfTotalFlow.value.map((item: any) => {
   //   item.requestFlag = false;
   // });
@@ -262,11 +264,7 @@ const getPopupContainer = () => {
 };
 
 onMounted(() => {
-  fnGetSkim().then(() => {
+  neInfoStore
-    // loadData();
-  });
-  // 获取网元网元列表
-  useNeInfoStore()
     .fnNelist()
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
@@ -277,12 +275,26 @@ onMounted(() => {
               arr.push({ value: i.neId, label: i.neName, rmUid: i.rmUid });
             }
           });
-          //arr.push({ value: '002', label: 'UPF_002', rmUid: '4400HXUPF002' });
+
           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({
@@ -290,6 +302,11 @@ onMounted(() => {
           duration: 2,
         });
       }
+    })
+    .finally(() => {
+      fnGetSkim().then(() => {
+        // loadData();
+      });
     });
 });
 
@@ -313,9 +330,7 @@ onBeforeUnmount(() => {
         <FullscreenExitOutlined v-if="isFullscreen" />
         <FullscreenOutlined v-else />
       </div>
-      <div class="brand-desc">
+      <div class="brand-desc">{{ appStore.appName }}</div>
-        {{ appStore.appName }}
-      </div>
     </div>
 
     <div class="column">