From ca557e73c156e69f4948f9e7ddc988e93c3501da Mon Sep 17 00:00:00 2001
From: DongZeLiang <2746733890@qq.com>
Date: Thu, 16 May 2024 17:17:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0kafka=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E5=92=8C=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=E5=99=A8=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/statistics/node-list/index.vue | 42 +++++++++++++++---------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/views/statistics/node-list/index.vue b/src/views/statistics/node-list/index.vue
index 77af0b3..0d94506 100644
--- a/src/views/statistics/node-list/index.vue
+++ b/src/views/statistics/node-list/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 99%; min-width: 1820px;">
+  <div class="app-container">
     <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: mainHeight + 'px'}" style="overflow-x: auto">
+      <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">
             <div slot="header" class="clearfix">
@@ -44,7 +44,7 @@
           </el-card>
         </el-col>
       </el-col>
-      <el-col v-if="isShowInfo" :span="16" :style="{height: mainHeight + 'px'}" style="overflow-x: auto">
+      <el-col v-if="isShowInfo" :span="16" style="height: 725px; overflow-x: auto">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>收集节点：{{nodeInfo.nodeId}}   在线数：{{nodeInfo.vehicleInfoList.length}}</span>
@@ -52,16 +52,23 @@
                        @click="isShowInfo = false"
                        type="text">关闭详情</el-button>
           </div>
-          <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-tabs v-model="nodeInfoActive">
+            <el-tab-pane label="kafka状态" name="kafka">用户管理</el-tab-pane>
+            <el-tab-pane label="事件处理器" name="event">配置管理</el-tab-pane>
+            <el-tab-pane label="在线车辆" name="vehicle">
+              <el-row :gutter="20" style="height: 570px; overflow-x: auto">
+                <el-col :span="12" v-for="vehicle in nodeInfo.vehicleInfoList">
+                  <el-descriptions 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-row>
+            </el-tab-pane>
+          </el-tabs>
         </el-card>
       </el-col>
     </el-row>
@@ -86,8 +93,10 @@ export default {
         {color: '#f83636', percentage: 90}
       ],
       isShowInfo: false,
-      nodeInfo: {},
-      mainHeight: window.innerHeight - 230,
+      nodeInfoActive: "kafka",
+      nodeInfo: {
+
+      }
     }
   },
   created() {
@@ -131,4 +140,7 @@ export default {
 .box-card{
   margin: 10px 0;
 }
+.app-container{
+  padding: 0 20px;
+}
 </style>