gateway-load-center/src/views/statistics/node-list/index.vue

<template>
  <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>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/node/list">节点列表</router-link>
      </el-menu-item>
    </el-menu>
    <panel-group/>
    <el-row :gutter="10">
      <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">
              <span>节点名称：{{nodeInfo.nodeId}}</span>
              <el-button style="float: right; padding: 3px 0"
                         @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>
                <div style="margin-left: 45px; width: 35px;">CPU</div>
              </el-col>
              <el-col :span="8">
                <el-progress type="dashboard" :percentage="nodeInfo.memory" :color="colors"></el-progress>
                <div style="margin-left: 45px; width: 35px;">内存</div>
              </el-col>
              <el-col :span="8">
                <el-progress type="dashboard" :percentage="nodeInfo.load" :color="colors"></el-progress>
                <div style="margin-left: 45px; width: 35px;">负载</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-col>
      <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>
            <el-button style="float: right; padding: 3px 0"
                       @click="isShowInfo = false"
                       type="text">关闭详情</el-button>
          </div>
          <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>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
export default {
  name: "nodeList",
  components: {
    PanelGroup,
  },
  data() {
    return {
      nodeList: [],
      colors: [
        {color: '#01f21a', percentage: 20},
        {color: '#3ce6be', percentage: 40},
        {color: '#1a8552', percentage: 60},
        {color: '#4159e2', percentage: 80},
        {color: '#f83636', percentage: 90}
      ],
      isShowInfo: false,
      nodeInfoActive: "kafka",
      nodeInfo: {

      }
    }
  },
  created() {
    this.initNodeList()
  },
  methods: {
    showNodeInfo(nodeInfo){
      this.nodeInfo = nodeInfo
      this.isShowInfo = true
    },
    initNodeList: function () {
      for (let i = 0; i < 10; i++) {
        let number = parseInt(Math.random() * 100);
        let cpuNumber = parseInt(Math.random() * 10);
        let memoryNumber = parseInt(Math.random() * 10);
        let loadNumber = parseInt(Math.random() * 10);
        let nodeInfo = {
          nodeId: "node-gateway-" + (i),
          cpu: (number - cpuNumber) < 0 ? number : number - cpuNumber,
          memory: (number - memoryNumber) < 0 ? number : number - memoryNumber,
          load: (number - loadNumber) < 0 ? number : number - loadNumber
        };
        let vehicleInfoList = [];
        // 随机生成节点车辆
        for (let j = 0; j < nodeInfo.load; j++) {
          vehicleInfoList.push({
            vin: "VIN"+parseInt(Math.random() * 10000000000000),
            topic: nodeInfo.nodeId,
            zoning: parseInt(Math.random() * 100 % 16),
          })
        }
        nodeInfo.vehicleInfoList = vehicleInfoList;
        this.nodeList.push(nodeInfo)
      }
    }
  }
}
</script>

<style scoped>
.box-card{
  margin: 10px 0;
}
.app-container{
  padding: 0 20px;
}
</style>