From beb3d4b3a63c94d7f3ae4dd979f1739c3abf9a58 Mon Sep 17 00:00:00 2001
From: zCans <1224895921@qq.com>
Date: Sun, 5 Feb 2023 18:55:02 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/components/DailyTrafficChart.vue    | 118 ++++++++++++++
 .../home/admin/components/LicenseChart.vue    | 111 +++++++++++++
 .../admin/components/PortMappingChart.vue     | 111 +++++++++++++
 .../home/admin/components/TableChart.vue      |  39 +++++
 .../home/admin/components/TrafficSumChart.vue |  97 ++++++++++++
 .../src/views/home/admin/index.copy.vue       | 110 +++++++++++++
 .../src/views/home/admin/index.vue            | 149 +++++++++---------
 7 files changed, 659 insertions(+), 76 deletions(-)
 create mode 100644 neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
 create mode 100644 neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
 create mode 100644 neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
 create mode 100644 neutrino-proxy-admin/src/views/home/admin/components/TableChart.vue
 create mode 100644 neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
 create mode 100644 neutrino-proxy-admin/src/views/home/admin/index.copy.vue

diff --git a/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
new file mode 100644
index 00000000..55a3ade4
--- /dev/null
+++ b/neutrino-proxy-admin/src/views/home/admin/components/DailyTrafficChart.vue
@@ -0,0 +1,118 @@
+<template>
+  <div :class="className" :id="dailyTrafficChart.isHistory ? 'history-traffic-div' : 'daily-traffic-div'" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '160px'
+    },
+    dailyTrafficChart: {
+      type: Object,
+      default: () => {
+        return {
+          upload: 90, // 上行
+          download: 100, // 下行
+          isHistory: false
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartDom: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chartDom.dispose()
+    this.chartDom = null
+  },
+  methods: {
+    initChart() {
+      const isHistory = this.dailyTrafficChart.isHistory
+      this.chartDom = document.getElementById(isHistory ? 'history-traffic-div' : 'daily-traffic-div')
+      this.myChart = echarts.init(this.chartDom)
+      const option = {
+        title: {
+          text: isHistory ? '历史流量' : '今日流量',
+          left: 'center',
+          bottom: '0',
+          textStyle: {
+            fontSize: 12,
+            fontWeight: 800,
+            color: '#6c7a89'
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left'
+        },
+        series: [
+          {
+            name: isHistory ? '历史流量' : '今日流量',
+            type: 'pie',
+            radius: '68%',
+            // 隐藏指示线
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            label: {
+              normal: {
+                show: true,
+                position: 'inner',
+                fontSize: 10,
+                color: '#fff',
+                formatter: (data) => {
+                  return `${data.name}${data.value > 1000 ? '：\n\n' : '：'}${data.value}`
+                }
+              }
+            },
+            data: [
+              {
+                value: this.dailyTrafficChart.upload,
+                name: '上行'
+              },
+              {
+                value: this.dailyTrafficChart.download,
+                name: '下行'
+              }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      option && this.myChart.setOption(option)
+    }
+  }
+}
+</script>
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
new file mode 100644
index 00000000..2877e055
--- /dev/null
+++ b/neutrino-proxy-admin/src/views/home/admin/components/LicenseChart.vue
@@ -0,0 +1,111 @@
+<template>
+  <div :class="className" id="license-div" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '160px'
+    },
+    licenseChart: {
+      type: Object,
+      default: () => {
+        return {
+          onLine: 90, // 进度条最大值
+          total: 100 // 当前进度
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartDom: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chartDom.dispose()
+    this.chartDom = null
+  },
+  methods: {
+    initChart() {
+      this.chartDom = document.getElementById('license-div')
+      this.myChart = echarts.init(this.chartDom)
+      const option = {
+        title: {
+          text: this.licenseChart.onLine,
+          subtext: 'License在线数',
+          left: 'center',
+          top: '32%',
+          textStyle: {
+            fontSize: 22,
+            fontWeight: 800,
+            color: '#c23531',
+            align: 'center'
+          },
+          subtextStyle: {
+            fontSize: 10,
+            fontWeight: 800,
+            color: '#6c7a89'
+          }
+          // bottom:'0'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            // 第一张圆环
+            name: 'License',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            center: ['50%', '50%'],
+            // 隐藏指示线
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            // 隐藏圆环上文字
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              // value当前进度 + 颜色
+              {
+                name: '在线数',
+                value: this.licenseChart.onLine
+              },
+              {
+                name: '离线数',
+                value: this.licenseChart.total - this.licenseChart.onLine
+              }
+            ]
+          }
+        ]
+      }
+      option && this.myChart.setOption(option)
+    }
+  }
+}
+</script>
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
new file mode 100644
index 00000000..d1abe3d9
--- /dev/null
+++ b/neutrino-proxy-admin/src/views/home/admin/components/PortMappingChart.vue
@@ -0,0 +1,111 @@
+<template>
+  <div :class="className" id="port-mapping-div" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '160px'
+    },
+    portMappingChart: {
+      type: Object,
+      default: () => {
+        return {
+          onLine: 90, // 进度条最大值
+          total: 100 // 当前进度
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartDom: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chartDom.dispose()
+    this.chartDom = null
+  },
+  methods: {
+    initChart() {
+      this.chartDom = document.getElementById('port-mapping-div')
+      this.myChart = echarts.init(this.chartDom)
+      const option = {
+        title: {
+          text: this.portMappingChart.onLine,
+          subtext: '端口映射在线数',
+          left: 'center',
+          top: '32%',
+          textStyle: {
+            fontSize: 22,
+            fontWeight: 800,
+            color: '#c23531',
+            align: 'center'
+          },
+          subtextStyle: {
+            fontSize: 10,
+            fontWeight: 800,
+            color: '#6c7a89'
+          }
+          // bottom:'0'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            // 第一张圆环
+            name: '端口映射',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            center: ['50%', '50%'],
+            // 隐藏指示线
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            // 隐藏圆环上文字
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              // value当前进度 + 颜色
+              {
+                name: '在线数',
+                value: this.portMappingChart.onLine
+              },
+              {
+                name: '离线数',
+                value: this.portMappingChart.total - this.portMappingChart.onLine
+              }
+            ]
+          }
+        ]
+      }
+      option && this.myChart.setOption(option)
+    }
+  }
+}
+</script>
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/TableChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/TableChart.vue
new file mode 100644
index 00000000..b11e58cb
--- /dev/null
+++ b/neutrino-proxy-admin/src/views/home/admin/components/TableChart.vue
@@ -0,0 +1,39 @@
+<template>
+  <div id="port-mapping-div" :style="{height:height+'px',width:width}">
+    <el-table
+      :data="tableChart"
+      style="width: 100%"
+      :default-sort = "{prop: 'date', order: 'descending'}"
+      :height="height"
+    >
+      <el-table-column prop="date" label="日期" sortable />
+      <el-table-column prop="name" label="姓名" sortable />
+      <el-table-column prop="address" label="地址" sortable show-overflow-tooltip/>
+    </el-table>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '340'
+    },
+    tableChart: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
diff --git a/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue b/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
new file mode 100644
index 00000000..f9ce735d
--- /dev/null
+++ b/neutrino-proxy-admin/src/views/home/admin/components/TrafficSumChart.vue
@@ -0,0 +1,97 @@
+<template>
+  <div :class="className" id="traffic-sum-div" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '380px'
+    },
+    licenseChart: {
+      type: Object,
+      default: () => {
+        return {
+          onLine: 90, // 进度条最大值
+          total: 100 // 当前进度
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      chartDom: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chartDom.dispose()
+    this.chartDom = null
+  },
+  methods: {
+    initChart() {
+      this.chartDom = document.getElementById('traffic-sum-div')
+      this.myChart = echarts.init(this.chartDom)
+      const option = {
+        title: {
+          text: '今日流量折线图',
+          subtext: '当日0-24时'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['上行', '下行'],
+          left: 'right'
+        },
+        grid: {
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00']
+        },
+        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]
+          }
+        ]
+      }
+      option && this.myChart.setOption(option)
+    }
+  }
+}
+</script>
diff --git a/neutrino-proxy-admin/src/views/home/admin/index.copy.vue b/neutrino-proxy-admin/src/views/home/admin/index.copy.vue
new file mode 100644
index 00000000..e35aef26
--- /dev/null
+++ b/neutrino-proxy-admin/src/views/home/admin/index.copy.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="dashboard-editor-container">
+    <github-corner></github-corner>
+
+    <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData"></line-chart>
+    </el-row>
+
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <raddar-chart></raddar-chart>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <pie-chart></pie-chart>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <bar-chart></bar-chart>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="8">
+      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
+        <transaction-table></transaction-table>
+      </el-col>
+      <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
+        <todo-list></todo-list>
+      </el-col>
+      <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
+        <box-card></box-card>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import GithubCorner from '@/components/GithubCorner'
+import PanelGroup from './components/PanelGroup'
+import LineChart from './components/LineChart'
+import RaddarChart from './components/RaddarChart'
+import PieChart from './components/PieChart'
+import BarChart from './components/BarChart'
+import TransactionTable from './components/TransactionTable'
+import TodoList from './components/TodoList'
+import BoxCard from './components/BoxCard'
+
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
+
+export default {
+  name: 'dashboard-admin',
+  components: {
+    GithubCorner,
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart,
+    TransactionTable,
+    TodoList,
+    BoxCard
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+</style>
diff --git a/neutrino-proxy-admin/src/views/home/admin/index.vue b/neutrino-proxy-admin/src/views/home/admin/index.vue
index e35aef26..6c5d5f1c 100644
--- a/neutrino-proxy-admin/src/views/home/admin/index.vue
+++ b/neutrino-proxy-admin/src/views/home/admin/index.vue
@@ -1,110 +1,107 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner></github-corner>
-
-    <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData"></line-chart>
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart></raddar-chart>
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart></pie-chart>
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart></bar-chart>
-        </div>
-      </el-col>
-    </el-row>
-
     <el-row :gutter="8">
-      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
-        <transaction-table></transaction-table>
+      <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 :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
-        <todo-list></todo-list>
+      <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-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
-        <box-card></box-card>
+    </el-row>
+    <el-row class="line-chart">
+      <el-col :span="24">
+        <el-card>
+          <traffic-sum-chart/>
+        </el-card>
       </el-col>
     </el-row>
-
   </div>
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
-import PanelGroup from './components/PanelGroup'
-import LineChart from './components/LineChart'
-import RaddarChart from './components/RaddarChart'
-import PieChart from './components/PieChart'
-import BarChart from './components/BarChart'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
 
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
+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 = {
+  licenseChart: {
+    total: 100,
+    onLine: 80
   },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
+  portMappingChart: {
+    total: 100,
+    onLine: 25
   },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
+  dailyTrafficChart: {
+    upload: 300,
+    download: 680,
+    isHistory: false
   },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
+  historyTrafficChart: {
+    upload: 4100,
+    download: 9520,
+    isHistory: true
+  },
+  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 弄' }
+  ]
 }
 
 export default {
   name: 'dashboard-admin',
-  components: {
-    GithubCorner,
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart,
-    TransactionTable,
-    TodoList,
-    BoxCard
-  },
+  components: { TrafficSumChart, TableChart, DailyTrafficChart, PortMappingChart, LicenseChart },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      echartsData: echartsData
     }
   },
+  mounted() {
+  },
   methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
+
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard-editor-container {
-  padding: 32px;
+  min-height: calc(100vh - 85px);
+  padding: 16px;
   background-color: rgb(240, 242, 245);
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
+  .line-chart {
+    margin-top: 16px;
   }
 }
 </style>