From 11ebcfa819faafa1538703c018d3395fd963b6b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <renpy@yuanian.com>
Date: Wed, 27 Sep 2023 16:47:55 +0800
Subject: [PATCH] =?UTF-8?q?server=20=E6=9C=8D=E5=8A=A1=E5=99=A8=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=EF=BC=8Ccpu=E9=A1=B5=E9=9D=A2=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5=EF=BC=8C=E5=9B=BE=E5=BD=A2=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../serverMonitor/instances/cpu.vue           | 651 +++++++++++-------
 1 file changed, 384 insertions(+), 267 deletions(-)

diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
index 0431238..73b6d99 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
@@ -1,17 +1,18 @@
 <template>
-  <div style="height: 100%;">
+  <div style="height: 100%">
     <div class="cpu-search">
       <a-row type="flex" :gutter="10">
         <a-col flex="265px">
           <span class="item-label">Server</span>
-          <a-select style="width:180px"
-            v-model="queryParams.server" 
+          <a-select
+            style="width: 180px"
+            v-model="queryParams.server"
             placeholder="select..."
             :filter-option="filterOption"
-            show-arrow 
+            show-arrow
             allowClear
             labelInValue
-            :options="serverOptions" 
+            :options="serverOptions"
             @change="onServerChange"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@@ -19,12 +20,13 @@
         </a-col>
         <a-col flex="265px">
           <span class="item-label">Time</span>
-          <a-select style="width:180px"
-            v-model="queryParams.timer" 
+          <a-select
+            style="width: 180px"
+            v-model="queryParams.timer"
             placeholder="select..."
-            show-arrow 
+            show-arrow
             allowClear
-            :options="timerOptions" 
+            :options="timerOptions"
             @change="onTimeChange"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@@ -34,7 +36,7 @@
           <a-range-picker
             :show-time="true"
             :value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
-            @change="onRangeDateChange" 
+            @change="onRangeDateChange"
           />
         </a-col>
       </a-row>
@@ -43,72 +45,106 @@
       </div>
     </div>
     <div class="cpu-content">
-      <a-row :gutter="[20,15]" style="height: 100%;">
-        <a-col :span="12" style="height: calc(50% + 10px);">
+      <a-row :gutter="[20, 15]" style="height: 100%">
+        <a-col :span="12" style="height: calc(50% + 10px)">
           <div class="cpu-content-item">
             <BoxTitle title="CPU utilizatior">
               <template slot="right">
-                 <ul>
-                    <li><span>Avg:</span>7.43%</li>
-                    <li><span>Min:</span>7.43%</li>
-                    <li><span>Max:</span>7.43%</li>
-                 </ul>
+                <ul>
+                  <li><span>Avg:</span>{{ cpuUtilization.avg + cpuUtilization.units }}</li>
+                  <li><span>Min:</span>{{ cpuUtilization.min + cpuUtilization.units }}</li>
+                  <li><span>Max:</span>{{ cpuUtilization.max + cpuUtilization.units }}</li>
+                </ul>
               </template>
               <template slot="other">
-                <img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('CPU utilizatior',option1)" alt="">
+                <img
+                  src="@/assets/images/abnormalAlarm/big.png"
+                  @click="handelZoom('CPU utilizatior', option1)"
+                  alt=""
+                />
               </template>
             </BoxTitle>
             <div class="cpu-content-item-chart" id="chart1"></div>
           </div>
         </a-col>
-        <a-col :span="12" style="height: calc(50% + 10px);">
+        <a-col :span="12" style="height: calc(50% + 10px)">
           <div class="cpu-content-item">
             <BoxTitle title="Percentage of free system space">
               <template slot="right">
-                 <ul>
-                    <li><span>Avg:</span>7.43%</li>
-                    <li><span>Min:</span>7.43%</li>
-                    <li><span>Max:</span>7.43%</li>
-                 </ul>
+                <ul>
+                  <li><span>Avg:</span>{{ cpuIdleRate.avg + cpuIdleRate.units }}</li>
+                  <li><span>Min:</span>{{ cpuIdleRate.min + cpuIdleRate.units }}</li>
+                  <li><span>Max:</span>{{ cpuIdleRate.max + cpuIdleRate.units }}</li>
+                </ul>
               </template>
               <template slot="other">
-                <img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('Percentage of free system space',option2)" alt="">
+                <img
+                  src="@/assets/images/abnormalAlarm/big.png"
+                  @click="handelZoom('Percentage of free system space', option2)"
+                  alt=""
+                />
               </template>
             </BoxTitle>
             <div class="cpu-content-item-chart" id="chart2"></div>
           </div>
         </a-col>
-        <a-col :span="12" style="height: calc(50% + 10px);">
+        <a-col :span="12" style="height: calc(50% + 10px)">
           <div class="cpu-content-item">
             <BoxTitle title="Interrupt and episodic switching">
               <template slot="other">
-                <img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('Interrupt and episodic switching',option3)" alt="">
+                <img
+                  src="@/assets/images/abnormalAlarm/big.png"
+                  @click="handelZoom('Interrupt and episodic switching', option3)"
+                  alt=""
+                />
               </template>
             </BoxTitle>
             <div class="cpu-content-item-info">
-              <a-row style="height: 30px;" type="flex">
+              <a-row style="height: 30px" type="flex">
                 <a-col flex="170px">Processor interrupt(s)</a-col>
-                <a-col flex="100px">Avg:<span>7.43%</span></a-col>
-                <a-col flex="100px">Min:<span>7.43%</span></a-col>
-                <a-col flex="100px">Max:<span>7.43%</span></a-col>
-                <a-col><div style="background: #00a8ff;" class="li-icon"></div><i>Processor interrupt</i></a-col>
+                <a-col flex="100px"
+                  >Avg:<span>{{ multiLine.cpuInterrupt.avg + multiLine.cpuInterrupt.units }}</span></a-col
+                >
+                <a-col flex="100px"
+                  >Min:<span>{{ multiLine.cpuInterrupt.min + multiLine.cpuInterrupt.units }}</span></a-col
+                >
+                <a-col flex="100px"
+                  >Max:<span>{{ multiLine.cpuInterrupt.max + multiLine.cpuInterrupt.units }}</span></a-col
+                >
+                <a-col
+                  ><div style="background: #00a8ff" class="li-icon"></div>
+                  <i>Processor interrupt</i></a-col
+                >
               </a-row>
-              <a-row style="height: 30px;" type="flex">
+              <a-row style="height: 30px" type="flex">
                 <a-col flex="170px">Situational switching(s)</a-col>
-                <a-col flex="100px">Avg:<span>7.43%</span></a-col>
-                <a-col flex="100px">Min:<span>7.43%</span></a-col>
-                <a-col flex="100px">Max:<span>7.43%</span></a-col>
-                <a-col><div style="background: #73b54b;" class="li-icon"></div><i>Situational switching(s)</i></a-col>
+                <a-col flex="100px"
+                  >Avg:<span>{{ multiLine.cpuSwitch.avg + multiLine.cpuSwitch.units }}</span></a-col
+                >
+                <a-col flex="100px"
+                  >Min:<span>{{ multiLine.cpuSwitch.min + multiLine.cpuSwitch.units }}</span></a-col
+                >
+                <a-col flex="100px"
+                  >Max:<span>{{ multiLine.cpuSwitch.max + multiLine.cpuSwitch.units }}</span></a-col
+                >
+                <a-col
+                  ><div style="background: #73b54b" class="li-icon"></div>
+                  <i>Situational switching(s)</i></a-col
+                >
               </a-row>
             </div>
             <div class="cpu-content-item-chart3" id="chart3"></div>
           </div>
         </a-col>
-        <a-col :span="12" style="height: calc(50% + 10px);">
+        <a-col :span="12" style="height: calc(50% + 10px)">
           <div class="cpu-content-item">
             <BoxTitle title="CPU usage of diferent cores">
               <template slot="other">
-                <img src="@/assets/images/abnormalAlarm/big.png" @click="handelZoom('CPU usage of diferent cores',option4)" alt="">
+                <img
+                  src="@/assets/images/abnormalAlarm/big.png"
+                  @click="handelZoom('CPU usage of diferent cores', option4)"
+                  alt=""
+                />
               </template>
             </BoxTitle>
             <div class="cpu-content-item-chart" id="chart4"></div>
@@ -116,12 +152,7 @@
         </a-col>
       </a-row>
     </div>
-    <a-modal 
-      :title="modalTitle" 
-      :width="1200" 
-      v-model="visible" 
-      @cancel="onCancel"
-    >
+    <a-modal :title="modalTitle" :width="1200" v-model="visible" @cancel="onCancel">
       <div class="modal-content" id="common_cpu"></div>
     </a-modal>
     <CreateRules
@@ -136,50 +167,84 @@
 </template>
 
 <script>
-import moment from 'moment';
+import moment from 'moment'
 import * as echarts from 'echarts'
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
-import BoxTitle from '../../components/boxTitle.vue';
-import CreateRules from './createRules.vue';
+import BoxTitle from '../../components/boxTitle.vue'
+import CreateRules from './createRules.vue'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 export default {
   components: {
     BoxTitle,
-    CreateRules
+    CreateRules,
   },
   data() {
     return {
-      currId:"",
+      currId: '',
       visible_rule: false,
-      currLabel:"",
+      currLabel: '',
       queryParams: {
         server: undefined,
         timer: 1,
         startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
-        endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
+        endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
       },
       serverOptions: [],
       timerOptions: [
-        {label: "1Hours",value: 1},
-        {label: "2Hours",value: 2},
-        {label: "3Hours",value: 3},
-        {label: "user-defined",value: 0},
+        { label: '1Hours', value: 1 },
+        { label: '2Hours', value: 2 },
+        { label: '3Hours', value: 3 },
+        { label: 'user-defined', value: 0 },
       ],
-      option1:{},
-      option2:{},
-      option3:{},
+      option1: {},
+      option2: {},
+      option3: {},
       option4: {},
       colorList: [
-        "#c13a28", "#ff8a00", "#cbae7f", "#c9bd2b", "#81b477", "#488672",
-        "#55d9d1", "#49a8f0", "#2859ed", "#9e54ec", "#7e16a3", "#e6437d"
+        '#c13a28',
+        '#ff8a00',
+        '#cbae7f',
+        '#c9bd2b',
+        '#81b477',
+        '#488672',
+        '#55d9d1',
+        '#49a8f0',
+        '#2859ed',
+        '#9e54ec',
+        '#7e16a3',
+        '#e6437d',
       ],
       legendList: [
-        "CPU0,10", "CPU0,11", "CPU0,8", "CPU0,9", "CPU0,1", "CPU0,2","",
-        "CPU0,0", "CPU0,5", "CPU0,6", "CPU0,3", "CPU0,4", "CPU0,7"
+        'CPU0,10',
+        'CPU0,11',
+        'CPU0,8',
+        'CPU0,9',
+        'CPU0,1',
+        'CPU0,2',
+        '',
+        'CPU0,0',
+        'CPU0,5',
+        'CPU0,6',
+        'CPU0,3',
+        'CPU0,4',
+        'CPU0,7',
       ],
       xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       visible: false,
-      modalTitle: "",
+      modalTitle: '',
+      cpuUtilization: {},
+      cpuUtilization_xData: [],
+      cpuUtilization_data: [],
+      cpuIdleRate: {},
+      cpuIdleRate_xData: [],
+      cpuIdleRate_data: [],
+      multiLine: {
+        cpuInterrupt: {},
+        cpuSwitch: {},
+      },
+      multiLine_xData: [],
+      cpuInterrupt_data: [],
+      cpuSwitch_data: [],
     }
   },
   created() {
@@ -189,17 +254,71 @@ export default {
     this.getServerList()
     this.$nextTick(() => {
       setTimeout(() => {
-        this.drawChart1()
-        this.drawChart2()
-        this.drawChart3()
         this.drawChart4()
-      },0)
+      }, 0)
     })
   },
   methods: {
+    getTheData() {
+      console.log(this.serverOptions)
+      let hostId = this.serverOptions.find((item) => {
+        return item.value == this.currId
+      }).hostId
+      let params = {
+        hostId,
+        pageName: 'cpu',
+        start: this.queryParams.startDate,
+        end: this.queryParams.endDate,
+      }
+      getAction('/systemMonitor/queryHostDetails', params).then((res) => {
+        const data = res.result
+        //CPU utilizatior
+        this.cpuUtilization = data.find((item) => item.name === 'cpuUtilization')
+        this.cpuUtilization_xData = this.cpuUtilization.list.map((item) => {
+          return dateFormat(new Date(item.date * 1000), 'hh:mm')
+        })
+        this.cpuUtilization_data = this.cpuUtilization.list.map((item) => {
+          return Number(item.value.toFixed(2))
+        })
+        //Percentage of free system space
+        this.cpuIdleRate = data.find((item) => item.name === 'cpuIdleRate')
+        this.cpuIdleRate_xData = this.cpuIdleRate.list.map((item) => {
+          return dateFormat(new Date(item.date * 1000), 'hh:mm')
+        })
+        this.cpuIdleRate_data = this.cpuIdleRate.list.map((item) => {
+          return Number(item.value.toFixed(2))
+        })
+        // Interrupt and episodic switching
+        ;(this.multiLine.cpuInterrupt = data.find((item) => item.name === 'cpuInterrupt')),
+          (this.multiLine.cpuSwitch = data.find((item) => item.name === 'cpuSwitch')),
+          (this.multiLine_xData = this.multiLine.cpuInterrupt.list.map((item) => {
+            return dateFormat(new Date(item.date * 1000), 'hh:mm')
+          }))
+        this.cpuInterrupt_data = this.multiLine.cpuInterrupt.list.map((item) => {
+          return Number(item.value.toFixed(2))
+        })
+        this.cpuSwitch_data = this.multiLine.cpuSwitch.list.map((item) => {
+          return Number(item.value.toFixed(2))
+        })
+
+        // const list = [...this.multiLine.cpuInterrupt.list, ...this.multiLine.cpuSwitch.list]
+        // this.renderingEchart(list, 'cpuMultiLine', Area) // 中断和情境切换
+        // //总CPU使用率
+        // let totalCpu = new Array()
+        // data.map((item) => {
+        //   if (item.name.search('cpuUtilization_') != -1) {
+        //     totalCpu = [...totalCpu, ...item.list]
+        //   }
+        // })
+        // this.renderingEchart(totalCpu, 'cpulist', Line)
+        this.drawChart1()
+        this.drawChart2()
+        this.drawChart3()
+      })
+    },
     getBeforeHours(num) {
       let currentTime = moment()
-      let oneHourAgo = moment().subtract(num, 'hours');  
+      let oneHourAgo = moment().subtract(num, 'hours')
       this.queryParams.startDate = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
       this.queryParams.endDate = currentTime.format('YYYY-MM-DD HH:mm:ss')
     },
@@ -210,49 +329,49 @@ export default {
       this.visible_rule = false
     },
     handleOk(params) {
-      postAction("/alarmRule/create", params).then(res => {
+      postAction('/alarmRule/create', params).then((res) => {
         if (res.success) {
           this.visible_rule = false
-          this.$message.success("success")
+          this.$message.success('success')
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     moment,
     filterOption(input, option) {
-      return (
-        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      );
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     },
     getServerList() {
-      getAction("/sysServer/sourceList").then(res => {
+      getAction('/sysServer/sourceList').then((res) => {
         if (res.success) {
-          this.serverOptions = res.result.map(item => {
+          this.serverOptions = res.result.map((item) => {
             return {
               label: item.sourceName,
-              value: item.sourceId
+              value: item.sourceId,
+              hostId: item.hostId,
             }
           })
           this.currId = this.$route.query.serverId || res.result[0].sourceId
           if (this.$route.query.serverId) {
-            let currOption = this.serverOptions.find(item => {
+            let currOption = this.serverOptions.find((item) => {
               return item.value === this.$route.query.serverId
             })
             this.currLabel = currOption.label
             this.queryParams.server = {
               key: this.$route.query.serverId,
-              label:this.currLabel
+              label: this.currLabel,
             }
           } else {
             this.currLabel = res.result[0].sourceName
             this.queryParams.server = {
               key: res.result[0].sourceId,
-              label:this.currLabel
+              label: this.currLabel,
             }
           }
+          this.getTheData()
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
@@ -269,68 +388,68 @@ export default {
       this.queryParams.endDate = dateString[1]
     },
     drawChart1() {
-      let myLine = echarts.init(document.getElementById("chart1"))
+      let myLine = echarts.init(document.getElementById('chart1'))
       this.option1 = {
-        color: ["#0096ff"],
+        color: ['#0096ff'],
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: 25,
           right: 0,
           top: 15,
           bottom: 0,
-          containLabel: true
+          containLabel: true,
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
-            }
+              color: 'rgba(115, 191, 255, 0.2)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)",
-            formatter: (value,index)=>{
-              if(index === 0) {
-                return '        ' + value;
+            color: 'rgba(173, 230, 238, 1)',
+            formatter: (value, index) => {
+              if (index === 0) {
+                return '        ' + value
               }
-              if(index === this.xData.length -1) {
-                return value + '        ';
+              if (index === this.xData.length - 1) {
+                return value + '        '
               }
               return value
-            }
+            },
           },
           boundaryGap: false,
-          data: this.xData
+          data: this.cpuUtilization_xData,
         },
         yAxis: {
           type: 'value',
-          name: "CPU utilization(%)",
-          nameLocation: "middle",
+          name: 'CPU utilization(%)',
+          nameLocation: 'middle',
           nameTextStyle: {
-            color: "#5b9cba",
-            fontFamily: "ArialMT",
-            fontSize: 14
+            color: '#5b9cba',
+            fontFamily: 'ArialMT',
+            fontSize: 14,
           },
           nameGap: 30,
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
-            }
+              color: 'rgba(115, 191, 255, 0.2)',
+            },
           },
           axisLine: {
-            show:true,
+            show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.5)"
-            }
+              color: 'rgba(115, 191, 255, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
         },
         series: [
@@ -340,82 +459,82 @@ export default {
             areaStyle: {
               opacity: 1,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#0096ff" },
-                { offset: 1, color: "rgba(0, 150, 255,0.2)" },
-              ])
+                { offset: 0, color: '#0096ff' },
+                { offset: 1, color: 'rgba(0, 150, 255,0.2)' },
+              ]),
             },
-            data: [5, 23, 12, 48, 15, 27, 56]
-          }
-        ]
-      };
+            data: this.cpuUtilization_data,
+          },
+        ],
+      }
       myLine.setOption(this.option1)
-      window.addEventListener("resize", function () {
-        myLine.resize();
+      window.addEventListener('resize', function () {
+        myLine.resize()
       })
     },
     drawChart2() {
-      let myLine = echarts.init(document.getElementById("chart2"))
+      let myLine = echarts.init(document.getElementById('chart2'))
       this.option2 = {
-        color: ["#f1e852"],
+        color: ['#f1e852'],
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: 25,
           right: 0,
           top: 15,
           bottom: 0,
-          containLabel: true
+          containLabel: true,
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
-            }
+              color: 'rgba(115, 191, 255, 0.2)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)",
-            formatter: (value,index)=>{
-              if(index === 0) {
-                return '        ' + value;
+            color: 'rgba(173, 230, 238, 1)',
+            formatter: (value, index) => {
+              if (index === 0) {
+                return '        ' + value
               }
-              if(index === this.xData.length -1) {
-                return value + '        ';
+              if (index === this.xData.length - 1) {
+                return value + '        '
               }
               return value
-            }
+            },
           },
           boundaryGap: false,
-          data: this.xData
+          data: this.cpuIdleRate_xData,
         },
         yAxis: {
           type: 'value',
-          name: "system space(%)",
-          nameLocation: "middle",
+          name: 'system space(%)',
+          nameLocation: 'middle',
           nameTextStyle: {
-            color: "#5b9cba",
-            fontFamily: "ArialMT",
-            fontSize: 14
+            color: '#5b9cba',
+            fontFamily: 'ArialMT',
+            fontSize: 14,
           },
           nameGap: 30,
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
-            }
+              color: 'rgba(115, 191, 255, 0.2)',
+            },
           },
           axisLine: {
-            show:true,
+            show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.5)"
-            }
+              color: 'rgba(115, 191, 255, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
         },
         series: [
@@ -425,141 +544,139 @@ export default {
             areaStyle: {
               opacity: 1,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#f1e852" },
-                { offset: 1, color: "rgba(241, 232, 82,0.2)" },
-              ])
+                { offset: 0, color: '#f1e852' },
+                { offset: 1, color: 'rgba(241, 232, 82,0.2)' },
+              ]),
             },
-            data: [5, 23, 12, 48, 15, 27, 56]
-          }
-        ]
-      };
+            data: this.cpuIdleRate_data,
+          },
+        ],
+      }
       myLine.setOption(this.option2)
-      window.addEventListener("resize", function () {
-        myLine.resize();
+      window.addEventListener('resize', function () {
+        myLine.resize()
       })
     },
     drawChart3() {
-      let myLine = echarts.init(document.getElementById("chart3"))
+      let myLine = echarts.init(document.getElementById('chart3'))
       this.option3 = {
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: 25,
           right: 0,
           top: 10,
           bottom: 10,
-          containLabel: true
+          containLabel: true,
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(64, 105, 121, 0.5)"
-            }
+              color: 'rgba(64, 105, 121, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)",
-            formatter: (value,index)=>{
-              if(index === 0) {
-                return '        ' + value;
+            color: 'rgba(173, 230, 238, 1)',
+            formatter: (value, index) => {
+              if (index === 0) {
+                return '        ' + value
               }
-              if(index === this.xData.length -1) {
-                return value + '        ';
+              if (index === this.xData.length - 1) {
+                return value + '        '
               }
               return value
-            }
+            },
           },
           boundaryGap: false,
-          data: this.xData
+          data: this.multiLine_xData,
         },
         yAxis: {
           type: 'value',
-          name: "s",
-          nameLocation: "middle",
+          name: 's',
+          nameLocation: 'middle',
           nameTextStyle: {
-            color: "#5b9cba",
-            fontFamily: "ArialMT",
-            fontSize: 14
+            color: '#5b9cba',
+            fontFamily: 'ArialMT',
+            fontSize: 14,
           },
           nameGap: 30,
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(64, 105, 121, 0.5)"
-            }
+              color: 'rgba(64, 105, 121, 0.5)',
+            },
           },
           axisLine: {
-            show:true,
+            show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.5)"
-            }
+              color: 'rgba(115, 191, 255, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
         },
         series: [
           {
             type: 'line',
-            name: 'Email',
             symbol: 'none',
-            itemStyle:{ normal:{color:"#00a8ff"}},
+            itemStyle: { normal: { color: '#00a8ff' } },
             areaStyle: {
               opacity: 1,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#00a8ff" },
-                { offset: 1, color: "rgba(255,255,255,0)" },
-              ])
+                { offset: 0, color: '#00a8ff' },
+                { offset: 1, color: 'rgba(255,255,255,0)' },
+              ]),
             },
-            data: [150, 230, 224, 218, 135, 147, 260],
+            data: this.cpuInterrupt_data,
           },
           {
             type: 'line',
-            name: 'Eml',
             symbol: 'none',
-            itemStyle:{ normal:{color:"#73b54b"}},
+            itemStyle: { normal: { color: '#73b54b' } },
             areaStyle: {
               opacity: 1,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "#73b54b" },
-                { offset: 1, color: "rgba(255,255,255,0)" },
+                { offset: 0, color: '#73b54b' },
+                { offset: 1, color: 'rgba(255,255,255,0)' },
               ]),
             },
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
-          }
-        ]
-      };
+            data: this.cpuSwitch_data,
+          },
+        ],
+      }
       myLine.setOption(this.option3)
-      window.addEventListener("resize", function () {
-        myLine.resize();
+      window.addEventListener('resize', function () {
+        myLine.resize()
       })
     },
     drawChart4() {
-      let myLine = echarts.init(document.getElementById("chart4"))
+      let myLine = echarts.init(document.getElementById('chart4'))
       this.option4 = {
-        color: this.colorList,
+        // color: this.colorList,
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: 25,
           right: 0,
           top: 70,
           bottom: 10,
-          containLabel: true
+          containLabel: true,
         },
         legend: {
-          icon: "roundRect",
+          icon: 'roundRect',
           itemHeight: 12, // 图例icon高度
           itemWidth: 12, // 图例icon宽度
           top: 10,
           right: 0,
           textStyle: {
-            color: "#9ab1bc",
+            color: '#9ab1bc',
             width: 65,
             lineHeight: 12,
             rich: {
@@ -567,150 +684,150 @@ export default {
                 verticalAlign: 'middle',
               },
             },
-            padding:[0,-2,-4,0],
+            padding: [0, -2, -4, 0],
           },
           data: this.legendList, // 不需要''换行
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(64, 105, 121, 0.5)"
-            }
+              color: 'rgba(64, 105, 121, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)",
-            formatter: (value,index)=>{
-              if(index === 0) {
-                return '        ' + value;
+            color: 'rgba(173, 230, 238, 1)',
+            formatter: (value, index) => {
+              if (index === 0) {
+                return '        ' + value
               }
-              if(index === this.xData.length -1) {
-                return value + '        ';
+              if (index === this.xData.length - 1) {
+                return value + '        '
               }
               return value
-            }
+            },
           },
           boundaryGap: false,
-          data: this.xData
+          data: this.xData,
         },
         yAxis: {
           type: 'value',
-          name: "CPU usage(%)",
-          nameLocation: "middle",
+          name: 'CPU usage(%)',
+          nameLocation: 'middle',
           nameTextStyle: {
-            color: "#5b9cba",
-            fontFamily: "ArialMT",
-            fontSize: 14
+            color: '#5b9cba',
+            fontFamily: 'ArialMT',
+            fontSize: 14,
           },
           nameGap: 30,
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(64, 105, 121, 0.5)"
-            }
+              color: 'rgba(64, 105, 121, 0.5)',
+            },
           },
           axisLine: {
-            show:true,
+            show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.5)"
-            }
+              color: 'rgba(115, 191, 255, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
         },
         series: [
           {
             type: 'line',
-            name:"CPU0,10",
+            name: 'CPU0,10',
             symbol: 'none',
             data: [15, 30, 24, 28, 13, 14, 20],
           },
           {
             type: 'line',
-            name:"CPU0,11",
+            name: 'CPU0,11',
             symbol: 'none',
             data: [82, 92, 91, 34, 12, 30, 20],
           },
           {
             type: 'line',
-            name:"CPU0,8",
+            name: 'CPU0,8',
             symbol: 'none',
             data: [2, 9, 11, 24, 12, 20, 25],
           },
           {
             type: 'line',
-            name:"CPU0,9",
+            name: 'CPU0,9',
             symbol: 'none',
             data: [8, 19, 32, 4, 22, 13, 50],
           },
           {
             type: 'line',
-            name:"CPU0,1",
+            name: 'CPU0,1',
             symbol: 'none',
             data: [53, 62, 71, 14, 16, 37, 24],
           },
           {
             type: 'line',
-            name:"CPU0,2",
+            name: 'CPU0,2',
             symbol: 'none',
             data: [62, 54, 49, 64, 62, 45, 29],
           },
           {
             type: 'line',
-            name:"CPU0,0",
+            name: 'CPU0,0',
             symbol: 'none',
             data: [15, 30, 24, 28, 13, 14, 20],
           },
           {
             type: 'line',
-            name:"CPU0,5",
+            name: 'CPU0,5',
             symbol: 'none',
             data: [82, 92, 91, 34, 12, 30, 20],
           },
           {
             type: 'line',
-            name:"CPU0,6",
+            name: 'CPU0,6',
             symbol: 'none',
             data: [2, 9, 11, 24, 12, 20, 25],
           },
           {
             type: 'line',
-            name:"CPU0,3",
+            name: 'CPU0,3',
             symbol: 'none',
             data: [8, 19, 32, 4, 22, 13, 50],
           },
           {
             type: 'line',
-            name:"CPU0,4",
+            name: 'CPU0,4',
             symbol: 'none',
             data: [53, 62, 71, 14, 16, 37, 24],
           },
           {
             type: 'line',
-            name:"CPU0,7",
+            name: 'CPU0,7',
             symbol: 'none',
             data: [62, 54, 49, 64, 62, 45, 29],
-          }
-        ]
-      };
+          },
+        ],
+      }
       myLine.setOption(this.option4)
-      window.addEventListener("resize", function () {
-        myLine.resize();
+      window.addEventListener('resize', function () {
+        myLine.resize()
       })
     },
     drawLine(option) {
-      this.myLine = echarts.init(document.getElementById("common_cpu"))
+      this.myLine = echarts.init(document.getElementById('common_cpu'))
       this.myLine.setOption(option)
-      window.addEventListener("resize", function () {
-        this.myLine.resize();
+      window.addEventListener('resize', function () {
+        this.myLine.resize()
       })
     },
     handelZoom(str, option) {
-      console.log(option);
+      console.log(option)
       this.modalTitle = str
       this.visible = true
       this.$nextTick(() => {
@@ -720,13 +837,13 @@ export default {
     onCancel() {
       this.visible = false
       this.myLine.clear()
-    }
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.cpu-search{
+.cpu-search {
   height: 50px;
   border-top: 1px solid rgba(13, 235, 201, 0.3);
   border-bottom: 1px solid rgba(13, 235, 201, 0.3);
@@ -735,13 +852,13 @@ export default {
   justify-content: space-between;
   padding: 0 10px;
   background: rgba(12, 235, 201, 0.05);
-  .ant-row-flex{
+  .ant-row-flex {
     flex-flow: nowrap;
   }
-  /deep/ .ant-calendar-range-picker-separator{
+  /deep/ .ant-calendar-range-picker-separator {
     color: white;
   }
-  .item-label{
+  .item-label {
     display: inline-block;
     font-size: 16px;
     font-family: ArialMT;
@@ -750,54 +867,54 @@ export default {
     height: 32px;
     margin-right: 10px;
   }
-  &-btns{
-    &-ant{
+  &-btns {
+    &-ant {
       background: #1397a3;
       border: none;
     }
   }
 }
-.cpu-content{
+.cpu-content {
   height: calc(100% - 60px);
   margin-top: 10px;
   overflow: hidden;
-  &-item{
+  &-item {
     width: 100%;
     height: 100%;
     // background: #ade6ee;
-    &-chart{
+    &-chart {
       width: 100%;
       height: calc(100% - 40px);
     }
-    &-chart3{
+    &-chart3 {
       width: 100%;
       height: calc(100% - 100px);
     }
-    ul{
-      list-style:none;
+    ul {
+      list-style: none;
       margin-right: 30px;
-      li{
+      li {
         float: left;
         font-family: ArialMT;
         font-size: 14px;
         font-weight: normal;
         color: #ffffff;
         margin-left: 10px;
-        span{
+        span {
           color: #00e9fe;
           background: none;
           padding: 0 5px;
         }
       }
     }
-    &-info{
+    &-info {
       height: 60px;
       font-family: ArialMT;
       font-size: 14px;
       font-weight: normal;
       color: #00e9fe;
       margin-left: 85px;
-      .li-icon{
+      .li-icon {
         display: inline-block;
         vertical-align: middle;
         width: 12px;
@@ -805,23 +922,23 @@ export default {
         border-radius: 4px;
         margin-right: 5px;
       }
-      i{
+      i {
         font-style: normal;
         font-size: 14px;
         font-weight: normal;
         color: #9ab1bc;
       }
-      span{
+      span {
         color: #ffffff;
         background: none;
         margin-left: 5px;
       }
-      .ant-row-flex{
+      .ant-row-flex {
         // justify-content: flex-end;
         flex-flow: nowrap;
       }
     }
-    &-legend{
+    &-legend {
       height: 60px;
       font-family: ArialMT;
       font-size: 14px;
@@ -830,13 +947,13 @@ export default {
     }
   }
 }
-/deep/.ant-modal-title{
+/deep/.ant-modal-title {
   letter-spacing: 1px;
 }
-/deep/.ant-modal-footer{
+/deep/.ant-modal-footer {
   display: none;
 }
-.modal-content{
+.modal-content {
   width: 100%;
   height: 600px;
 }