fix: 看板总流量24小时实时累加

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

@@ -36,47 +36,63 @@ export function upfFlowParse(data: Record<string, string>) {
     upfFlowData.value.lineYDown.shift();
     upfFlowData.value.cap -= 1;
   }
+  // UPF-总流量数0天 当天24小时
+  upfTFParse('0', {
+    up: upfTotalFlow.value['0'].up + +data['UPF.03'],
+    down: upfTotalFlow.value['0'].down + +data['UPF.06'],
+  });
 }
 
 type TFType = {
   /**上行 N3 */
-  up: string;
+  up: number;
+  upFrom: string;
   /**下行 N6 */
-  down: string;
+  down: number;
+  downFrom: string;
   /**请求标记 */
   requestFlag: boolean;
 };
 
 /**UPF-总流量数 */
-export const upfTotalFlow = ref<TFType[]>([
-  // 0天 当天24小时
-  {
-    up: '0 B',
-    down: '0 B',
+export const upfTotalFlow = ref<Record<string, TFType>>({
+  '0': {
+    up: 0,
+    upFrom: '0 B',
+    down: 0,
+    downFrom: '0 B',
     requestFlag: false,
   },
-  {
-    up: '0 B',
-    down: '0 B',
+  '7': {
+    up: 0,
+    upFrom: '0 B',
+    down: 0,
+    downFrom: '0 B',
     requestFlag: false,
   },
-  {
-    up: '0 B',
-    down: '0 B',
+  '30': {
+    up: 0,
+    upFrom: '0 B',
+    down: 0,
+    downFrom: '0 B',
     requestFlag: false,
   },
-]);
+});
 
 /**UPF-总流量数 数据解析 */
-export function upfTFParse(data: Record<string, string>) {
+export function upfTFParse(day: string, data: Record<string, number>) {
   let { up, down } = data;
-  up = parseSizeFromBits(up);
-  down = parseSizeFromBits(down);
-  return { up, down };
+  upfTotalFlow.value[day] = {
+    up: up,
+    upFrom: parseSizeFromBits(up),
+    down: down,
+    downFrom: parseSizeFromBits(down),
+    requestFlag: false,
+  };
 }
 
 /**UPF-总流量数 选中 */
-export const upfTFActive = ref<number>(0);
+export const upfTFActive = ref<string>('0');
 
 /**属性复位 */
 export function upfTotalFlowReset() {
@@ -86,23 +102,14 @@ export function upfTotalFlowReset() {
     lineYDown: [],
     cap: 0,
   };
-  upfTotalFlow.value = [
-    // 0天 当天24小时
-    {
-      up: '0 B',
-      down: '0 B',
+  for (const key of Object.keys(upfTotalFlow.value)) {
+    upfTotalFlow.value[key] = {
+      up: 0,
+      upFrom: '0 B',
+      down: 0,
+      downFrom: '0 B',
       requestFlag: false,
-    },
-    {
-      up: '0 B',
-      down: '0 B',
-      requestFlag: false,
-    },
-    {
-      up: '0 B',
-      down: '0 B',
-      requestFlag: false,
-    },
-  ];
-  upfTFActive.value = 0;
+    };
+  }
+  upfTFActive.value = '0';
 }

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

@@ -25,12 +25,6 @@ export default function useWS() {
     ws.send(data);
   }
 
-  /**接收数据后回调 */
-  function wsError(ev: any) {
-    // 接收数据后回调
-    console.error(ev);
-  }
-
   /**接收数据后回调 */
   function wsMessage(res: Record<string, any>) {
     // console.log(res);
@@ -69,22 +63,13 @@ export default function useWS() {
         break;
       //UPF-总流量数
       case 'upf_001_0':
-        const v0 = upfTFParse(data);
-        upfTotalFlow.value[0].up = v0.up;
-        upfTotalFlow.value[0].down = v0.down;
-        upfTotalFlow.value[0].requestFlag = false;
+        upfTFParse('0', data);
         break;
       case 'upf_001_7':
-        const v7 = upfTFParse(data);
-        upfTotalFlow.value[1].up = v7.up;
-        upfTotalFlow.value[1].down = v7.down;
-        upfTotalFlow.value[1].requestFlag = false;
+        upfTFParse('7', data);
         break;
       case 'upf_001_30':
-        const v30 = upfTFParse(data);
-        upfTotalFlow.value[2].up = v30.up;
-        upfTotalFlow.value[2].down = v30.down;
-        upfTotalFlow.value[2].requestFlag = false;
+        upfTFParse('30', data);
         break;
     }
 
@@ -121,20 +106,12 @@ export default function useWS() {
   }
 
   /**UPF-总流量数 发消息*/
-  function upfTFSend(day: 0 | 7 | 30) {
+  function upfTFSend(day: '0' | '7' | '30') {
     // 请求标记检查避免重复发送
-    let index = 0;
-    if (day === 0) {
-      index = 0;
-    } else if (day === 7) {
-      index = 1;
-    } else if (day === 30) {
-      index = 2;
-    }
-    if (upfTotalFlow.value[index].requestFlag) {
+    if (upfTotalFlow.value[day].requestFlag) {
       return;
     }
-    upfTotalFlow.value[index].requestFlag = true;
+    upfTotalFlow.value[day].requestFlag = true;
 
     ws.send({
       requestId: `upf_001_${day}`,
@@ -142,7 +119,7 @@ export default function useWS() {
       data: {
         neType: 'UPF',
         neId: '001',
-        day: day,
+        day: Number(day),
       },
     });
   }
@@ -205,7 +182,9 @@ export default function useWS() {
         subGroupID: '12_001,1010_001,1011_001,1005_001',
       },
       onmessage: wsMessage,
-      onerror: wsError,
+      onerror: (ev: any) => {
+        console.error(ev);
+      },
     };
     ws.connect(options);
   });

src/views/dashboard/overview/index.vue

@@ -156,19 +156,21 @@ async function fnGetSkim() {
 function loadData() {
   fnGetNeState(); // 获取网元状态
   userActivitySend();
-  upfTFSend(0);
-  upfTFSend(7);
-  upfTFSend(30);
+  upfTFSend('0');
+  upfTFSend('7');
+  upfTFSend('30');
 
   clearInterval(interval10s.value);
   interval10s.value = setInterval(() => {
-    upfTFActive.value = upfTFActive.value >= 2 ? 0 : upfTFActive.value + 1;
-    if (upfTFActive.value === 0) {
-      upfTFSend(7);
-    } else if (upfTFActive.value === 1) {
-      upfTFSend(30);
-    } else if (upfTFActive.value === 2) {
-      upfTFSend(0);
+    if (upfTFActive.value === '0') {
+      upfTFSend('7');
+      upfTFActive.value = '7';
+    } else if (upfTFActive.value === '7') {
+      upfTFSend('30');
+      upfTFActive.value = '30';
+    } else if (upfTFActive.value === '30') {
+      upfTFSend('0');
+      upfTFActive.value = '0';
     }
   }, 10_000);
 
@@ -411,12 +413,12 @@ onBeforeUnmount(() => {
             <div class="filter">
               <span
                 :data-key="v"
-                :class="{ active: upfTFActive === i }"
-                v-for="(v, i) in ['0', '7', '30']"
+                :class="{ active: upfTFActive === v }"
+                v-for="v in ['0', '7', '30']"
                 :key="v"
                 @click="
                   () => {
-                    upfTFActive = i;
+                    upfTFActive = v;
                   }
                 "
               >
@@ -436,14 +438,14 @@ onBeforeUnmount(() => {
                   <ArrowUpOutlined style="color: #597ef7" />
                   {{ t('views.dashboard.overview.upfFlowTotal.up') }}
                 </span>
-                <h4>{{ upfTotalFlow[upfTFActive].up }}</h4>
+                <h4>{{ upfTotalFlow[upfTFActive].upFrom }}</h4>
               </div>
               <div class="item">
                 <span>
                   <ArrowDownOutlined style="color: #52c41a" />
                   {{ t('views.dashboard.overview.upfFlowTotal.down') }}
                 </span>
-                <h4>{{ upfTotalFlow[upfTFActive].down }}</h4>
+                <h4>{{ upfTotalFlow[upfTFActive].downFrom }}</h4>
               </div>
             </div>
           </div>