From 360a217220cfa522c91e9f4eb9b2bad5288c66db Mon Sep 17 00:00:00 2001
From: rouchen <3133657697@qq.com>
Date: Mon, 3 Jun 2024 21:30:44 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=89=8D=E5=8F=B0=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/connect/connect.js                    | 15 ++++++++++
 .../node-list/dashboard/PanelGroup.vue        | 30 ++++++++++++++-----
 .../overview/dashboard/PanelGroup.vue         | 27 +++++++++++++----
 src/views/statistics/overview/index.vue       | 26 ++++++++++++----
 vue.config.js                                 |  2 +-
 5 files changed, 80 insertions(+), 20 deletions(-)
 create mode 100644 src/api/connect/connect.js

diff --git a/src/api/connect/connect.js b/src/api/connect/connect.js
new file mode 100644
index 0000000..9877f11
--- /dev/null
+++ b/src/api/connect/connect.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export function selectCar(){
+  return request({
+    url: '/connect/select',
+    method: 'post'
+  })
+}
+
+export function selectCarList(){
+  return request({
+    url: '/connect/selectCar',
+    method: 'post'
+  })
+}
diff --git a/src/views/statistics/node-list/dashboard/PanelGroup.vue b/src/views/statistics/node-list/dashboard/PanelGroup.vue
index d72cfb2..ec26e5c 100644
--- a/src/views/statistics/node-list/dashboard/PanelGroup.vue
+++ b/src/views/statistics/node-list/dashboard/PanelGroup.vue
@@ -1,6 +1,7 @@
 <template>
-  <el-row :gutter="40" class="panel-group">
-    <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
+
+  <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"/>
@@ -11,7 +12,7 @@
           </div>
           <count-to
             suffix="台"
-            :duration="3000" :end-val="20" :start-val="0" class="card-panel-num"/>
+            :duration="3000" :end-val="carNum.gatewayNum" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -26,7 +27,7 @@
           </div>
           <count-to
             suffix="台"
-            :duration="3000" :end-val="160" :start-val="0" class="card-panel-num"/>
+            :duration="3000" :end-val="carNum.dataNum" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -41,7 +42,7 @@
           </div>
           <count-to :decimals="2"
                     suffix="%"
-                    :duration="3200" :end-val="63.23" :start-val="0" class="card-panel-num"/>
+                    :duration="3200" :end-val="carNum.overallLoad" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -56,7 +57,7 @@
           </div>
           <count-to
             suffix="辆"
-            :duration="3600" :end-val="13600" :start-val="0" class="card-panel-num"/>
+            :duration="3600" :end-val="carNum.carSum" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -65,15 +66,30 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import {selectCar} from "@/api/connect/connect";
 
 export default {
   components: {
     CountTo
   },
+  data(){
+    return{
+      carNum:{}
+    }
+  },
+  created() {
+    this.selectCarNum()
+  },
   methods: {
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
-    }
+    },
+    selectCarNum(){
+      selectCar().then(res => {
+        console.log('res',res)
+        this.carNum= res.data
+      })
+    },
   }
 }
 </script>
diff --git a/src/views/statistics/overview/dashboard/PanelGroup.vue b/src/views/statistics/overview/dashboard/PanelGroup.vue
index d72cfb2..8e3fc72 100644
--- a/src/views/statistics/overview/dashboard/PanelGroup.vue
+++ b/src/views/statistics/overview/dashboard/PanelGroup.vue
@@ -7,11 +7,11 @@
         </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"/>
+            :duration="3000" :end-val="carNum.gatewayNum" :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="carNum.dataNum" :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="carNum.overallLoad" :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="carNum.carSum" :start-val="0" class="card-panel-num"/>
         </div>
       </div>
     </el-col>
@@ -65,15 +65,30 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import {selectCar} from "@/api/connect/connect";
 
 export default {
   components: {
     CountTo
   },
+  data(){
+    return{
+      carNum:{}
+    }
+  },
+  created() {
+    this.selectCarNum()
+  },
   methods: {
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
-    }
+    },
+    selectCarNum(){
+      selectCar().then(res => {
+        console.log('res',res)
+        this.carNum= res.data
+      })
+    },
   }
 }
 </script>
diff --git a/src/views/statistics/overview/index.vue b/src/views/statistics/overview/index.vue
index 6bc011d..1527176 100644
--- a/src/views/statistics/overview/index.vue
+++ b/src/views/statistics/overview/index.vue
@@ -57,18 +57,18 @@
     <el-row :gutter="32">
       <el-col :lg="8" :sm="24" :xs="24">
         <div class="chart-wrapper">
-          <el-tabs v-model="activeTopName" type="card">
-            <el-tab-pane label="最长在线TOP10" name="最长在线TOP10">
+          <el-tabs v-model="car" 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>
+                  {{ + (o - 1) }} <span style="float:right;">{{ 55- o }}分钟</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>
+                  {{  + (o - 1) }} <span style="float:right;">{{ car.timestamp + (o - 1) }}</span>
                 </div>
               </el-card>
             </el-tab-pane>
@@ -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 {selectCarList} from "@/api/connect/connect";
 
 
 const yType = {
@@ -177,9 +178,17 @@ export default {
       activeName: 1,
       activeTopName: "最长在线TOP10",
       value1: true,
-      value2: true
+      value2: true,
+      car:[]
     }
   },
+  created() {
+    this.selectCarList()
+  },
+  mounted() {
+    // 在组件挂载后更新时间戳
+    this.currentTimestamp = Date.now();
+  },
   methods: {
     handleSetLineChartData(type) {
       if (type){
@@ -188,7 +197,12 @@ export default {
       }else {
         this.lineChartData.yType = yType[this.formInline.user]
       }
-
+    },
+    selectCarList(){
+      selectCarList().then(res => {
+        console.log('res',res)
+        this.car = res.data
+      })
     }
   }
 }
diff --git a/vue.config.js b/vue.config.js
index 58476fd..97e0e1d 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://127.0.0.1:8082`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''