From 951c3db93cb946fda05490dc57afddd7147dd0eb Mon Sep 17 00:00:00 2001
From: DongZeLiang <2746733890@qq.com>
Date: Fri, 19 Apr 2024 15:24:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=9F=E8=BD=BD=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../node-list/dashboard/BarChart.vue          | 103 ++++++++++
 .../node-list/dashboard/LineChart.vue         | 122 +++++++++++
 .../node-list/dashboard/PanelGroup.vue        | 189 ++++++++++++++++++
 .../node-list/dashboard/PieChart.vue          |  80 ++++++++
 .../node-list/dashboard/RaddarChart.vue       | 117 +++++++++++
 .../node-list/dashboard/mixins/resize.js      |  56 ++++++
 src/views/statistics/node-list/index.vue      | 101 +++++++++-
 7 files changed, 765 insertions(+), 3 deletions(-)
 create mode 100644 src/views/statistics/node-list/dashboard/BarChart.vue
 create mode 100644 src/views/statistics/node-list/dashboard/LineChart.vue
 create mode 100644 src/views/statistics/node-list/dashboard/PanelGroup.vue
 create mode 100644 src/views/statistics/node-list/dashboard/PieChart.vue
 create mode 100644 src/views/statistics/node-list/dashboard/RaddarChart.vue
 create mode 100644 src/views/statistics/node-list/dashboard/mixins/resize.js

diff --git a/src/views/statistics/node-list/dashboard/BarChart.vue b/src/views/statistics/node-list/dashboard/BarChart.vue
new file mode 100644
index 0000000..e175369
--- /dev/null
+++ b/src/views/statistics/node-list/dashboard/BarChart.vue
@@ -0,0 +1,103 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"/>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from './mixins/resize'
+
+require('echarts/theme/macarons') // echarts theme
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/statistics/node-list/dashboard/LineChart.vue b/src/views/statistics/node-list/dashboard/LineChart.vue
new file mode 100644
index 0000000..c14c5db
--- /dev/null
+++ b/src/views/statistics/node-list/dashboard/LineChart.vue
@@ -0,0 +1,122 @@
+<template>
+  <div :style="{height:(height + 100)+'px',width:width}">
+    <div :class="className" :style="{height: height+'px',width:width}"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from './mixins/resize'
+
+require('echarts/theme/macarons') // echarts theme
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: Number,
+      default: 350
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({dataList, title, yType} = {}) {
+      this.chart.setOption({
+        title: {
+          text: title,
+          top: 10,
+          textStyle: {
+            height: 100,
+          }
+        },
+        xAxis: {
+          data: yType,
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 60,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: dataList,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/statistics/node-list/dashboard/PanelGroup.vue b/src/views/statistics/node-list/dashboard/PanelGroup.vue
new file mode 100644
index 0000000..d72cfb2
--- /dev/null
+++ b/src/views/statistics/node-list/dashboard/PanelGroup.vue
@@ -0,0 +1,189 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('gatewayNodeSum')">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon class-name="card-panel-icon" icon-class="server"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            网关收集节点数量
+          </div>
+          <count-to
+            suffix="台"
+            :duration="3000" :end-val="20" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+    <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('dataParsingSum')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon class-name="card-panel-icon" icon-class="cascader"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            数据解析节点数量
+          </div>
+          <count-to
+            suffix="台"
+            :duration="3000" :end-val="160" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+    <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('overallLoad')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon class-name="card-panel-icon" icon-class="validCode"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            整体负载
+          </div>
+          <count-to :decimals="2"
+                    suffix="%"
+                    :duration="3200" :end-val="63.23" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+    <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('vehicleOnlineSum')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon class-name="card-panel-icon" icon-class="carAlt"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            车辆在线数
+          </div>
+          <count-to
+            suffix="辆"
+            :duration="3600" :end-val="13600" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  components: {
+    CountTo
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/statistics/node-list/dashboard/PieChart.vue b/src/views/statistics/node-list/dashboard/PieChart.vue
new file mode 100644
index 0000000..3ba4411
--- /dev/null
+++ b/src/views/statistics/node-list/dashboard/PieChart.vue
@@ -0,0 +1,80 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"/>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from './mixins/resize'
+
+require('echarts/theme/macarons') // echarts theme
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              {value: 320, name: 'Industries'},
+              {value: 240, name: 'Technology'},
+              {value: 149, name: 'Forex'},
+              {value: 100, name: 'Gold'},
+              {value: 59, name: 'Forecasts'}
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/statistics/node-list/dashboard/RaddarChart.vue b/src/views/statistics/node-list/dashboard/RaddarChart.vue
new file mode 100644
index 0000000..2a5e27d
--- /dev/null
+++ b/src/views/statistics/node-list/dashboard/RaddarChart.vue
@@ -0,0 +1,117 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"/>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from './mixins/resize'
+
+require('echarts/theme/macarons') // echarts theme
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            {name: 'Sales', max: 10000},
+            {name: 'Administration', max: 20000},
+            {name: 'Information Techology', max: 20000},
+            {name: 'Customer Support', max: 20000},
+            {name: 'Development', max: 20000},
+            {name: 'Marketing', max: 20000}
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/statistics/node-list/dashboard/mixins/resize.js b/src/views/statistics/node-list/dashboard/mixins/resize.js
new file mode 100644
index 0000000..d0410ec
--- /dev/null
+++ b/src/views/statistics/node-list/dashboard/mixins/resize.js
@@ -0,0 +1,56 @@
+import {debounce} from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const {chart} = this
+      chart && chart.resize()
+    }
+  }
+}
diff --git a/src/views/statistics/node-list/index.vue b/src/views/statistics/node-list/index.vue
index cd0cb0a..c111cea 100644
--- a/src/views/statistics/node-list/index.vue
+++ b/src/views/statistics/node-list/index.vue
@@ -8,21 +8,116 @@
         <router-link to="/node/list">节点列表</router-link>
       </el-menu-item>
     </el-menu>
+    <panel-group/>
+    <el-row :gutter="10">
+      <el-col :span="isShowInfo ? 8 : 24" style="height: 800px; overflow-x: auto">
+        <el-col :span="isShowInfo ? 24 : 8" v-for="nodeInfo in nodeList" >
+          <el-card class="box-card" :key="nodeInfo.nodeId">
+            <div slot="header" class="clearfix">
+              <span>节点名称：{{nodeInfo.nodeId}}</span>
+              <el-button style="float: right; padding: 3px 0"
+                         @click="showNodeInfo(nodeInfo)"
+                         type="text">查看详情</el-button>
+            </div>
+            <el-row :gutter="10">
+              <el-col :span="8">
+                <el-progress type="dashboard" :percentage="nodeInfo.cpu" :color="colors"></el-progress>
+                <div style="margin-left: 45px; width: 35px;">CPU</div>
+              </el-col>
+              <el-col :span="8">
+                <el-progress type="dashboard" :percentage="nodeInfo.memory" :color="colors"></el-progress>
+                <div style="margin-left: 45px; width: 35px;">内存</div>
+              </el-col>
+              <el-col :span="8">
+                <el-progress type="dashboard" :percentage="nodeInfo.load" :color="colors"></el-progress>
+                <div style="margin-left: 45px; width: 35px;">负载</div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+      </el-col>
+      <el-col v-if="isShowInfo" :span="16" style="height: 800px; overflow-x: auto">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>收集节点：{{nodeInfo.nodeId}}   在线数：{{nodeInfo.vehicleInfoList.length}}</span>
+            <el-button style="float: right; padding: 3px 0"
+                       @click="isShowInfo = false"
+                       type="text">关闭详情</el-button>
+          </div>
+          <el-col :span="24" style="height: 720px; overflow-x: auto">
+            <el-descriptions v-for="vehicle in nodeInfo.vehicleInfoList"
+                             style="margin-top: 20px"
+                             :title="vehicle.vin" :column="2" border>
+              <el-descriptions-item label="上线时间">2024-4-19 15:13:45</el-descriptions-item>
+              <el-descriptions-item label="在线时长">23分26秒</el-descriptions-item>
+            </el-descriptions>
+          </el-col>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import PanelGroup from './dashboard/PanelGroup'
 export default {
   name: "nodeList",
+  components: {
+    PanelGroup,
+  },
   data() {
-    return {}
+    return {
+      nodeList: [],
+      colors: [
+        {color: '#01f21a', percentage: 20},
+        {color: '#3ce6be', percentage: 40},
+        {color: '#1a8552', percentage: 60},
+        {color: '#4159e2', percentage: 80},
+        {color: '#f83636', percentage: 90}
+      ],
+      isShowInfo: false,
+      nodeInfo: {
+
+      }
+    }
   },
   created() {
+    this.initNodeList()
   },
-  methods: {}
+  methods: {
+    showNodeInfo(nodeInfo){
+      this.nodeInfo = nodeInfo
+      this.isShowInfo = true
+    },
+    initNodeList: function () {
+      for (let i = 0; i < 10; i++) {
+        let number = parseInt(Math.random() * 100);
+        let cpuNumber = parseInt(Math.random() * 10);
+        let memoryNumber = parseInt(Math.random() * 10);
+        let loadNumber = parseInt(Math.random() * 10);
+        let nodeInfo = {
+          nodeId: "node-gateway-" + (i),
+          cpu: (number - cpuNumber) < 0 ? number : number - cpuNumber,
+          memory: (number - memoryNumber) < 0 ? number : number - memoryNumber,
+          load: (number - loadNumber) < 0 ? number : number - loadNumber
+        };
+        let vehicleInfoList = [];
+        // 随机生成节点车辆
+        for (let j = 0; j < nodeInfo.load; j++) {
+          vehicleInfoList.push({
+            vin: "VIN"+parseInt(Math.random() * 10000000000000)
+          })
+        }
+        nodeInfo.vehicleInfoList = vehicleInfoList;
+        this.nodeList.push(nodeInfo)
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+.box-card{
+  margin: 10px 0;
+}
 </style>