From 98ac3c67c1746eafeaf8150341be0faaf2d2cb58 Mon Sep 17 00:00:00 2001
From: zCans <1224895921@qq.com>
Date: Sun, 26 Mar 2023 22:33:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=9B=BE=E8=A1=A8=E6=94=B9?=
 =?UTF-8?q?=E9=80=A0=EF=BC=8C=E5=AF=B9=E6=8E=A5=E6=95=B0=E6=8D=AE=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 neutrino-proxy-admin/src/api/report.js        |   8 +
 neutrino-proxy-admin/src/utils/utils.js       |  29 ++++
 .../admin/components/DailyTrafficChart.vue    |  17 ++-
 .../home/admin/components/LicenseChart.vue    |  10 +-
 .../admin/components/PortMappingChart.vue     |  10 +-
 .../home/admin/components/TrafficSumChart.vue |  29 +++-
 .../src/views/home/admin/index.vue            | 138 +++++++++---------
 7 files changed, 146 insertions(+), 95 deletions(-)
 create mode 100644 neutrino-proxy-admin/src/utils/utils.js

diff --git a/neutrino-proxy-admin/src/api/report.js b/neutrino-proxy-admin/src/api/report.js
index 9fa9bb94..44496df3 100644
--- a/neutrino-proxy-admin/src/api/report.js
+++ b/neutrino-proxy-admin/src/api/report.js
@@ -30,3 +30,11 @@ export function fetchLicenseFlowMonthReportList(query) {
     params: query
   })
 }
+
+export function homeData(query) {
+  return request({
+    url: '/report/home/data-view',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/neutrino-proxy-admin/src/utils/utils.js b/neutrino-proxy-admin/src/utils/utils.js
new file mode 100644
index 00000000..4a1bfb0f
--- /dev/null
+++ b/neutrino-proxy-admin/src/utils/utils.js
@@ -0,0 +1,29 @@
+const SIZE_UNINTS = ['B', 'KB', 'MB', 'GB', 'TB']
+const SIZE_SYSTEM = 1024
+/**
+ * 根据字节数获取大小描述
+ * 1、小于1024字节的以B为单位
+ * 2、小于1024KB的以KB为单位
+ * 3、小于1024M的以MB为单位
+ * 4、小于1024G的以GB为单位
+ * 5、其他以TB为单位
+ */
+export function getSizeDescByByteCount(byteCount) {
+  if (byteCount <= 0) {
+    return '0B'
+  }
+
+  let res = byteCount
+  let index = 0
+  while (index < SIZE_UNINTS.length && res >= SIZE_SYSTEM) {
+    res /= SIZE_SYSTEM
+    index++
+  }
+
+  if (index >= SIZE_UNINTS.length) {
+    index = SIZE_UNINTS.length - 1
+    res *= 1024
+  }
+
+  return parseFloat(res.toFixed(2)) + SIZE_UNINTS[index]
+}
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
index 74c7e7fc..d889e6af 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
@@ -5,6 +5,7 @@
 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
+let that = null
 
 export default {
   props: {
@@ -28,8 +29,8 @@ export default {
       type: Object,
       default: () => {
         return {
-          upload: 90, // 上行
-          download: 100, // 下行
+          upFlowBytes: 0, // 上行
+          downFlowBytes: 0, // 下行
           text: '今日流量'
         }
       }
@@ -41,6 +42,7 @@ export default {
     }
   },
   mounted() {
+    that = this
     this.initChart()
   },
   beforeDestroy() {
@@ -57,7 +59,7 @@ export default {
       const option = {
         title: {
           text: this.data.text,
-          subtext: '上行：' + this.data.upload + '\n\n' + '下行：' + this.data.download,
+          subtext: '上行：' + this.data.upFlowDesc + '\n\n' + '下行：' + this.data.downFlowDesc + '\n\n' + '汇总：' + this.data.totalFlowDesc,
           textStyle: {
             fontSize: 18,
             fontWeight: 800,
@@ -65,7 +67,10 @@ export default {
           }
         },
         tooltip: {
-          trigger: 'item'
+          trigger: 'item',
+          formatter: function(value) {
+            return `${value.seriesName} <br/>${value.marker} : ${value.name} ${value.name === '上行' ? that.data.upFlowDesc : that.data.downFlowDesc}`
+          }
         },
         legend: {
           data: ['上行', '下行'],
@@ -93,7 +98,7 @@ export default {
             },
             data: [
               {
-                value: this.data.upload,
+                value: this.data.upFlowBytes,
                 name: '上行',
                 lineStyle: {
                   normal: {
@@ -107,7 +112,7 @@ export default {
                 }
               },
               {
-                value: this.data.download,
+                value: this.data.downFlowBytes,
                 name: '下行',
                 lineStyle: {
                   normal: {
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
index d9882033..3168ebef 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
@@ -26,8 +26,8 @@ export default {
       type: Object,
       default: () => {
         return {
-          onLine: 90, // 进度条最大值
-          total: 100 // 当前进度
+          onlineCount: 0, // 进度条最大值
+          totalCount: 0 // 当前进度
         }
       }
     }
@@ -54,7 +54,7 @@ export default {
       const option = {
         title: {
           text: 'License统计',
-          subtext: '在线数：' + this.data.onLine + '\n\n' + '离线数：' + (this.data.total - this.data.onLine),
+          subtext: '在线数：' + this.data.onlineCount + '\n\n' + '离线数：' + (this.data.totalCount - this.data.onlineCount),
           textStyle: {
             fontSize: 18,
             fontWeight: 800,
@@ -103,7 +103,7 @@ export default {
               // value当前进度 + 颜色
               {
                 name: '在线数',
-                value: this.data.onLine,
+                value: this.data.onlineCount,
                 lineStyle: {
                   normal: {
                     color: '#2B81B1'
@@ -117,7 +117,7 @@ export default {
               },
               {
                 name: '离线数',
-                value: this.data.total - this.data.onLine,
+                value: this.data.totalCount - this.data.onlineCount,
                 lineStyle: {
                   normal: {
                     color: '#dbebf7'
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
index 3163960c..250d177f 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
@@ -24,8 +24,8 @@ export default {
       type: Object,
       default: () => {
         return {
-          onLine: 90, // 进度条最大值
-          total: 100 // 当前进度
+          onlineCount: 0, // 进度条最大值
+          totalCount: 0 // 当前进度
         }
       }
     }
@@ -52,7 +52,7 @@ export default {
       const option = {
         title: {
           text: '端口映射统计',
-          subtext: '在线数：' + this.data.onLine + '\n\n' + '离线数：' + (this.data.total - this.data.onLine),
+          subtext: '在线数：' + this.data.onlineCount + '\n\n' + '离线数：' + (this.data.totalCount - this.data.onlineCount),
           textStyle: {
             fontSize: 18,
             fontWeight: 800,
@@ -92,7 +92,7 @@ export default {
               // value当前进度 + 颜色
               {
                 name: '在线数',
-                value: this.data.onLine,
+                value: this.data.onlineCount,
                 lineStyle: {
                   normal: {
                     color: '#2B81B1'
@@ -106,7 +106,7 @@ export default {
               },
               {
                 name: '离线数',
-                value: this.data.total - this.data.onLine,
+                value: this.data.totalCount - this.data.onlineCount,
                 lineStyle: {
                   normal: {
                     color: '#dbebf7'
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
index 7208dda3..de660923 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
@@ -5,6 +5,8 @@
 <script>
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
+import { getSizeDescByByteCount } from '@/utils/utils'
+let that = null
 
 export default {
   props: {
@@ -32,10 +34,11 @@ export default {
   data() {
     return {
       chartDom: null,
-      colorList: ['#2B81B1', '#75ddfa', '#53a7e3', '#029fe8', '#015dae']
+      colorList: ['#1f92ce', '#7594fa', '#faa875']
     }
   },
   mounted() {
+    that = this
     this.initChart()
   },
   beforeDestroy() {
@@ -51,7 +54,7 @@ export default {
       this.myChart = echarts.init(this.chartDom)
       const seriesList = []
       const legendList = []
-      this.data.list.forEach((item, index) => {
+      this.data.list && this.data.list.forEach((item, index) => {
         seriesList.push({
           name: item.name,
           type: 'line',
@@ -71,17 +74,26 @@ export default {
             normal: {
               color: this.colorList[index]
             }
-          }
+          },
+          smooth: true
         })
         legendList.push(item.name)
       })
+
       const option = {
         title: {
-          text: this.data.text + '折线图',
+          text: this.data.text,
           subtext: this.data.subtext || ''
         },
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
+          formatter: function(value) {
+            let title = that.data.text + '<br/>'
+            value.forEach(item => {
+              title = title + item.marker + item.seriesName + ' : ' + that.data.list[item.seriesIndex].label[item.dataIndex] + '<br/>'
+            })
+            return title
+          }
         },
         legend: {
           data: legendList,
@@ -99,7 +111,12 @@ export default {
           data: this.data.title
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          axisLabel: {
+            formatter: function(value) {
+              return getSizeDescByByteCount(value)
+            }
+          }
         },
         series: seriesList
       }
diff --git a/neutrino-proxy-admin/src/views/home/admin/index.vue b/neutrino-proxy-admin/src/views/home/admin/index.vue
index 73c540d5..1255f477 100644
--- a/neutrino-proxy-admin/src/views/home/admin/index.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/index.vue
@@ -1,40 +1,32 @@
 <template>
   <div class="dashboard-editor">
-    <div class="log-div">
-
-    </div>
     <div class="container">
-      <el-row class="line-chart" :gutter="16">
-        <el-col :span="12">
-          <el-card>
-            <traffic-sum-chart :data="echartsData.trafficSumChart" :chartId="'traffic-sum-div1'"/>
-          </el-card>
-        </el-col>
-        <el-col :span="12">
-          <el-card>
-            <traffic-sum-chart :data="echartsData.trafficSumChart2"/>
-          </el-card>
-        </el-col>
-      </el-row>
       <el-row class="pie-chart" :gutter="16">
         <el-col :span="6">
           <el-card class="box-card">
-            <license-chart :data="echartsData.licenseChart"/>
+            <license-chart :data="licenseChart" v-if="licenseChart"/>
           </el-card>
         </el-col>
         <el-col :span="6">
           <el-card class="box-card">
-            <port-mapping-chart :data="echartsData.portMappingChart"/>
+            <port-mapping-chart :data="portMappingChart" v-if="portMappingChart"/>
           </el-card>
         </el-col>
         <el-col :span="6">
           <el-card class="box-card">
-            <daily-traffic-chart :data="echartsData.dailyTrafficChart" :chartId="'daily-traffic-div'"/>
+            <daily-traffic-chart :data="dailyTrafficChart" :chartId="'daily-traffic-div'" v-if="dailyTrafficChart"/>
           </el-card>
         </el-col>
         <el-col :span="6">
           <el-card class="box-card">
-            <daily-traffic-chart :data="echartsData.historyTrafficChart" :chartId="'history-traffic-div'"/>
+            <daily-traffic-chart :data="historyTrafficChart" :chartId="'history-traffic-div'" v-if="historyTrafficChart"/>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row class="line-chart" :gutter="16">
+        <el-col :span="24">
+          <el-card>
+            <traffic-sum-chart :data="trafficSumChart" :chartId="'traffic-sum-div1'" v-if="trafficSumChart"/>
           </el-card>
         </el-col>
       </el-row>
@@ -48,69 +40,69 @@ import LicenseChart from './components/LicenseChart'
 import PortMappingChart from './components/PortMappingChart'
 import DailyTrafficChart from './components/DailyTrafficChart'
 import TrafficSumChart from './components/TrafficSumChart'
-
-const echartsData = {
-  licenseChart: {
-    total: 100,
-    onLine: 80
-  },
-  portMappingChart: {
-    total: 100,
-    onLine: 25
-  },
-  dailyTrafficChart: {
-    upload: 300,
-    download: 680,
-    text: '今日流量'
-  },
-  historyTrafficChart: {
-    upload: 4100,
-    download: 9520,
-    text: '历史流量'
-  },
-  trafficSumChart: {
-    text: '今日流量',
-    subtext: '当日0-24时',
-    title: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00'],
-    list: [
-      {
-        name: '上行',
-        value: [120, 132, 101, 134, 90, 230, 210]
-      },
-      {
-        name: '下行',
-        value: [112, 333, 150, 60, 99, 50, 102]
-      }
-    ]
-  },
-  trafficSumChart2: {
-    text: '历史流量',
-    title: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-    list: [
-      {
-        name: '上行',
-        value: [132, 101, 134, 90, 120, 132, 101, 134, 90, 230, 210, 120]
-      },
-      {
-        name: '下行',
-        value: [111, 0, 50, 101, 134, 90, 230, 120, 132, 101, 60, 20]
-      }
-    ]
-  }
-}
+import { homeData } from '@/api/report'
 
 export default {
   name: 'dashboard-admin',
   components: { TrafficSumChart, DailyTrafficChart, PortMappingChart, LicenseChart },
   data() {
     return {
-      echartsData: echartsData
+      licenseChart: undefined,
+      portMappingChart: undefined,
+      dailyTrafficChart: undefined,
+      historyTrafficChart: undefined,
+      trafficSumChart: undefined
     }
   },
+  created() {
+    this.getHomeData()
+  },
   mounted() {
   },
   methods: {
-
+    getHomeData() {
+      homeData().then(res => {
+        this.licenseChart = res.data.data.license
+        this.portMappingChart = res.data.data.portMapping
+        this.dailyTrafficChart = Object.assign(res.data.data.todayFlow, { text: '今日流量' })
+        this.historyTrafficChart = Object.assign(res.data.data.totalFlow, { text: '流量汇总' })
+        this.trafficSumChart = this.getChartData(res.data.data.last7dFlow)
+      })
+    },
+    getChartData(last7dFlow) {
+      const title = []
+      const downFlowDesc = []
+      const totalFlowDesc = []
+      const upFlowDesc = []
+      last7dFlow.dataList.forEach(item => {
+        title.push(item.dateStr)
+        totalFlowDesc.push(item.totalFlowDesc)
+        downFlowDesc.push(item.downFlowDesc)
+        upFlowDesc.push(item.upFlowDesc)
+      })
+      const list = []
+      last7dFlow.seriesList.forEach(item => {
+        let label = []
+        if (item.seriesName.indexOf('上') > -1) {
+          label = upFlowDesc
+        } else if (item.seriesName.indexOf('下') > -1) {
+          label = downFlowDesc
+        } else if (item.seriesName.indexOf('总') > -1) {
+          label = totalFlowDesc
+        }
+        list.push({
+          name: item.seriesName,
+          value: item.seriesData,
+          label: label
+        })
+      })
+      return {
+        text: '流量监控',
+        subtext: `最近${last7dFlow.dataList.length || 0}天流量监控`,
+        title: title,
+        list: list
+      }
+    }
   }
 }
 </script>
@@ -127,9 +119,9 @@ export default {
       flex: 0 0 auto;
     }
     .pie-chart{
-      padding-top: 16px;
+      padding-bottom: 16px;
       .el-card{
-        min-height: 300px;
+        min-height: 250px;
       }
     }
   }