上下行统计以及转换单位

src/api/perfManage/goldTarget.ts

@@ -1,5 +1,6 @@
 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';
 
 /**
@@ -91,8 +92,8 @@ export async function goldData(query: Record<string, any>) {
       startTime: query.beginTime,
       endTime: query.endTime,
       interval: query.particle,
-      sortField:query.sortField,
+      sortField: query.sortField,
-      sortOrder:query.sortOrder
+      sortOrder: query.sortOrder,
     },
     timeout: 60_000,
   });
@@ -116,13 +117,12 @@ export async function getGoldTitleByNE(neType: string) {
   return result;
 }
 
-
 /**
  * 查询UPF上下行速率数据
  * @param query 查询参数
  * @returns object
  */
-export async function listUPFData(timeArr:any) {
+export async function listUPFData(timeArr: any) {
   return await Promise.allSettled([
     // 获取参数规则
     request({
@@ -130,6 +130,13 @@ export async function listUPFData(timeArr:any) {
       method: 'get',
       params: {
         SQL: `SELECT gold_kpi.*,kpi_title.en_title FROM gold_kpi LEFT JOIN kpi_title on gold_kpi.kpi_id=kpi_title.kpi_id where 1=1 and gold_kpi.kpi_id ='UPF.06' and timestamp BETWEEN '${timeArr[0]}' AND '${timeArr[1]}' `,
+        // SQL: `SELECT gold_kpi.kpi_id, sum(gold_kpi.value) as index, kpi_title.en_title
+        // FROM gold_kpi
+        // LEFT JOIN kpi_title on gold_kpi.kpi_id=kpi_title.kpi_id
+        // WHERE 1=1
+        //     AND gold_kpi.kpi_id ='UPF.06'
+        //     AND timestamp BETWEEN '${timeArr[0]}' AND '${timeArr[1]}'
+        // GROUP BY gold_kpi.kpi_id, kpi_title.en_title`,
       },
       timeout: 60_000,
     }),
@@ -148,14 +155,14 @@ export async function listUPFData(timeArr:any) {
 
     // 规则数据
     if (resArr[0].status === 'fulfilled') {
-      const itemV:any = resArr[0].value;
+      const itemV: any = resArr[0].value;
       // 解析数据
       if (
         itemV.code === RESULT_CODE_SUCCESS &&
         Array.isArray(itemV.data?.data)
       ) {
         let itemData = itemV.data.data;
-        let data= itemData[0]['gold_kpi'];
+        let data = itemData[0]['gold_kpi'];
         if (Array.isArray(data)) {
           try {
             upData = data.map(v => parseObjLineToHump(v));
@@ -184,6 +191,37 @@ export async function listUPFData(timeArr:any) {
         }
       }
     }
-    return {upData,downData};
+    return { upData, downData };
   });
 }
+
+/**
+ * 首页查询UPF上下行字节数
+ * @param query 查询参数
+ * @returns object
+ */
+export async function listUPFIndex() {
+  const initTime: Date = new Date();
+  const twentyFourHoursAgo: Date = new Date(
+    initTime.getTime() - 24 * 60 * 60 * 1000
+  );
+  parseDateToStr;
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/select/omc_db/gold_kpi`,
+    method: 'get',
+    params: {
+      SQL: `SELECT gold_kpi.kpi_id, sum(gold_kpi.value) as Total FROM gold_kpi  WHERE 1=1  AND gold_kpi.kpi_id in('UPF.06','UPF.03') AND timestamp BETWEEN '${parseDateToStr(
+        twentyFourHoursAgo
+      )}' AND '${parseDateToStr(initTime)}' GROUP BY gold_kpi.kpi_id`,
+    },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    let data = result.data.data[0];
+    return Object.assign(result, {
+      data: parseObjLineToHump(data['gold_kpi']),
+    });
+  }
+  return result;
+}

src/utils/parse-utils.ts

@@ -148,3 +148,15 @@ export function parseSizeFromKbs(sizeByte: number, timeInterval: number): any {
 
   return [(realBit / 1000 / 1000).toFixed(2), ' Mbits/sec'];
 }
+
+/**
+ * 字节数转换单位
+ * @param sizeByte 数值大小
+ * @returns
+ */
+export function formatBytes(bytes: number): string {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const unitIndex = Math.floor(Math.log2(bytes) / 10); 
+  const result =(bytes / Math.pow(1024, unitIndex)).toFixed(2) + ' ' + units[unitIndex];
+  return result;
+}

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

@@ -15,13 +15,8 @@ import { BarChart, PieChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { LabelLayout } from 'echarts/features';
 import useI18n from '@/hooks/useI18n';
-import {
+
-  GridComponentOption,
+const { t } = useI18n();
-  LegendComponentOption,
-  LineSeriesOption,
-  TooltipComponentOption,
-} from 'echarts';
-const { t, currentLocale } = useI18n();
 echarts.use([
   GridComponent,
   BarChart,
@@ -106,11 +101,11 @@ function initPicture() {
     //   item.name = t('views.index.' + item.name);
     // });
     for (let i = 0; i < realData.length; i++) {
-      realData[i].name= t('views.index.' + realData[i].name);
+      realData[i].name = t('views.index.' + realData[i].name);
       realData[i].itemStyle = {
-    color: colorList[i]
+        color: colorList[i],
-  };
+      };
-}
+    }
     const optionData: any = {
       tooltip: {
         trigger: 'item',
@@ -132,30 +127,6 @@ function initPicture() {
           center: ['40%', '48%'],
           data: realData,
           roseType: 'radius',
-          // label: {
-          //   formatter: '{c|{c}}\n{b|{b}}',
-          //   rich: {
-          //     c: {
-          //       color: 'rgb(241,246,104)',
-          //       fontSize: 20,
-          //       fontWeight: 'bold',
-          //       lineHeight: 5,
-          //     },
-          //     b: {
-          //       color: 'rgb(98,137,169)',
-          //       fontSize: 15,
-          //       height: 40,
-          //     },
-          //   },
-          // },
-          // labelLine: {
-          //   lineStyle: {
-          //     color: 'rgb(98,137,169)',
-          //   },
-          //   smooth: 0.2,
-          //   length: 10,
-          //   length2: 20,
-          // },
           label: {
             formatter: '{c|{c}}\n{b|{b}}',
             distance: 80,
@@ -222,4 +193,3 @@ onMounted(() => {
   height: 100%;
 }
 </style>
-

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

@@ -102,7 +102,7 @@ function initPicture() {
     });
 
     var charts = {
-      unit: '(Kbps)',
+      unit: '(Mbps)',
       names: [
         t('views.dashboard.overview.UPFFlow.up'),
         t('views.dashboard.overview.UPFFlow.down'),
@@ -152,7 +152,6 @@ function initPicture() {
         symbolSize: 5,
         formatter: '{b}',
         data: charts.value[i],
-        yAxisIndex: i,
       };
       lineY.push(data);
     }
@@ -213,6 +212,9 @@ function initPicture() {
         {
           name: charts.unit,
           type: 'value',
+        //  splitNumber: 4,
+        min:0,
+        max:300,
           axisLabel: {
             formatter: '{value}',
           },
@@ -227,23 +229,7 @@ function initPicture() {
             },
           },
         },
-        {
+
-          name: charts.unit,
-          type: 'value',
-          axisLabel: {
-            formatter: '{value}',
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgb(23,255,243,0.3)',
-            },
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgb(0,253,255,0.6)',
-            },
-          },
-        },
       ],
       series: lineY,
     };

src/views/dashboard/overview/index.vue

@@ -9,15 +9,15 @@ import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
 import UPFFlow from './components/UPFFlow/index.vue';
 import { listSub } from '@/api/neUser/sub';
 import { listUENum } from '@/api/neUser/ue';
-
+import { listUPFIndex } from '@/api/perfManage/goldTarget';
+import { listBase5G } from '@/api/neUser/base5G';
+import { formatBytes } from '@/utils/parse-utils';
 import { graphNodeClickID } from './hooks/useTopology';
 import { useFullscreen } from '@vueuse/core';
 import useAppStore from '@/store/modules/app';
 const appStore = useAppStore();
 const { t } = useI18n();
 
-// let subNum = ref<number>(0);
-
 /**用户在线信息 */
 let onlineInfo: {
   /**签约用户数量 */
@@ -35,6 +35,17 @@ let onlineInfo: {
   activeAlarmSeverity: [],
 });
 
+/**用户在线信息 */
+let upfFlowInfo: {
+  /**上行字节数 */
+  up: number;
+  /**下行字节数 */
+  down: any;
+} = reactive({
+  up: 0,
+  down: 0,
+});
+
 /**总览节点 */
 const viewportDom = ref<HTMLElement | null>(null);
 const { isFullscreen, toggle } = useFullscreen(viewportDom);
@@ -48,16 +59,28 @@ onMounted(() => {
       pageNum: '1',
       pageSize: '20',
     }),
- //    listUENum('001'),
+    listUPFIndex(),
+    listUENum('001'),
   ]).then(resArr => {
-    console.log(resArr)
     if (resArr[0].status === 'fulfilled') {
-      onlineInfo.subNum=resArr[0].value.total;
+      onlineInfo.subNum = resArr[0].value.total;
+    }
+    if (resArr[1].status === 'fulfilled') {
+      resArr[1].value['data'].map((item: any) => {
+        switch (item.kpiId) {
+          case 'UPF.03':
+            upfFlowInfo.up = item.Total;
+            break;
+          case 'UPF.06':
+            upfFlowInfo.down = item.Total;
+        }
+      });
+    }
+
+    if (resArr[2].status === 'fulfilled') {
+      console.log(resArr)
+     
     }
-    // if (resArr[1].status === 'fulfilled') {
-    //   console.log(resArr[1].value)
-    //   onlineInfo.ueNum=resArr[1].value.data?.ueNum;
-    // }
   });
 });
 </script>
@@ -78,7 +101,7 @@ onMounted(() => {
       <div class="overview panel">
         <div class="inner">
           <div class="item">
-            <h4>{{onlineInfo.subNum}}</h4>
+            <h4>{{ onlineInfo.subNum }}</h4>
             <span>
               <UserOutlined style="color: #006cff" />
               签约用户
@@ -157,20 +180,20 @@ onMounted(() => {
           <!-- 筛选 -->
           <div class="filter">
             <span data-key="1" class="active">24小时</span>
-            <span data-key="7">7天</span>
+            <!-- <span data-key="7">7天</span>
-            <span data-key="30">30天</span>
+            <span data-key="30">30天</span> -->
           </div>
           <!-- 数据 -->
           <div class="data">
             <div class="item">
-              <h4>20,301 TB</h4>
+              <h4>{{formatBytes(upfFlowInfo.up)}} </h4>
               <span>
                 <ArrowUpOutlined style="color: #ed3f35" />
                 上行
               </span>
             </div>
             <div class="item">
-              <h4>99834 TB</h4>
+              <h4>{{formatBytes(upfFlowInfo.down)}} </h4>
               <span>
                 <ArrowDownOutlined style="color: #eacf19" />
                 下行