增加节点状态

车辆负载均衡点

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="width: 99%; min-width: 1820px;">
     <el-menu :default-active="'2'" class="el-menu-demo" mode="horizontal">
       <el-menu-item index="1">
         <router-link to="/overview">概述</router-link>
@@ -10,7 +10,7 @@
     </el-menu>
     <panel-group/>
     <el-row :gutter="10">
-      <el-col :span="isShowInfo ? 8 : 24" style="height: 800px; overflow-x: auto">
+      <el-col :span="isShowInfo ? 8 : 24" :style="{height: mainHeight + 'px'}" style="overflow-x: auto">
         <el-col :span="isShowInfo ? 24 : 8" v-for="nodeInfo in nodeList" >
           <el-card class="box-card" :key="nodeInfo.nodeId">
             <div slot="header" class="clearfix">
@@ -19,6 +19,14 @@
                          @click="showNodeInfo(nodeInfo)"
                          type="text">查看详情</el-button>
             </div>
+            <el-descriptions class="margin-top" :column="4" border>
+              <el-descriptions-item>
+                <template slot="label"> 节点状态 </template>
+                <el-tag type="info" v-if="nodeInfo.load === 0">启动中</el-tag>
+                <el-tag type="success" v-if="nodeInfo.load < 80">活跃</el-tag>
+                <el-tag type="danger" v-if="nodeInfo.load >= 80">不活跃</el-tag>
+              </el-descriptions-item>
+            </el-descriptions>
             <el-row :gutter="10">
               <el-col :span="8">
                 <el-progress type="dashboard" :percentage="nodeInfo.cpu" :color="colors"></el-progress>
@@ -36,7 +44,7 @@
           </el-card>
         </el-col>
       </el-col>
-      <el-col v-if="isShowInfo" :span="16" style="height: 800px; overflow-x: auto">
+      <el-col v-if="isShowInfo" :span="16" :style="{height: mainHeight + 'px'}" style="overflow-x: auto">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>收集节点：{{nodeInfo.nodeId}}   在线数：{{nodeInfo.vehicleInfoList.length}}</span>
@@ -44,12 +52,14 @@
                        @click="isShowInfo = false"
                        type="text">关闭详情</el-button>
           </div>
-          <el-col :span="24" style="height: 720px; overflow-x: auto">
+          <el-col :span="24" :style="{height: mainHeight-90 + 'px'}" style="overflow-x: auto">
             <el-descriptions v-for="vehicle in nodeInfo.vehicleInfoList"
                              style="margin-top: 20px"
                              :title="vehicle.vin" :column="2" border>
               <el-descriptions-item label="上线时间">2024-4-19 15:13:45</el-descriptions-item>
               <el-descriptions-item label="在线时长">23分26秒</el-descriptions-item>
+              <el-descriptions-item label="kafka主题">{{vehicle.topic}}</el-descriptions-item>
+              <el-descriptions-item label="kafka负载分区">{{vehicle.zoning}}</el-descriptions-item>
             </el-descriptions>
           </el-col>
         </el-card>
@@ -76,9 +86,8 @@ export default {
         {color: '#f83636', percentage: 90}
       ],
       isShowInfo: false,
-      nodeInfo: {
+      nodeInfo: {},
-
+      mainHeight: window.innerHeight - 230,
-      }
     }
   },
   created() {
@@ -105,7 +114,9 @@ export default {
         // 随机生成节点车辆
         for (let j = 0; j < nodeInfo.load; j++) {
           vehicleInfoList.push({
-            vin: "VIN"+parseInt(Math.random() * 10000000000000)
+            vin: "VIN"+parseInt(Math.random() * 10000000000000),
+            topic: nodeInfo.nodeId,
+            zoning: parseInt(Math.random() * 100 % 16),
           })
         }
         nodeInfo.vehicleInfoList = vehicleInfoList;

src/views/statistics/overview/index.vue

@@ -117,7 +117,6 @@
       </el-col>
     </el-row>
 
-
   </div>
 </template>