feat 前台数据展示

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'
+  })
+}

src/views/statistics/node-list/dashboard/PanelGroup.vue

@@ -1,4 +1,5 @@
 <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('gatewayNodeSum')">
@@ -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>

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>

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-tabs v-model="car" type="card">
-            <el-tab-pane label="最长在线TOP10" name="最长在线TOP10">
+            <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
+      })
     }
   }
 }

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]: ''