src/views/xtjk/zjjk/zjjk.vue

<template>
  <div>
    <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="font-border">CPU</span>
            </div>
            <div class="flex-display">
              <div class="width-50 font-border">属性</div>
              <div class="font-border">值</div>
            </div>
            <div class="flex-display">
              <div class="width-50">核心数</div>
              <div>{{serverData.xtjkCpu.cpuNum}}</div>
            </div>
            <div class="flex-display">
              <div class="width-50">用户使用率</div>
              <div>{{serverData.xtjkCpu.used}}%</div>
            </div>
            <div class="flex-display">
              <div class="width-50">系统使用率</div>
              <div>{{serverData.xtjkCpu.sys}}%</div>
            </div>
            <div class="flex-display">
              <div class="width-50">当前空闲率</div>
              <div>{{serverData.xtjkCpu.free}}%</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="font-border">内存</span>
            </div>
            <div class="flex-display">
              <div class="width-33 font-border">属性</div>
              <div class="width-33 font-border">内存</div>
              <div class="font-border">JVM</div>
            </div>
            <div class="flex-display">
              <div class="width-33">总内存</div>
              <div class="width-33">{{serverData.xtjkMem.total}}G</div>
              <div>{{serverData.xtjkJvm.total}}M</div>
            </div>
            <div class="flex-display">
              <div class="width-33">已用内存</div>
              <div class="width-33">{{serverData.xtjkMem.used}}G</div>
              <div>{{serverData.xtjkJvm.used}}M</div>
            </div>
            <div class="flex-display">
              <div class="width-33">剩余内存</div>
              <div class="width-33">{{serverData.xtjkMem.free}}G</div>
              <div>{{serverData.xtjkJvm.free}}M</div>
            </div>
            <div class="flex-display">
              <div class="width-33">使用率</div>
              <div class="width-33" v-if="serverData.xtjkMem.usage > 80" style="color:red">{{serverData.xtjkMem.usage}}%</div>
              <div class="width-33" v-else>{{serverData.xtjkMem.usage}}%</div>
              <div>{{serverData.xtjkJvm.usage}}%</div>
            </div>
          </el-card>          
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class=" font-border">服务器信息</span>
            </div>
            <div class="flex-display">
              <div class="width-25 font-border">服务器名称</div>
              <div class="width-25">{{serverData.xtjkSys.computerName}}</div>
              <div class="width-25 font-border">操作系统</div>
              <div>{{serverData.xtjkSys.osName}}</div>
            </div>
            <div class="flex-display">
              <div class="width-25 font-border">服务器IP</div>
              <div class="width-25">{{serverData.xtjkSys.computerIp}}</div>
              <div class="width-25 font-border">系统架构</div>
              <div>{{serverData.xtjkSys.osArch}}</div>
            </div>
          </el-card>          
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class=" font-border">Java虚拟机信息</span>
            </div>
             <div class="flex-display">
              <div class="width-25 font-border">Java名称</div>
              <div class="width-25">{{serverData.xtjkJvm.name}}</div>
              <div class="width-25 font-border">Java版本</div>
              <div>{{serverData.xtjkJvm.version}}</div>
            </div>
             <div class="flex-display">
              <div class="width-25 font-border">启动时间</div>
              <div class="width-25">{{serverData.xtjkJvm.startTime}}</div>
              <div class="width-25 font-border">运行时长</div>
              <div>{{serverData.xtjkJvm.runTime}}</div>
            </div>
            <div class="flex-display">
              <div class="width-25 font-border">安装路径</div>
              <div>{{serverData.xtjkJvm.home}}</div>
            </div>
            <div class="flex-display">
              <div class="width-25 font-border">项目路径</div>
              <div>{{serverData.xtjkSys.userDir}}</div>
            </div>
          </el-card>          
        </el-col>
    </el-row>   
    <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span  class=" font-border">磁盘信息</span>
            </div>
            <div>
              <el-table :data="serverData.sysFiles" stripe style="width: 100%">
                <el-table-column prop="dirName" label="盘符路径" width="180"></el-table-column>
                <el-table-column prop="sysTypeName" label="文件系统" width="180"></el-table-column>
                <el-table-column prop="typeName" label="盘符类型"></el-table-column>
                <el-table-column prop="total" label="总大小"></el-table-column>
                <el-table-column label="可用大小">
                  <template slot-scope="scope">
                    <div v-if="scope.row.free < '20 GB'" style="color:red">{{scope.row.free}}</div>
                    <div v-else>{{scope.row.free}}</div>    
                  </template>
                </el-table-column>
                <el-table-column prop="used" label="已用大小"></el-table-column>
                <el-table-column prop="usage" label="已用百分比"></el-table-column>
              </el-table>
            </div>
          </el-card>          
        </el-col>
    </el-row>   
  </div>
</template>
<script>
import table from "@/utils/mixin/table"
import { getServerInfo } from "@/api/xtjk.js"
export default {
  name: "zjjk",
  components: {  },
  mixins: [table],
  mounted () {
    //sendThis(this);
  },
  computed: {
  },
  data () {
    return {
      serverData: {}
    };
  },
  methods: {
    init (e) {
      this.fetchData()
    },
    // 列表渲染接口
    fetchData () {
      getServerInfo().then(res => {
        if (res.code === 200) {
          this.serverData = res.result
        }
      })
    },
  }
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
.box-card{
  margin: 5px 10px 10px 5px;
}
.flex-display {
  display: flex;
  margin-bottom: 10px;
  border-bottom: 1px solid #e6ebf5;
}
.width-50 {
  width: 50%;
  padding-bottom: 10px;
}
.width-33 {
  width: 33%;
  padding-bottom: 10px;
}
.width-25 {
  width: 25%;
  padding-bottom: 10px;
}
.font-border {
  font-weight: bolder;
}
</style>