改动监控页的ws文件

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,
@@ -15,6 +15,12 @@ import {
 import { topologyReset, neStateParse } from './useTopology';
 import PQueue from 'p-queue';
 
+/**UPF-的Id */
+export const upfWhoId = ref<any>('001');
+
+/**UPF-的RmUid */
+export const upfWhoRmUid = ref<any>('');
+
 /**websocket连接 */
 export default function useWS() {
   const ws = new WS();
@@ -33,13 +39,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];
@@ -92,9 +97,10 @@ export default function useWS() {
     if (!data?.groupId) {
       return;
     }
+
     switch (data.groupId) {
       // kpiEvent 指标UPF
-      case '12':
+      case '12_' + upfWhoRmUid.value:
         if (data.data) {
           upfFlowParse(data.data);
         }
@@ -135,13 +141,12 @@ export default function useWS() {
       return;
     }
     upfTotalFlow.value[index].requestFlag = true;
-
     ws.send({
       requestId: `1030_${day}`,
       type: 'upf_tf',
       data: {
         neType: 'UPF',
-        neId: '001',
+        neId: upfWhoId.value,
         day: day,
       },
     });
@@ -191,6 +196,31 @@ export default function useWS() {
     });
   }
 
+  /**重新发送至UPF 12_rmUid */
+  function reSendUPF(rmUid: string) {
+    upfWhoRmUid.value = rmUid;
+    ws.close();
+    const options: OptionsType = {
+      url: '/ws',
+      params: {
+        /**订阅通道组
+         *
+         * 指标UPF (GroupID:12)
+         * AMF_UE会话事件(GroupID:1010)
+         * MME_UE会话事件(GroupID:1011)
+         * IMS_CDR会话事件(GroupID:1005)
+         */
+        subGroupID: '12_' + rmUid + ',1010,1005',
+      },
+      onmessage: wsMessage,
+      onerror: wsError,
+    };
+    setTimeout(() => {
+      // 在这里进行重新连接WebSocket的操作
+      ws.connect(options);
+    }, 1000); //延迟1秒
+  }
+
   onMounted(() => {
     const options: OptionsType = {
       url: '/ws',
@@ -202,7 +232,7 @@ export default function useWS() {
          * MME_UE会话事件(GroupID:1011)
          * IMS_CDR会话事件(GroupID:1005)
          */
-        subGroupID: '12,1010,1011,1005',
+        subGroupID: '12_' + upfWhoRmUid.value + ',1010,1005',
       },
       onmessage: wsMessage,
       onerror: wsError,
@@ -221,5 +251,6 @@ export default function useWS() {
     wsSend,
     userActivitySend,
     upfTFSend,
+    reSendUPF,
   };
 }

src/views/dashboard/overview/index.vue

@@ -21,6 +21,8 @@ import {
   neStateRequestMap,
 } from './hooks/useTopology';
 import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow';
+import { upfWhoId, upfWhoRmUid } from './hooks/useWS';
+
 import { useFullscreen } from '@vueuse/core';
 import useWS from './hooks/useWS';
 import useAppStore from '@/store/modules/app';
@@ -32,12 +34,12 @@ import useNeInfoStore from '@/store/modules/neinfo';
 const router = useRouter();
 const appStore = useAppStore();
 const { t } = useI18n();
-const { wsSend, userActivitySend, upfTFSend } = useWS();
+const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS();
 
 /**网元参数 */
 let neOtions = ref<Record<string, any>[]>([]);
 
-/**网元Id */
+/**UPF网元Id */
 let neRealId = ref<any>;
 
 /**概览状态类型 */
@@ -193,6 +195,16 @@ function fnToRouter(name: string, query?: any) {
   router.push({ name, query });
 }
 
+// UPF实时流量下拉框选择
+function fnSelectNe(value: any, option: any) {
+  neRealId = value;
+  upfWhoId.value = value;
+  reSendUPF(option.rmUid);
+  upfTotalFlow.value.map((item: any) => {
+    item.requestFlag = false;
+  });
+}
+
 onMounted(() => {
   fnGetSkim().then(() => {
     loadData();
@@ -206,12 +218,14 @@ onMounted(() => {
           let arr: Record<string, any>[] = [];
           res.data.forEach(i => {
             if (i.neType === 'UPF') {
-              arr.push({ value: i.neId, label: i.neName });
+              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) {
             neRealId = arr[0].value;
+            reSendUPF(arr[0].rmUid);
           }
         }
       } else {
@@ -243,7 +257,9 @@ onBeforeUnmount(() => {
         <FullscreenExitOutlined v-if="isFullscreen" />
         <FullscreenOutlined v-else />
       </div>
-      <div class="brand-desc">{{ appStore.appName }}</div>
+      <div class="brand-desc">
+        {{ appStore.appName }}
+      </div>
     </div>
 
     <div class="column">
@@ -399,7 +415,8 @@ onBeforeUnmount(() => {
                 v-model:value="neRealId"
                 :options="neOtions"
                 class="toDeep"
-                style="width: 100px; color: #fff;"
+                style="width: 100px; color: #fff"
+                @change="fnSelectNe"
               />
             </div>
           </h3>
@@ -519,8 +536,6 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-
-
 <style lang="less" scoped>
 @import url('./css/index.css');
 .toDeep {
@@ -531,11 +546,11 @@ onBeforeUnmount(() => {
   background-color: #101129;
 }
 
-.toDeep :deep(.ant-select-arrow){
+.toDeep :deep(.ant-select-arrow) {
   color: #fff;
 }
 
-.toDeep :deep(.ant-select-selector){
-  border:none;
+.toDeep :deep(.ant-select-selector) {
+  border: none;
 }
 </style>

src/views/index/tenantUPF.vue

@@ -22,9 +22,10 @@ import {
   upfFlowParse,
 } from '../dashboard/overview/hooks/useUPFTotalFlow';
 
-import { parseSizeFromKbs } from '@/utils/parse-utils';
-import { onBeforeMount } from 'vue';
-import { onBeforeUnmount } from 'vue';
+import { upfWhoRmUid } from '../dashboard/overview/hooks/useWS';
+import useWS from '../dashboard/overview/hooks/useWS';
+const { reSendUPF } = useWS();
+
 const { t } = useI18n();
 
 echarts.use([
@@ -219,6 +220,9 @@ function fnGetInitData() {
   })
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          reSendUPF(res.data[0].rmUID);
+        }
         for (const item of res.data) {
           upfFlowParse(item);
         }

src/views/system/tenant/index.vue

@@ -12,7 +12,6 @@ import {
   delDept,
   addDept,
   updateDept,
-  listDeptExcludeChild,
 } from '@/api/system/tenant';
 import useDictStore from '@/store/modules/dict';
 import { parseDateToStr } from '@/utils/date-utils';