增加kafka状态和事件处理器状态
parent
ad32f9009d
commit
ca557e73c1
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue