增加kafka状态和事件处理器状态

master
DongZeLiang 2024-05-16 17:17:24 +08:00
parent ad32f9009d
commit ca557e73c1
1 changed files with 27 additions and 15 deletions

View File

@ -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>