首页改造完成,待添加系统信息

web_src/src/components/console.vue

@@ -2,6 +2,10 @@
   <div id="app" style="width: 100%">
     <div class="page-header">
       <div class="page-title">控制台</div>
+      <div class="page-header-btn">
+        <el-button icon="el-icon-info" size="mini" style="margin-right: 1rem;" type="primary" @click="showInfo">平台信息
+        </el-button>
+      </div>
     </div>
     <el-row style="width: 100%">
       <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
@@ -14,7 +18,7 @@
       <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
         <div class="control-cell" id="WorkThreadsLoad" >
           <div style="width:100%; height:100%; ">
-            <consoleMem ref="consoleMem"></consoleMem>
+            <consoleResource ref="consoleResource"></consoleResource>
           </div>
         </div>
       </el-col>
@@ -28,26 +32,25 @@
       <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
         <div class="control-cell" id="WorkThreadsLoad" >
           <div style="width:100%; height:100%; ">
-            <consoleCPU></consoleCPU>
+
+            <consoleMem ref="consoleMem"></consoleMem>
           </div>
         </div>
       </el-col>
       <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
         <div class="control-cell" id="WorkThreadsLoad" >
           <div style="width:100%; height:100%; ">
-            <consoleCPU></consoleCPU>
+            <consoleNodeLoad ref="consoleNodeLoad"></consoleNodeLoad>
           </div>
         </div>
       </el-col>
       <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
         <div class="control-cell" id="WorkThreadsLoad" >
           <div style="width:100%; height:100%; ">
-            <consoleCPU></consoleCPU>
+            <consoleDisk ref="consoleDisk"></consoleDisk>
           </div>
         </div>
       </el-col>
-
-
     </el-row>
   </div>
 </template>
@@ -57,6 +60,9 @@ import uiHeader from '../layout/UiHeader.vue'
 import consoleCPU from './console/ConsoleCPU.vue'
 import consoleMem from './console/ConsoleMEM.vue'
 import consoleNet from './console/ConsoleNet.vue'
+import consoleNodeLoad from './console/ConsoleNodeLoad.vue'
+import consoleDisk from './console/ConsoleDisk.vue'
+import consoleResource from './console/ConsoleResource.vue'
 
 import echarts from 'echarts';
 
@@ -67,7 +73,10 @@ export default {
     uiHeader,
     consoleCPU,
     consoleMem,
-    consoleNet
+    consoleNet,
+    consoleNodeLoad,
+    consoleDisk,
+    consoleResource,
   },
   data() {
     return {
@@ -76,7 +85,10 @@ export default {
   },
   created() {
     this.getSystemInfo();
+    this.getLoad();
+    this.getResourceInfo();
     this.loopForSystemInfo();
+
   },
   destroyed() {
   },
@@ -87,8 +99,10 @@ export default {
       }
       this.timer = setTimeout(()=>{
         this.getSystemInfo();
+        this.getLoad();
         this.timer = null;
         this.loopForSystemInfo()
+        this.getResourceInfo()
       }, 2000)
     },
     getSystemInfo: function (){
@@ -99,11 +113,38 @@ export default {
         if (res.data.code === 0) {
           this.$refs.consoleCPU.setData(res.data.data.cpu)
           this.$refs.consoleMem.setData(res.data.data.mem)
-          this.$refs.consoleNet.setData(res.data.data.net)
+          this.$refs.consoleNet.setData(res.data.data.net, res.data.data.netTotal)
+          this.$refs.consoleDisk.setData(res.data.data.disk)
         }
       }).catch( (error)=> {
       });
+    },
+    getLoad: function (){
+      this.$axios({
+        method: 'get',
+        url: `/api/server/media_server/load`,
+      }).then( (res)=> {
+        if (res.data.code === 0) {
+          this.$refs.consoleNodeLoad.setData(res.data.data)
+        }
+      }).catch( (error)=> {
+      });
+    },
+    getResourceInfo: function (){
+      this.$axios({
+        method: 'get',
+        url: `/api/server/resource/info`,
+      }).then( (res)=> {
+        if (res.data.code === 0) {
+          this.$refs.consoleResource.setData(res.data.data)
+        }
+      }).catch( (error)=> {
+      });
+    },
+    showInfo: function (){
+
     }
+
   }
 };
 </script>