diff --git a/package.json b/package.json
index 9e3e2e2..eb23af6 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.11.4",
+    "@antv/g2plot": "^2.4.23",
     "@jeecg/antd-online-mini": "3.4.3-beta2",
     "@tinymce/tinymce-vue": "2.1.0",
     "@toast-ui/editor": "^2.1.2",
@@ -129,4 +130,4 @@
     "last 2 versions",
     "not ie <= 10"
   ]
-}
+}
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
index 0431238..574817f 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,60 @@
 </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"
-      ],
-      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"
-      ],
-      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       visible: false,
-      modalTitle: "",
+      modalTitle: '',
+      //CPU utilizatior
+      cpuUtilization: {},
+      cpuUtilization_xData: [],
+      cpuUtilization_data: [],
+      // Percentage of free system space
+      cpuIdleRate: {},
+      cpuIdleRate_xData: [],
+      cpuIdleRate_data: [],
+      // Interrupt and episodic switching
+      multiLine: {
+        cpuInterrupt: {},
+        cpuSwitch: {},
+      },
+      multiLine_xData: [],
+      cpuInterrupt_data: [],
+      cpuSwitch_data: [],
+      // CPU usage of diferent cores
+      cpuDiff_xData: [],
+      cpuDiff_data: [],
     }
   },
   created() {
@@ -187,19 +228,76 @@ export default {
   },
   mounted() {
     this.getServerList()
-    this.$nextTick(() => {
-      setTimeout(() => {
+  },
+  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))
+        })
+        //总CPU使用率
+        let totalCpu = []
+        data.map((item) => {
+          if (item.name.search('cpuUtilization_') != -1) {
+            totalCpu.push(item)
+          }
+        })
+        console.log(totalCpu)
+        this.cpuDiff_xData = totalCpu[0].list.map((item) => {
+          return dateFormat(new Date(item.date * 1000), 'hh:mm')
+        })
+        this.cpuDiff_data = totalCpu.map((item) => {
+          return {
+            name: item.name,
+            data: item.list.map((el) => Number(el.value.toFixed(2))),
+          }
+        })
+
         this.drawChart1()
         this.drawChart2()
         this.drawChart3()
         this.drawChart4()
-      },0)
-    })
-  },
-  methods: {
+      })
+    },
     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 +308,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 +367,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.cpuUtilization_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 +438,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.cpuIdleRate_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 +523,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.multiLine_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,
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
+          confine: true,
         },
         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,166 +663,113 @@ export default {
                 verticalAlign: 'middle',
               },
             },
-            padding:[0,-2,-4,0],
+            padding: [0, -2, -4, 0],
           },
-          data: this.legendList, // 不需要''换行
+          // 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.cpuDiff_xData.length - 1) {
+                return value + '        '
               }
               return value
-            }
+            },
           },
           boundaryGap: false,
-          data: this.xData
+          data: this.cpuDiff_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",
-            symbol: 'none',
-            data: [15, 30, 24, 28, 13, 14, 20],
-          },
-          {
-            type: 'line',
-            name:"CPU0,11",
-            symbol: 'none',
-            data: [82, 92, 91, 34, 12, 30, 20],
-          },
-          {
-            type: 'line',
-            name:"CPU0,8",
-            symbol: 'none',
-            data: [2, 9, 11, 24, 12, 20, 25],
-          },
-          {
-            type: 'line',
-            name:"CPU0,9",
-            symbol: 'none',
-            data: [8, 19, 32, 4, 22, 13, 50],
-          },
-          {
-            type: 'line',
-            name:"CPU0,1",
-            symbol: 'none',
-            data: [53, 62, 71, 14, 16, 37, 24],
-          },
-          {
-            type: 'line',
-            name:"CPU0,2",
-            symbol: 'none',
-            data: [62, 54, 49, 64, 62, 45, 29],
-          },
-          {
-            type: 'line',
-            name:"CPU0,0",
-            symbol: 'none',
-            data: [15, 30, 24, 28, 13, 14, 20],
-          },
-          {
-            type: 'line',
-            name:"CPU0,5",
-            symbol: 'none',
-            data: [82, 92, 91, 34, 12, 30, 20],
-          },
-          {
-            type: 'line',
-            name:"CPU0,6",
-            symbol: 'none',
-            data: [2, 9, 11, 24, 12, 20, 25],
-          },
-          {
-            type: 'line',
-            name:"CPU0,3",
-            symbol: 'none',
-            data: [8, 19, 32, 4, 22, 13, 50],
-          },
-          {
-            type: 'line',
-            name:"CPU0,4",
-            symbol: 'none',
-            data: [53, 62, 71, 14, 16, 37, 24],
-          },
-          {
-            type: 'line',
-            name:"CPU0,7",
-            symbol: 'none',
-            data: [62, 54, 49, 64, 62, 45, 29],
-          }
-        ]
-      };
+        series: [],
+      }
+      let series = this.cpuDiff_data.map((item) => {
+        return {
+          type: 'line',
+          name: item.name,
+          symbol: 'none',
+          data: item.data,
+        }
+      })
+      this.option4.series = series.splice(0, 10)
       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);
       this.modalTitle = str
       this.visible = true
       this.$nextTick(() => {
-        this.drawLine(option)
+        if (str === 'CPU usage of diferent cores') {
+          option.series = this.cpuDiff_data.map((item) => {
+            return {
+              type: 'line',
+              name: item.name,
+              symbol: 'none',
+              data: item.data,
+            }
+          })
+          this.drawLine(option)
+        } else {
+          this.drawLine(option)
+        }
       })
     },
     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 +778,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 +793,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 +848,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 +873,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;
 }
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
index f452626..2313a9f 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/details.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
@@ -1,18 +1,23 @@
 <template>
-  <div style="height: 100%;">
+  <div style="height: 100%">
     <div class="content-top">
-      <div style="width: calc( 100% - 562px);">
+      <div style="width: calc(100% - 562px)">
         <BoxTitle title="Basic lnformation"></BoxTitle>
         <div class="basic-info">
-          <div 
+          <div
             class="basic-info-list"
             v-infinite-scroll="handleInfiniteOnLoad"
             :infinite-scroll-disabled="busy"
             :infinite-scroll-distance="5"
           >
             <a-list :dataSource="dataSource">
-              <a-list-item :class="{ 'ant-list-item-active': index===currIndex}" slot="renderItem" slot-scope="item, index" @click="handleBasicItem(index)">
-                <div>{{ item.name }}</div>
+              <a-list-item
+                :class="{ 'ant-list-item-active': index === currIndex }"
+                slot="renderItem"
+                slot-scope="item, index"
+                @click="handleBasicItem(index)"
+              >
+                <div>{{ item.sourceName }}</div>
               </a-list-item>
               <div v-if="loading && !busy" class="demo-loading-container">
                 <a-spin />
@@ -20,220 +25,248 @@
             </a-list>
           </div>
           <div class="basic-info-detail">
-            <a-row :gutter="10" style="height: 40px;">
-              <a-col :span="6"  style="height: 100%;">
+            <a-row :gutter="10" style="height: 40px">
+              <a-col :span="6" style="height: 100%">
                 <div class="basic-info-detail-col">
                   <div class="basic-info-detail-col-img">
-                    <img src="~@/assets/images/abnormalAlarm/running.png" alt="">
+                    <img src="~@/assets/images/abnormalAlarm/running.png" alt="" />
                   </div>
                   <div class="basic-info-detail-col-msg">
                     <div class="basic-info-detail-col-msg-title">
                       <div class="circle"></div>
                       <div class="title">running state</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num state">NORMAL</div>
+                    <div class="basic-info-detail-col-msg-num state">
+                      {{ `${detailInfo.runningState ? 'NORMAL' : 'ERROR'}` }}
+                    </div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="5"  style="height: 100%;">
+              <a-col :span="5" style="height: 100%">
                 <div class="basic-info-detail-col">
                   <div class="basic-info-detail-col-img">
-                    <img src="~@/assets/images/abnormalAlarm/alarm.png" alt="">
+                    <img src="~@/assets/images/abnormalAlarm/alarm.png" alt="" />
                   </div>
                   <div class="basic-info-detail-col-msg">
                     <div class="basic-info-detail-col-msg-title">
                       <div class="circle"></div>
                       <div class="title">Alarm SMS</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num">16</div>
+                    <div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmSms }}</div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="6"  style="height: 100%;padding-left:12px">
+              <a-col :span="6" style="height: 100%; padding-left: 12px">
                 <div class="basic-info-detail-col">
                   <div class="basic-info-detail-col-img">
-                    <img src="~@/assets/images/abnormalAlarm/email.png" alt="">
+                    <img src="~@/assets/images/abnormalAlarm/email.png" alt="" />
                   </div>
                   <div class="basic-info-detail-col-msg">
                     <div class="basic-info-detail-col-msg-title">
                       <div class="circle"></div>
                       <div class="title">Alarm email</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num">16</div>
+                    <div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmEmail }}</div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="7"  style="height: 100%;">
+              <a-col :span="7" style="height: 100%">
                 <div class="basic-info-detail-col">
                   <div class="basic-info-detail-col-img">
-                    <img src="~@/assets/images/abnormalAlarm/warning.png" alt="">
+                    <img src="~@/assets/images/abnormalAlarm/warning.png" alt="" />
                   </div>
                   <div class="basic-info-detail-col-msg">
                     <div class="basic-info-detail-col-msg-title">
                       <div class="circle"></div>
                       <div class="title">Number of alarms</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num">16</div>
+                    <div class="basic-info-detail-col-msg-num">{{ detailInfo.alarms }}</div>
                   </div>
                 </div>
               </a-col>
             </a-row>
-            <a-row :gutter="10" style="height: 40px;margin-top: 10px;">
-              <a-col :span="6"  style="height: 100%;">
+            <a-row :gutter="10" style="height: 40px; margin-top: 10px">
+              <a-col :span="6" style="height: 100%">
                 <div class="basic-info-detail-col">
                   <div class="basic-info-detail-col-img">
-                    <img src="~@/assets/images/abnormalAlarm/times.png" alt="">
+                    <img src="~@/assets/images/abnormalAlarm/times.png" alt="" />
                   </div>
                   <div class="basic-info-detail-col-msg">
                     <div class="basic-info-detail-col-msg-title">
                       <div class="circle"></div>
                       <div class="title">Run time</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num">126.5h</div>
+                    <div class="basic-info-detail-col-msg-num">{{ detailInfo.runTime }}</div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="5"  style="height: 100%;">
+              <a-col :span="5" style="height: 100%">
                 <div class="basic-info-detail-col">
                   <div class="basic-info-detail-col-img">
-                    <img src="~@/assets/images/abnormalAlarm/ram.png" alt="">
+                    <img src="~@/assets/images/abnormalAlarm/ram.png" alt="" />
                   </div>
                   <div class="basic-info-detail-col-msg">
                     <div class="basic-info-detail-col-msg-title">
                       <div class="circle"></div>
                       <div class="title">RAM Size</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num">28.9GB</div>
+                    <div class="basic-info-detail-col-msg-num">{{ detailInfo.ramSize }}</div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="6"  style="height: 100%;padding-left:12px">
+              <a-col :span="6" style="height: 100%; padding-left: 12px">
                 <div class="basic-info-detail-col">
                   <div class="basic-info-detail-col-img">
-                    <img src="~@/assets/images/abnormalAlarm/cpu.png" alt="">
+                    <img src="~@/assets/images/abnormalAlarm/cpu.png" alt="" />
                   </div>
                   <div class="basic-info-detail-col-msg">
                     <div class="basic-info-detail-col-msg-title">
                       <div class="circle"></div>
                       <div class="title">CPU Cores</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num">16</div>
+                    <div class="basic-info-detail-col-msg-num">{{ detailInfo.cpuCores }}</div>
                   </div>
                 </div>
               </a-col>
-              <a-col :span="7"  style="height: 100%;">
+              <a-col :span="7" style="height: 100%">
                 <div class="basic-info-detail-col">
                   <div class="basic-info-detail-col-img">
-                    <img src="~@/assets/images/abnormalAlarm/partition.png" alt="">
+                    <img src="~@/assets/images/abnormalAlarm/partition.png" alt="" />
                   </div>
                   <div class="basic-info-detail-col-msg">
                     <div class="basic-info-detail-col-msg-title">
                       <div class="circle"></div>
                       <div class="title">Total Disk Partition</div>
                     </div>
-                    <div class="basic-info-detail-col-msg-num">16</div>
+                    <div class="basic-info-detail-col-msg-num">{{ detailInfo.totalDiskPar }}</div>
                   </div>
                 </div>
               </a-col>
             </a-row>
             <div class="basic-info-detail-content">
-              <a-row style="height: 100%;">
+              <a-row style="height: 100%">
                 <a-col :span="12">
-                  <a-row style="height: 26px;">
-                    <a-col :span="12" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                  <a-row style="height: 26px">
+                    <a-col :span="12" style="height: 26px">
+                      <a-row style="height: 100%">
                         <a-col :span="12" class="basic-info-detail-content-key">Host Name:</a-col>
-                        <a-col :span="12" class="basic-info-detail-content-val">PC-01</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.hostName }}</a-col>
                       </a-row>
-                    </a-col> 
-                    <a-col :span="12" style="height: 26px;">
-                      <a-row style="height: 100%;">
-                        <a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
-                        <a-col :span="12" class="basic-info-detail-content-val">7.8 64-bit</a-col>
+                    </a-col>
+                    <a-col :span="12" style="height: 26px">
+                      <a-row style="height: 100%">
+                        <a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
+                        <!-- <a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osVersion }}</a-col> -->
                       </a-row>
                     </a-col>
                   </a-row>
-                  <a-row style="height: 26px;">
-                    <a-col :span="12" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                  <a-row style="height: 26px">
+                    <a-col :span="12" style="height: 26px">
+                      <a-row style="height: 100%">
                         <a-col :span="12" class="basic-info-detail-content-key">IP Address:</a-col>
-                        <a-col :span="12" class="basic-info-detail-content-val">192.168.1.1</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.ip }}</a-col>
                       </a-row>
                     </a-col>
-                    <a-col :span="12" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                    <a-col :span="12" style="height: 26px">
+                      <a-row style="height: 100%">
                         <a-col :span="12" class="basic-info-detail-content-key">Kernel version:</a-col>
                         <a-col :span="12" class="basic-info-detail-content-val">2000</a-col>
                       </a-row>
                     </a-col>
                   </a-row>
-                  <a-row style="height: 26px;">
-                    <a-col :span="12" style="height: 26px;">
-                      <a-row style="height: 100%;">
-                        <a-col :span="12" class="basic-info-detail-content-key">OS Name:</a-col>
-                        <a-col :span="12" class="basic-info-detail-content-val">Centos</a-col>
-                      </a-row>
+                  <a-row style="height: 26px">
+                    <a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">OS Name:</a-col>
+                    <a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
+                      {{ detailInfo.osName }}
                     </a-col>
-                    <a-col :span="12" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                    <!-- <a-col :span="12" style="height: 26px">
+                      <a-row style="height: 100%">
+                        <a-col :span="12" class="basic-info-detail-content-key">OS Name:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osName }}</a-col>
+                      </a-row>
+                    </a-col> -->
+                    <!-- <a-col :span="12" style="height: 26px">
+                      <a-row style="height: 100%">
                         <a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
                         <a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
                       </a-row>
+                    </a-col> -->
+                  </a-row>
+                  <a-row style="height: 26px">
+                    <a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">CPU:</a-col>
+                    <a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
+                      {{ detailInfo.cpuType }}
                     </a-col>
                   </a-row>
-                  <a-row style="height: 26px;">
-                    <a-col :span="4" style="height: 26px;" class="basic-info-detail-content-key">CPU:</a-col>
-                    <a-col :span="20" style="height: 26px;" class="basic-info-detail-content-val">Inte(R)Core(TM)i7-8750H CPU@2.2GHz</a-col>
+                  <a-row style="height: 26px">
+                    <a-col :span="6" style="height: 26px" class="basic-info-detail-content-key">Manufacturer:</a-col>
+                    <a-col :span="18" style="height: 26px" class="basic-info-detail-content-val"
+                      >ASUSTeK COMPUTER INC.</a-col
+                    >
                   </a-row>
-                  <a-row style="height: 26px;">
-                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Manufacturer:</a-col>
-                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">ASUSTeK COMPUTER INC.</a-col>
-                  </a-row>
-                  <a-row style="height: 26px;">
-                    <a-col :span="8" style="height: 26px;" class="basic-info-detail-content-key">Server Agent Path:</a-col>
-                    <a-col :span="16" style="height: 26px;" class="basic-info-detail-content-val">C:\Agent\Default\Desktop</a-col>
+                  <a-row style="height: 26px">
+                    <a-col :span="8" style="height: 26px" class="basic-info-detail-content-key"
+                      >Server Agent Path:</a-col
+                    >
+                    <a-col :span="16" style="height: 26px" class="basic-info-detail-content-val"
+                      >C:\Agent\Default\Desktop</a-col
+                    >
                   </a-row>
                 </a-col>
                 <a-col :span="12">
-                  <a-row style="height: 26px;">
-                    <a-col :span="11" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                  <a-row style="height: 26px">
+                    <a-col :span="11" style="height: 26px">
+                      <a-row style="height: 100%">
                         <a-col :span="18" class="basic-info-detail-content-key">Network Lnterface:</a-col>
-                        <a-col :span="6" class="basic-info-detail-content-val">11</a-col>
+                        <a-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.network }}</a-col>
                       </a-row>
                     </a-col>
-                    <a-col :span="13" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                    <a-col :span="13" style="height: 26px">
+                      <a-row style="height: 100%">
                         <a-col :span="15" class="basic-info-detail-content-key">Location:</a-col>
-                        <a-col :span="9" class="basic-info-detail-content-val">China</a-col>
+                        <a-col :span="9" class="basic-info-detail-content-val">{{ detailInfo.location }}</a-col>
                       </a-row>
                     </a-col>
                   </a-row>
-                  <a-row style="height: 26px;">
-                    <a-col :span="11" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                  <a-row style="height: 26px">
+                    <a-col :span="11" style="height: 26px">
+                      <a-row style="height: 100%">
                         <a-col :span="18" class="basic-info-detail-content-key">Time Zone:</a-col>
-                        <a-col :span="6" class="basic-info-detail-content-val">CST</a-col>
+                        <a-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.zone }}</a-col>
                       </a-row>
                     </a-col>
-                    <a-col :span="13" style="height: 26px;">
-                      <a-row style="height: 100%;">
+                    <a-col :span="13" style="height: 26px">
+                      <a-row style="height: 100%">
                         <a-col :span="15" class="basic-info-detail-content-key">Server Agent User:</a-col>
                         <a-col :span="9" class="basic-info-detail-content-val">LocalSystem</a-col>
                       </a-row>
                     </a-col>
                   </a-row>
-                  <a-row style="height: 26px;">
-                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Start Time:</a-col>
-                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">2023-03-01 14:00:01</a-col>
+                  <a-row style="height: 26px">
+                    <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">OS Version:</a-col>
+                    <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
+                      >2023-03-01 14:00:01</a-col
+                    >
                   </a-row>
-                  <a-row style="height: 26px;">
-                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Model Number:</a-col>
-                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">TUF GamingFX705GM_FX86SM</a-col>
+                  <a-row style="height: 26px">
+                    <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Start Time:</a-col>
+                    <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val">
+                      {{ detailInfo.osVersion }}
+                    </a-col>
                   </a-row>
-                  <a-row style="height: 26px;">
-                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Bios Supplier:</a-col>
-                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">American Megatrends lnc.</a-col>
+                  <a-row style="height: 26px">
+                    <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Model Number:</a-col>
+                    <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
+                      >TUF GamingFX705GM_FX86SM</a-col
+                    >
+                  </a-row>
+                  <a-row style="height: 26px">
+                    <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Bios Supplier:</a-col>
+                    <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
+                      >American Megatrends lnc.</a-col
+                    >
                   </a-row>
                 </a-col>
               </a-row>
@@ -241,7 +274,7 @@
           </div>
         </div>
       </div>
-      <div style="width:542px">
+      <div style="width: 542px">
         <BoxTitle title="Alarm information"></BoxTitle>
         <div
           class="alarm-info-list"
@@ -251,7 +284,7 @@
         >
           <a-list :dataSource="dataSource_alarm_info">
             <a-list-item slot="renderItem" slot-scope="item">
-              <img class="alarm-info-list-img" src="@/assets/images/abnormalAlarm/icon-r.png" alt="">
+              <img class="alarm-info-list-img" src="@/assets/images/abnormalAlarm/icon-r.png" alt="" />
               <div class="alarm-info-list-info">{{ JSON.parse(item.alarmInfo).info }}</div>
               <div class="alarm-info-list-date">{{ item.alarmStartDate }}</div>
               <a slot="actions" class="alarm-info-list-actions">Detail</a>
@@ -263,11 +296,17 @@
         </div>
       </div>
     </div>
+    <!-- <div class="Timeline">
+      <p>事件时间线</p>
+      <div>
+        <div id="timeL" style="width: 100%; height: 140px"></div>
+      </div>
+    </div> -->
     <div class="content-center">
       <BoxTitle title="Event Timelinen">
         <template slot="right">
           <ul class="legend-list">
-            <li v-for="(item,index) in types" :key="index">
+            <li v-for="(item, index) in types" :key="index">
               <div :style="`background:${item.color}`" class="li-icon"></div>
               {{ item.name }}
             </li>
@@ -300,13 +339,13 @@
             <template slot="right">
               <div class="right-title">
                 <div class="right-title-item">
-                  average value:<i>32%</i>
+                  average value:<i>{{ cpuData.avg }}%</i>
                 </div>
                 <div class="right-title-item">
-                  minimum value:<i>32%</i>
+                  minimum value:<i>{{ cpuData.min }}%</i>
                 </div>
                 <div class="right-title-item">
-                  Maximum value:<i>32%</i>
+                  Maximum value:<i>{{ cpuData.max }}%</i>
                 </div>
               </div>
             </template>
@@ -314,7 +353,7 @@
           <div class="area-cpu" id="areaCpu"></div>
         </div>
       </div>
-      <div style="width:542px">
+      <div style="width: 542px">
         <BoxTitle title="DISK"></BoxTitle>
         <div class="bar-disk" id="disk"></div>
       </div>
@@ -323,82 +362,72 @@
 </template>
 
 <script>
-var base = +new Date(1968, 9, 3);
-var oneDay = 24 * 3600 * 1000;
-var date = [];
-
-var data = [Math.random() * 300];
-
-for (var i = 1; i < 200; i++) {
-    var now = new Date(base += oneDay);
-    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
-    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
-}
-var data1 = [];
-var dataCount = 6;
-var startTime = +new Date();
-var categories = ['cpu'];
+var data1 = []
+// var dataCount = 3
+var startTime, endTime
+var categories = ['cpu']
 var types = [
-  { name: 'Halt', color: '#ec3e0d' },
-  { name: 'Critical', color: '#ff683e' },
-  { name: 'Problematic', color: '#ffbf2e' },
-  { name: 'Maintained', color: '#a2681e' },
-  { name: 'Anomalous', color: '#8dac39' },
-  { name: 'Suspension', color: '#6c6c6c' }
-];
-var legendData = types.map(item=>{
+  { name: 'Normal', color: '#8dac39' },
+  { name: 'Warning', color: '#a2681e' },
+  { name: 'OffLine', color: '#ec3e0d' },
+]
+var legendData = types.map((item) => {
   return item.name
 })
 // Generate mock data
-categories.forEach((category, index) => {
-  var baseTime = startTime;
-  for (var i = 0; i < dataCount; i++) {
-    var typeItem = types[i];
-    var duration = Math.round(Math.random() * 10000);
-    data1.push({
-      name: typeItem.name,
-      value: [index, baseTime, (baseTime += duration), duration],
-      itemStyle: {
-        normal: {
-          color: typeItem.color
-        }
-      }
-    });
-    baseTime += Math.round(Math.random() * 2000);
-  }
-});
+// categories.forEach((category, index) => {
+//   var baseTime = startTime
+//   for (var i = 0; i < dataCount; i++) {
+//     var typeItem = types[i]
+//     var duration = Math.round(Math.random() * 10000)
+//     data1.push({
+//       name: typeItem.name,
+//       value: [index, baseTime, (baseTime += duration), duration],
+//       itemStyle: {
+//         normal: {
+//           color: typeItem.color,
+//         },
+//       },
+//     })
+//     baseTime += Math.round(Math.random() * 2000)
+//   }
+// })
 function renderItem1(params, api) {
-  var categoryIndex = api.value(0);
-  var start = api.coord([api.value(1), categoryIndex]);
-  var end = api.coord([api.value(2), categoryIndex]);
-  var height = api.size([0, 1])[1] * 1;
+  var categoryIndex = api.value(0)
+  var start = api.coord([api.value(1), categoryIndex])
+  var end = api.coord([api.value(2), categoryIndex])
+  var height = api.size([0, 1])[1] * 1
   var rectShape = echarts.graphic.clipRectByRect(
     {
       x: start[0],
       y: start[1] - height / 2,
       width: end[0] - start[0],
-      height: height
+      height: height,
     },
     {
       x: params.coordSys.x,
       y: params.coordSys.y,
       width: params.coordSys.width,
-      height: params.coordSys.height
+      height: params.coordSys.height,
     }
-  );
+  )
   return (
     rectShape && {
       type: 'rect',
       transition: ['shape'],
       shape: rectShape,
-      style: api.style()
+      style: api.style(),
     }
-  );
+  )
 }
-import BoxTitle from '../../components/boxTitle.vue';
-import infiniteScroll from 'vue-infinite-scroll';
+import BoxTitle from '../../components/boxTitle.vue'
+import infiniteScroll from 'vue-infinite-scroll'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 import * as echarts from 'echarts'
+import dateFormat from '@/components/jeecg/JEasyCron/format-date'
+import { Bar, G2 } from '@antv/g2plot'
+import moment from 'moment'
+import { log } from '@antv/g2plot/lib/utils'
 export default {
   directives: { infiniteScroll },
   components: {
@@ -410,94 +439,307 @@ export default {
       dataSource: [],
       loading: false,
       busy: false,
-      ipagination:{
+      ipagination: {
         current: 1,
         pageSize: 10,
-        total: 0
+        total: 0,
       },
       dataSource_alarm_info: [],
       loading_alarm_info: false,
       busy_alarm_info: false,
-      ipagination_alarm_info:{
+      ipagination_alarm_info: {
         current: 1,
         pageSize: 10,
-        total: 0
+        total: 0,
       },
       currIndex: null,
       timeLine: null,
       guageCpu: null,
       guageMemory: null,
       guageLoads: null,
+      currId: '',
+      detailInfo: {},
+      currItemId: '',
+      // cpu
       areaCpu: null,
-      currId: ""
-      
+      cpuData: {
+        max: 0,
+        min: 0,
+        avg: 0,
+      },
     }
   },
   mounted() {
     // this.currId = this.$route.query.serverId||""
-    this.getSysServer(res => {
+    this.getSysServer((res) => {
       this.loading = false
       if (res.success) {
         this.ipagination.total = res.result.total
         this.dataSource = res.result.records
         if (this.$route.query.serverId) {
-          this.currId = this.$route.query.serverId
-          this.currIndex = this.dataSource.findIndex(item=>item.id === this.currId)
+          this.serverId = this.$route.query.serverId
+          this.currIndex = this.dataSource.findIndex((item) => item.sourceId === this.serverId)
+          this.currId = this.dataSource.find((item) => item.sourceId === this.serverId).hostId
+          this.currItemId = this.dataSource.find((item) => item.sourceId === this.serverId).cpuUsedItemId
         } else {
-          this.currId = this.dataSource[0].id
+          this.currId = this.dataSource[0].hostId
+          this.currItemId = this.dataSource[0].cpuUsedItemId
           this.currIndex = 0
         }
+        this.getBasiclnfo(this.currId)
+        this.getCpuUtilizationData()
+        this.getTimeLineData()
+        // this.EchartsTimeline()
       } else {
-        this.$message.warning("This operation fails. Contact your system administrator")
+        this.$message.warning('This operation fails. Contact your system administrator')
       }
-    });
-    this.getServerAlarmHistory(res => {
+    })
+    this.getServerAlarmHistory((res) => {
       this.loading_alarm_info = false
       if (res.success) {
         this.ipagination_alarm_info.total = res.result.total
         this.dataSource_alarm_info = res.result.records
       } else {
-        this.$message.warning("This operation fails. Contact your system administrator")
+        this.$message.warning('This operation fails. Contact your system administrator')
       }
-    });
+    })
     this.$nextTick(() => {
       setTimeout(() => {
-        this.drawTimeline()
-        this.drawGuageCpu()
-        this.drawGuageMemory()
         this.drawGuageLoads()
-        this.drawAreaCpu()
-        this.drawDisk()
-      },0)
+      }, 0)
     })
   },
   methods: {
+    // Echarts (时间线)
+    EchartsTimeline() {
+      console.log(3456789)
+      const params = {
+        itemId: '37550',
+        itemType: 0,
+        start: '2023-09-21 00:00:00',
+        end: '2023-09-21 18:54:00',
+      }
+      getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
+        let data = res.result
+        const percentage = 100 / data.length
+        let indexArr = [[0, 0]]
+        for (let i = 1; i < data.length; i++) {
+          const num = i + 1
+          if (i === data.length - 1) {
+            indexArr[0][1] = data.length
+          }
+          if (data[i - 1].value != data[i].value) {
+            indexArr[0][1] = i
+            indexArr.unshift([i, num])
+          }
+        }
+        let objArr = [],
+          echartData = []
+        indexArr.map((item) => {
+          objArr.push(data.slice(item[0], item[1]))
+        })
+        const statusConversion = (val) => {
+          if (val == 1) {
+            return '正常'
+          } else if (val == 2) {
+            return '警告'
+          } else {
+            return '离线'
+          }
+        }
+        objArr.map((item, index) => {
+          let obj = null
+          if (index === 0) {
+            const arr = objArr[index + 1]
+            let timeInterval
+            if (arr) {
+              timeInterval = [item[0].date, arr[arr.length - 1].date]
+            } else {
+              timeInterval = [item[0].date, item[item.length - 1].date]
+            }
+            obj = {
+              type: 'Cpu',
+              value: statusConversion(item[0].value),
+              valueInterval: [0, item.length * percentage],
+              timeInterval: timeInterval, // 时间区间
+            }
+          } else if (index === objArr.length - 1) {
+            const arr = echartData[echartData.length - 1]
+            obj = {
+              type: 'Cpu',
+              value: statusConversion(item[0].value),
+              valueInterval: [arr.valueInterval[1], 100],
+              timeInterval: [arr.timeInterval[1], item[0].date], // 时间区间
+            }
+          } else {
+            const arr = echartData[echartData.length - 1],
+              arr1 = objArr[index + 1],
+              num = arr.valueInterval[1],
+              length = item.length * percentage
+            obj = {
+              type: 'Cpu',
+              value: statusConversion(item[0].value),
+              valueInterval: [num, length + num],
+              timeInterval: [arr.timeInterval[1], arr1[arr1.length - 1].date], // 时间区间
+            }
+          }
+          echartData.push(obj)
+        })
+        if (this.barPlot) {
+          this.barPlot.changeData(echartData)
+          return
+        }
+        const timeDateHours = (val) => {
+          return moment(val).format('HH:mm')
+        }
+        this.barPlot = new Bar('timeL', {
+          data: echartData.reverse(),
+          xField: 'valueInterval',
+          yField: 'type',
+          isRange: true,
+          seriesField: 'value',
+          padding: 20,
+          yAxis: {
+            label: null,
+          },
+          xAxis: {
+            label: {
+              formatter: (params) => {
+                // console.log(params)
+                const percentage = params / 100,
+                  index = parseInt((data.length - 1) * percentage)
+
+                return timeDateHours(data[index].date)
+              },
+            },
+          },
+          legend: {
+            position: "top-left'",
+          },
+          tooltip: false,
+        })
+        this.barPlot.render()
+      })
+    },
+    moment,
+    // Basic lnformation
+    getBasiclnfo(sourceId) {
+      let params = { hostId: sourceId }
+      getAction('/sysServer/detailsBasicInfo', params).then((res) => {
+        if (res.success) {
+          this.detailInfo = res.result
+          this.drawGuageCpu()
+          this.drawGuageMemory()
+          this.drawDisk()
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
+    },
+    //CPU utilization
+    getCpuUtilizationData() {
+      let params = {
+        itemId: this.currItemId,
+        // itemId: '37550',
+        itemType: 0,
+        start: `${dateFormat(new Date(), 'yyyy-MM-dd')} 00:00:00`,
+        end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+      }
+      getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
+        const arr = res.result.map((x) => x.value)
+        console.log(Math.max(...arr), Math.min(...arr))
+        this.cpuData.max = Math.max(...arr).toFixed(2)
+        this.cpuData.min = Math.min(...arr).toFixed(2)
+        let sum = arr.reduce((tatal, num) => tatal + num, 0)
+        this.cpuData.avg = (sum / arr.length).toFixed(2)
+        this.cpuData.xData = res.result.map((item) => {
+          return dateFormat(new Date(item.date), 'hh:mm')
+        })
+        this.cpuData.yData = res.result.map((item) => {
+          return item.value
+        })
+        this.drawAreaCpu()
+      })
+    },
+    //Event Timelinen
+    getTimeLineData() {
+      let params = {
+        itemId: this.currItemId,
+        // itemId: '37550',
+        itemType: 0,
+        start: `${dateFormat(new Date(), 'yyyy-MM-dd')} 00:00:00`,
+        end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+      }
+      getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
+        let data = res.result
+        startTime = data[0].clock * 1000
+        let indexArr = [[0, 0]]
+        for (let i = 1; i < data.length; i++) {
+          const num = i + 1
+          if (i === data.length - 1) {
+            indexArr[0][1] = data.length
+          }
+          if (data[i - 1].value != data[i].value) {
+            indexArr[0][1] = i
+            indexArr.unshift([i, num])
+          }
+        }
+        let objArr = [],
+          echartData = []
+        indexArr.map((item) => {
+          objArr.push(data.slice(item[0], item[1]))
+        })
+        categories.forEach((category, idx) => {
+          objArr.map((item, index) => {
+            let obj = null
+            let timeInterval
+            if (item.length > 0) {
+              timeInterval = [item[0].clock * 1000, item[0].clock * 1000 + 60000 * item.length]
+              obj = {
+                name: item[0].value == 1 ? 'Normal' : item[0].value == 2 ? 'Warning' : 'OffLine',
+                value: [idx, timeInterval[0], timeInterval[1], 60000 * item.length],
+                itemStyle: {
+                  normal: {
+                    color: item[0].value == 1 ? '#8dac39' : item[0].value == 2 ? '#a2681e' : '#ec3e0d',
+                  },
+                },
+              }
+            }
+
+            echartData.push(obj)
+          })
+        })
+        data1 = echartData
+        this.drawTimeline()
+      })
+    },
+
     getSysServer(callBack) {
       this.loading = true
       let params = {
         pageNo: this.ipagination.current,
-        pageSize: this.ipagination.pageSize
+        pageSize: this.ipagination.pageSize,
       }
-      getAction("/sysServer/findPage", params).then(res => {
+      getAction('/sysServer/sourcePage', params).then((res) => {
         callBack(res)
       })
     },
     handleInfiniteOnLoad() {
-      if (this.dataSource.length>0) {
-        const dataSource = this.dataSource;
-        this.loading = true;
+      if (this.dataSource.length > 0) {
+        const dataSource = this.dataSource
+        this.loading = true
         if (dataSource.length == this.ipagination.total) {
-          this.$message.warning('Infinite List loaded all');
-          this.busy = true;
-          this.loading = false;
-          return;
+          this.$message.warning('Infinite List loaded all')
+          this.busy = true
+          this.loading = false
+          return
         } else {
           this.ipagination.current += 1
-          this.getSysServer(res => {
+          this.getSysServer((res) => {
             this.ipagination.total = res.result.total
-            this.dataSource = dataSource.concat(res.result.records);
-            this.loading = false;
-          });
+            this.dataSource = dataSource.concat(res.result.records)
+            this.loading = false
+          })
         }
       }
     },
@@ -507,69 +749,72 @@ export default {
     getServerAlarmHistory(callBack) {
       this.loading = true
       let params = {
-        startDate: "2022-08-01",
-        endDate: "2023-08-07",
+        startDate: '2022-08-01',
+        endDate: '2023-08-07',
         pageNo: this.ipagination_alarm_info.current,
         pageSize: this.ipagination_alarm_info.pageSize,
       }
-      getAction("/sysServer/findAlarmHistory", params).then(res => {
+      getAction('/sysServer/findAlarmHistory', params).then((res) => {
         callBack(res)
       })
     },
     handleInfiniteAlarmInfo() {
-      if (this.dataSource_alarm_info.length>0) {
-        const dataSource_alarm_info = this.dataSource_alarm_info;
-        this.loading_alarm_info = true;
+      if (this.dataSource_alarm_info.length > 0) {
+        const dataSource_alarm_info = this.dataSource_alarm_info
+        this.loading_alarm_info = true
         if (dataSource_alarm_info.length == this.ipagination_alarm_info.total) {
-          this.$message.warning('Infinite List loaded all');
-          this.busy_alarm_info = true;
-          this.loading_alarm_info = false;
-          return;
+          this.$message.warning('Infinite List loaded all')
+          this.busy_alarm_info = true
+          this.loading_alarm_info = false
+          return
         } else {
           this.ipagination_alarm_info.current += 1
-          this.getServerAlarmHistory(res => {
+          this.getServerAlarmHistory((res) => {
             this.ipagination_alarm_info.total = res.result.total
-            this.dataSource_alarm_info = dataSource_alarm_info.concat(res.result.records);
-            this.loading_alarm_info = false;
-          });
+            this.dataSource_alarm_info = dataSource_alarm_info.concat(res.result.records)
+            this.loading_alarm_info = false
+          })
         }
       }
     },
-    
+
     drawTimeline() {
-      this.timeLine = echarts.init(document.getElementById("timeLine"))
+      this.timeLine = echarts.init(document.getElementById('timeLine'))
       let option = {
-        color:['#7b9ce1','#bd6d6c','#75d874','#e0bc78','#dc77dc','#72b362'],
         tooltip: {
           formatter: function (params) {
-            return params.marker + params.name + ': ' + params.value[3] + ' ms';
-          }
+            return params.marker + params.name + ': ' + params.value[3] / 60000 + 's'
+          },
         },
         grid: {
           left: '0%',
           right: '0%',
           bottom: '0',
-          top:15,
+          top: 15,
           height: 32,
           containLabel: false,
-          show: true
+          show: true,
         },
         xAxis: {
           min: startTime,
           axisLabel: {
-            color: "#ade6ee",
+            color: '#ade6ee',
             fontSize: 14,
-            formatter: function (val) {
-              return Math.max(0, val - startTime) + ' ms';
-            }
+            formatter: function (val, index) {
+              if (index === 0) {
+                return '          ' + dateFormat(new Date(val), 'hh:mm')
+              }
+
+              return dateFormat(new Date(val), 'hh:mm') + '             '
+            },
           },
           splitLine: {
-            show: false
-          }
+            show: false,
+          },
         },
         yAxis: {
-          show:false,
-          data: categories
+          show: false,
+          data: categories,
         },
         series: [
           { name: legendData[0], type: 'bar', data: [] },
@@ -583,19 +828,19 @@ export default {
             renderItem: renderItem1,
             encode: {
               x: [1, 2],
-              y: 0
+              y: 0,
             },
-            data: data1
-          }
-        ]
+            data: data1,
+          },
+        ],
       }
       this.timeLine.setOption(option)
-      window.addEventListener("resize", function () {
-        this.timeLine.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.timeLine.resize()
+      })
     },
     drawGuageCpu() {
-      this.guageCpu = echarts.init(document.getElementById("cpu"))
+      this.guageCpu = echarts.init(document.getElementById('cpu'))
       let option = {
         series: [
           {
@@ -606,51 +851,51 @@ export default {
             endAngle: 0,
             min: 0,
             max: 100,
-            itemStyle:{
-              color: "#8531f6"
+            itemStyle: {
+              color: '#8531f6',
             },
             progress: {
               show: true,
-              width: 20
+              width: 20,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
               lineStyle: {
-                color:[[1, '#162b39']],
-                width: 20
-              }
+                color: [[1, '#162b39']],
+                width: 20,
+              },
             },
             axisTick: {
-              show:false,
+              show: false,
             },
             splitLine: {
-              show:false,
+              show: false,
             },
             axisLabel: {
-              show:false,
+              show: false,
             },
             anchor: {
-              show: false
+              show: false,
             },
             title: {
-              show: false
+              show: false,
             },
             detail: {
               valueAnimation: true,
-              fontFamily: "MicrogrammaD-MediExte",
+              fontFamily: 'MicrogrammaD-MediExte',
               fontSize: 24,
               lineHeight: 28,
               offsetCenter: [0, '-10%'],
               formatter: '{value} %',
-              color: 'white'
+              color: 'white',
             },
             data: [
               {
-                value: 20
-              }
-            ]
+                value: this.detailInfo.cpuUsed || 0,
+              },
+            ],
           },
           {
             type: 'gauge',
@@ -667,51 +912,56 @@ export default {
                 y: 1,
                 x2: 0,
                 y2: 0,
-                colorStops: [{
-                    offset: 0, color: '#7776ff' // 0% 处的颜色
-                }, {
-                    offset: 1, color: '#ae2cf1' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#7776ff', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#ae2cf1', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
             progress: {
               show: true,
-              width: 2
+              width: 2,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
-              show: false
+              show: false,
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
-              show: false
+              show: false,
             },
             axisLabel: {
-              show: false
+              show: false,
             },
             detail: {
-              show: false
+              show: false,
             },
             data: [
               {
-                value: 100
-              }
-            ]
-          }
-        ]
+                value: 100,
+              },
+            ],
+          },
+        ],
       }
       this.guageCpu.setOption(option)
-      window.addEventListener("resize", function () {
-        this.guageCpu.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.guageCpu.resize()
+      })
     },
     drawGuageMemory() {
-      this.guageMemory = echarts.init(document.getElementById("memory"))
+      this.guageMemory = echarts.init(document.getElementById('memory'))
       let option = {
         series: [
           {
@@ -722,51 +972,51 @@ export default {
             endAngle: 0,
             min: 0,
             max: 100,
-            itemStyle:{
-              color: "#1aad32"
+            itemStyle: {
+              color: '#1aad32',
             },
             progress: {
               show: true,
-              width: 20
+              width: 20,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
               lineStyle: {
-                color:[[1, '#162b39']],
-                width: 20
-              }
+                color: [[1, '#162b39']],
+                width: 20,
+              },
             },
             axisTick: {
-              show:false,
+              show: false,
             },
             splitLine: {
-              show:false,
+              show: false,
             },
             axisLabel: {
-              show:false,
+              show: false,
             },
             anchor: {
-              show: false
+              show: false,
             },
             title: {
-              show: false
+              show: false,
             },
             detail: {
               valueAnimation: true,
-              fontFamily: "MicrogrammaD-MediExte",
+              fontFamily: 'MicrogrammaD-MediExte',
               fontSize: 24,
               lineHeight: 28,
               offsetCenter: [0, '-10%'],
               formatter: '{value} %',
-              color: 'white'
+              color: 'white',
             },
             data: [
               {
-                value: 20
-              }
-            ]
+                value: this.detailInfo.memoryUsed || 0,
+              },
+            ],
           },
           {
             type: 'gauge',
@@ -783,51 +1033,56 @@ export default {
                 y: 1,
                 x2: 0,
                 y2: 0,
-                colorStops: [{
-                    offset: 0, color: '#1bad33' // 0% 处的颜色
-                }, {
-                    offset: 1, color: '#14ea38' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#1bad33', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#14ea38', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
             progress: {
               show: true,
-              width: 2
+              width: 2,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
-              show: false
+              show: false,
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
-              show: false
+              show: false,
             },
             axisLabel: {
-              show: false
+              show: false,
             },
             detail: {
-              show: false
+              show: false,
             },
             data: [
               {
-                value: 100
-              }
-            ]
-          }
-        ]
+                value: 100,
+              },
+            ],
+          },
+        ],
       }
       this.guageMemory.setOption(option)
-      window.addEventListener("resize", function () {
-        this.guageMemory.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.guageMemory.resize()
+      })
     },
     drawGuageLoads() {
-      this.guageLoads = echarts.init(document.getElementById("loads"))
+      this.guageLoads = echarts.init(document.getElementById('loads'))
       let option = {
         series: [
           {
@@ -838,51 +1093,51 @@ export default {
             endAngle: 0,
             min: 0,
             max: 100,
-            itemStyle:{
-              color: "#61bbfa"
+            itemStyle: {
+              color: '#61bbfa',
             },
             progress: {
               show: true,
-              width: 20
+              width: 20,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
               lineStyle: {
-                color:[[1, '#162b39']],
-                width: 20
-              }
+                color: [[1, '#162b39']],
+                width: 20,
+              },
             },
             axisTick: {
-              show:false,
+              show: false,
             },
             splitLine: {
-              show:false,
+              show: false,
             },
             axisLabel: {
-              show:false,
+              show: false,
             },
             anchor: {
-              show: false
+              show: false,
             },
             title: {
-              show: false
+              show: false,
             },
             detail: {
               valueAnimation: true,
-              fontFamily: "MicrogrammaD-MediExte",
+              fontFamily: 'MicrogrammaD-MediExte',
               fontSize: 24,
               lineHeight: 28,
               offsetCenter: [0, '-10%'],
               formatter: '{value} %',
-              color: 'white'
+              color: 'white',
             },
             data: [
               {
-                value: 20
-              }
-            ]
+                value: 20,
+              },
+            ],
           },
           {
             type: 'gauge',
@@ -899,173 +1154,178 @@ export default {
                 y: 1,
                 x2: 0,
                 y2: 0,
-                colorStops: [{
-                    offset: 0, color: '#4facfe' // 0% 处的颜色
-                }, {
-                    offset: 1, color: '#00f2fe' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#4facfe', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#00f2fe', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
             progress: {
               show: true,
-              width: 2
+              width: 2,
             },
             pointer: {
-              show: false
+              show: false,
             },
             axisLine: {
-              show: false
+              show: false,
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
-              show: false
+              show: false,
             },
             axisLabel: {
-              show: false
+              show: false,
             },
             detail: {
-              show: false
+              show: false,
             },
             data: [
               {
-                value: 100
-              }
-            ]
-          }
-        ]
+                value: 100,
+              },
+            ],
+          },
+        ],
       }
       this.guageLoads.setOption(option)
-      window.addEventListener("resize", function () {
-        this.guageLoads.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.guageLoads.resize()
+      })
     },
     drawAreaCpu() {
-      this.areaCpu = echarts.init(document.getElementById("areaCpu"))
+      this.areaCpu = echarts.init(document.getElementById('areaCpu'))
       let option = {
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: '0%',
           right: '0%',
           bottom: '0',
-          top:15,
-          containLabel: true
+          top: 15,
+          containLabel: true,
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.5)"
-            }
+              color: 'rgba(119, 181, 213, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
-          data: date
+          data: this.cpuData.xData,
         },
         yAxis: {
           type: 'value',
           axisLine: {
-            show:true,
+            show: true,
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.5)"
-            }
+              color: 'rgba(119, 181, 213, 0.5)',
+            },
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.2)"
-            }
+              color: 'rgba(119, 181, 213, 0.2)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
         },
         series: [
           {
-            type:'line',
-            smooth:true,
+            type: 'line',
+            smooth: true,
             symbol: 'none',
             sampling: 'average',
-            itemStyle:{ normal:{color:"#10b3d6"}},
+            itemStyle: { normal: { color: '#10b3d6' } },
             areaStyle: {
-                normal: {
-                color: "#10b3d6",
+              normal: {
+                color: '#10b3d6',
               },
             },
-            data: data
-          }
-        ]
+            data: this.cpuData.yData,
+          },
+        ],
       }
       this.areaCpu.setOption(option)
-      window.addEventListener("resize", function () {
-        this.areaCpu.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.areaCpu.resize()
+      })
     },
     drawDisk() {
-      this.barDisk = echarts.init(document.getElementById("disk"))
+      this.barDisk = echarts.init(document.getElementById('disk'))
       let option = {
         tooltip: {
-          trigger: 'item'
+          trigger: 'item',
         },
         grid: {
           left: '0%',
           right: '0%',
           bottom: '0',
-          top:15,
-          containLabel: true
+          top: 15,
+          containLabel: true,
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.5)"
-            }
+              color: 'rgba(119, 181, 213, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
-          data: ['C', 'D', 'E']
+          data: this.detailInfo.diskUsed.xData,
         },
         yAxis: {
           type: 'value',
           min: 0,
           max: 100,
-          
+
           axisLine: {
-            show:true,
+            show: true,
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.5)"
-            }
+              color: 'rgba(119, 181, 213, 0.5)',
+            },
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(119, 181, 213, 0.2)"
-            }
+              color: 'rgba(119, 181, 213, 0.2)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)",
-            formatter: "{value}%"
+            color: 'rgba(173, 230, 238, 1)',
+            formatter: '{value}%',
           },
         },
         series: [
           {
-            type: "bar",
+            type: 'bar',
             barWidth: 50,
             itemStyle: {
               normal: {
-                color: function(params) {
+                color: function (params) {
                   //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                   var colorList = [
                     {
@@ -1074,58 +1334,75 @@ export default {
                       y: 1,
                       x2: 0,
                       y2: 0,
-                      colorStops: [{
-                          offset: 0, color: '#b43c2b' // 0% 处的颜色
-                      }, {
-                          offset: 1, color: '#d3a721' // 100% 处的颜色
-                      }],
-                    }, {
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: '#b43c2b', // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: '#d3a721', // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    {
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
-                      colorStops: [{
-                          offset: 0, color: '#0c5fa6' // 0% 处的颜色
-                      }, {
-                          offset: 1, color: '#0af0f8' // 100% 处的颜色
-                      }],
-                    }, {
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: '#0c5fa6', // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: '#0af0f8', // 100% 处的颜色
+                        },
+                      ],
+                    },
+                    {
                       type: 'linear',
                       x: 0,
                       y: 1,
                       x2: 0,
                       y2: 0,
-                      colorStops: [{
-                          offset: 0, color: '#0a6f0a' // 0% 处的颜色
-                      }, {
-                          offset: 1, color: '#90d40c' // 100% 处的颜色
-                      }],
-                    }
-                  ];
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: '#0a6f0a', // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: '#90d40c', // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  ]
                   return colorList[params.dataIndex]
-                }
+                },
               },
             },
-            data: [60, 80, 30],
+            data: this.detailInfo.diskUsed.yData,
             z: 10,
             zlevel: 0,
           },
           {
             // 分隔
-            type: "pictorialBar",
+            type: 'pictorialBar',
             itemStyle: {
               normal: {
-                color: "#0F375F",
+                color: '#0F375F',
               },
             },
-            symbolRepeat: "fixed",
+            symbolRepeat: 'fixed',
             symbolMargin: 2,
-            symbol: "rect",
+            symbol: 'rect',
             symbolClip: true,
             symbolSize: [50, 4],
-            symbolPosition: "start",
-            data: [60, 80, 30],
+            symbolPosition: 'start',
+            data: this.detailInfo.diskUsed.yData,
             width: 5,
             z: 0,
             zlevel: 1,
@@ -1133,33 +1410,33 @@ export default {
         ],
       }
       this.barDisk.setOption(option)
-      window.addEventListener("resize", function () {
-        this.barDisk.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.barDisk.resize()
+      })
     },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.content-top{
+.content-top {
   width: 100%;
   height: 331px;
   // height: 43.5%;
   display: flex;
   justify-content: space-between;
-  .basic-info{
+  .basic-info {
     width: 100%;
-    height:291px;
+    height: 291px;
     padding: 15px 0;
     display: flex;
     justify-content: space-between;
-    &-list{
+    &-list {
       height: 100%;
       width: 170px;
       overflow: auto;
       border: solid 1px rgba(65, 111, 127, 0.5);
-      .ant-list-item{
+      .ant-list-item {
         border: none;
         height: 32px;
         justify-content: center;
@@ -1169,12 +1446,12 @@ export default {
         color: #ade6ee;
         cursor: pointer;
       }
-      .ant-list-item:nth-child(even){
+      .ant-list-item:nth-child(even) {
         background-color: rgba(13, 109, 118, 0.2);
       }
-      .ant-list-item-active{
+      .ant-list-item-active {
         background-color: rgb(15, 158, 171, 0.5) !important;
-	      color: #ffffff; 
+        color: #ffffff;
       }
       .demo-loading-container {
         position: absolute;
@@ -1183,42 +1460,41 @@ export default {
         text-align: center;
       }
     }
-    &-detail{
+    &-detail {
       height: 100%;
       width: calc(100% - 185px);
-      &-col{
+      &-col {
         height: 100%;
         position: relative;
-        &-img{
+        &-img {
           width: 40px;
           height: 40px;
           float: left;
-          img{
+          img {
             width: 100%;
             height: 100%;
           }
         }
-        &-msg{
+        &-msg {
           float: left;
           height: 100%;
           margin-left: 15px;
-          &-title{
+          &-title {
             height: 14px;
             position: absolute;
             left: 47px;
             top: 2px;
-            .circle{
+            .circle {
               position: absolute;
               left: 0;
               top: 0;
               width: 12px;
               height: 12px;
               border-radius: 50%;
-              background-image: linear-gradient(90deg, #0e98a8 0%, #00fffc 100%), 
-              linear-gradient( #0cecca, #0cecca);
+              background-image: linear-gradient(90deg, #0e98a8 0%, #00fffc 100%), linear-gradient(#0cecca, #0cecca);
               background-blend-mode: normal, normal;
             }
-            .title{
+            .title {
               position: absolute;
               left: 20px;
               top: 0;
@@ -1230,7 +1506,7 @@ export default {
               white-space: nowrap;
             }
           }
-          &-num{
+          &-num {
             height: 20px;
             position: absolute;
             left: 47px;
@@ -1241,26 +1517,26 @@ export default {
             letter-spacing: 1px;
             color: #ffffff;
           }
-          .state{
+          .state {
             font-size: 16px;
             letter-spacing: 1px;
             color: #06cdd3;
           }
         }
       }
-      &-content{
+      &-content {
         height: 161px;
         border: solid 1px rgba(65, 111, 127, 0.5);
         background-color: rgba(2, 40, 43, 0.5);
         margin-top: 10px;
         padding: 0 10px;
-        &-key{
+        &-key {
           font-family: ArialMT;
           font-size: 12px;
           line-height: 26px;
           color: #6ebad0;
         }
-        &-val{
+        &-val {
           font-family: ArialMT;
           font-size: 12px;
           line-height: 26px;
@@ -1269,28 +1545,28 @@ export default {
       }
     }
   }
-  .alarm-info-list{
+  .alarm-info-list {
     height: 100%;
     overflow: auto;
     font-family: ArialMT;
     font-size: 16px;
-    .ant-list-item{
+    .ant-list-item {
       border: none;
       height: 52px;
       letter-spacing: 1px;
       color: #ade6ee;
       justify-content: flex-start;
     }
-    .ant-list-item:nth-child(odd){
+    .ant-list-item:nth-child(odd) {
       background-color: rgba(13, 109, 118, 0.2);
     }
-    &-img{
+    &-img {
       display: inline-block;
       width: 24px;
-	    height: 24px;
+      height: 24px;
       margin-left: 12px;
     }
-    &-info{
+    &-info {
       width: 188px;
       overflow: hidden;
       white-space: nowrap;
@@ -1299,32 +1575,31 @@ export default {
       display: inline-block;
       color: #ffffff;
     }
-    &-date{
+    &-date {
       display: inline-block;
       color: #90b4c5;
       margin-left: 35px;
     }
-    &-actions{
-      
+    &-actions {
       color: #17c6f2;
     }
   }
 }
-.content-center{
+.content-center {
   width: 100%;
   height: 115px;
   position: relative;
   // height: 14.9%;
-  .legend-list{
-    list-style:none;
-    li{
+  .legend-list {
+    list-style: none;
+    li {
       float: left;
       font-size: 14px;
       margin-left: 20px;
       font-family: MicrosoftYaHei;
       font-weight: normal;
       color: #ade6ee;
-      .li-icon{
+      .li-icon {
         display: inline-block;
         vertical-align: middle;
         width: 12px;
@@ -1335,7 +1610,7 @@ export default {
       }
     }
   }
-  .line-bg{
+  .line-bg {
     width: 100%;
     height: 32px;
     position: absolute;
@@ -1343,58 +1618,72 @@ export default {
     top: 55px;
     background: url(~@/assets/images/abnormalAlarm/line.png) repeat;
   }
-  .time-line{
+  .time-line {
     width: 100%;
     height: 75px;
     position: relative;
   }
 }
-.content-bottom{
+.content-bottom {
   width: 100%;
   height: calc(100% - 446px);
   // height: 41.6%;
   display: flex;
   justify-content: space-between;
-  &-left{
-    width: calc( 100% - 562px);
+  &-left {
+    width: calc(100% - 562px);
     height: 100%;
-    &-top{
+    &-top {
       width: 100%;
       height: 160px;
-      .gauge-content{
+      .gauge-content {
         width: 100%;
         height: 120px;
       }
     }
-    &-bottom{
+    &-bottom {
       width: 100%;
       height: calc(100% - 160px);
-      .right-title{
+      .right-title {
         font-family: ArialMT;
         font-size: 12px;
         letter-spacing: 1px;
         color: #ade6ee;
         font-weight: normal;
-        &-item{
+        &-item {
           display: inline-block;
           margin-left: 20px;
         }
-        i{
+        i {
           font-size: 16px;
           font-style: normal;
           letter-spacing: 2px;
           color: #ade6ee;
         }
       }
-      .area-cpu{
+      .area-cpu {
         width: 100%;
         height: calc(100% - 40px);
       }
     }
   }
-  .bar-disk{
+  .bar-disk {
     width: 100%;
     height: calc(100% - 40px);
   }
 }
+.Timeline {
+  margin-top: 30px;
+  > p {
+    color: #1a2449 !important;
+    font-size: 16px;
+    font-weight: bold;
+  }
+  > div {
+    width: 1700px;
+    height: 168px;
+    background: #ffffff;
+    border-radius: 4px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue b/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
index 323ebd5..74838cb 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
@@ -2,131 +2,135 @@
   <div class="line-box">
     <BoxTitle :title="title">
       <template slot="other">
-        <img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="">
+        <img src="@/assets/images/abnormalAlarm/big.png" @click="changeSize" alt="" />
       </template>
     </BoxTitle>
-    <div style="width: 100%;height: calc(100% - 40px);" :id="layout"></div>
+    <div style="width: 100%; height: calc(100% - 40px)" :id="layout"></div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
-import BoxTitle from '../../components/boxTitle.vue';
+import BoxTitle from '../../components/boxTitle.vue'
 export default {
-  props: ["title","layout","dataSource"],
+  props: ['title', 'layout', 'dataSource', 'xData'],
   components: {
     BoxTitle,
   },
   data() {
     return {
       option: {},
-      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     }
   },
-  mounted () {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        this.drawLine()
-      },0)
-    })
+  watch: {
+    dataSource: {
+      handler: function () {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.drawLine()
+          }, 0)
+        })
+      },
+      immediate: true,
+    },
   },
   methods: {
     changeSize() {
-      this.$emit("zoom",this.title,this.option)
+      this.$emit('zoom', this.title, this.option)
     },
     drawLine() {
       let myLine = echarts.init(document.getElementById(`${this.layout}`))
-      let series = this.dataSource.map(item => {
+      let series = this.dataSource.map((item) => {
         return {
           type: 'line',
-          name: item.name, 
+          name: item.name,
           symbol: 'none',
-          data: item.data
+          data: item.data,
         }
       })
       this.option = {
-        color: ["#00ff5a", "#0096ff", "#ffc600"],
+        color: ['#00ff5a', '#0096ff', '#ffc600'],
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: 0,
           right: 0,
           top: 35,
           bottom: 0,
-          containLabel: true
+          containLabel: true,
         },
         legend: {
-          icon: "roundRect",
+          icon: 'roundRect',
           itemHeight: 12, // 图例icon高度
           itemWidth: 12, // 图例icon宽度
           top: 0,
           right: 0,
           textStyle: {
-            color: "#ade6ee",
+            color: '#ade6ee',
             lineHeight: 12,
             rich: {
               a: {
                 verticalAlign: 'middle',
               },
             },
-            padding:[0,-2,-4,0],
-          }
+            padding: [0, -2, -4, 0],
+          },
         },
         xAxis: {
           type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
-            }
+              color: 'rgba(115, 191, 255, 0.2)',
+            },
           },
           splitLine: {
             show: true,
             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.xData || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         },
         yAxis: {
           type: 'value',
           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
-      };
+        series,
+      }
       myLine.setOption(this.option)
-      window.addEventListener("resize", function () {
-        myLine.resize();
+      window.addEventListener('resize', function () {
+        myLine.resize()
       })
     },
   },
@@ -134,7 +138,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.line-box{
+.line-box {
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
index 0d2bf18..7a046e5 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/monitor.vue
@@ -1,17 +1,18 @@
 <template>
-  <div style="height: 100%;">
+  <div style="height: 100%">
     <div class="monitor-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,101 +45,110 @@
       </div>
     </div>
     <div class="monitor-content">
-      <a-row :gutter="[20,15]" style="height: 100%;">
-        <a-col :span="8" style="height: 34%;">
+      <a-row :gutter="[20, 15]" style="height: 100%">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="CPU utilizatior"
               layout="line1"
-              :dataSource="data1"
+              :xData="data1.xData"
+              :dataSource="data1.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Memory Usage"
               layout="line2"
-              :dataSource="data2"
+              :xData="data2.xData"
+              :dataSource="data2.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
-              <LineChart
+            <LineChart
               title="System Load"
               layout="line3"
-              :dataSource="data3"
+              :xData="data3.xData"
+              :dataSource="data3.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Disk Read/Write BPS (Byte/s)"
               layout="line4"
-              :dataSource="data4"
+              :xData="data4.xData"
+              :dataSource="data4.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Disk IOPS (Count/s)"
               layout="line5"
-              :dataSource="data5"
+              :xData="data5.xData"
+              :dataSource="data5.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Disk Usage/Lnode Usage"
               layout="line6"
-              :dataSource="data6"
+              :xData="data6.xData"
+              :dataSource="data6.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Public Bandwidth"
               layout="line7"
-              :dataSource="data7"
+              :xData="data7.xData"
+              :dataSource="data7.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="Internal Network Bandwidth (bit/s)"
               layout="line8"
-              :dataSource="data8"
+              :xData="data8.xData"
+              :dataSource="data8.data"
               @zoom="handelZoom"
             >
             </LineChart>
           </div>
         </a-col>
-        <a-col :span="8" style="height: 34%;">
+        <a-col :span="8" style="height: 34%">
           <div class="monitor-content-item">
             <LineChart
               title="ECS Concurrent Connections (Count)"
               layout="line9"
-              :dataSource="data9"
+              :xData="data9.xData"
+              :dataSource="data9.data"
               @zoom="handelZoom"
             >
             </LineChart>
@@ -145,12 +156,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"></div>
     </a-modal>
     <CreateRules
@@ -165,122 +171,127 @@
 </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 BoxTitle from '../../components/boxTitle.vue'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
-import LineChart from './lineChart.vue';
-import CreateRules from './createRules.vue';
+import LineChart from './lineChart.vue'
+import CreateRules from './createRules.vue'
 export default {
   components: {
     BoxTitle,
     LineChart,
-    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},
-      ],
-      data1: [
-        {
-          name: "CPU Total",
-          data: [150, 230, 224, 218, 135, 147, 260]
-        }
-      ],
-      data2: [
-        {
-          name: "Memory Used Utilization",
-          data: [150, 230, 224, 218, 135, 147, 260]
-        }
-      ],
-      data3: [
-        {
-          name: "Load 1m",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "Load 5m",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        },
-        {
-          name: "Load 15m",
-          data: [5, 23, 12, 48, 15, 27, 56]
-        },
-      ],
-      data4: [
-        {
-          name: "Disk BPS Read",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "Disk BPS Write",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        }
-      ],
-      data5: [
-        {
-          name: "Disk IOPS Read",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "Disk IOPS Write",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        }
-      ],
-      data6: [
-        {
-          name: "Disk Usage Utilization",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "Lnode Utilization",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        }
-      ],
-      data7: [
-        {
-          name: "VPC PublicIP Lnterner in Rate",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "VPC PublicIP Lnterner Out Rate",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        }
-      ],
-      data8: [
-        {
-          name: "Intranet in Rete",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        },
-        {
-          name: "Intranet Out Rete",
-          data: [25, 13, 32, 18, 45, 27, 36]
-        }
-      ],
-      data9: [
-        {
-          name: "Intranet Out Rete",
-          data: [15, 23, 22, 28, 35, 47, 26]
-        }
+        { label: '1Hours', value: 1 },
+        { label: '2Hours', value: 2 },
+        { label: '3Hours', value: 3 },
+        { label: 'user-defined', value: 0 },
       ],
+      data1: {
+        xData: [],
+        data: [],
+      },
+      data2: {
+        xData: [],
+        data: [],
+      },
+      data3: {
+        xData: [],
+        data: [],
+      },
+      data4: {
+        xData: [],
+        data: [
+          {
+            name: 'Disk BPS Read',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+          {
+            name: 'Disk BPS Write',
+            data: [25, 13, 32, 18, 45, 27, 36],
+          },
+        ],
+      },
+      data5: {
+        xData: [],
+        data: [
+          {
+            name: 'Disk IOPS Read',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+          {
+            name: 'Disk IOPS Write',
+            data: [25, 13, 32, 18, 45, 27, 36],
+          },
+        ],
+      },
+      data6: {
+        xData: [],
+        data: [
+          {
+            name: 'Disk Usage Utilization',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+          {
+            name: 'Lnode Utilization',
+            data: [25, 13, 32, 18, 45, 27, 36],
+          },
+        ],
+      },
+      data7: {
+        xData: [],
+        data: [
+          {
+            name: 'VPC PublicIP Lnterner in Rate',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+          {
+            name: 'VPC PublicIP Lnterner Out Rate',
+            data: [25, 13, 32, 18, 45, 27, 36],
+          },
+        ],
+      },
+      data8: {
+        xData: [],
+        data: [
+          {
+            name: 'Intranet in Rete',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+          {
+            name: 'Intranet Out Rete',
+            data: [25, 13, 32, 18, 45, 27, 36],
+          },
+        ],
+      },
+      data9: {
+        xData: [],
+        data: [
+          {
+            name: 'Intranet Out Rete',
+            data: [15, 23, 22, 28, 35, 47, 26],
+          },
+        ],
+      },
       visible: false,
-      modalTitle: "",
-      myLine: null
+      modalTitle: '',
+      myLine: null,
+      MonitorItem: {},
     }
   },
   created() {
@@ -290,9 +301,85 @@ export default {
     this.getServerList()
   },
   methods: {
+    // 获取所有监控项的itemId
+    getMonitorItemId() {
+      let params = {
+        sourceId: this.currId,
+      }
+      getAction('/alarmItem/alarmItems', params).then((res) => {
+        if (res.success) {
+          this.MonitorItem = res.result
+          this.getMonitorData()
+        }
+      })
+    },
+    // 获取监控项的数据
+    getMonitorData() {
+      for (const key in this.MonitorItem) {
+        if (this.MonitorItem.hasOwnProperty.call(this.MonitorItem, key)) {
+          const element = this.MonitorItem[key]
+          let params = {
+            itemId: element,
+            itemType: 0,
+            start: this.queryParams.startDate,
+            end: this.queryParams.endDate,
+          }
+          if (key === 'cpuUtilization') {
+            this.getMonitorItemData(params).then((res) => {
+              this.data1.xData = res.xData
+              this.data1.data = [
+                {
+                  name: res.name,
+                  data: res.data,
+                },
+              ]
+            })
+          } else if (key === 'memoryUtilization') {
+            this.getMonitorItemData(params).then((res) => {
+              this.data2.xData = res.xData
+              this.data2.data = [
+                {
+                  name: res.name,
+                  data: res.data,
+                },
+              ]
+            })
+          } else if (key === 'load') {
+            this.getMonitorItemData(params).then((res) => {
+              this.data3.xData = res.xData
+              this.data3.data = [
+                {
+                  name: res.name,
+                  data: res.data,
+                },
+              ]
+            })
+          }
+        }
+      }
+    },
+    getMonitorItemData(params) {
+      return getAction('/systemMonitor/queryItemHistory', params).then((res) => {
+        // return res
+        if (res.success) {
+          let name = res.result.name
+          let xData = res.result.list.map((item) => {
+            return dateFormat(new Date(item.date * 1000), 'hh:mm')
+          })
+          let data = res.result.list.map((item) => {
+            return Number((item.value * 100).toFixed(2))
+          })
+          return {
+            name,
+            xData,
+            data,
+          }
+        }
+      })
+    },
     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')
     },
@@ -303,72 +390,74 @@ 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,
             }
           })
           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.getMonitorItemId()
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     onServerChange(val) {
       this.currId = val.key
       this.currLabel = val.label
+      this.getMonitorItemId()
     },
     onTimeChange(val) {
       this.getBeforeHours(val)
+      this.getMonitorData()
     },
     onRangeDateChange(date, dateString) {
       this.queryParams.timer = 0
       this.queryParams.startDate = dateString[0]
       this.queryParams.endDate = dateString[1]
+      this.getMonitorData()
     },
     drawLine(option) {
-      this.myLine = echarts.init(document.getElementById("common"))
+      this.myLine = echarts.init(document.getElementById('common'))
       this.myLine.setOption(option)
-      window.addEventListener("resize", function () {
-        this.myLine.resize();
+      window.addEventListener('resize', function () {
+        this.myLine.resize()
       })
     },
-    handelZoom(str,option) {
+    handelZoom(str, option) {
       this.modalTitle = str
       this.visible = true
       this.$nextTick(() => {
@@ -378,13 +467,13 @@ export default {
     onCancel() {
       this.visible = false
       this.myLine.clear()
-    }
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.monitor-search{
+.monitor-search {
   height: 50px;
   border-top: 1px solid rgba(13, 235, 201, 0.3);
   border-bottom: 1px solid rgba(13, 235, 201, 0.3);
@@ -393,13 +482,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;
@@ -408,18 +497,18 @@ export default {
     height: 32px;
     margin-right: 10px;
   }
-  &-btns{
-    &-ant{
+  &-btns {
+    &-ant {
       background: #1397a3;
       border: none;
     }
   }
 }
-.monitor-content{
+.monitor-content {
   height: calc(100% - 60px);
   margin-top: 10px;
   overflow: hidden;
-  &-item{
+  &-item {
     width: 100%;
     height: 100%;
     // &-canvas{
@@ -428,13 +517,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;
 }
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
index c81e8c5..1e32ea8 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
@@ -1,16 +1,17 @@
 <template>
-  <div style="height: 100%;">
+  <div style="height: 100%">
     <div class="service-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
-            :options="serverOptions" 
+            :options="serverOptions"
             @change="onServerChange"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@@ -18,12 +19,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="" />
@@ -32,14 +34,22 @@
         <a-col flex="265px">
           <a-range-picker
             :show-time="true"
-            :default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
-            @change="onRangeDateChange" 
+            :value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
+            @change="onRangeDateChange"
           />
         </a-col>
       </a-row>
       <div class="service-search-btns">
-        <a-button :class="['service-search-btns-ant', type=='cpu'?'service-search-btns-active':'']" @click="handleCpu">CPU</a-button>
-        <a-button :class="['service-search-btns-ant', type=='memory'?'service-search-btns-active':'']" @click="handleMemory">Memory</a-button>
+        <a-button
+          :class="['service-search-btns-ant', type == 'cpu' ? 'service-search-btns-active' : '']"
+          @click="handleCpu"
+          >CPU</a-button
+        >
+        <a-button
+          :class="['service-search-btns-ant', type == 'memory' ? 'service-search-btns-active' : '']"
+          @click="handleMemory"
+          >Memory</a-button
+        >
       </div>
     </div>
     <div class="service-content">
@@ -47,7 +57,7 @@
         <BoxTitle title="Top-ranked processes in the last hour">
           <template slot="right">
             <ul class="legend-list">
-              <li v-for="(item,index) in ranked.legend" :key="index">
+              <li v-for="(item, index) in ranked.legend" :key="index">
                 <div :style="`background:${ranked.color[index]}`" class="li-icon"></div>
                 {{ item }}
               </li>
@@ -60,27 +70,27 @@
         <a-row :gutter="20">
           <a-col :span="12">
             <BoxTitle title="Process CPU usage(%)">
-              <template slot="right">
+              <!-- <template slot="right">
                 <ul class="legend-list">
-                  <li v-for="(item,index) in processCpu.legend" :key="index">
+                  <li v-for="(item, index) in processCpu.legend" :key="index">
                     <div :style="`background:${processCpu.color[index]}`" class="li-icon"></div>
                     {{ item }}
                   </li>
                 </ul>
-              </template>
+              </template> -->
             </BoxTitle>
             <div class="service-content-center-item" id="processCpu"></div>
           </a-col>
           <a-col :span="12">
             <BoxTitle title="Process memory usage(%)">
-              <template slot="right">
+              <!-- <template slot="right">
                 <ul class="legend-list">
-                  <li v-for="(item,index) in processMenbry.legend" :key="index">
+                  <li v-for="(item, index) in processMenbry.legend" :key="index">
                     <div :style="`background:${processMenbry.color[index]}`" class="li-icon"></div>
                     {{ item }}
                   </li>
                 </ul>
-              </template>
+              </template> -->
             </BoxTitle>
             <div class="service-content-center-item" id="menbry"></div>
           </a-col>
@@ -88,7 +98,7 @@
       </div>
       <div class="service-content-table">
         <BoxTitle title="Service"></BoxTitle>
-        <div style="padding-top: 15px;">
+        <div style="padding-top: 10px">
           <TableList
             size="middle"
             rowKey="id"
@@ -99,16 +109,19 @@
             :canSelect="false"
           >
           </TableList>
-          <a-pagination 
+          <a-pagination
             size="small"
-            v-model="ipagination.current" 
+            v-model="ipagination.current"
             :pageSize="ipagination.pageSize"
             :page-size-options="ipagination.pageSizeOptions"
             show-size-changer
             show-quick-jumper
             :total="ipagination.total"
-            :show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
-            show-less-items 
+            :show-total="
+              (total, range) =>
+                `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
+            "
+            show-less-items
             @change="handlePageChange"
             @showSizeChange="handleSizeChange"
           />
@@ -119,93 +132,105 @@
 </template>
 
 <script>
-import moment from 'moment';
-import BoxTitle from '../../components/boxTitle.vue';
-import TableList from '../../components/tableList.vue';
+import moment from 'moment'
+import BoxTitle from '../../components/boxTitle.vue'
+import TableList from '../../components/tableList.vue'
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 import * as echarts from 'echarts'
-const columns = [{
+const columns = [
+  {
     title: 'STATUS',
     align: 'left',
     dataIndex: 'status',
     // width: 250,
-  },{
+  },
+  {
     title: 'SERVICE NAME',
     align: 'left',
     dataIndex: 'name',
     // width: 250,
-  },{
+  },
+  {
     title: 'ASSOCIATED PROCESS',
     align: 'left',
     dataIndex: 'process',
     // width: 250,
-  },{
+  },
+  {
     title: 'CPU(%)',
     align: 'left',
     dataIndex: 'cpu',
     // width: 250,
-  },{
+  },
+  {
     title: 'MENORY',
     align: 'left',
     dataIndex: 'menory',
     // width: 250,
-  },{
+  },
+  {
     title: 'INSTANCE',
     align: 'left',
     dataIndex: 'instance',
     // width: 250,
-  },{
+  },
+  {
     title: 'THREAD COUNT',
     align: 'left',
     dataIndex: 'threadCount',
     // width: 250,
-  },{
+  },
+  {
     title: 'PROCESSING COUNT',
     align: 'left',
     dataIndex: 'processongCount',
     // width: 250,
-  }
+  },
 ]
 export default {
   components: {
     BoxTitle,
-    TableList
+    TableList,
   },
   data() {
     return {
-      type: "cpu",
+      type: 'cpu',
       queryParams: {
         server: undefined,
-        timer: "1h",
-        startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
-        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
+        timer: 1,
+        startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+        endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
       },
       serverOptions: [],
       timerOptions: [
-        {label: "1Hours",value: "1h"},
-        {label: "2Hours",value: "2h"},
-        {label: "3Hours",value: "3h"},
+        { label: '1Hours', value: 1 },
+        { label: '2Hours', value: 2 },
+        { label: '3Hours', value: 3 },
       ],
       ranked: {
         content: null,
-        legend: ["NemuHeadless.exe","System","dwm.exe","CompatTelRunner.exe","msedge.exe"],
-        color: ['#2d5cd3','#60cae8','#1ab060','#ffbf44','#e86954']
+        legend: [],
+        color: ['#2d5cd3', '#f4ff7d', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
       },
       processCpu: {
         content: null,
-        legend: ["mysqld.exe","svchost.exe"],
-        color: ['#e5ae2d','#00a8ff']
+        legend: ['mysqld.exe', 'svchost.exe'],
+        color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
+        xData: [],
+        data: [],
       },
       processMenbry: {
         content: null,
-        legend: ["mysqld.exe","svchost.exe"],
-        color: ['#9ed24d','#00a8ff']
+        legend: ['mysqld.exe', 'svchost.exe'],
+        color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
+        xData: [],
+        data: [],
       },
       columns,
       loading: false,
       dataSource: [],
-      ipagination:{
+      ipagination: {
         current: 1,
         pageSize: 10,
         pageSizeOptions: ['10', '20', '30'],
@@ -215,342 +240,382 @@ export default {
         },
         showQuickJumper: true,
         showSizeChanger: true,
-        total: 0
+        total: 0,
       },
-      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      rankData: {},
     }
   },
-  mounted () {
+  created() {
+    this.getBeforeHours(1)
+  },
+  mounted() {
     this.getServerList()
     this.$nextTick(() => {
-      setTimeout(() => {
-        this.drawRanked()
-        this.drawProcesCpu()
-        this.drawProcesMenbry()
-      },0)
+      setTimeout(() => {}, 0)
     })
   },
   methods: {
+    // Top-ranked processes in the last hour
+    getRankProcesses() {
+      this.ranked.content && this.ranked.content.clear()
+      this.processCpu.content && this.processCpu.content.clear()
+      this.processMenbry.content && this.processMenbry.content.clear()
+      let params = {
+        hostId: this.queryParams.server || '10483',
+        pageName: 'serviceAndProcess',
+        start: this.queryParams.startDate,
+        end: this.queryParams.endDate,
+      }
+      getAction('/systemMonitor/queryHostDetails', params).then((res) => {
+        this.list = res.result
+        this.listData = {
+          list: this.num === 0 ? this.list.cpu : this.list.memory,
+          type: this.num === 0 ? 'CPU' : '内存',
+        }
+
+        let cpu_xData = res.result.cpu[0].list.map((item) => {
+          return dateFormat(new Date(item.date * 1000), 'hh:mm')
+        })
+        let cpu_Data = res.result.cpu.map((item) => {
+          return {
+            name: item.name,
+            data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
+          }
+        })
+        let cpu_legend = res.result.cpu.map((item) => {
+          return item.name
+        })
+        let memory_xData = res.result.memory[0].list.map((item) => {
+          return dateFormat(new Date(item.date * 1000), 'hh:mm')
+        })
+        let memory_Data = res.result.memory.map((item) => {
+          return {
+            name: item.name,
+            data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
+          }
+        })
+        let memory_legend = res.result.memory.map((item) => {
+          return item.name
+        })
+
+        this.rankData = {
+          type: this.type === 'cpu' ? 'CPU' : 'Memory',
+          cpu_xData,
+          cpu_Data,
+          memory_xData,
+          memory_Data,
+        }
+        this.ranked.legend = this.type === 'cpu' ? cpu_legend : memory_legend
+        this.processCpu.xData = cpu_xData
+        // this.processCpu.data = res.result.cpu.map((item) => {
+        //   return {
+        //     name: item.name,
+        //     data: item.list.map((el) => el.value),
+        //   }
+        // })
+        this.processCpu.data = cpu_Data
+        this.processMenbry.xData = memory_xData
+        // this.processMenbry.data = res.result.memory.map((item) => {
+        //   return {
+        //     name: item.name,
+        //     data: item.list.map((el) => el.value),
+        //   }
+        // })
+        this.processMenbry.data = memory_Data
+        this.drawRanked()
+        this.drawProcesCpu()
+        this.drawProcesMenbry()
+      })
+    },
+    getBeforeHours(num) {
+      let currentTime = moment()
+      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')
+      console.log(this.queryParams)
+    },
     moment,
     onRangeDateChange(date, dateString) {
       this.queryParams.startDate = dateString[0]
       this.queryParams.endDate = dateString[1]
+      this.getRankProcesses()
     },
     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.hostId,
             }
           })
-          this.queryParams.server = this.$route.query.serverId || res.result[0].sourceId
+          let serverId = this.$route.query.serverId
+          this.queryParams.server = '10483'
+          // this.serverOptions.find((item) => item.sourceId === serverId).hostId || res.result[0].hostId
+          this.getRankProcesses()
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     onServerChange(val) {
-      console.log(val);
+      this.queryParams.server = val
+      this.getRankProcesses()
     },
     onTimeChange(val) {
-      console.log(val);
+      this.getBeforeHours(val)
+      this.getRankProcesses()
     },
     handleCpu() {
-      this.type = "cpu"
+      this.type = 'cpu'
+      this.ranked.content.clear()
+      this.drawRanked()
     },
     handleMemory() {
-      this.type = "memory"
+      this.type = 'memory'
+      this.ranked.content.clear()
+      this.drawRanked()
     },
     drawRanked() {
-      this.ranked.content = echarts.init(document.getElementById("ranked"))
+      this.ranked.content = echarts.init(document.getElementById('ranked'))
+      let xData = this.type === 'cpu' ? this.rankData.cpu_xData : this.rankData.memory_xData
       let option = {
         color: this.ranked.color,
         tooltip: {
-          trigger: 'item'
+          trigger: 'item',
         },
         grid: {
           left: 25,
           right: 0,
           top: 15,
           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)"
+              color: 'rgba(173, 230, 238, 1)',
+              formatter: (value, index) => {
+                if (index === 0) {
+                  return ' ' + value
+                }
+                if (index === xData.length - 1) {
+                  return value + '  '
+                }
+                return value
+              },
             },
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-          }
+            data: xData,
+          },
         ],
         yAxis: [
           {
             type: 'value',
-            name: "CPU utilization",
-            nameLocation: "middle",
+            name: `${this.type == 'cpu' ? 'CPU' : 'Memory'} utilization`,
+            nameLocation: 'middle',
             nameTextStyle: {
-              color: "#5b9cba",
-              fontFamily: "ArialMT",
-              fontSize: 14
+              color: '#5b9cba',
+              fontFamily: 'ArialMT',
+              fontSize: 14,
             },
             nameGap: 35,
             splitLine: {
               show: true,
               lineStyle: {
-                color: "rgba(64, 105, 121, 0.5)"
-              }
+                color: 'rgba(64, 105, 121, 0.5)',
+              },
             },
             axisLabel: {
-              color: "rgba(173, 230, 238, 1)"
+              color: 'rgba(173, 230, 238, 1)',
             },
-          }
+          },
         ],
-        series: [
-          {
-            name: 'Baidu',
+        series: [],
+      }
+      if (this.type === 'cpu') {
+        option.series = this.rankData.cpu_Data.map((item) => {
+          return {
+            name: item.name,
             type: 'bar',
-            barWidth: 20,
-            stack: 'Search Engine',
-            // emphasis: {
-            //   focus: 'series'
-            // },
-            data: [20, 32, 71, 34, 90, 30,92]
-          },
-          {
-            name: 'Google',
+            stack: 'cpu',
+            data: item.data,
+          }
+        })
+      } else {
+        option.series = this.rankData.memory_Data.map((item) => {
+          return {
+            name: item.name,
             type: 'bar',
-            stack: 'Search Engine',
-            // emphasis: {
-            //   focus: 'series'
-            // },
-            data: [12, 25, 46, 34, 29, 23,64]
-          },
-          {
-            name: 'Bing',
-            type: 'bar',
-            stack: 'Search Engine',
-            // emphasis: {
-            //   focus: 'series'
-            // },
-            data: [60, 72, 71, 74, 90, 13,43]
-          },
-          {
-            name: 'Others',
-            type: 'bar',
-            stack: 'Search Engine',
-            // emphasis: {
-            //   focus: 'series'
-            // },
-            data: [62, 82, 91, 84, 19, 11, 55]
-          },
-          {
-            name: 'adf',
-            type: 'bar',
-            barWidth: 20,
-            stack: 'Search Engine',
-            // emphasis: {
-            //   focus: 'series'
-            // },
-            data: [20, 32, 71, 34, 90, 30,92]
-          },
-        ]
-      };
+            stack: 'memory',
+            data: item.data,
+          }
+        })
+      }
       this.ranked.content.setOption(option)
-      window.addEventListener("resize", function () {
-        this.ranked.content.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.ranked.content.resize()
+      })
     },
     drawProcesCpu() {
-      this.processCpu.content = echarts.init(document.getElementById("processCpu"))
+      this.processCpu.content = echarts.init(document.getElementById('processCpu'))
       let option = {
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: 0,
           right: 0,
           top: 15,
           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.processCpu.xData.length - 1) {
+                return value + '        '
               }
               return value
-            }
+            },
           },
           boundaryGap: false,
-          data: this.xData
+          data: this.processCpu.xData,
         },
         yAxis: {
           type: 'value',
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(64, 105, 121, 0.5)"
-            }
+              color: 'rgba(64, 105, 121, 0.5)',
+            },
           },
           axisLabel: {
-              color: "rgba(173, 230, 238, 1)"
-            },
-        },
-        series: [
-          {
-            type: 'line',
-            name: 'Email',
-            symbol: 'none',
-            itemStyle:{ normal:{color:"#00a8ff"}},
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#00a8ff" },
-                  { offset: 1, color: "rgba(255,255,255,0)" },
-                ]),
-              },
-            },
-            data: [150, 230, 224, 218, 135, 147, 260],
+            color: 'rgba(173, 230, 238, 1)',
           },
-          {
-            type: 'line',
-            name: 'Eml',
-            symbol: 'none',
-            itemStyle:{ normal:{color:"#ffbf2e"}},
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#ffbf2e" },
-                  { offset: 1, color: "rgba(255,255,255,0)" },
-                ]),
-              },
+        },
+        series: [],
+      }
+      option.series = this.processCpu.data.map((item, index) => {
+        return {
+          type: 'line',
+          name: item.name,
+          symbol: 'none',
+          itemStyle: { normal: { color: this.processCpu.color[index] } },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: this.processCpu.color[index] },
+                { offset: 1, color: 'rgba(255,255,255,0)' },
+              ]),
             },
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
-          }
-        ]
-      };
+          },
+          data: item.data,
+        }
+      })
       this.processCpu.content.setOption(option)
-      window.addEventListener("resize", function () {
-        this.processCpu.content.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.processCpu.content.resize()
+      })
     },
     drawProcesMenbry() {
-      this.processMenbry.content = echarts.init(document.getElementById("menbry"))
+      this.processMenbry.content = echarts.init(document.getElementById('menbry'))
       let option = {
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         grid: {
           left: 0,
           right: 0,
           top: 15,
           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.processMenbry.xData.length - 1) {
+                return value + '        '
               }
               return value
-            }
+            },
           },
           boundaryGap: false,
-          data: this.xData
+          data: this.processMenbry.xData,
         },
         yAxis: {
           type: 'value',
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(64, 105, 121, 0.5)"
-            }
+              color: 'rgba(64, 105, 121, 0.5)',
+            },
           },
           axisLabel: {
-              color: "rgba(173, 230, 238, 1)"
-            },
-        },
-        series: [
-          {
-            type: 'line',
-            name: 'Email',
-            symbol: 'none',
-            itemStyle:{ normal:{color:"#00a8ff"}},
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#00a8ff" },
-                  { offset: 1, color: "rgba(255,255,255,0)" },
-                ]),
-              },
-            },
-            data: [150, 230, 224, 218, 135, 147, 260],
+            color: 'rgba(173, 230, 238, 1)',
           },
-          {
-            type: 'line',
-            name: 'Eml',
-            symbol: 'none',
-            itemStyle:{ normal:{color:"#ffbf2e"}},
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#ffbf2e" },
-                  { offset: 1, color: "rgba(255,255,255,0)" },
-                ]),
-              },
+        },
+        series: [],
+      }
+      option.series = this.processMenbry.data.map((item, index) => {
+        return {
+          type: 'line',
+          name: item.name,
+          symbol: 'none',
+          itemStyle: { normal: { color: this.processCpu.color[index] } },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: this.processCpu.color[index] },
+                { offset: 1, color: 'rgba(255,255,255,0)' },
+              ]),
             },
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
-          }
-        ]
-      };
+          },
+          data: item.data,
+        }
+      })
       this.processMenbry.content.setOption(option)
-      window.addEventListener("resize", function () {
-        this.processMenbry.content.resize();
-      });
+      window.addEventListener('resize', function () {
+        this.processMenbry.content.resize()
+      })
     },
     handlePageChange(page, pageSize) {
       this.ipagination.current = page
@@ -562,13 +627,13 @@ export default {
       this.ipagination.pageSize = size
       // this.getServerAlarmHistory(this.paramsArg)
     },
-  }
+  },
 }
 </script>
 
 <style lang="less" scoped>
-.service-search{
-  height: 50px;
+.service-search {
+  height: 45px;
   border-top: 1px solid rgba(13, 235, 201, 0.3);
   border-bottom: 1px solid rgba(13, 235, 201, 0.3);
   display: flex;
@@ -576,10 +641,10 @@ 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;
   }
-  .item-label{
+  .item-label {
     display: inline-block;
     font-size: 16px;
     font-family: ArialMT;
@@ -588,53 +653,53 @@ export default {
     height: 32px;
     margin-right: 10px;
   }
-  &-btns{
-    &-ant{
+  &-btns {
+    &-ant {
       background: #406979;
       border: none;
       margin-left: 10px;
     }
-    &-active{
+    &-active {
       background: #1397a3;
     }
   }
 }
-.service-content{
+.service-content {
   height: calc(100% - 60px);
   margin-top: 10px;
   overflow: hidden;
-  &-ranked{
+  &-ranked {
     height: 210px;
-    &-box{
+    &-box {
       height: 170px;
     }
   }
-  &-center{
+  &-center {
     height: 210px;
-    &-item{
+    &-item {
       height: 170px;
     }
   }
-  &-table{
-    height: calc(100% - 420px);
+  &-table {
+    height: calc(100% - 415px);
     position: relative;
-    .ant-pagination{
+    .ant-pagination {
       position: absolute;
       left: 50%;
       bottom: 0;
       transform: translateX(-50%);
     }
   }
-  .legend-list{
-    list-style:none;
-    li{
+  .legend-list {
+    list-style: none;
+    li {
       float: left;
       font-size: 14px;
       margin-left: 20px;
       font-family: MicrosoftYaHei;
       font-weight: normal;
       color: #ade6ee;
-      .li-icon{
+      .li-icon {
         display: inline-block;
         vertical-align: middle;
         width: 12px;