仪表盘中ws的改动

src/views/dashboard/overview/components/UPFFlow/index.vue

@@ -151,7 +151,7 @@ function handleRanderChart() {
       top: '14%',
       left: '4%',
       right: '4%',
-      bottom: '12%',
+      bottom: '16%',
       containLabel: true,
     },
     xAxis: {

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

@@ -35,6 +35,7 @@ export default function useWS() {
   function wsError(ev: any) {
     // 接收数据后回调
     console.error(ev);
+    
   }
 
   /**接收数据后回调 */
@@ -92,12 +93,11 @@ export default function useWS() {
         upfTotalFlow.value[2].requestFlag = false;
         break;
     }
-
     // 订阅组信息
     if (!data?.groupId) {
       return;
     }
-
+    console.log(data?.groupId)
     switch (data.groupId) {
       // kpiEvent 指标UPF
       case '12_' + upfWhoRmUid.value:
@@ -210,7 +210,7 @@ export default function useWS() {
          * MME_UE会话事件(GroupID:1011)
          * IMS_CDR会话事件(GroupID:1005)
          */
-        subGroupID: '12_' + rmUid + ',1010,1005',
+        subGroupID: '12_' + rmUid + ',1010,1011,1005',
       },
       onmessage: wsMessage,
       onerror: wsError,
@@ -232,7 +232,7 @@ export default function useWS() {
          * MME_UE会话事件(GroupID:1011)
          * IMS_CDR会话事件(GroupID:1005)
          */
-        subGroupID: '12_' + upfWhoRmUid.value + ',1010,1005',
+        subGroupID: '12_' + upfWhoRmUid.value + ',1010,1011,1005',
       },
       onmessage: wsMessage,
       onerror: wsError,

src/views/dashboard/overview/index.vue

@@ -20,7 +20,7 @@ import {
   graphNodeStateNum,
   neStateRequestMap,
 } from './hooks/useTopology';
-import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow';
+import { upfTotalFlow, upfTFActive,upfTotalFlowReset } from './hooks/useUPFTotalFlow';
 import { upfWhoId, upfWhoRmUid } from './hooks/useWS';
 
 import { useFullscreen } from '@vueuse/core';
@@ -40,7 +40,10 @@ const { wsSend, userActivitySend, upfTFSend, reSendUPF } = useWS();
 let neOtions = ref<Record<string, any>[]>([]);
 
 /**UPF网元Id */
-let neRealId = ref<any>;
+let queryParams = reactive({
+  /**45G类型 */
+  neRealId: '',
+});
 
 /**概览状态类型 */
 type SkimStateType = {
@@ -197,12 +200,14 @@ function fnToRouter(name: string, query?: any) {
 
 // UPF实时流量下拉框选择
 function fnSelectNe(value: any, option: any) {
-  neRealId = value;
+  queryParams.neRealId = value;
   upfWhoId.value = value;
   reSendUPF(option.rmUid);
   upfTotalFlow.value.map((item: any) => {
     item.requestFlag = false;
   });
+
+  upfTotalFlowReset();//属性重置  流量总量 上下行速率
 }
 
 onMounted(() => {
@@ -223,8 +228,10 @@ onMounted(() => {
           });
           //arr.push({ value: '002', label: 'UPF_002', rmUid: '4400HXUPF002' });
           neOtions.value = arr;
+
           if (arr.length > 0) {
-            neRealId = arr[0].value;
+            queryParams.neRealId = arr[0].value;
+
             reSendUPF(arr[0].rmUid);
           }
         }
@@ -325,7 +332,7 @@ onBeforeUnmount(() => {
           <div class="data">
             <div
               class="item toRouter"
-              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
+              @click="fnToRouter('Base5G_2082', { neType: '5g' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -339,7 +346,7 @@ onBeforeUnmount(() => {
             </div>
             <div
               class="item toRouter"
-              @click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
+              @click="fnToRouter('Base5G_2082', { neType: '5g' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -354,7 +361,7 @@ onBeforeUnmount(() => {
           <div class="data">
             <div
               class="item toRouter"
-              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
+              @click="fnToRouter('Base5G_2082', { neType: '4g' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -368,7 +375,7 @@ onBeforeUnmount(() => {
             </div>
             <div
               class="item toRouter"
-              @click="fnToRouter('Base5G_2082', { neType: 'MME' })"
+              @click="fnToRouter('Base5G_2082', { neType: '4g' })"
               :title="t('views.dashboard.overview.toRouter')"
             >
               <div style="align-items: flex-start">
@@ -409,21 +416,19 @@ onBeforeUnmount(() => {
             <span @click="fnToRouter('GoldTarget_2104')">{{
               t('views.dashboard.overview.upfFlow.title')
             }}</span>
-
+            <a-select
-            <div style="margin-left: auto">
+              v-model:value="queryParams.neRealId"
-              <a-select
+              :options="neOtions"
-                v-model:value="neRealId"
+              class="toDeep"
-                :options="neOtions"
+              style="width: 100px; color: #fff; margin-left: auto"
-                class="toDeep"
+              @change="fnSelectNe"
-                style="width: 100px; color: #fff"
+            />
-                @change="fnSelectNe"
-              />
-            </div>
           </h3>
 
           <div class="chart">
             <UPFFlow />
           </div>
+          
         </div>
       </div>
       <!-- 网络拓扑 -->
@@ -544,13 +549,10 @@ onBeforeUnmount(() => {
 
 .toDeep :deep(.ant-select-selector) {
   background-color: #101129;
+  border: none;
 }
 
 .toDeep :deep(.ant-select-arrow) {
   color: #fff;
 }
-
-.toDeep :deep(.ant-select-selector) {
-  border: none;
-}
 </style>