上下行统计以及转换单位

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>
-

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="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" />
                 下行