diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
index db1a9dc..82beff5 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/details.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
@@ -320,9 +320,15 @@
           <BoxTitle title="CPU utilization">
             <template slot="right">
               <div class="right-title">
-                <div class="right-title-item">average value:<i>32%</i></div>
-                <div class="right-title-item">minimum value:<i>32%</i></div>
-                <div class="right-title-item">Maximum value:<i>32%</i></div>
+                <div class="right-title-item">
+                  average value:<i>{{ cpuData.avg }}%</i>
+                </div>
+                <div class="right-title-item">
+                  minimum value:<i>{{ cpuData.min }}%</i>
+                </div>
+                <div class="right-title-item">
+                  Maximum value:<i>{{ cpuData.max }}%</i>
+                </div>
               </div>
             </template>
           </BoxTitle>
@@ -414,6 +420,7 @@ 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'
 export default {
   directives: { infiniteScroll },
   components: {
@@ -443,9 +450,12 @@ export default {
       guageCpu: null,
       guageMemory: null,
       guageLoads: null,
-      areaCpu: null,
       currId: '',
       detailInfo: {},
+      currItemId: '',
+      // cpu
+      areaCpu: null,
+      cpuData: {},
     }
   },
   mounted() {
@@ -458,11 +468,14 @@ export default {
         if (this.$route.query.serverId) {
           this.currId = this.$route.query.serverId
           this.currIndex = this.dataSource.findIndex((item) => item.hostId === this.currId)
+          this.currItemId = this.dataSource.find((item) => item.hostId === this.currId).cpuUsedItemId
         } else {
           this.currId = this.dataSource[0].hostId
+          this.currItemId = this.dataSource[0].cpuUsedItemId
           this.currIndex = 0
         }
         this.getBasiclnfo(this.currId)
+        this.getCpuUtilizationData()
       } else {
         this.$message.warning('This operation fails. Contact your system administrator')
       }
@@ -480,7 +493,6 @@ export default {
       setTimeout(() => {
         this.drawTimeline()
         this.drawGuageLoads()
-        this.drawAreaCpu()
       }, 0)
     })
   },
@@ -499,6 +511,30 @@ export default {
         }
       })
     },
+    //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)
+        this.cpuData.max = Math.max(...arr) * 100
+        this.cpuData.min = Math.min(...arr) * 100
+        let sum = arr.reduce((tatal, num) => tatal + num, 0)
+        this.cpuData.avg = (sum / arr.length).toFixed(2) * 100
+        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 * 100
+        })
+        this.drawAreaCpu()
+      })
+    },
     getSysServer(callBack) {
       this.loading = true
       let params = {
@@ -1010,7 +1046,7 @@ export default {
           axisLabel: {
             color: 'rgba(173, 230, 238, 1)',
           },
-          data: date,
+          data: this.cpuData.xData,
         },
         yAxis: {
           type: 'value',
@@ -1042,7 +1078,7 @@ export default {
                 color: '#10b3d6',
               },
             },
-            data: data,
+            data: this.cpuData.yData,
           },
         ],
       }
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
index c81e8c5..198525d 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', '#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,380 @@ 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
+          this.queryParams.server = this.$route.query.serverId || 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 +625,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 +639,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 +651,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;