From 240f22c51ead747a22edca472e7ac2bde8555d19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=A5=96=E6=9C=9B?= <573413756@qq.com>
Date: Fri, 30 Sep 2022 14:26:39 +0800
Subject: [PATCH] add dashboard page

---
 xiuosiot-frontend/src/api/dashboard/index.js  |  33 ++
 .../layout/components/Sidebar/SidebarItem.vue |   2 +-
 xiuosiot-frontend/src/layout/index.vue        |   2 +-
 xiuosiot-frontend/src/router/index.js         |  30 +-
 .../configuration/transferStation/index.vue   |  15 +
 .../src/views/dashboard/index.vue             | 429 ++++++++++++++++++
 6 files changed, 502 insertions(+), 9 deletions(-)
 create mode 100644 xiuosiot-frontend/src/api/dashboard/index.js
 create mode 100644 xiuosiot-frontend/src/views/configuration/transferStation/index.vue
 create mode 100644 xiuosiot-frontend/src/views/dashboard/index.vue

diff --git a/xiuosiot-frontend/src/api/dashboard/index.js b/xiuosiot-frontend/src/api/dashboard/index.js
new file mode 100644
index 0000000..b66992c
--- /dev/null
+++ b/xiuosiot-frontend/src/api/dashboard/index.js
@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+export function getAlarmLevelCount(data) {
+  return request({
+    url: '/alarmInfo/getAlarmLevelCount',
+    method: 'get',
+    params: data || {}
+  })
+}
+
+export function getRunStatusCount(data) {
+  return request({
+    url: '/device/getRunStatusCount',
+    method: 'get',
+    params: data || {}
+  })
+}
+
+export function getTypeCount(data) {
+  return request({
+    url: '/device/getTypeCount',
+    method: 'get',
+    params: data || {}
+  })
+}
+
+export function getCount(data) {
+  return request({
+    url: '/alarmInfo/getCount',
+    method: 'get',
+    params: data || {}
+  })
+}
diff --git a/xiuosiot-frontend/src/layout/components/Sidebar/SidebarItem.vue b/xiuosiot-frontend/src/layout/components/Sidebar/SidebarItem.vue
index 4688670..72bc94e 100644
--- a/xiuosiot-frontend/src/layout/components/Sidebar/SidebarItem.vue
+++ b/xiuosiot-frontend/src/layout/components/Sidebar/SidebarItem.vue
@@ -69,7 +69,7 @@ export default {
       })
       // When there is only one child router, the child router is displayed by default
       if (showingChildren.length === 1) {
-        if (children[0].name === 'Overview') {
+        if (children[0].name === 'Overview' || children[0].name === 'Dashboard') {
           return true
         } else {
           return false
diff --git a/xiuosiot-frontend/src/layout/index.vue b/xiuosiot-frontend/src/layout/index.vue
index f221cad..f52b6aa 100644
--- a/xiuosiot-frontend/src/layout/index.vue
+++ b/xiuosiot-frontend/src/layout/index.vue
@@ -48,7 +48,7 @@ export default {
       }
     },
     showBreadcrumb() {
-      const whiteList = ['overview', 'terminal/add', 'terminal/plc', 'data/value', 'configuration/development']
+      const whiteList = ['overview', 'terminal/add', 'terminal/plc', 'data/value', 'configuration/development', 'dashboard']
       return whiteList.every((item) => this.$route.path.indexOf(item) === -1)
     }
   },
diff --git a/xiuosiot-frontend/src/router/index.js b/xiuosiot-frontend/src/router/index.js
index b2e7c52..c727d8d 100644
--- a/xiuosiot-frontend/src/router/index.js
+++ b/xiuosiot-frontend/src/router/index.js
@@ -85,7 +85,6 @@ export const constantRoutes = [
     component: () => import('@/views/404'),
     hidden: true
   },
-
   {
     path: '/overview',
     component: Layout,
@@ -97,18 +96,29 @@ export const constantRoutes = [
       meta: { title: '概览', icon: 'overview' }
     }]
   },
+  {
+    path: '/dashboard',
+    component: Layout,
+    meta: {},
+    children: [{
+      path: '',
+      name: 'Dashboard',
+      component: () => import('@/views/dashboard/index'),
+      meta: { title: '设备看板', icon: 'dashboard' }
+    }]
+  },
   {
     path: '/terminal',
     component: Layout,
     name: 'Terminal',
     meta: { title: '设备管理', icon: 'terminal' },
     children: [
-      {
-        path: 'product',
-        name: 'Product',
-        // component: () => import(''),
-        meta: { title: '产品分类', disabled: true }
-      },
+      // {
+      //   path: 'product',
+      //   name: 'Product',
+      //   // component: () => import(''),
+      //   meta: { title: '产品分类', disabled: true }
+      // },
       {
         path: 'add',
         name: 'Add',
@@ -177,6 +187,12 @@ export const constantRoutes = [
         name: 'Development',
         component: () => import('@/views/configuration/development'),
         meta: { title: '组态开发' }
+      },
+      {
+        path: 'transferStation',
+        name: 'TransferStation',
+        component: () => import('@/views/configuration/transferStation'),
+        meta: { title: '变电站' }
       }
     ]
   },
diff --git a/xiuosiot-frontend/src/views/configuration/transferStation/index.vue b/xiuosiot-frontend/src/views/configuration/transferStation/index.vue
new file mode 100644
index 0000000..251f196
--- /dev/null
+++ b/xiuosiot-frontend/src/views/configuration/transferStation/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="app-container">
+    <iframe src="http://localhost:8080/" width="100%" :height="iframeHeight" />
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    iframeHeight() {
+      return window.innerHeight - 185
+    }
+  }
+}
+</script>
diff --git a/xiuosiot-frontend/src/views/dashboard/index.vue b/xiuosiot-frontend/src/views/dashboard/index.vue
new file mode 100644
index 0000000..1c03f47
--- /dev/null
+++ b/xiuosiot-frontend/src/views/dashboard/index.vue
@@ -0,0 +1,429 @@
+<template>
+  <div class="app-container">
+    <div class="header">
+      <el-col :span="6">
+        <div class="bg_green card">
+          <div class="title">设备总数</div>
+          <span class="num">{{ terminalTotalNum }}</span>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="bg_purple card">
+          <div class="title">运行设备总数</div>
+          <span class="num">{{ runningNum }}</span>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="bg_orange card">
+          <div class="title">报警总数</div>
+          <span class="num">{{ alarmTotalNum }}</span>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="bg_blue card">
+          <div class="title">未处理报警总数</div>
+          <span class="num">{{ unprocessedAlarmNum }}</span>
+        </div>
+      </el-col>
+    </div>
+    <div class="body-container">
+      <el-col :span="8">
+        <div class="chart-container">
+          <div class="chart-header">设备类型占比</div>
+          <div class="chart" />
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="chart-container">
+          <div class="chart-header">设备告警类型占比</div>
+          <div class="chart" /></div></el-col>
+      <el-col :span="8">
+        <div class="chart-container">
+          <div class="chart-header">设备运行状态占比</div>
+          <div class="chart" /></div></el-col>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAlarmLevelCount, getRunStatusCount, getTypeCount, getCount } from '@/api/dashboard'
+
+export default {
+  data() {
+    return {
+      myCharts: [],
+      options: [
+        {
+          grid: {
+            left: 0,
+            right: 0
+          },
+          legend: {
+            bottom: '5%',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          series: [{
+            type: 'pie',
+            center: ['50%', '40%'],
+            radius: ['30%', '40%'],
+            clockwise: true,
+            avoidLabelOverlap: true,
+            color: ['#50C4F4', '#C37EFA', '#14C9C9', '#165DFF', '#F7BA1E'],
+            label: {
+              show: true,
+              position: 'outside',
+              formatter: '{a|{b}：{d}%}\n',
+              rich: {
+                a: {
+                  padding: [0, 0, -20, 0]
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                length: 10,
+                length2: 10,
+                lineStyle: {
+                  width: 1
+                }
+              }
+            },
+            emphasis: {
+              scaleSize: 10
+            },
+            data: [{
+              'name': 'RV400-NPU16T-5G-AR100',
+              'value': 1
+            }, {
+              'name': 'RV400-NPU4T-5G-SR100',
+              'value': 2
+            }, {
+              'name': 'M528-A800-5G-HM100',
+              'value': 3
+            }, {
+              'name': 'RV400-4G-FR100',
+              'value': 4
+            }, {
+              'name': 'M168-LoRa-FM100',
+              'value': 5
+            }
+            ]
+          }]
+        },
+        {
+          legend: {
+            bottom: '5%',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          series: [{
+            name: '设备告警类型占比',
+            type: 'pie',
+            radius: '40%',
+            center: ['50%', '40%'],
+            clockwise: true,
+            data: [{
+              value: 1,
+              name: '紧急'
+            }, {
+              value: 2,
+              name: '重要'
+            }, {
+              value: 3,
+              name: '次要'
+            }, {
+              value: 4,
+              name: '提示'
+            }],
+            label: {
+              show: true,
+              position: 'outside',
+              formatter: '{a|{b}}\n{b|{d}%}',
+              rich: {
+                a: {
+                  color: '#606266',
+                  fontWeight: 500
+                },
+                b: {
+                  padding: [5, 0, 0, 0],
+                  color: '#606266',
+                  fontWeight: 500
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            emphasis: {
+              scaleSize: 10
+            }
+          }],
+          color: [
+            '#FF0000',
+            '#F7BA1E',
+            '#00B5C0',
+            '#F3F3F3'
+          ]
+        },
+        {
+          legend: {
+            bottom: '5%',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          series: [{
+            name: '设备运行状态占比',
+            type: 'pie',
+            radius: '40%',
+            center: ['50%', '40%'],
+            clockwise: true,
+            data: [{
+              value: 1,
+              name: '运行'
+            }, {
+              value: 2,
+              name: '警告'
+            }, {
+              value: 3,
+              name: '待机'
+            }],
+            label: {
+              show: true,
+              position: 'outside',
+              formatter: '{a|{b}}\n{b|{d}%}',
+              rich: {
+                a: {
+                  color: '#606266',
+                  fontWeight: 500
+                },
+                b: {
+                  padding: [5, 0, 0, 0],
+                  color: '#606266',
+                  fontWeight: 500
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            emphasis: {
+              scaleSize: 10
+            }
+          }],
+          color: [
+            '#33BFFF',
+            '#F3F3F3',
+            '#F25656'
+          ]
+        }
+      ],
+      animationIndex: [0, 0, 0],
+      index: 0,
+      alarmTotalNum: 0,
+      runningNum: 0,
+      terminalTotalNum: 0,
+      unprocessedAlarmNum: 0
+    }
+  },
+  mounted() {
+    const doms = document.getElementsByClassName('chart')
+    doms.forEach(dom => {
+      this.myCharts.push(this.$echarts.init(dom))
+    })
+    this.getData()
+    window.addEventListener('resize', () => {
+      this.myCharts.forEach(chart => {
+        chart.resize()
+      })
+    })
+    setInterval(this.animation, 3000)
+  },
+  methods: {
+    getData() {
+      getCount().then(res => {
+        this.unprocessedAlarmNum = res.data
+      })
+      getAlarmLevelCount().then(res => {
+        const level0Num = res.data.filter(item => item.alarm_level === 0)[0]?.count || 0
+        const level1Num = res.data.filter(item => item.alarm_level === 1)[0]?.count || 0
+        const level2Num = res.data.filter(item => item.alarm_level === 2)[0]?.count || 0
+        const level3Num = res.data.filter(item => item.alarm_level === 3)[0]?.count || 0
+        const alarmData = [{
+          value: level0Num,
+          name: '紧急'
+        }, {
+          value: level1Num,
+          name: '重要'
+        }, {
+          value: level2Num,
+          name: '次要'
+        }, {
+          value: level3Num,
+          name: '提示'
+        }]
+        this.alarmTotalNum = res.data.reduce((pre, cur) => pre + cur.count, 0)
+        this.options[1].series[0].data = alarmData
+      })
+      getRunStatusCount().then(res => {
+        const status0Num = res.data.filter(item => item.runstatus === 0)[0]?.count || 0
+        const status1Num = res.data.filter(item => item.runstatus === 1)[0]?.count || 0
+        const status2Num = res.data.filter(item => item.runstatus === 2)[0]?.count || 0
+        const runstatusData = [{
+          value: status0Num,
+          name: '运行'
+        }, {
+          value: status1Num,
+          name: '待机'
+        }, {
+          value: status2Num,
+          name: '警告'
+        }]
+        this.runningNum = status0Num
+        this.options[2].series[0].data = runstatusData
+      })
+      getTypeCount().then(res => {
+        const typeData = res.data.map(item => {
+          return { name: item.type, value: item.count }
+        })
+        this.options[0].series[0].data = typeData
+        this.terminalTotalNum = res.data.reduce((pre, cur) => pre + cur.count, 0)
+      })
+      this.myCharts.forEach((chart, index) => {
+        chart.setOption(this.options[index])
+      })
+    },
+    animation() {
+      this.myCharts.forEach((myChart, i) => {
+        const maxIndex = this.options[i].series[0].data.length - 1
+        myChart.dispatchAction({
+          type: 'hideTip',
+          seriesIndex: 0,
+          dataIndex: this.animationIndex[i]
+        })
+        // 显示提示框
+        myChart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: this.animationIndex[i]
+        })
+        // 取消高亮指定的数据图形
+        myChart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: this.animationIndex[i] == 0 ? maxIndex : this.animationIndex[i] - 1
+        })
+        myChart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: this.animationIndex[i]
+        })
+        this.animationIndex[i]++
+        if (this.animationIndex[i] > maxIndex) {
+          this.animationIndex[i] = 0
+        }
+      })
+    },
+    fun() {
+      const myChart = this.myCharts[0]
+      myChart.dispatchAction({
+        type: 'hideTip',
+        seriesIndex: 0,
+        dataIndex: this.index
+      })
+      // 显示提示框
+      myChart.dispatchAction({
+        type: 'showTip',
+        seriesIndex: 0,
+        dataIndex: this.index
+      })
+      // 取消高亮指定的数据图形
+      myChart.dispatchAction({
+        type: 'downplay',
+        seriesIndex: 0,
+        dataIndex: this.index == 0 ? 3 : this.index - 1
+      })
+      myChart.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        dataIndex: this.index
+      })
+      this.index++
+      if (this.index > 3) {
+        this.index = 0
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  margin: 20px;
+  position: relative;
+  color: #ffffff;
+  box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03);
+  border-radius: 10px;
+  height: 160px;
+  font-family: Roboto-Bold, Roboto;
+  .title {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .num {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 40px;
+    font-weight: bold;
+  }
+}
+.chart-container {
+    margin: 20px;
+  box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03);
+  border-radius: 10px;
+  border: 1px solid #e9e9e9;
+  height: 500px;
+  .chart-header {
+    height: 60px;
+    width: 100%;
+    font-size: 14px;
+    font-family: Roboto-Bold, Roboto;
+    font-weight: bold;
+    color: #4d5e80;
+    border-bottom: 1px solid #F5F6F7;
+    padding-left: 25px;
+    padding-top: 20px;
+  }
+  .chart{
+    width: 100%;
+    height: calc(100% - 60px);
+  }
+}
+.bg_green {
+  background-color: #29cc39;
+}
+.bg_purple {
+  background-color: #8833ff;
+}
+.bg_orange {
+  background-color: #ff6633;
+}
+.bg_blue {
+  background-color: #33bfff;
+}
+</style>