上下行统计以及转换单位

2024-01-26 17:02:11 +08:00
parent 231d0381d1
commit 308a66b925
5 changed files with 108 additions and 79 deletions
--- a/src/api/perfManage/goldTarget.ts
+++ b/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,
-      sortOrder:query.sortOrder
+      sortField: query.sortField,
+      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));
@@ -176,7 +183,7 @@ export async function listUPFData(timeArr:any) {
        let itemData = itemV.data.data;
        const data = itemData[0]['gold_kpi'];
        if (Array.isArray(data)) {
-          try { 
+          try {
            downData = data.map(v => parseObjLineToHump(v));
          } catch (error) {
            console.error(error);
@@ -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;
+}
--- a/src/utils/parse-utils.ts
+++ b/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;
+}
--- a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
+++ b/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,
-  LegendComponentOption,
-  LineSeriesOption,
-  TooltipComponentOption,
-} from 'echarts';
-const { t, currentLocale } = useI18n();
+
+const { t } = 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>
-
--- a/src/views/dashboard/overview/components/UPFFlow/index.vue
+++ b/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,
    };
--- a/src/views/dashboard/overview/index.vue
+++ b/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="30">30天</span>
+            <!-- <span data-key="7">7天</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" />
                下行