yangle-wangannan
/
gateway-load-center
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

master
DongZeLiang 2024-05-16 17:17:24 +08:00
parent ad32f9009d
commit ca557e73c1
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/statistics/node-list/index.vue
View File

@ -1,5 +1,5 @@
<template> <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 :default-active="'2'" class="el-menu-demo" mode="horizontal">
<el-menu-item index="1"> <el-menu-item index="1">
<router-link to="/overview">概述</router-link> <router-link to="/overview">概述</router-link>
@ -10,7 +10,7 @@
</el-menu> </el-menu>
<panel-group/> <panel-group/>
<el-row :gutter="10"> <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-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.nodeId">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
@ -44,7 +44,7 @@
</el-card> </el-card>
</el-col> </el-col>
</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"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>收集节点：{{nodeInfo.nodeId}} 在线数：{{nodeInfo.vehicleInfoList.length}}</span> <span>收集节点：{{nodeInfo.nodeId}} 在线数：{{nodeInfo.vehicleInfoList.length}}</span>
@ -52,16 +52,23 @@
@click="isShowInfo = false" @click="isShowInfo = false"
type="text">关闭详情</el-button> type="text">关闭详情</el-button>
</div> </div>
<el-col :span="24" :style="{height: mainHeight-90 + 'px'}" style="overflow-x: auto"> <el-tabs v-model="nodeInfoActive">
<el-descriptions v-for="vehicle in nodeInfo.vehicleInfoList" <el-tab-pane label="kafka状态" name="kafka">用户管理</el-tab-pane>
style="margin-top: 20px" <el-tab-pane label="事件处理器" name="event">配置管理</el-tab-pane>
:title="vehicle.vin" :column="2" border> <el-tab-pane label="在线车辆" name="vehicle">
<el-descriptions-item label="上线时间">2024-4-19 15:13:45</el-descriptions-item> <el-row :gutter="20" style="height: 570px; overflow-x: auto">
<el-descriptions-item label="在线时长">23分26秒</el-descriptions-item> <el-col :span="12" v-for="vehicle in nodeInfo.vehicleInfoList">
<el-descriptions-item label="kafka主题">{{vehicle.topic}}</el-descriptions-item> <el-descriptions style="margin-top: 20px"
<el-descriptions-item label="kafka负载分区">{{vehicle.zoning}}</el-descriptions-item> :title="vehicle.vin" :column="2" border>
</el-descriptions> <el-descriptions-item label="上线时间">2024-4-19 15:13:45</el-descriptions-item>
</el-col> <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-card>
</el-col> </el-col>
</el-row> </el-row>
@ -86,8 +93,10 @@ export default {
{color: '#f83636', percentage: 90} {color: '#f83636', percentage: 90}
], ],
isShowInfo: false, isShowInfo: false,
nodeInfo: {}, nodeInfoActive: "kafka",
mainHeight: window.innerHeight - 230, nodeInfo: {
}
} }
}, },
created() { created() {
@ -131,4 +140,7 @@ export default {
.box-card{ .box-card{
margin: 10px 0; margin: 10px 0;
} }
.app-container{
padding: 0 20px;
}
</style> </style>