feat 车辆数据展示 以及负载展示

src/api/connect/connect.js

@@ -13,3 +13,11 @@ export function selectCarList(){
     method: 'post'
   })
 }
+
+
+export function selectNode(){
+  return request({
+    url: '/connect/selectNode',
+    method: 'post',
+  })
+}

src/utils/request.js

@@ -73,7 +73,7 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-  debugger
+
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息

src/views/statistics/node-list/index.vue

@@ -12,9 +12,9 @@
     <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-card class="box-card" :key="nodeInfo.id">
             <div slot="header" class="clearfix">
-              <span>节点名称：{{nodeInfo.nodeId}}</span>
+              <span>节点名称：{{nodeInfo.nodeName}}</span>
               <el-button style="float: right; padding: 3px 0"
                          @click="showNodeInfo(nodeInfo)"
                          type="text">查看详情</el-button>
@@ -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="nodeInfo.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="nodeInfo.memoryUseRate" :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="nodeInfo.nodeWeights" :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 {selectNode} from "@/api/connect/connect";
 export default {
   name: "nodeList",
   components: {
@@ -106,31 +107,36 @@ export default {
       this.nodeInfo = nodeInfo
       this.isShowInfo = true
     },
-    initNodeList: function () {
+    // initNodeList: function () {
-      for (let i = 0; i < 10; i++) {
+    //   for (let i = 0; i < 10; i++) {
-        let number = parseInt(Math.random() * 100);
+    //     let number = parseInt(Math.random() * 100);
-        let cpuNumber = parseInt(Math.random() * 10);
+    //     let cpuNumber = parseInt(Math.random() * 10);
-        let memoryNumber = parseInt(Math.random() * 10);
+    //     let memoryNumber = parseInt(Math.random() * 10);
-        let loadNumber = parseInt(Math.random() * 10);
+    //     let loadNumber = parseInt(Math.random() * 10);
-        let nodeInfo = {
+    //     let nodeInfo = {
-          nodeId: "node-gateway-" + (i),
+    //       nodeId: "node-gateway-" + (i),
-          cpu: (number - cpuNumber) < 0 ? number : number - cpuNumber,
+    //       cpu: (number - cpuNumber) < 0 ? number : number - cpuNumber,
-          memory: (number - memoryNumber) < 0 ? number : number - memoryNumber,
+    //       memory: (number - memoryNumber) < 0 ? number : number - memoryNumber,
-          load: (number - loadNumber) < 0 ? number : number - loadNumber
+    //       load: (number - loadNumber) < 0 ? number : number - loadNumber
-        };
+    //     };
-        let vehicleInfoList = [];
+    //     let vehicleInfoList = [];
-        // 随机生成节点车辆
+    //     // 随机生成节点车辆
-        for (let j = 0; j < nodeInfo.load; j++) {
+    //     for (let j = 0; j < nodeInfo.load; j++) {
-          vehicleInfoList.push({
+    //       vehicleInfoList.push({
-            vin: "VIN"+parseInt(Math.random() * 10000000000000),
+    //         vin: "VIN"+parseInt(Math.random() * 10000000000000),
-            topic: nodeInfo.nodeId,
+    //         topic: nodeInfo.nodeId,
-            zoning: parseInt(Math.random() * 100 % 16),
+    //         zoning: parseInt(Math.random() * 100 % 16),
+    //       })
+    //     }
+    //     nodeInfo.vehicleInfoList = vehicleInfoList;
+    //     this.nodeList.push(nodeInfo)
+    //   }
+    initNodeList(){
+      selectNode().then(res =>{
+        console.log("res",res)
+        this.nodeList = res.data
       })
     }
-        nodeInfo.vehicleInfoList = vehicleInfoList;
-        this.nodeList.push(nodeInfo)
-      }
-    }
   }
 }
 </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="car" type="card">
+          <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">
+                <div v-for="o in car" :key="o.id" class="text item">
-                  {{ + (o - 1) }} <span style="float:right;">{{ 55- o }}分钟</span>
+                 {{ o.vin   }} <span style="float:right;">{{   getMinutesSinceMidnight(o.timestamp) }}分钟</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">
+                <div v-for="o in car" :key="o.id" class="text item">
-                  {{  + (o - 1) }} <span style="float:right;">{{ car.timestamp + (o - 1) }}</span>
+                 {{ o.vin  }} <span style="float:right;">{{ getDateTime(o.timestamp) }}</span>
                 </div>
               </el-card>
             </el-tab-pane>
@@ -83,14 +83,15 @@
               <el-switch
                 style="float: right; display: block"
                 v-model="value1"
+                @change="selectNode(value1)"
                 active-color="#13ce66"
                 inactive-color="#5ab1ef"
                 active-text="正序"
                 inactive-text="倒序">
               </el-switch>
             </div>
-            <div v-for="o in 10" :key="o" class="text item">
+            <div v-for="o in node" :key="o.id" class="text item">
-              {{'node-gateway-' + (o - 1) }} <span style="float:right;">{{(10-o)}}%</span>
+              {{o.nodeName }} <span style="float:right;">{{o.nodeWeights}}%</span>
             </div>
           </el-card>
         </div>
@@ -126,7 +127,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";
+import {selectCarList, selectNode} from "@/api/connect/connect";
 
 
 const yType = {
@@ -175,22 +176,20 @@ export default {
         user: '近7天',
         region: '关闭'
       },
-      activeName: 1,
+      activeName: 0,
       activeTopName: "最长在线TOP10",
       value1: true,
       value2: true,
-      car:[]
+      car:[],
+      node:[]
     }
   },
   created() {
     this.selectCarList()
   },
-  mounted() {
-    // 在组件挂载后更新时间戳
-    this.currentTimestamp = Date.now();
-  },
   methods: {
     handleSetLineChartData(type) {
+      console.log("type",type)
       if (type){
         lineChartData[type].yType = yType[this.formInline.user]
         this.lineChartData = lineChartData[type]
@@ -203,6 +202,35 @@ export default {
         console.log('res',res)
         this.car = res.data
       })
+    },
+    //分钟
+    getMinutesSinceMidnight(timestampString){
+      //当前时间 - timestampString
+      var nowInMilliseconds = Date.now();
+
+      var date = new Date(timestampString);
+
+// 计算时间差（毫秒）
+      var differenceInMilliseconds = nowInMilliseconds - date;
+      return  Math.floor(differenceInMilliseconds / (1000 * 60));
+    },
+    //年月日
+    getDateTime(timestamp){
+      const  date = new Date(timestamp);
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+      return `${year}-${month}-${day}`;
+    },
+    selectNode(value1) {
+      selectNode().then(res => {
+        console.log('node', res)
+        if (value1){
+          this.node = res.data
+        }else {
+          this.node = res.data.reverse()
+        }
+      })
     }
   }
 }