tnbapp/src/views/devops/Dashboard.vue

<template>
  <el-container>
    <el-main class="movie-list">
      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>机器节点</span>
          </div>
          <div class="text item">
            <el-table
              :data="machineStatList"
              style="width: 100%"
            >
              <el-table-column
                prop="env"
                label="环境"
              />
              <el-table-column
                prop="total"
                label="总数"
              />
              <el-table-column
                prop="onlineCount"
                label="在线"
              >
                <template slot-scope="scope">
                  <span style="color: green">{{ scope.row.onlineCount }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="offlineCount"
                label="离线"
              >
                <template slot-scope="scope">
                  <span style="color: red">{{ scope.row.offlineCount }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>系统信息</span>
          </div>
          <div class="text item">
            <el-descriptions v-if="sysInfo !== null" class="margin-top" :column="1" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user" />
                  应用版本
                </template>
                <a target="_blank" :href="`https://git.reghao.cn/reghao/bnt/commit/${sysInfo.commitId}`" style="text-decoration-line: none">
                  {{ sysInfo.commitId }}
                </a>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone" />
                  机器地址
                </template>
                {{ sysInfo.ipv4 }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-location-outline" />
                  操作系统
                </template>
                {{ sysInfo.osInfo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets" />
                  JVM
                </template>
                {{ sysInfo.jvmInfo }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-office-building" />
                  启动时间
                </template>
                {{ sysInfo.startAt }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-office-building" />
                  PID
                </template>
                {{ sysInfo.pid }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-main>
  </el-container>
</template>

<script>
import { getDashboard } from '@/api/devops'

export default {
  name: 'Dashboard',
  data() {
    return {
      machineStatList: [],
      sysInfo: null
    }
  },
  created() {
    document.title = 'Dashboard'
    this.getData()
  },
  methods: {
    getData() {
      getDashboard().then(resp => {
        if (resp.code === 0) {
          this.sysInfo = resp.data.sysInfo
          this.machineStatList = resp.data.machineStatList
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    }
  }
}
</script>

<style>
</style>