diff --git a/src/assets/images/abnormalAlarm/title_right.png b/src/assets/images/abnormalAlarm/title_right.png
new file mode 100644
index 0000000..88b1e84
Binary files /dev/null and b/src/assets/images/abnormalAlarm/title_right.png differ
diff --git a/src/style.less b/src/style.less
index ae83659..4aa1cd5 100644
--- a/src/style.less
+++ b/src/style.less
@@ -139,7 +139,7 @@ body {
       width: 100%;
     }
     &-required::before {
-      display: none !important;
+      // display: none !important;
     }
   }
   &-horizontal {
@@ -173,7 +173,7 @@ body {
   }
 
   &-input {
-    background-color: transparent;
+    background-color: red;
     &-wrap {
       border-color: @formInputBorderColor;
       height: 32px;
diff --git a/src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue
index 7b2a477..fb10f3c 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmContactGroup/index.vue
@@ -18,7 +18,7 @@
             <a-button class="actions" shape="circle" @click.stop="editGroup(item.id)">
               <img class="icon-edit" src="@/assets/images/abnormalAlarm/edit.png" alt="" />
             </a-button>
-            <a-button class="actions" style="margin-right: 15px;" shape="circle" @click="deleteGroup(item.id)">
+            <a-button class="actions" style="margin-right: 15px;" shape="circle" @click.stop="deleteGroup(item.id)">
               <img class="icon-delete" src="@/assets/images/abnormalAlarm/delete.png" alt="" />
             </a-button>
           </template>
@@ -50,15 +50,21 @@
         show-size-changer
         show-quick-jumper
         :total="page.total"
-        :show-total="(total, range) => `Total ${total} items　Page ${currentPage} / ${Math.ceil(total / page.pageSize)}`"
+        :show-total="(total, range) => `Total ${total} items　Page ${page.currentPage} / ${Math.ceil(total / page.pageSize)}`"
         show-less-items 
         @change="handlePageChange"
         @showSizeChange="handleSizeChange"
       />
     </div>
     
-    <custom-modal :title="isAdd ? 'Add Contact Group' : 'Edit Contact Group'" :width="845" v-model="visible" :okHandler="handleOk" destroy-on-close>
-      <a-spin :spinning="false">
+    <a-modal 
+      :title="isAdd ? 'Add Contact Group' : 'Edit Contact Group'" 
+      :width="845" 
+      v-model="visible" 
+      @ok="handleOk" 
+      destroy-on-close
+    >
+      <!-- <a-spin :spinning="false"> -->
         <div class="group-assign">
           <a-transfer
             :dataSource="userList"
@@ -72,13 +78,28 @@
         </a-transfer>
           <!-- 穿梭框右上方搜索 -->
           <div class="group-name">
-            <label>Group Name</label>
-            <a-input :value="groupName" placeholder="Basic usage" @change="setGroupName" />
+
+            <!-- <label>Group Name</label>
+              <a-input :value="groupName" placeholder="Basic usage" @change="setGroupName" /> -->
+            <a-form :form="form" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
+              <a-form-item label="Group Name">
+                <a-input
+                  v-decorator="['name', { rules: [{ required: true, message: 'The group name is mandatory' }] }]"
+                />
+              </a-form-item>
+            </a-form>
           </div>
           <!-- 穿梭框右上方搜索结束 -->
         </div>
-      </a-spin>
-    </custom-modal>
+      <!-- </a-spin> -->
+        <template slot="footer">
+          <slot name="custom-footer"></slot>
+          <a-space class="operators" :size="20">
+            <a-button type="success" @click="handleOk" >Save</a-button>
+            <a-button type="warn" @click="onCancel">Cancel</a-button>
+          </a-space>
+        </template>
+    </a-modal>
   </div>
 </template>
 
@@ -136,7 +157,8 @@ export default {
         'background: #02282b;;margin-bottom: 20px;border: solid 1px #416f7f;overflow: hidden',
       targetKeys: [],
       groupName: "",
-      currGroupId:""
+      currGroupId: "",
+      form: this.$form.createForm(this)
     }
   },
   mounted() {
@@ -173,7 +195,12 @@ export default {
         if (res.success) {
           this.visible = true
           this.isAdd = false
-          this.groupName = res.result.name
+          // this.groupName = res.result.name
+          this.$nextTick(() => {
+            this.form.setFieldsValue({
+              name: res.result.name,
+            });
+          })
           this.targetKeys = res.result.userIds
           this.currGroupId = res.result.id
         } else {
@@ -195,29 +222,41 @@ export default {
         }
       })
     },
-    setGroupName(e) {
-      this.groupName = e.target.value
-    },
+    // setGroupName(e) {
+    //   this.groupName = e.target.value
+    // },
     handleChange(targetKeys, direction, moveKeys) {
       console.log(targetKeys, direction, moveKeys);
       this.targetKeys= targetKeys;
     },
     handleOk() {
-      if (this.isAdd) {
-        this.createContactGroup()
-      } else {
-        this.updateContactGroup()
-      }
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          if (this.targetKeys.length>0) {
+            if (this.isAdd) {
+              this.createContactGroup(values.name)
+            } else {
+              this.updateContactGroup(values.name)
+            }
+          } else {
+            this.$message.warning("Please select User")
+          }
+        }
+      });
     },
-    updateContactGroup() {
+    onCancel() {
+      this.visible = false
+    },
+    updateContactGroup(name) {
       let params = {
-        name: this.groupName,
+        name,
         description: "",
         userIds: this.targetKeys,
         id:this.currGroupId
       }
       httpAction("/alarmContactGroup/update", params, "put").then(res => {
         if (res.success) {
+          this.visible = false
           this.$message.success("success")
           this.getAlarmGroup()
         } else {
@@ -225,14 +264,15 @@ export default {
         }
       })
     },
-    createContactGroup() {
+    createContactGroup(name) {
       let params = {
-        name: this.groupName,
+        name,
         description: "",
         userIds:this.targetKeys,
       }
       postAction("/alarmContactGroup/create", params).then(res => {
         if (res.success) {
+          this.visible = false
           this.$message.success("success")
           this.getAlarmGroup()
         } else {
@@ -283,6 +323,11 @@ export default {
       console.log('search:', dir, value);
     },
     showModal() {
+      this.targetKeys = []
+      this.groupName = ""
+      this.form.setFieldsValue({
+        name: "",
+      });
       this.visible = true;
     },
   },
@@ -290,6 +335,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.operators {
+  width: 100%;
+  justify-content: center;
+  .ant-btn {
+    width: 92px;
+  }
+}
 .group-header{
   height: 50px;
   border-top: 1px solid rgba(13, 235, 201, 0.3);
@@ -303,6 +355,7 @@ export default {
     font-family: ArialMT;
 	  color: #ffffff;
     border: none;
+    box-shadow: 0px 1px 1px 0px #000000
   }
 }
 .group-content{
@@ -343,6 +396,10 @@ export default {
   .ant-modal-title{
     letter-spacing: 1px;
   }
+  .ant-form-item-label > label{
+    font-family: ArialMT;
+    color: #5b9cba;
+  }
 }
 .group-assign{
   position: relative;
@@ -375,9 +432,9 @@ export default {
         }
 
         &:last-child {
-          height: 364px;
+          height: 345px;
           position: relative;
-          top: 47px;
+          top: 35px;
         }
       }
 
@@ -453,7 +510,7 @@ export default {
     position: absolute;
     top: 0;
     right: 0;
-    width: 282px;
+    width: 300px;
     display: flex;
     align-items: center;
     label {
diff --git a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
index c6e2f27..5e6b618 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
@@ -4,34 +4,51 @@
     <div class="chart-layout" id="alarmChartBar"></div>
     <a-card :bordered="false" style="height:calc(100% - 280px);margin-left: 20px;">
       <a-tabs default-active-key="alarmHistory" @change="handleTabChange">
-        <a-tab-pane key="alarmHistory" tab="ALARM HISTORY">
-          <custom-table
-            size="middle"
-            :rowKey="getUid()"
-            :columns="columns"
-            :list="dataSource"
-            :pagination="ipagination"
-            :loading="loading"
-            :canSelect="false"
-            @change="handleTableChange"
-          >
-            <template slot="info" slot-scope="{text, record}">
-              <div class="info-alarm">{{ text }}</div>
-              <div>{{ text }}</div>
-            </template>
-          </custom-table>
+        <a-tab-pane class="history_tab" key="alarmHistory" tab="ALARM HISTORY">
+          <div style=" height: calc(100% - 30px);overflow: auto;">
+            <custom-table
+              size="middle"
+              :rowKey="getUid()"
+              :columns="columns"
+              :list="dataSource"
+              :loading="loading"
+              :canSelect="false"
+              @change="handleTableChange"
+              >
+              <!-- :pagination="ipagination" -->
+              <template slot="info" slot-scope="{ record}">
+                <div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
+                <div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}</div>
+              </template>
+            </custom-table>
+          </div>
+          <a-pagination 
+            size="small"
+            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 
+            @change="handlePageChange"
+            @showSizeChange="handleSizeChange"
+          />
         </a-tab-pane>
         <a-tab-pane key="alarmAnalysis" tab="ALARM ANALYSIS">
           <div class="analysis-chart">
             <div class="chart-left">
               <div class="chart-title">
                 <span>Monitor Type Alarms</span>
+                <img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
               </div>
               <div class="chart-content" id="chartLeft"></div>
             </div>
             <div class="chart-right">
               <div class="chart-title">
                 <span>Alarm Rule Top5</span>
+                <img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
               </div>
               <div class="chart-content" id="chartRight"></div>
             </div>
@@ -107,6 +124,7 @@ export default {
       xData_top: [],
       yData_top: [],
       pieData: [],
+      pieColors:["#d64618","#c99e0d","#b2a927"],
       url: {
         list: '/alarmLog/findPage'
       },
@@ -171,24 +189,38 @@ export default {
           axisTick: {
             show:false
           },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
           data: this.xData
         },
         yAxis: {
           type: 'value',
           axisLine: {
-            show:true
+            show:true,
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.5)"
+            }
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgbA(64, 105, 121, 0.2)"
+              color: "rgba(119, 181, 213, 0.2)"
             }
           },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
         },
         series: [
           {
             type: 'bar',
-            barWidth: 30,
+            barMaxWidth: 30,
             itemStyle: {
               color: "#b87b1b"
             },
@@ -210,16 +242,26 @@ export default {
       }
       postAction("/alarmLog/typeAlarms", params).then(res => {
         if (res.success) {
-          // this.drawAlarmChart_pie()
           this.pieData = res.result.pieData
           this.pieTotal = res.result.pieTotal
+          this.drawAlarmChart_pie()
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
         }
       })
     },
-    handleTableChange(pagination) {
-      this.ipagination = pagination
+    // handleTableChange(pagination) {
+    //   this.ipagination = pagination
+    //   this.getAlarmLogTable()
+    // },
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.getAlarmLogTable()
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.page.pageSize = size
       this.getAlarmLogTable()
     },
     handleTabChange(key) {
@@ -234,9 +276,6 @@ export default {
     drawAlarmChart_pie() {
       this.alarmPie = echarts.init(document.getElementById("chartLeft"))
       let options = {
-        tooltip: {
-          trigger: 'item'
-        },
         graphic: [
           {
             type: "text",
@@ -266,15 +305,28 @@ export default {
             name: 'Access From',
             type: 'pie',
             radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: 'center'
+            data: this.pieData.map((item, index) => {
+                item.label = { 
+                    color: this.pieColors[index]
+                }
+                return item;
+            }),
+            itemStyle: {
+              color: (params) => {
+                  var index = params.dataIndex;
+                  return this.pieColors[index];
+              }
             },
-            labelLine: {
-              show: false
+            label:{
+              formatter:'{q|{b}}\n{q|{c}} {q|({d})%}',
+              rich: {
+                q: {
+                  fontSize: 16,
+                  fontFamily: 'ArialMT',
+                  lineHeight: 22
+                },
+              }
             },
-            data: this.pieData
           }
         ]
       }
@@ -283,7 +335,7 @@ export default {
         this.alarmPie.resize();
       });
     },
-    getAlarmTop() {
+    getAlarmTop(obj) {
       let params = {
         startDate:obj.startDate,
         endDate:obj.endDate,
@@ -295,6 +347,7 @@ export default {
         if (res.success) {
           this.xData_top = res.result.yData
           this.yData_top = res.result.xData
+          this.drawAlarmChart_top()
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
         }
@@ -318,13 +371,14 @@ export default {
           axisLabel: {
             show: false
           },
-          splitLine: {
-            show: true,
+          axisLine: {
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
+              color: "rgba(115, 191, 255, 0.5)"
             }
           },
-          // data: this.xData
+          splitLine: {
+            show: false
+          },
         },
         yAxis: {
           type: 'category',
@@ -338,7 +392,7 @@ export default {
           axisLine: {
             show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
+              color: "rgba(115, 191, 255, 0.5)"
             }
           },
           splitLine: {
@@ -389,6 +443,7 @@ export default {
         height: 100%;
         overflow: auto;
         background-color: #02282b;
+        overflow: hidden;
       }
     }
   }
@@ -483,11 +538,20 @@ export default {
     color: #0cebc9;
     border-bottom: 4px solid rgba(12, 235, 201, 0.2);
     border-top: 1px solid rgba(12, 235, 201, 0.2);
+    position: relative;
+    // display: flex;
+    // justify-content: space-between;
     span{
       display: inline-block;
       padding: 0 15px;
       background-color: rgba(12, 235, 201, 0.05);
     }
+    img{
+      position: absolute;
+      right: 15px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
   .chart-content{
     height: calc(100% - 40px);
@@ -498,4 +562,13 @@ export default {
 	font-size: 18px;
 	color: #f62424;
 }
+.history_tab{
+  position: relative;
+}
+.ant-pagination{
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+  }
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/components/searchBar.vue b/src/views/abnormalAlarm/components/searchBar.vue
index ac8b67f..ca83215 100644
--- a/src/views/abnormalAlarm/components/searchBar.vue
+++ b/src/views/abnormalAlarm/components/searchBar.vue
@@ -41,7 +41,8 @@
       <a-col flex="380px">
         <a-form-model-item label="Alarm date">
           <a-range-picker
-            :value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
+            dropdownClassName="asd"
+            :default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
             @change="onRangeDateChange" 
           />
         </a-form-model-item>
@@ -159,28 +160,33 @@ export default {
     margin-right: 9px;
   }
 }
-::v-deep .ant-form-item {
-  display: flex;
-  margin-bottom: 0;
-  .ant-form-item-label,.ant-form-item-control {
-    line-height: 32px;
-    height: 32px;
-  }
-  .ant-form-item-label {
-    flex-shrink: 0;
-    margin-right: 10px;
-    label {
-      font-size: 16px;
-      font-family: ArialMT;
-	    color: #ade6ee;
-      &::after {
-        display: none;
+::v-deep {
+  .ant-form-item {
+    display: flex;
+    margin-bottom: 0;
+    .ant-form-item-label,.ant-form-item-control {
+      line-height: 32px;
+      height: 32px;
+    }
+    .ant-form-item-label {
+      flex-shrink: 0;
+      margin-right: 10px;
+      label {
+        font-size: 16px;
+        font-family: ArialMT;
+        color: #ade6ee;
+        &::after {
+          display: none;
+        }
       }
     }
-  }
-  .ant-form-item-control-wrapper {
-    width: 100%;
-    overflow: hidden;
+    .ant-calendar-range-picker-separator{
+      color: white;
+    }
+    .ant-form-item-control-wrapper {
+      width: 100%;
+      overflow: hidden;
+    }
   }
 }
 .ant-select {
@@ -197,4 +203,13 @@ export default {
   position: relative;
   background: #03353f;
 }
+:global{
+  .asd{
+    .ant-calendar-range .ant-calendar-input ,
+    .ant-calendar-range .ant-calendar-time-picker-input{
+      color: red !important;
+      background: none !important;
+    }
+  }
+}
 </style>
\ No newline at end of file