仪表盘中ws的改动

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>
-
-            <div style="margin-left: auto">
-              <a-select
-                v-model:value="neRealId"
-                :options="neOtions"
-                class="toDeep"
-                style="width: 100px; color: #fff"
-                @change="fnSelectNe"
-              />
-            </div>
+            <a-select
+              v-model:value="queryParams.neRealId"
+              :options="neOtions"
+              class="toDeep"
+              style="width: 100px; color: #fff; margin-left: auto"
+              @change="fnSelectNe"
+            />
           </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>