统计页面

2024-04-13 12:01:54 +08:00 · 2024-04-13 12:01:54 +08:00 · 4ed5c79003
parent 83b4503a30
commit 4ed5c79003
11 changed files with 814 additions and 8 deletions
--- a/src/assets/icons/svg/carAlt.svg
+++ b/src/assets/icons/svg/carAlt.svg
@ -0,0 +1 @@
+<svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="carAltIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" color="#2329D6"> <title id="carAltIconTitle">Car</title> <path d="M3 12L5 7H7M3 12H2V17H3M3 12H7M18 12L16 7H12M18 12H20C21.1046 12 22 12.8954 22 14V17H20M18 12H12M7 17H16M7 7V12M7 7H12M7 12H12M12 12V7"/> <circle cx="5" cy="17" r="2"/> <circle cx="18" cy="17" r="2"/> </svg>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -50,6 +50,11 @@ export const constantRoutes = [
    component: () => import('@/views/statistics/overview'),
    hidden: true
  },
+  {
+    path: '/node/list',
+    component: () => import('@/views/statistics/node-list'),
+    hidden: true
+  },
  {
    path: '/client/detail',
    component: () => import('@/views/statistics/client-detail'),
--- a/src/views/statistics/client-detail/index.vue
+++ b/src/views/statistics/client-detail/index.vue
@ -1,5 +1,13 @@
 <template>
  <div>
+    <el-menu :default-active="3" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1">
+        <router-link to="/overview">概述</router-link>
+      </el-menu-item>
+      <el-menu-item index="2">
+        <router-link to="/node/list">节点列表</router-link>
+      </el-menu-item>
+    </el-menu>
    FluxMq客户端详情
  </div>
 </template>
--- a/src/views/statistics/node-list/index.vue
+++ b/src/views/statistics/node-list/index.vue
@ -0,0 +1,28 @@
+<template>
+  <div>
+    <el-menu :default-active="'2'" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1">
+        <router-link to="/overview">概述</router-link>
+      </el-menu-item>
+      <el-menu-item index="2">
+        <router-link to="/node/list">节点列表</router-link>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "nodeList",
+  data() {
+    return {}
+  },
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/statistics/overview/dashboard/BarChart.vue
+++ b/src/views/statistics/overview/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>
--- a/src/views/statistics/overview/dashboard/LineChart.vue
+++ b/src/views/statistics/overview/dashboard/LineChart.vue
@ -0,0 +1,136 @@
+<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: '350px'
+    },
+    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({expectedData, actualData} = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+          {
+            name: 'actual',
+            smooth: true,
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#3888fa',
+                lineStyle: {
+                  color: '#3888fa',
+                  width: 2
+                },
+                areaStyle: {
+                  color: '#f3f8ff'
+                }
+              }
+            },
+            data: actualData,
+            animationDuration: 2800,
+            animationEasing: 'quadraticOut'
+          }]
+      })
+    }
+  }
+}
+</script>
--- a/src/views/statistics/overview/dashboard/PanelGroup.vue
+++ b/src/views/statistics/overview/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('newVisitis')">
+        <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('messages')">
+        <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('purchases')">
+        <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('shoppings')">
+        <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>
--- a/src/views/statistics/overview/dashboard/PieChart.vue
+++ b/src/views/statistics/overview/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>
--- a/src/views/statistics/overview/dashboard/RaddarChart.vue
+++ b/src/views/statistics/overview/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>
--- a/src/views/statistics/overview/dashboard/mixins/resize.js
+++ b/src/views/statistics/overview/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()
+    }
+  }
+}
--- a/src/views/statistics/overview/index.vue
+++ b/src/views/statistics/overview/index.vue
@ -1,21 +1,104 @@
 <template>
-  <div>
-    概述
+  <div class="dashboard-editor-container">
+    <el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal">
+      <el-menu-item index="1">
+        <router-link to="/overview">概述</router-link>
+      </el-menu-item>
+      <el-menu-item index="2">
+        <router-link to="/node/list">节点列表</router-link>
+      </el-menu-item>
+    </el-menu>
+    <panel-group @handleSetLineChartData="handleSetLineChartData"/>
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData"/>
+    </el-row>
+
+    <el-row :gutter="32">
+      <el-col :lg="8" :sm="24" :xs="24">
+        <div class="chart-wrapper">
+          <raddar-chart/>
+        </div>
+      </el-col>
+      <el-col :lg="8" :sm="24" :xs="24">
+        <div class="chart-wrapper">
+          <pie-chart/>
+        </div>
+      </el-col>
+      <el-col :lg="8" :sm="24" :xs="24">
+        <div class="chart-wrapper">
+          <bar-chart/>
+        </div>
+      </el-col>
+    </el-row>
+
+
  </div>
 </template>

 <script>
+import PanelGroup from './dashboard/PanelGroup'
+import LineChart from './dashboard/LineChart'
+import RaddarChart from './dashboard/RaddarChart'
+import PieChart from './dashboard/PieChart'
+import BarChart from './dashboard/BarChart'
+
+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: "overview",
+  name: 'overview',
+  components: {
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart
+  },
  data() {
-    return {}
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
  },
-  created() {
-  },
-  methods: {}
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
+  }
 }
 </script>

-<style scoped>
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  background-color: rgb(240, 242, 245);
+  position: relative;

+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
 </style>
				`@ -0,0 +1 @@`
				`<svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="carAltIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" color="#2329D6"> <title id="carAltIconTitle">Car</title> <path d="M3 12L5 7H7M3 12H2V17H3M3 12H7M18 12L16 7H12M18 12H20C21.1046 12 22 12.8954 22 14V17H20M18 12H12M7 17H16M7 7V12M7 7H12M7 12H12M12 12V7"/> <circle cx="5" cy="17" r="2"/> <circle cx="18" cy="17" r="2"/> </svg>`