<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:42:27
-->
<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/view.js"
  export default {
    name: "zjjk",
    components: {},
    mixins: [table],
    mounted () {
      //sendThis(this);
    },
    computed: {
    },
    data () {
      return {
        serverData: {}
      };
    },
    methods: {
      // 列表渲染接口
      /**
       * @description: 列表渲染接口
       * @author: renchao
       */
      queryClick () {
        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>