fix: 看板ws黄金指标UPF

src/api/perfManage/goldTarget.ts

@@ -1,9 +1,9 @@
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { request } from '@/plugins/http-fetch';
-import { parseDateToStr } from '@/utils/date-utils';
 import { parseObjLineToHump } from '@/utils/parse-utils';
 
 /**
+ * Todo 废弃
  * 查询黄金指标数据
  * @param query 查询参数
  * @returns object
@@ -110,6 +110,7 @@ export async function getKPITitle(neType: string) {
 }
 
 /**
+ * Todo 废弃
  * 查询UPF上下行速率数据
  * @param query 查询参数
  * @returns object

src/utils/parse-utils.ts

@@ -122,9 +122,11 @@ export function parseSizeFromKBs(size: number): string {
 /**
  * 字节数转换速率
  * @param sizeByte 数值大小
- * @returns
+ * @returns [值，单位]
  */
 export function parseSizeFromKbs(sizeByte: number, timeInterval: number): any {
+  sizeByte = Number(sizeByte) || 0;
+  timeInterval = Number(timeInterval) || 1;
   //   let realBit:any=((sizeByte * 8) / timeInterval);
   //   if (realBit >= 0 && realBit < 1000) {
   //     return [realBit.toFixed(2),' bits/sec'];

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

@@ -1,10 +1,6 @@
-<template>
-  <div ref="upfFlow" class="chart-container"></div>
-</template>
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
-import { listUPFData } from '@/api/perfManage/goldTarget';
-import { parseSizeFromKbs } from '@/utils/parse-utils';
+import { onMounted, ref, watch } from 'vue';
+import { listKPIData } from '@/api/perfManage/goldTarget';
 import * as echarts from 'echarts/core';
 import {
   TooltipComponent,
@@ -20,6 +16,8 @@ import { CanvasRenderer } from 'echarts/renderers';
 import { markRaw } from 'vue';
 import useI18n from '@/hooks/useI18n';
 import { parseDateToStr } from '@/utils/date-utils';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { upfFlowData, upfFlowParse } from '../../hooks/useUPFTotalFlow';
 
 const { t } = useI18n();
 
@@ -39,9 +37,6 @@ type EChartsOption = echarts.ComposeOption<
   | LineSeriesOption
 >;
 
-/**定时器ID */
-const timeoutId = ref<any>(null);
-
 /**图DOM节点实例对象 */
 const upfFlow = ref<HTMLElement | undefined>(undefined);
 
@@ -69,66 +64,24 @@ function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
 }
 
 //渲染速率图
-function initPicture() {
-  clearTimeout(timeoutId.value);
+function handleRanderChart() {
+  const { lineXTime, lineYUp, lineYDown } = upfFlowData.value;
 
-  let queryArr: any = [];
-  const initTime: Date = new Date();
-  const startTime: Date = new Date(initTime);
-  startTime.setHours(0, 0, 0, 0); // 设置为今天的0点
-  const endTime: Date = new Date(initTime);
-  endTime.setHours(23, 59, 59, 59); // 设置为今天的12点
-  queryArr = [parseDateToStr(startTime), parseDateToStr(endTime)];
-
-  listUPFData(queryArr).then(res => {
-    timeoutId.value = setTimeout(() => {
-      initPicture(); // 5秒后再次获取数据
-    }, 5000);
-    let timeArr: any = [];
-    let upValue: any = [];
-    let downValue: any = [];
-
-    res.upData.map((item: any) => {
-      timeArr.push(item.timestamp);
-      upValue.push(parseSizeFromKbs(item.value, item.granularity)[0]);
-    });
-    res.downData.map((item: any) => {
-      downValue.push(parseSizeFromKbs(item.value, item.granularity)[0]);
-    });
-
-    var charts = {
-      unit: '(Mbps)',
-      names: [
-        t('views.dashboard.overview.upfFlow.up'),
-        t('views.dashboard.overview.upfFlow.down'),
-      ],
-
-      lineX: timeArr,
-      value: [upValue, downValue],
-    };
-
-    var color = ['rgba(250, 219, 20', 'rgba(92, 123, 217'];
-    var lineY: any = [];
-
-    for (var i = 0; i < charts.names.length; i++) {
-      var x = i;
-      if (x > color.length - 1) {
-        x = color.length - 1;
-      }
-      var data = {
-        name: charts.names[i],
+  var yAxisSeries: any = [
+    {
+      name: t('views.dashboard.overview.upfFlow.up'),
       type: 'line',
-        color: color[x] + ')',
+      color: 'rgba(250, 219, 20)',
       smooth: true,
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-              color: color[x] + ', .5)',
+            color: 'rgba(250, 219, 20, .5)',
           },
           {
             offset: 1,
-              color: color[x] + ', 0.5)',
+            color: 'rgba(250, 219, 20, 0.5)',
           },
         ]),
         shadowColor: 'rgba(0, 0, 0, 0.1)',
@@ -137,10 +90,33 @@ function initPicture() {
       symbol: 'circle',
       symbolSize: 5,
       formatter: '{b}',
-        data: charts.value[i],
-      };
-      lineY.push(data);
-    }
+      data: lineYUp,
+    },
+    {
+      name: t('views.dashboard.overview.upfFlow.down'),
+      type: 'line',
+      color: 'rgba(92, 123, 217)',
+      smooth: true,
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgba(92, 123, 217, .5)',
+          },
+          {
+            offset: 1,
+            color: 'rgba(92, 123, 217, 0.5)',
+          },
+        ]),
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowBlur: 10,
+      },
+      symbol: 'circle',
+      symbolSize: 5,
+      formatter: '{b}',
+      data: lineYDown,
+    },
+  ];
 
   const optionData: EChartsOption = {
     tooltip: {
@@ -164,14 +140,13 @@ function initPicture() {
       },
     },
     legend: {
-        data: charts.names,
+      data: yAxisSeries.map((s: any) => s.name),
       textStyle: {
         fontSize: 12,
         color: 'rgb(0,253,255,0.6)',
       },
-        left: 'center',
-      }, // 设置图例居中
-
+      left: 'center', // 设置图例居中
+    },
     grid: {
       top: '14%',
       left: '4%',
@@ -182,7 +157,7 @@ function initPicture() {
     xAxis: {
       type: 'category',
       boundaryGap: false,
-        data: charts.lineX,
+      data: lineXTime,
       axisLabel: {
         formatter: function (params: any) {
           return params.split(' ')[1];
@@ -197,7 +172,7 @@ function initPicture() {
     },
     yAxis: [
       {
-          name: charts.unit,
+        name: '(Mbps)',
         nameTextStyle: {
           fontSize: 12, // 设置文字距离x轴的距离
           padding: [0, -10, 0, 0], // 设置名称在x轴方向上的偏移
@@ -221,22 +196,93 @@ function initPicture() {
         },
       },
     ],
-      series: lineY,
+    series: yAxisSeries,
   };
   fnDesign(upfFlow.value, optionData);
+}
+
+/**查询初始UPF数据 */
+function fnGetInitData() {
+  // 查询10分钟前的
+  const nowDate: Date = new Date();
+  const tenMinutesAgo = new Date(nowDate.getTime() - 5 * 60 * 1000);
+
+  listKPIData({
+    neType: 'UPF',
+    neId: '001',
+    startTime: parseDateToStr(tenMinutesAgo),
+    endTime: parseDateToStr(nowDate),
+    // startTime: '2024-03-20 19:50:00',
+    // endTime: '2024-03-20 19:55:00',
+    interval: 5, // 5秒
+    sortField: 'timeGroup',
+    sortOrder: 'asc',
+  })
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        for (const item of res.data) {
+          upfFlowParse(item);
+        }
+      }
+    })
+    .finally(() => {
+      handleRanderChart();
     });
 }
 
-onMounted(() => {
-  initPicture();
+watch(
+  () => upfFlowData.value,
+  v => {
+    upfFlowChart.value.setOption({
+      xAxis: {
+        data: v.lineXTime,
+      },
+      series: [
+        {
+          data: v.lineYUp,
+        },
+        {
+          data: v.lineYDown,
+        },
+      ],
     });
+  },
+  {
+    deep: true,
+  }
+);
 
-/**组件实例被卸载之后调用 */
-onUnmounted(() => {
-  clearTimeout(timeoutId.value);
+onMounted(() => {
+  fnGetInitData();
+
+  // setInterval(() => {
+  //   upfFlowData.value.lineXTime.push(parseDateToStr(new Date()));
+  //   const upN3 = parseSizeFromKbs(+145452, 5);
+  //   upfFlowData.value.lineYUp.push(upN3[0]);
+  //   const downN6 = parseSizeFromKbs(+232343, 5);
+  //   upfFlowData.value.lineYDown.push(downN6[0]);
+
+  //   upfFlowChart.value.setOption({
+  //     xAxis: {
+  //       data: upfFlowData.value.lineXTime,
+  //     },
+  //     series: [
+  //       {
+  //         data: upfFlowData.value.lineYUp,
+  //       },
+  //       {
+  //         data: upfFlowData.value.lineYDown,
+  //       },
+  //     ],
+  //   });
+  // }, 5000);
 });
 </script>
 
+<template>
+  <div ref="upfFlow" class="chart-container"></div>
+</template>
+
 <style lang="less" scoped>
 .chart-container {
   /* 设置图表容器大小和位置 */

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

@@ -1,6 +1,40 @@
-import { parseSizeFromBits } from '@/utils/parse-utils';
+import { parseSizeFromBits, parseSizeFromKbs } from '@/utils/parse-utils';
 import { ref } from 'vue';
 
+/**UPF-流量数据 */
+export const upfFlowData = ref<{
+  /**时间 */
+  lineXTime: string[];
+  /**上行 N3 */
+  lineYUp: number[];
+  /**下行 N6 */
+  lineYDown: number[];
+  /**容量 */
+  cap: number;
+}>({
+  lineXTime: [],
+  lineYUp: [],
+  lineYDown: [],
+  cap: 0,
+});
+
+/**UPF-流量数据 数据解析 */
+export function upfFlowParse(data: Record<string, string>) {
+  upfFlowData.value.lineXTime.push(data['timeGroup']);
+  const upN3 = parseSizeFromKbs(+data['UPF.03'], 5);
+  upfFlowData.value.lineYUp.push(upN3[0]);
+  const downN6 = parseSizeFromKbs(+data['UPF.06'], 5);
+  upfFlowData.value.lineYDown.push(downN6[0]);
+  upfFlowData.value.cap += 1;
+  // 超过 25 弹出
+  if (upfFlowData.value.cap > 25) {
+    upfFlowData.value.lineXTime.shift();
+    upfFlowData.value.lineYUp.shift();
+    upfFlowData.value.lineYDown.shift();
+    upfFlowData.value.cap -= 1;
+  }
+}
+
 type TFType = {
   /**上行 N3 */
   up: string;

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

@@ -8,7 +8,7 @@ import {
   eventTotal,
   eventId,
 } from './useUserActivity';
-import { upfTotalFlow, upfTFParse } from './useUPFTotalFlow';
+import { upfTotalFlow, upfTFParse, upfFlowParse } from './useUPFTotalFlow';
 import { neStateParse } from './useTopology';
 import PQueue from 'p-queue';
 
@@ -102,6 +102,12 @@ export default function useWS() {
       return;
     }
     switch (data.groupId) {
+      // kpiEvent 指标UPF
+      case '12':
+        if (data.data) {
+          upfFlowParse(data.data);
+        }
+        break;
       // ueEvent UE会话事件
       case '1010':
         if (data.data) {
@@ -112,8 +118,10 @@ export default function useWS() {
               eventTotal.value += 1;
               eventId.value = v.eId;
               await new Promise(resolve => setTimeout(resolve, 800));
+              if (eventData.value.length > 20) {
                 eventData.value.pop();
               }
+            }
           });
         }
         break;
@@ -127,8 +135,10 @@ export default function useWS() {
               eventTotal.value += 1;
               eventId.value = v.eId;
               await new Promise(resolve => setTimeout(resolve, 800));
+              if (eventData.value.length > 20) {
                 eventData.value.pop();
               }
+            }
           });
         }
         break;
@@ -201,10 +211,11 @@ export default function useWS() {
       params: {
         /**订阅通道组
          *
+         * 指标UPF (GroupID:12)
          * UE会话事件-AMF (GroupID:1010)
          * CDR会话事件-IMS (GroupID:1005)
          */
-        subGroupID: '1010,1005',
+        subGroupID: '12,1010,1005',
       },
       onmessage: wsMessage,
       onerror: wsError,