主机监控

@@ -23,3 +23,14 @@ export function getOperationLogList (data) {
     showLoading: true
   })
 }
+
+/* 
+系统监控 -主机监控
+*/
+export function getServerInfo () {
+  return request({
+    url: SERVER.SERVERAPI + '/rest/xtjk/view/getServerInfo',
+    method: 'get',
+    showLoading: true
+  })
+}

 <template>
   <div>
     <el-row :gutter="20">
-        <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
-        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+        <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">{{serverData.xtjkMem.usage}}%</div>
+              <div>{{serverData.xtjkJvm.usage}}%</div>
+            </div>
+          </el-card>          
+        </el-col>
     </el-row>
     <el-row :gutter="20">
-        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
-        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
-        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
-        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+        <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="4"><div class="grid-content bg-purple"></div></el-col>
-        <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
-        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+        <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.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">安装路径</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 prop="free" label="可用大小"></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>