feat(): 增加简略统计图

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "0.21.4",
     "core-js": "3.6.5",
+    "echarts": "^5.5.0",
     "element-ui": "2.15.14",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",

src/api/vehicle/overview.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function vehicleOverview() {
+  return request({
+    url: '/vehicle/overview',
+    method: 'get'
+  })
+}

src/components/Breadcrumb/index.vue

@@ -2,7 +2,7 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+        <span v-if="item.redirect==='noRedirect'||index===levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
@@ -31,11 +31,11 @@ export default {
       // only show routes with meta.title
       let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
       const first = matched[0]
-
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
+      } else {
+        matched = [{ path: '/dashboard', meta: { title: '首页' }}]
       }
-
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
     },
     isDashboard(route) {
@@ -43,7 +43,7 @@ export default {
       if (!name) {
         return false
       }
-      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+      return name.trim() === '首页'
     },
     pathCompile(path) {
       // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561

src/views/dashboard/index.vue

@@ -1,18 +1,105 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">name: {{ name }}</div>
+    <div class="dashboard-text">{{ name }}</div>
+    <el-divider />
+    <div
+      id="vehicleStatus"
+      :style=" { 'width': vehicleStatusWidth+'%', 'height': vehicleStatusHeight+'px', 'margin': '0 auto' }"/>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import * as echarts from 'echarts'
+import { vehicleOverview } from '@/api/vehicle/overview'
 
 export default {
   name: 'Dashboard',
+  data() {
+    return {
+      vehicleStatusChart: null,
+      vehicleStatusWidth: 50,
+      vehicleStatusHeight: window.innerHeight - 300,
+      dataMap: {
+        online: 0,
+        offline: 2,
+        pause: 0
+      }
+    }
+  },
   computed: {
     ...mapGetters([
       'name'
     ])
+  },
+  watch: {
+    dataMap() {
+      this.initVehicleStatus()
+    }
+  },
+  created() {
+    setInterval(this.getVehicleOverview, 5000)
+  },
+  mounted() {
+    this.vehicleStatusChart = echarts.init(document.getElementById('vehicleStatus'))
+    this.initVehicleStatus()
+    window.addEventListener('resize', this.initVehicleStatus)
+  },
+  methods: {
+    getVehicleOverview() {
+      vehicleOverview().then(response => {
+        this.dataMap = response.data
+      })
+    },
+    initVehicleStatus() {
+      this.vehicleStatusChart.setOption({
+        title: {
+          text: '系统模拟车辆状态统计一览',
+          left: 'center',
+          textStyle: {
+            fontWeight: 1000,
+            fontSize: 26
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 10
+            },
+            label: {
+              show: true,
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: [
+              { value: this.dataMap.pause, name: '暂停车辆' },
+              { value: this.dataMap.online, name: '在线车辆' },
+              { value: this.dataMap.offline, name: '离线车辆' }
+            ]
+          }
+        ]
+      })
+    }
   }
 }
 </script>
@@ -23,8 +110,15 @@ export default {
     margin: 30px;
   }
   &-text {
-    font-size: 30px;
-    line-height: 46px;
+    font-size: 46px;
+    line-height: 60px;
+    text-align: center;
+    font-weight: 900;
+    font-family: cursive;
   }
 }
+.el-divider {
+  background-color: #575757;
+  position: relative;
+}
 </style>

src/views/vehicle/index.vue

@@ -9,7 +9,8 @@
         <el-button @click="vehicleUnifiedSend" type="primary">一键上报</el-button>
         <el-button @click="vehicleUnifiedPosition" type="primary">一键重置路径</el-button>
         <el-button @click="vehicleUnifiedStop" type="warning">一键取消上报</el-button>
-        <el-popover v-if="unifiedInfo.unifiedStatus"
+        <el-popover
+          v-if="unifiedInfo.unifiedStatus"
           style="margin-left: 15px"
           placement="top-start"
           title="任务执行状态"