diff --git a/src/assets/images/abnormalAlarm/line.png b/src/assets/images/abnormalAlarm/line.png
new file mode 100644
index 0000000..510b1b5
Binary files /dev/null and b/src/assets/images/abnormalAlarm/line.png differ
diff --git a/src/views/abnormalAlarm/components/summaryArea.vue b/src/views/abnormalAlarm/components/summaryArea.vue
new file mode 100644
index 0000000..e78ac73
--- /dev/null
+++ b/src/views/abnormalAlarm/components/summaryArea.vue
@@ -0,0 +1,93 @@
+<template>
+  <div id="abstractechar"></div>
+</template>
+
+<script>
+import { Area } from '@antv/g2plot';
+export default {
+  props:{
+    lineData:{
+      type:Array,
+      required:true
+    }
+  },
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  mounted() {
+    this.pieChart()
+  },
+
+  methods: {
+    /* 图表 */
+    pieChart() {
+      const data = this.lineData
+      let _vm= this
+      if(this.chart){
+        this.chart.update({
+          data:data
+        })
+        return
+      }
+      this.chart = new Area("abstractechar",{
+        data,
+        xField: 'date',
+        yField: 'value',
+        colorField: '#0096FF',
+        areaStyle:()=>{
+          return { fill: '#0096FF' }
+        },
+        yAxis: {
+          line:{
+            subTickLine:{
+              count:5,
+              max:100
+            },
+          },
+        },
+        line:{
+          lineWidth:0,
+          lineDash:[0,0]
+        },
+
+        tooltip: {
+      }})
+      this.chart.render()
+
+    },
+
+  },
+  computed: {
+    // 直接当做普通属性调用不加括号
+    // 任何data中数据变化立即重新计算
+    // 计算属性会缓存
+    textColor() {
+      return this.$store.getters.theme
+    },
+  },
+  watch: {
+    textColor: function (val) {
+      this.chart.update({
+        areaStyle:{
+          fill:val == 'default' ? '#282828' : '#C7C7C7'
+        }
+      })
+
+
+    },
+    lineData: function (val) {
+      this.pieChart()
+    },
+  },
+}
+</script>
+
+<style scoped>
+#abstractechar {
+  padding: 0 30px;
+  width:100%;
+  height: 151px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
index 5b183af..a965002 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/details.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
@@ -265,8 +265,17 @@
     </div>
     <div class="content-center">
       <BoxTitle title="Event Timelinen">
-        <template slot="right">asdfadf</template>
+        <template slot="right">
+          <ul class="legend-list">
+            <li v-for="(item,index) in types" :key="index">
+              <div :style="`background:${item.color}`" class="li-icon"></div>
+              {{ item.name }}
+            </li>
+          </ul>
+        </template>
       </BoxTitle>
+      <div class="line-bg"></div>
+      <div class="time-line" id="timeLine"></div>
     </div>
     <div class="content-bottom">
       <div class="content-bottom-left">
@@ -274,32 +283,122 @@
           <a-row :gutter="20">
             <a-col class="gutter-row" :span="8">
               <BoxTitle title="CPU"></BoxTitle>
+              <div class="gauge-content" id="cpu"></div>
             </a-col>
             <a-col class="gutter-row" :span="8">
               <BoxTitle title="MEMORY"></BoxTitle>
+              <div class="gauge-content" id="memory"></div>
             </a-col>
             <a-col class="gutter-row" :span="8">
               <BoxTitle title="LOADS"></BoxTitle>
+              <div class="gauge-content" id="loads"></div>
             </a-col>
           </a-row>
         </div>
         <div class="content-bottom-left-bottom">
           <BoxTitle title="CPU utilization">
-            <template slot="right">asdfadf</template>
+            <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>
+            </template>
           </BoxTitle>
+          <div class="area-cpu" id="areaCpu"></div>
         </div>
       </div>
       <div style="width:542px">
         <BoxTitle title="DISK"></BoxTitle>
+        <div class="bar-disk" id="disk"></div>
       </div>
     </div>
   </div>
 </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 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=>{
+  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);
+  }
+});
+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 rectShape = echarts.graphic.clipRectByRect(
+    {
+      x: start[0],
+      y: start[1] - height / 2,
+      width: end[0] - start[0],
+      height: height
+    },
+    {
+      x: params.coordSys.x,
+      y: params.coordSys.y,
+      width: params.coordSys.width,
+      height: params.coordSys.height
+    }
+  );
+  return (
+    rectShape && {
+      type: 'rect',
+      transition: ['shape'],
+      shape: rectShape,
+      style: api.style()
+    }
+  );
+}
 import BoxTitle from '../../components/boxTitle.vue';
 import infiniteScroll from 'vue-infinite-scroll';
-import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+import * as echarts from 'echarts'
 export default {
   directives: { infiniteScroll },
   components: {
@@ -307,6 +406,7 @@ export default {
   },
   data() {
     return {
+      types,
       dataSource: [],
       loading: false,
       busy: false,
@@ -323,7 +423,13 @@ export default {
         pageSize: 10,
         total: 0
       },
-      currIndex:null,
+      currIndex: null,
+      timeLine: null,
+      guageCpu: null,
+      guageMemory: null,
+      guageLoads: null,
+      areaCpu: null,
+      
     }
   },
   mounted () {
@@ -345,6 +451,16 @@ export default {
         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)
+    })
   },
   methods: {
     getSysServer(callBack) {
@@ -409,7 +525,603 @@ export default {
           });
         }
       }
-    }
+    },
+    
+    drawTimeline() {
+      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';
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0',
+          top:15,
+          height: 32,
+          containLabel: false,
+          show: true
+        },
+        xAxis: {
+          min: startTime,
+          axisLabel: {
+            color: "#ade6ee",
+            fontSize: 14,
+            formatter: function (val) {
+              return Math.max(0, val - startTime) + ' ms';
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          show:false,
+          data: categories
+        },
+        series: [
+          { name: legendData[0], type: 'bar', data: [] },
+          { name: legendData[1], type: 'bar', data: [] },
+          { name: legendData[2], type: 'bar', data: [] },
+          { name: legendData[3], type: 'bar', data: [] },
+          { name: legendData[4], type: 'bar', data: [] },
+          { name: legendData[5], type: 'bar', data: [] },
+          {
+            type: 'custom',
+            renderItem: renderItem1,
+            encode: {
+              x: [1, 2],
+              y: 0
+            },
+            data: data1
+          }
+        ]
+      }
+      this.timeLine.setOption(option)
+      window.addEventListener("resize", function () {
+        this.timeLine.resize();
+      });
+    },
+    drawGuageCpu() {
+      this.guageCpu = echarts.init(document.getElementById("cpu"))
+      let option = {
+        series: [
+          {
+            type: 'gauge',
+            center: ['50%', '93%'],
+            radius: 90,
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            itemStyle:{
+              color: "#8531f6"
+            },
+            progress: {
+              show: true,
+              width: 20
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color:[[1, '#162b39']],
+                width: 20
+              }
+            },
+            axisTick: {
+              show:false,
+            },
+            splitLine: {
+              show:false,
+            },
+            axisLabel: {
+              show:false,
+            },
+            anchor: {
+              show: false
+            },
+            title: {
+              show: false
+            },
+            detail: {
+              valueAnimation: true,
+              fontFamily: "MicrogrammaD-MediExte",
+              fontSize: 24,
+              lineHeight: 28,
+              offsetCenter: [0, '-10%'],
+              formatter: '{value} %',
+              color: 'white'
+            },
+            data: [
+              {
+                value: 20
+              }
+            ]
+          },
+          {
+            type: 'gauge',
+            center: ['50%', '93%'],
+            radius: 100,
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 1,
+                x2: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0, color: '#7776ff' // 0% 处的颜色
+                }, {
+                    offset: 1, color: '#ae2cf1' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            },
+            progress: {
+              show: true,
+              width: 2
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            detail: {
+              show: false
+            },
+            data: [
+              {
+                value: 100
+              }
+            ]
+          }
+        ]
+      }
+      this.guageCpu.setOption(option)
+      window.addEventListener("resize", function () {
+        this.guageCpu.resize();
+      });
+    },
+    drawGuageMemory() {
+      this.guageMemory = echarts.init(document.getElementById("memory"))
+      let option = {
+        series: [
+          {
+            type: 'gauge',
+            center: ['50%', '93%'],
+            radius: 90,
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            itemStyle:{
+              color: "#1aad32"
+            },
+            progress: {
+              show: true,
+              width: 20
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color:[[1, '#162b39']],
+                width: 20
+              }
+            },
+            axisTick: {
+              show:false,
+            },
+            splitLine: {
+              show:false,
+            },
+            axisLabel: {
+              show:false,
+            },
+            anchor: {
+              show: false
+            },
+            title: {
+              show: false
+            },
+            detail: {
+              valueAnimation: true,
+              fontFamily: "MicrogrammaD-MediExte",
+              fontSize: 24,
+              lineHeight: 28,
+              offsetCenter: [0, '-10%'],
+              formatter: '{value} %',
+              color: 'white'
+            },
+            data: [
+              {
+                value: 20
+              }
+            ]
+          },
+          {
+            type: 'gauge',
+            center: ['50%', '93%'],
+            radius: 100,
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 1,
+                x2: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0, color: '#1bad33' // 0% 处的颜色
+                }, {
+                    offset: 1, color: '#14ea38' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            },
+            progress: {
+              show: true,
+              width: 2
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            detail: {
+              show: false
+            },
+            data: [
+              {
+                value: 100
+              }
+            ]
+          }
+        ]
+      }
+      this.guageMemory.setOption(option)
+      window.addEventListener("resize", function () {
+        this.guageMemory.resize();
+      });
+    },
+    drawGuageLoads() {
+      this.guageLoads = echarts.init(document.getElementById("loads"))
+      let option = {
+        series: [
+          {
+            type: 'gauge',
+            center: ['50%', '93%'],
+            radius: 90,
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            itemStyle:{
+              color: "#61bbfa"
+            },
+            progress: {
+              show: true,
+              width: 20
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color:[[1, '#162b39']],
+                width: 20
+              }
+            },
+            axisTick: {
+              show:false,
+            },
+            splitLine: {
+              show:false,
+            },
+            axisLabel: {
+              show:false,
+            },
+            anchor: {
+              show: false
+            },
+            title: {
+              show: false
+            },
+            detail: {
+              valueAnimation: true,
+              fontFamily: "MicrogrammaD-MediExte",
+              fontSize: 24,
+              lineHeight: 28,
+              offsetCenter: [0, '-10%'],
+              formatter: '{value} %',
+              color: 'white'
+            },
+            data: [
+              {
+                value: 20
+              }
+            ]
+          },
+          {
+            type: 'gauge',
+            center: ['50%', '93%'],
+            radius: 100,
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 1,
+                x2: 0,
+                y2: 0,
+                colorStops: [{
+                    offset: 0, color: '#4facfe' // 0% 处的颜色
+                }, {
+                    offset: 1, color: '#00f2fe' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            },
+            progress: {
+              show: true,
+              width: 2
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            detail: {
+              show: false
+            },
+            data: [
+              {
+                value: 100
+              }
+            ]
+          }
+        ]
+      }
+      this.guageLoads.setOption(option)
+      window.addEventListener("resize", function () {
+        this.guageLoads.resize();
+      });
+    },
+    drawAreaCpu() {
+      this.areaCpu = echarts.init(document.getElementById("areaCpu"))
+      let option = {
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0',
+          top:15,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+          data: date
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.5)"
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.2)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+        },
+        series: [
+          {
+            type:'line',
+            smooth:true,
+            symbol: 'none',
+            sampling: 'average',
+            itemStyle:{ normal:{color:"#10b3d6"}},
+            areaStyle: {
+                normal: {
+                color: "#10b3d6",
+              },
+            },
+            data: data
+          }
+        ]
+      }
+      this.areaCpu.setOption(option)
+      window.addEventListener("resize", function () {
+        this.areaCpu.resize();
+      });
+    },
+    drawDisk() {
+      this.barDisk = echarts.init(document.getElementById("disk"))
+      let option = {
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0',
+          top:15,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+          data: ['C', 'D', 'E']
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          max: 100,
+          
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.5)"
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.2)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)",
+            formatter: "{value}%"
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            barWidth: 50,
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
+                  var colorList = [
+                    {
+                      type: 'linear',
+                      x: 0,
+                      y: 1,
+                      x2: 0,
+                      y2: 0,
+                      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% 处的颜色
+                      }],
+                    }, {
+                      type: 'linear',
+                      x: 0,
+                      y: 1,
+                      x2: 0,
+                      y2: 0,
+                      colorStops: [{
+                          offset: 0, color: '#0a6f0a' // 0% 处的颜色
+                      }, {
+                          offset: 1, color: '#90d40c' // 100% 处的颜色
+                      }],
+                    }
+                  ];
+                  return colorList[params.dataIndex]
+                }
+              },
+            },
+            data: [60, 80, 30],
+            z: 10,
+            zlevel: 0,
+          },
+          {
+            // 分隔
+            type: "pictorialBar",
+            itemStyle: {
+              normal: {
+                color: "#0F375F",
+              },
+            },
+            symbolRepeat: "fixed",
+            symbolMargin: 2,
+            symbol: "rect",
+            symbolClip: true,
+            symbolSize: [50, 4],
+            symbolPosition: "start",
+            data: [60, 80, 30],
+            width: 5,
+            z: 0,
+            zlevel: 1,
+          },
+        ],
+      }
+      this.barDisk.setOption(option)
+      window.addEventListener("resize", function () {
+        this.barDisk.resize();
+      });
+    },
   },
 }
 </script>
@@ -578,12 +1290,43 @@ export default {
 }
 .content-center{
   width: 100%;
-  height: 130px;
+  height: 115px;
+  position: relative;
   // height: 14.9%;
+  .legend-list{
+    list-style:none;
+    li{
+      float: left;
+      font-size: 14px;
+      margin-left: 25px;
+      .li-icon{
+        display: inline-block;
+        vertical-align: middle;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: red;
+        margin-right: 10px;
+      }
+    }
+  }
+  .line-bg{
+    width: 100%;
+    height: 32px;
+    position: absolute;
+    left: 0;
+    top: 55px;
+    background: url(~@/assets/images/abnormalAlarm/line.png) repeat;
+  }
+  .time-line{
+    width: 100%;
+    height: 75px;
+    position: relative;
+  }
 }
 .content-bottom{
   width: 100%;
-  height: calc(100% - 461px);
+  height: calc(100% - 446px);
   // height: 41.6%;
   display: flex;
   justify-content: space-between;
@@ -593,11 +1336,40 @@ export default {
     &-top{
       width: 100%;
       height: 160px;
+      .gauge-content{
+        width: 100%;
+        height: 120px;
+      }
     }
     &-bottom{
       width: 100%;
       height: calc(100% - 160px);
+      .right-title{
+        font-family: ArialMT;
+        font-size: 12px;
+        letter-spacing: 1px;
+        color: #ade6ee;
+        font-weight: normal;
+        &-item{
+          display: inline-block;
+          margin-left: 20px;
+        }
+        i{
+          font-size: 16px;
+          font-style: normal;
+          letter-spacing: 2px;
+          color: #ade6ee;
+        }
+      }
+      .area-cpu{
+        width: 100%;
+        height: calc(100% - 40px);
+      }
     }
   }
+  .bar-disk{
+    width: 100%;
+    height: calc(100% - 40px);
+  }
 }
 </style>
\ No newline at end of file