update 统计图优化

Web/src/pages/home/charts.vue

@@ -99,6 +99,9 @@ export default {
     var chartDom = this.$refs.chart;
     var myChart = echarts.init(chartDom);
     myChart.setOption(this.options);
+          window.addEventListener("resize",function(){
+        myChart.resize();
+      })
   },
 };
 </script>

Web/src/pages/system/machine/index.vue

@@ -4,63 +4,188 @@
     <Auth auth="sysMachine:query">
       <a-row :gutter="24">
         <a-col :md="12" :sm="24">
-          <a-card :bordered="false" :loading="loading" style="margin-bottom: 20px" title="系统信息">
+          <a-card
+            :bordered="false"
+            :loading="loading"
+            style="margin-bottom: 20px"
+            title="系统信息"
+          >
             <template>
               <a-descriptions bordered>
-                <a-descriptions-item :span="3" label="主机名称：">{{ machineBaseInfo.hostName }}</a-descriptions-item>
-                <a-descriptions-item :span="3" label="操作系统：">{{ machineBaseInfo.systemOs }}</a-descriptions-item>
-                <a-descriptions-item :span="3" label="系统架构：">{{ machineBaseInfo.osArchitecture }}</a-descriptions-item>
-                <a-descriptions-item
-                  :span="3"
-                  label="运行框架："
-                >{{ machineBaseInfo.frameworkDescription }}</a-descriptions-item>
-                <a-descriptions-item label="CPU核数:">{{ machineBaseInfo.processorCount }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="主机名称：">{{
+                  machineBaseInfo.hostName
+                }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="操作系统：">{{
+                  machineBaseInfo.systemOs
+                }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="系统架构：">{{
+                  machineBaseInfo.osArchitecture
+                }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="运行框架：">{{
+                  machineBaseInfo.frameworkDescription
+                }}</a-descriptions-item>
+                 <a-descriptions-item :span="3" label="运行时间：">{{
+              machineUseInfo.runTime
+            }}</a-descriptions-item>
               </a-descriptions>
             </template>
           </a-card>
         </a-col>
         <a-col :md="12" :sm="24">
-          <a-card :bordered="false" :loading="loading" style="margin-bottom: 20px" title="网络信息">
+          <a-card
+            :bordered="false"
+            :loading="loading"
+            style="margin-bottom: 20px"
+            title="网络信息"
+          >
             <template>
               <a-descriptions bordered>
                 <a-descriptions-item
                   :span="3"
                   label="外网信息："
                   style="ant-descriptions-item-label ant-descriptions-item-colon"
-                >{{ machineBaseInfo.wanIp }}</a-descriptions-item>
-                <a-descriptions-item :span="3" label="IPv4地址：">{{ machineBaseInfo.lanIp }}</a-descriptions-item>
-                <a-descriptions-item :span="3" label="网卡MAC：">{{ machineBaseInfo.ipMac }}</a-descriptions-item>
-                <a-descriptions-item
-                  :span="3"
-                  label="流量统计："
-                >{{ machineNetworkInfo.sendAndReceived }}</a-descriptions-item>
-                <a-descriptions-item label="网络速度：:">{{ machineNetworkInfo.networkSpeed }}</a-descriptions-item>
+                  >{{ machineBaseInfo.wanIp }}</a-descriptions-item
+                >
+                <a-descriptions-item :span="3" label="IPv4地址：">{{
+                  machineBaseInfo.lanIp
+                }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="网卡MAC：">{{
+                  machineBaseInfo.ipMac
+                }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="流量统计：">{{
+                  machineNetworkInfo.sendAndReceived
+                }}</a-descriptions-item>
+                <a-descriptions-item label="网络速度：:">{{
+                  machineNetworkInfo.networkSpeed
+                }}</a-descriptions-item>
               </a-descriptions>
             </template>
           </a-card>
         </a-col>
       </a-row>
-      <a-card :bordered="false" :loading="loading" title="其他信息">
+         <a-row :gutter="24">
+        <a-col :md="12" :sm="24">
+          <a-card 
+          :bordered="false" 
+          style="margin-bottom: 20px;height:340px"
+          :loading="loading"
+           :title="Cputitle">
         <template>
-          <a-descriptions bordered>
-            <a-descriptions-item :span="3" label="运行时间：">{{ machineUseInfo.runTime }}</a-descriptions-item>
-            <a-descriptions-item :span="3" label="CPU使用率：">{{ machineUseInfo.cpuRate }}</a-descriptions-item>
-            <a-descriptions-item :span="3" label="总内存：">{{ machineUseInfo.totalRam }}</a-descriptions-item>
-            <a-descriptions-item :span="2" label="内存使用率：">{{ machineUseInfo.ramRate }}</a-descriptions-item>
-          </a-descriptions>
+          <p>CPU使用率为:</p>
+                <div class="Ramcpu" ref="cpuchart"></div>
         </template>
       </a-card>
+        </a-col>
+        <a-col :md="12" :sm="24">
+          <a-card
+            :bordered="false"
+            :loading="loading"
+            style="margin-bottom: 20px;height:340px"
+            :title="Ramtitle"
+          >
+            <template>
+              <p>内存使用率为:</p>
+                <div 
+                class="Ramcpu"
+                 ref="Ramchart"></div>
+            </template>
+          </a-card>
+        </a-col>
+      </a-row>
+      <!-- <a-card :bordered="false" :loading="loading" title="其他信息">
+        <template>
+          <a-descriptions bordered>
+            <a-descriptions-item :span="3" label="CPU使用率：">
+              {{machineUseInfo.cpuRate}}
+              </a-descriptions-item>
+            <a-descriptions-item :span="3" label="总内存：">{{
+              machineUseInfo.totalRam
+            }}</a-descriptions-item>
+            <a-descriptions-item :span="2" label="内存使用率：" >{{
+              machineUseInfo.ramRate
+            }}</a-descriptions-item>
+          </a-descriptions>
+        </template>
+      </a-card> -->
     </Auth>
   </container>
 </template>
 <script>
+import * as echarts from 'echarts';
 export default {
   data() {
     return {
       loading: false,
       machineBaseInfo: [],
       machineUseInfo: [],
+      Cputitle:'',
+      Ramtitle:'',
       machineNetworkInfo: [],
+      Cpuoption : {
+        color:'#96cff0',
+        animation:false,
+        xAxis: {
+        type: 'category',
+        boundaryGap: false,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            animation: false
+        }
+    },
+      yAxis: {
+        max: 100,
+        type: 'value',
+        axisLine:{
+          show:true
+        },
+        axisLabel:{
+          show:false,
+        }
+      },
+      series: [{
+          data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+          type: 'line',
+          areaStyle: {},
+          smooth:true,
+          showSymbol: false,
+          hoverAnimation: false,
+      }]
+    },
+      Ramoption : {
+        animation:false,
+        color:'#dab7b7',
+        xAxis: {
+        type: 'category',
+        boundaryGap: false,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            animation: false
+        }
+    },
+      yAxis: {
+        max: 100,
+        type: 'value',
+        axisLine:{
+          show:true
+        },
+        axisLabel:{
+          show:false,
+        }
+      },
+      series: [{
+          center:['50%','50%'],
+          data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+          type: 'line',
+          areaStyle: {},
+          smooth:true,
+          showSymbol: false,
+          hoverAnimation: false,
+      }]
+    }
     };
   },
   created() {
@@ -76,12 +201,36 @@ export default {
           this.machineBaseInfo = MachineBase;
           this.machineUseInfo = MachineUseInfo;
           this.machineNetworkInfo = MachineNetwork;
+          this.Cputitle = "核心数:"+MachineBase.processorCount
+          this.Ramtitle = "总内存:"+MachineUseInfo.totalRam
+          this.Cpuoption.series[0].data.shift();
+          this.Cpuoption.series[0].data.push(this.machineUseInfo.cpuRate)
+          this.Ramoption.series[0].data.shift();
+          this.Ramoption.series[0].data.push(this.machineUseInfo.ramRate)
           this.loading = false;
         });
     },
     refreshData() {
       this.onLoadCodes();
+      this.CpuLine();
+      this.RamLine();
     },
+    CpuLine(){
+      var chartDom = this.$refs.cpuchart;
+      var myChart1 = echarts.init(chartDom);
+      myChart1.setOption(this.Cpuoption);
+      window.addEventListener("resize",function(){
+        myChart1.resize();
+      })
+    },
+    RamLine(){
+      var chartDom = this.$refs.Ramchart;
+      var myChart = echarts.init(chartDom);
+      myChart.setOption(this.Ramoption);
+      window.addEventListener("resize",function(){
+        myChart.resize();
+      })
+    }
   },
   mounted() {
     this.timer = setInterval(this.refreshData, 3000);
@@ -90,4 +239,12 @@ export default {
     clearInterval(this.timer);
   },
 };
-</script>
+</script>
+<style scoped>
+.Ramcpu{
+  Height:300px;
+  width:120%;
+  left:-10%;
+  top:-35px;
+}
+</style>