From 2b9c942b5bc8239d996671458471020bfc269320 Mon Sep 17 00:00:00 2001
From: zCans <1224895921@qq.com>
Date: Sun, 12 Feb 2023 18:06:34 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/components/DailyTrafficChart.vue    |  21 +--
 .../home/admin/components/LicenseChart.vue    |   8 +-
 .../admin/components/PortMappingChart.vue     |   8 +-
 .../home/admin/components/TrafficSumChart.vue |  73 +++++----
 .../src/views/home/admin/index.vue            | 140 +++++++++++-------
 neutrino-proxy-admin/src/views/home/index.vue |   7 +-
 6 files changed, 151 insertions(+), 106 deletions(-)

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 55a3ade4..2f72d52e 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="className" :id="dailyTrafficChart.isHistory ? 'history-traffic-div' : 'daily-traffic-div'" :style="{height:height,width:width}"></div>
+  <div :class="className" :id="chartId" :style="{height:height,width:width}"></div>
 </template>
 
 <script>
@@ -8,6 +8,10 @@ require('echarts/theme/macarons') // echarts theme
 
 export default {
   props: {
+    chartId: {
+      type: String,
+      default: 'daily-traffic-div'
+    },
     className: {
       type: String,
       default: 'chart'
@@ -20,13 +24,13 @@ export default {
       type: String,
       default: '160px'
     },
-    dailyTrafficChart: {
+    data: {
       type: Object,
       default: () => {
         return {
           upload: 90, // 上行
           download: 100, // 下行
-          isHistory: false
+          text: '今日流量'
         }
       }
     }
@@ -48,12 +52,11 @@ export default {
   },
   methods: {
     initChart() {
-      const isHistory = this.dailyTrafficChart.isHistory
-      this.chartDom = document.getElementById(isHistory ? 'history-traffic-div' : 'daily-traffic-div')
+      this.chartDom = document.getElementById(this.chartId)
       this.myChart = echarts.init(this.chartDom)
       const option = {
         title: {
-          text: isHistory ? '历史流量' : '今日流量',
+          text: this.data.text,
           left: 'center',
           bottom: '0',
           textStyle: {
@@ -71,7 +74,7 @@ export default {
         },
         series: [
           {
-            name: isHistory ? '历史流量' : '今日流量',
+            name: this.data.text,
             type: 'pie',
             radius: '68%',
             // 隐藏指示线
@@ -93,11 +96,11 @@ export default {
             },
             data: [
               {
-                value: this.dailyTrafficChart.upload,
+                value: this.data.upload,
                 name: '上行'
               },
               {
-                value: this.dailyTrafficChart.download,
+                value: this.data.download,
                 name: '下行'
               }
             ],
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 2877e055..768576bf 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
@@ -20,7 +20,7 @@ export default {
       type: String,
       default: '160px'
     },
-    licenseChart: {
+    data: {
       type: Object,
       default: () => {
         return {
@@ -51,7 +51,7 @@ export default {
       this.myChart = echarts.init(this.chartDom)
       const option = {
         title: {
-          text: this.licenseChart.onLine,
+          text: this.data.onLine,
           subtext: 'License在线数',
           left: 'center',
           top: '32%',
@@ -94,11 +94,11 @@ export default {
               // value当前进度 + 颜色
               {
                 name: '在线数',
-                value: this.licenseChart.onLine
+                value: this.data.onLine
               },
               {
                 name: '离线数',
-                value: this.licenseChart.total - this.licenseChart.onLine
+                value: this.data.total - this.data.onLine
               }
             ]
           }
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 d1abe3d9..64ac7f68 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
@@ -20,7 +20,7 @@ export default {
       type: String,
       default: '160px'
     },
-    portMappingChart: {
+    data: {
       type: Object,
       default: () => {
         return {
@@ -51,7 +51,7 @@ export default {
       this.myChart = echarts.init(this.chartDom)
       const option = {
         title: {
-          text: this.portMappingChart.onLine,
+          text: this.data.onLine,
           subtext: '端口映射在线数',
           left: 'center',
           top: '32%',
@@ -94,11 +94,11 @@ export default {
               // value当前进度 + 颜色
               {
                 name: '在线数',
-                value: this.portMappingChart.onLine
+                value: this.data.onLine
               },
               {
                 name: '离线数',
-                value: this.portMappingChart.total - this.portMappingChart.onLine
+                value: this.data.total - this.data.onLine
               }
             ]
           }
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 f9ce735d..acb381a7 100644
--- a/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="className" id="traffic-sum-div" :style="{height:height,width:width}"></div>
+  <div :class="className" :id="chartId" :style="{height:height,width:width}"></div>
 </template>
 
 <script>
@@ -8,6 +8,14 @@ require('echarts/theme/macarons') // echarts theme
 
 export default {
   props: {
+    chartId: {
+      type: String,
+      default: 'traffic-sum-div'
+    },
+    data: {
+      type: Object,
+      default: {}
+    },
     className: {
       type: String,
       default: 'chart'
@@ -19,20 +27,12 @@ export default {
     height: {
       type: String,
       default: '380px'
-    },
-    licenseChart: {
-      type: Object,
-      default: () => {
-        return {
-          onLine: 90, // 进度条最大值
-          total: 100 // 当前进度
-        }
-      }
     }
   },
   data() {
     return {
-      chartDom: null
+      chartDom: null,
+      colorList: ['#75ddfa', '#2B81B1', '#53a7e3', '#029fe8', '#015dae']
     }
   },
   mounted() {
@@ -47,18 +47,44 @@ export default {
   },
   methods: {
     initChart() {
-      this.chartDom = document.getElementById('traffic-sum-div')
+      this.chartDom = document.getElementById(this.chartId)
       this.myChart = echarts.init(this.chartDom)
+      const seriesList = []
+      const legendList = []
+      this.data.list.forEach((item, index) => {
+        seriesList.push({
+          name: item.name,
+          type: 'line',
+          stack: 'Total',
+          data: item.value,
+          areaStyle: {
+            normal: {
+              color: this.colorList[index] + '7f'
+            }
+          },
+          lineStyle: {
+            normal: {
+              color: this.colorList[index]
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: this.colorList[index]
+            }
+          }
+        })
+        legendList.push(item.name)
+      })
       const option = {
         title: {
-          text: '今日流量折线图',
-          subtext: '当日0-24时'
+          text: this.data.text + '折线图',
+          subtext: this.data.subtext || ''
         },
         tooltip: {
           trigger: 'axis'
         },
         legend: {
-          data: ['上行', '下行'],
+          data: legendList,
           left: 'right'
         },
         grid: {
@@ -70,25 +96,12 @@ export default {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00']
+          data: this.data.title
         },
         yAxis: {
           type: 'value'
         },
-        series: [
-          {
-            name: '上行',
-            type: 'line',
-            stack: 'Total',
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: '下行',
-            type: 'line',
-            stack: 'Total',
-            data: [220, 182, 191, 234, 290, 330, 310]
-          }
-        ]
+        series: seriesList
       }
       option && this.myChart.setOption(option)
     }
diff --git a/neutrino-proxy-admin/src/views/home/admin/index.vue b/neutrino-proxy-admin/src/views/home/admin/index.vue
index 6c5d5f1c..f48dbb5e 100644
--- a/neutrino-proxy-admin/src/views/home/admin/index.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/index.vue
@@ -1,45 +1,44 @@
 <template>
-  <div class="dashboard-editor-container">
-    <el-row :gutter="8">
-      <el-col :span="12">
-        <el-card class="box-card">
-          <el-row>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="12">
-                  <license-chart :licenseChart="echartsData.licenseChart"/>
-                </el-col>
-                <el-col :span="12">
-                  <port-mapping-chart :portMappingChart="echartsData.portMappingChart"/>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="12">
-                  <daily-traffic-chart :dailyTrafficChart="echartsData.dailyTrafficChart"/>
-                </el-col>
-                <el-col :span="12">
-                  <daily-traffic-chart :dailyTrafficChart="echartsData.historyTrafficChart"/>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card class="box-card">
-          <el-col :span="24">
-            <table-chart :tableChart="echartsData.tableChart"/>
-          </el-col>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row class="line-chart">
-      <el-col :span="24">
-        <el-card>
-          <traffic-sum-chart/>
-        </el-card>
-      </el-col>
-    </el-row>
+  <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"/>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="box-card">
+            <port-mapping-chart :data="echartsData.portMappingChart"/>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="box-card">
+            <daily-traffic-chart :data="echartsData.dailyTrafficChart" :chartId="'daily-traffic-div'"/>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="box-card">
+            <daily-traffic-chart :data="echartsData.historyTrafficChart" :chartId="'history-traffic-div'"/>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
@@ -48,7 +47,6 @@
 import LicenseChart from './components/LicenseChart'
 import PortMappingChart from './components/PortMappingChart'
 import DailyTrafficChart from './components/DailyTrafficChart'
-import TableChart from './components/TableChart'
 import TrafficSumChart from './components/TrafficSumChart'
 
 const echartsData = {
@@ -63,25 +61,47 @@ const echartsData = {
   dailyTrafficChart: {
     upload: 300,
     download: 680,
-    isHistory: false
+    text: '今日流量'
   },
   historyTrafficChart: {
     upload: 4100,
     download: 9520,
-    isHistory: true
+    text: '历史流量'
   },
-  tableChart: [
-    { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
-    { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
-    { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
-    { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' },
-    { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }
-  ]
+  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]
+      }
+    ]
+  }
 }
 
 export default {
   name: 'dashboard-admin',
-  components: { TrafficSumChart, TableChart, DailyTrafficChart, PortMappingChart, LicenseChart },
+  components: { TrafficSumChart, DailyTrafficChart, PortMappingChart, LicenseChart },
   data() {
     return {
       echartsData: echartsData
@@ -96,12 +116,20 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.dashboard-editor-container {
+.dashboard-editor{
   min-height: calc(100vh - 85px);
   padding: 16px;
-  background-color: rgb(240, 242, 245);
-  .line-chart {
-    margin-top: 16px;
+  background-color: #f5f7fa;
+  .container {
+    display: flex;
+    flex-direction: column;
+    .line-chart, .pie-chart{
+      flex: 0 0 auto;
+    }
+    .pie-chart{
+      padding-top: 16px;
+    }
   }
 }
+
 </style>
diff --git a/neutrino-proxy-admin/src/views/home/index.vue b/neutrino-proxy-admin/src/views/home/index.vue
index 046f6e30..14b02149 100644
--- a/neutrino-proxy-admin/src/views/home/index.vue
+++ b/neutrino-proxy-admin/src/views/home/index.vue
@@ -23,9 +23,10 @@ export default {
     ])
   },
   created() {
-    if (!this.roles.includes('admin')) {
-      this.currentRole = 'editorDashboard'
-    }
+    // 游客首页
+    // if (!this.roles.includes('admin')) {
+    //   this.currentRole = 'editorDashboard'
+    // }
   }
 }
 </script>