From 4d0fb8ff69ea521ccde1abefacbd2ddf5f09fde4 Mon Sep 17 00:00:00 2001
From: yaoxin <1752800946@qq.com>
Date: Thu, 13 Jun 2024 22:14:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B4=9F=E8=BD=BD=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E8=8A=82=E7=82=B9=E8=B4=9F=E8=BD=BD?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/vehicle/vehicle.js                    | 22 +++++++
 .../node-list/dashboard/PanelGroup.vue        | 22 +++++--
 src/views/statistics/node-list/index.vue      | 24 +++++---
 .../overview/dashboard/PanelGroup.vue         | 22 +++++--
 src/views/statistics/overview/index.vue       | 59 ++++++++++++++++---
 vue.config.js                                 |  2 +-
 6 files changed, 126 insertions(+), 25 deletions(-)
 create mode 100644 src/api/vehicle/vehicle.js

diff --git a/src/api/vehicle/vehicle.js b/src/api/vehicle/vehicle.js
new file mode 100644
index 0000000..e02d453
--- /dev/null
+++ b/src/api/vehicle/vehicle.js
@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+export function loadCenterStatistics() {
+  return request({
+    url: '/loadcenter/LoadCenterStatistics',
+    method: 'get'
+  })
+}
+
+export function getVehicleList() {
+  return request({
+    url: '/loadcenter/GetVehicleList',
+    method: 'get'
+  })
+}
+
+export function getMqttServerList(sort) {
+  return request({
+    url: '/loadcenter/GetMqttServerList?sort=' + sort,
+    method: 'get'
+  })
+}
diff --git a/src/views/statistics/node-list/dashboard/PanelGroup.vue b/src/views/statistics/node-list/dashboard/PanelGroup.vue
index d72cfb2..d543202 100644
--- a/src/views/statistics/node-list/dashboard/PanelGroup.vue
+++ b/src/views/statistics/node-list/dashboard/PanelGroup.vue
@@ -11,7 +11,7 @@
           </div>
           <count-to
             suffix="台"
-            :duration="3000" :end-val="20" :start-val="0" class="card-panel-num"/>
+            :duration="3000" :end-val="LoadCenterStatistics.gatewayNodeCount" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -26,7 +26,7 @@
           </div>
           <count-to
             suffix="台"
-            :duration="3000" :end-val="160" :start-val="0" class="card-panel-num"/>
+            :duration="3000" :end-val="10" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -41,7 +41,7 @@
           </div>
           <count-to :decimals="2"
                     suffix="%"
-                    :duration="3200" :end-val="63.23" :start-val="0" class="card-panel-num"/>
+                    :duration="3200" :end-val="LoadCenterStatistics.entiretyLoad" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -56,7 +56,7 @@
           </div>
           <count-to
             suffix="辆"
-            :duration="3600" :end-val="13600" :start-val="0" class="card-panel-num"/>
+            :duration="3600" :end-val="LoadCenterStatistics.vehicleCount" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -65,12 +65,26 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import {loadCenterStatistics} from "@/api/vehicle/vehicle";
 
 export default {
   components: {
     CountTo
   },
+  data() {
+    return {
+      LoadCenterStatistics: {}
+    }
+  },
+  created() {
+    this.loadCenterStatistics()
+  },
   methods: {
+    loadCenterStatistics(){
+      loadCenterStatistics().then(res => {
+        this.LoadCenterStatistics = res.data
+      })
+    },
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
     }
diff --git a/src/views/statistics/node-list/index.vue b/src/views/statistics/node-list/index.vue
index c6bad4b..9022845 100644
--- a/src/views/statistics/node-list/index.vue
+++ b/src/views/statistics/node-list/index.vue
@@ -11,12 +11,12 @@
     <panel-group/>
     <el-row :gutter="10">
       <el-col :span="isShowInfo ? 8 : 24" style="height: 725px; overflow-x: auto">
-        <el-col :span="isShowInfo ? 24 : 8" v-for="nodeInfo in nodeList" >
-          <el-card class="box-card" :key="nodeInfo.nodeId">
+        <el-col :span="isShowInfo ? 24 : 8" v-for="mqttServer in MqttServerList" >
+          <el-card class="box-card" :key="mqttServer.broker">
             <div slot="header" class="clearfix">
-              <span>节点名称：{{nodeInfo.nodeId}}</span>
+              <span>节点名称：{{mqttServer.topic}}</span>
               <el-button style="float: right; padding: 3px 0"
-                         @click="showNodeInfo(nodeInfo)"
+                         @click="showNodeInfo(mqttServer)"
                          type="text">查看详情</el-button>
             </div>
             <el-descriptions class="margin-top" :column="4" border>
@@ -29,15 +29,15 @@
             </el-descriptions>
             <el-row :gutter="10">
               <el-col :span="8">
-                <el-progress type="dashboard" :percentage="nodeInfo.cpu" :color="colors"></el-progress>
+                <el-progress type="dashboard" :percentage="mqttServer.cpuusage" :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>
+                <el-progress type="dashboard" :percentage="mqttServer.jvmusage" :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>
+                <el-progress type="dashboard" :percentage="mqttServer.nodeLoad" :color="colors"></el-progress>
                 <div style="margin-left: 45px; width: 35px;">负载</div>
               </el-col>
             </el-row>
@@ -76,6 +76,7 @@
 
 <script>
 import PanelGroup from './dashboard/PanelGroup'
+import {getMqttServerList} from "@/api/vehicle/vehicle";
 export default {
   name: "nodeList",
   components: {
@@ -95,13 +96,20 @@ export default {
       nodeInfoActive: "vehicle",
       nodeInfo: {
 
-      }
+      },
+      MqttServerList: []
     }
   },
   created() {
     this.initNodeList()
+    this.getMqttServerList()
   },
   methods: {
+    getMqttServerList(){
+      getMqttServerList(true).then(res => {
+        this.MqttServerList = res.data
+      })
+    },
     showNodeInfo(nodeInfo){
       this.nodeInfo = nodeInfo
       this.isShowInfo = true
diff --git a/src/views/statistics/overview/dashboard/PanelGroup.vue b/src/views/statistics/overview/dashboard/PanelGroup.vue
index d72cfb2..d543202 100644
--- a/src/views/statistics/overview/dashboard/PanelGroup.vue
+++ b/src/views/statistics/overview/dashboard/PanelGroup.vue
@@ -11,7 +11,7 @@
           </div>
           <count-to
             suffix="台"
-            :duration="3000" :end-val="20" :start-val="0" class="card-panel-num"/>
+            :duration="3000" :end-val="LoadCenterStatistics.gatewayNodeCount" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -26,7 +26,7 @@
           </div>
           <count-to
             suffix="台"
-            :duration="3000" :end-val="160" :start-val="0" class="card-panel-num"/>
+            :duration="3000" :end-val="10" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -41,7 +41,7 @@
           </div>
           <count-to :decimals="2"
                     suffix="%"
-                    :duration="3200" :end-val="63.23" :start-val="0" class="card-panel-num"/>
+                    :duration="3200" :end-val="LoadCenterStatistics.entiretyLoad" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -56,7 +56,7 @@
           </div>
           <count-to
             suffix="辆"
-            :duration="3600" :end-val="13600" :start-val="0" class="card-panel-num"/>
+            :duration="3600" :end-val="LoadCenterStatistics.vehicleCount" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -65,12 +65,26 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import {loadCenterStatistics} from "@/api/vehicle/vehicle";
 
 export default {
   components: {
     CountTo
   },
+  data() {
+    return {
+      LoadCenterStatistics: {}
+    }
+  },
+  created() {
+    this.loadCenterStatistics()
+  },
   methods: {
+    loadCenterStatistics(){
+      loadCenterStatistics().then(res => {
+        this.LoadCenterStatistics = res.data
+      })
+    },
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
     }
diff --git a/src/views/statistics/overview/index.vue b/src/views/statistics/overview/index.vue
index 6bc011d..c371f64 100644
--- a/src/views/statistics/overview/index.vue
+++ b/src/views/statistics/overview/index.vue
@@ -60,15 +60,15 @@
           <el-tabs v-model="activeTopName" type="card">
             <el-tab-pane label="最长在线TOP10" name="最长在线TOP10">
               <el-card class="box-card">
-                <div v-for="o in 10" :key="o" class="text item">
-                  {{'VIN123456789' + (o - 1) }} <span style="float:right;">{{56 - o}}分钟</span>
+                <div v-for="vehicle in VehicleList" :key="vehicle.vin" class="text item">
+                  {{vehicle.vin}} <span style="float:right;">{{vehicle.onlineTime}}</span>
                 </div>
               </el-card>
             </el-tab-pane>
             <el-tab-pane label="最新上线车辆" name="最新上线车辆">
               <el-card class="box-card">
-                <div v-for="o in 10" :key="o" class="text item">
-                  {{'VIN123456789' + (o - 1) }} <span style="float:right;">2024-4-13 23:06:5{{(10-o)}}</span>
+                <div v-for="vehicle in VehicleList" :key="vehicle.vin" class="text item">
+                  {{vehicle.vin}} <span style="float:right;">{{(vehicle.time)}}</span>
                 </div>
               </el-card>
             </el-tab-pane>
@@ -89,8 +89,8 @@
                 inactive-text="倒序">
               </el-switch>
             </div>
-            <div v-for="o in 10" :key="o" class="text item">
-              {{'node-gateway-' + (o - 1) }} <span style="float:right;">{{(10-o)}}%</span>
+            <div v-for="mqttServer in MqttServerList" :key="mqttServer.broker" class="text item">
+              {{mqttServer.topic}} <span style="float:right;">{{mqttServer.nodeLoad}}%</span>
             </div>
           </el-card>
         </div>
@@ -99,7 +99,7 @@
         <div class="chart-wrapper">
           <el-card class="box-card">
             <div slot="header" class="clearfix">
-              <span>网关节点负载</span>
+              <span>网关解析节点负载</span>
               <el-switch
                 style="float: right; display: block"
                 v-model="value2"
@@ -126,6 +126,7 @@ import LineChart from './dashboard/LineChart'
 import RaddarChart from './dashboard/RaddarChart'
 import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
+import { getMqttServerList, getVehicleList} from "@/api/vehicle/vehicle";
 
 
 const yType = {
@@ -159,6 +160,14 @@ const lineChartData = {
 }
 
 export default {
+  watch: {
+    'value1': {
+      handler(val) {
+        console.log(val)
+        this.getMqttServerList(val)
+      }
+    }
+  },
   name: 'overview',
   components: {
     PanelGroup,
@@ -177,10 +186,44 @@ export default {
       activeName: 1,
       activeTopName: "最长在线TOP10",
       value1: true,
-      value2: true
+      value2: true,
+      VehicleList: [],
+      MqttServerList: []
     }
   },
+  created() {
+    this.getVehicleList()
+    this.getMqttServerList()
+  },
   methods: {
+    getMqttServerList(){
+      getMqttServerList(this.value1).then(res => {
+        this.MqttServerList = res.data
+      })
+    },
+    //计算上线时间
+    getTimePassed(timestamp) {
+      const now = new Date();
+      const past = new Date(timestamp);
+      let diff = now.getTime() - past.getTime();
+
+      const days = Math.floor(diff / 86400000);
+      diff %= 86400000;
+      const hours = Math.floor(diff / 3600000);
+      diff %= 3600000;
+      const minutes = Math.floor(diff / 60000);
+
+      return `${days}天${hours}小时${minutes}分钟`;
+    },
+    getVehicleList(){
+      getVehicleList().then(res => {
+        this.VehicleList = res.data
+        this.VehicleList.forEach(vehicle => {
+          vehicle.onlineTime = this.getTimePassed(vehicle.connectTime)
+          vehicle.time = new Date(vehicle.connectTime).toLocaleDateString() +' '+ new Date(vehicle.connectTime).toLocaleTimeString()
+        })
+      })
+    },
     handleSetLineChartData(type) {
       if (type){
         lineChartData[type].yType = yType[this.formInline.user]
diff --git a/vue.config.js b/vue.config.js
index 58476fd..27aff71 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
+        target: `http://localhost:9004`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''