diff --git a/mock/biz/overview.js b/mock/biz/overview.js
index 5fc8151..033ff41 100644
--- a/mock/biz/overview.js
+++ b/mock/biz/overview.js
@@ -10,7 +10,8 @@
         'data': [
           {
             'wellId': 1,
-            'wellCode': 'E32TFXR',
+            'wellCode': 'E32TFW3R3',
+            'devcode': '4120180421',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '井盖开启',
@@ -20,35 +21,38 @@
             'jobStatus': '处理中'
           },
           {
-            'wellId': 2,
+            'wellId': 1,
             'wellCode': 'E32TFW3R3',
+            'devcode': '11201804212',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': 39.9,
+            'lngGaode': 116.4,
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
             'wellId': 3,
             'wellCode': 'E32TFW3R1',
+            'devcode': '11201804574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': '39.917787',
+            'lngGaode': '116.411291',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
-            'boxId': 4,
-            'boxCode': 'E32TFW3Rx',
+            'wellId': 4,
+            'wellCode': 'E32TFW3Rx',
+            'devcode': '11201904574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
             'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'lngGaode': '116.411371',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           }
@@ -119,7 +123,7 @@
           'deptId': '24',
           'deptName': '第一分公司',
           'position': '长安街55号',
-          'wellTypeName':'雨水井',
+          'wellTypeName': '雨水井',
           'alarmList': [
             {
               'devcode': '412018202100',
@@ -183,30 +187,28 @@
       return {
         'code': 200,
         'message': 'success',
-        'data': {
-          'list': [
-            {
-              'value': '1',
-              'name': '雨水井'
-            },
-            {
-              'value': '2',
-              'name': '污水井'
-            },
-            {
-              'value': '3',
-              'name': '燃气井'
-            },
-            {
-              'value': '4',
-              'name': '热力井'
-            },
-            {
-              'value': '5',
-              'name': '电力井'
-            }
-          ]
-        }
+        'data': [
+          {
+            'value': '1',
+            'name': '雨水井'
+          },
+          {
+            'value': '2',
+            'name': '污水井'
+          },
+          {
+            'value': '3',
+            'name': '燃气井'
+          },
+          {
+            'value': '4',
+            'name': '热力井'
+          },
+          {
+            'value': '5',
+            'name': '电力井'
+          }
+        ]
       }
     }
   },

diff --git a/mock/biz/overview.js b/mock/biz/overview.js
index 5fc8151..033ff41 100644
--- a/mock/biz/overview.js
+++ b/mock/biz/overview.js
@@ -10,7 +10,8 @@
         'data': [
           {
             'wellId': 1,
-            'wellCode': 'E32TFXR',
+            'wellCode': 'E32TFW3R3',
+            'devcode': '4120180421',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '井盖开启',
@@ -20,35 +21,38 @@
             'jobStatus': '处理中'
           },
           {
-            'wellId': 2,
+            'wellId': 1,
             'wellCode': 'E32TFW3R3',
+            'devcode': '11201804212',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': 39.9,
+            'lngGaode': 116.4,
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
             'wellId': 3,
             'wellCode': 'E32TFW3R1',
+            'devcode': '11201804574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': '39.917787',
+            'lngGaode': '116.411291',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
-            'boxId': 4,
-            'boxCode': 'E32TFW3Rx',
+            'wellId': 4,
+            'wellCode': 'E32TFW3Rx',
+            'devcode': '11201904574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
             'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'lngGaode': '116.411371',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           }
@@ -119,7 +123,7 @@
           'deptId': '24',
           'deptName': '第一分公司',
           'position': '长安街55号',
-          'wellTypeName':'雨水井',
+          'wellTypeName': '雨水井',
           'alarmList': [
             {
               'devcode': '412018202100',
@@ -183,30 +187,28 @@
       return {
         'code': 200,
         'message': 'success',
-        'data': {
-          'list': [
-            {
-              'value': '1',
-              'name': '雨水井'
-            },
-            {
-              'value': '2',
-              'name': '污水井'
-            },
-            {
-              'value': '3',
-              'name': '燃气井'
-            },
-            {
-              'value': '4',
-              'name': '热力井'
-            },
-            {
-              'value': '5',
-              'name': '电力井'
-            }
-          ]
-        }
+        'data': [
+          {
+            'value': '1',
+            'name': '雨水井'
+          },
+          {
+            'value': '2',
+            'name': '污水井'
+          },
+          {
+            'value': '3',
+            'name': '燃气井'
+          },
+          {
+            'value': '4',
+            'name': '热力井'
+          },
+          {
+            'value': '5',
+            'name': '电力井'
+          }
+        ]
       }
     }
   },
diff --git a/package.json b/package.json
index 9ae379e..09eeab9 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "^0.4.0",
+    "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",

diff --git a/mock/biz/overview.js b/mock/biz/overview.js
index 5fc8151..033ff41 100644
--- a/mock/biz/overview.js
+++ b/mock/biz/overview.js
@@ -10,7 +10,8 @@
         'data': [
           {
             'wellId': 1,
-            'wellCode': 'E32TFXR',
+            'wellCode': 'E32TFW3R3',
+            'devcode': '4120180421',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '井盖开启',
@@ -20,35 +21,38 @@
             'jobStatus': '处理中'
           },
           {
-            'wellId': 2,
+            'wellId': 1,
             'wellCode': 'E32TFW3R3',
+            'devcode': '11201804212',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': 39.9,
+            'lngGaode': 116.4,
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
             'wellId': 3,
             'wellCode': 'E32TFW3R1',
+            'devcode': '11201804574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': '39.917787',
+            'lngGaode': '116.411291',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
-            'boxId': 4,
-            'boxCode': 'E32TFW3Rx',
+            'wellId': 4,
+            'wellCode': 'E32TFW3Rx',
+            'devcode': '11201904574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
             'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'lngGaode': '116.411371',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           }
@@ -119,7 +123,7 @@
           'deptId': '24',
           'deptName': '第一分公司',
           'position': '长安街55号',
-          'wellTypeName':'雨水井',
+          'wellTypeName': '雨水井',
           'alarmList': [
             {
               'devcode': '412018202100',
@@ -183,30 +187,28 @@
       return {
         'code': 200,
         'message': 'success',
-        'data': {
-          'list': [
-            {
-              'value': '1',
-              'name': '雨水井'
-            },
-            {
-              'value': '2',
-              'name': '污水井'
-            },
-            {
-              'value': '3',
-              'name': '燃气井'
-            },
-            {
-              'value': '4',
-              'name': '热力井'
-            },
-            {
-              'value': '5',
-              'name': '电力井'
-            }
-          ]
-        }
+        'data': [
+          {
+            'value': '1',
+            'name': '雨水井'
+          },
+          {
+            'value': '2',
+            'name': '污水井'
+          },
+          {
+            'value': '3',
+            'name': '燃气井'
+          },
+          {
+            'value': '4',
+            'name': '热力井'
+          },
+          {
+            'value': '5',
+            'name': '电力井'
+          }
+        ]
       }
     }
   },
diff --git a/package.json b/package.json
index 9ae379e..09eeab9 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "^0.4.0",
+    "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
diff --git a/src/main.js b/src/main.js
index 649996e..303cb2a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,10 @@
 const { mockXHR } = require('../mock')
 mockXHR()
 
+// 引入动画
+import animated from 'animate.css'
+Vue.use(animated)
+
 // 引入高德地图
 // import VueAMap from 'vue-amap'
 // Vue.use(VueAMap)

diff --git a/mock/biz/overview.js b/mock/biz/overview.js
index 5fc8151..033ff41 100644
--- a/mock/biz/overview.js
+++ b/mock/biz/overview.js
@@ -10,7 +10,8 @@
         'data': [
           {
             'wellId': 1,
-            'wellCode': 'E32TFXR',
+            'wellCode': 'E32TFW3R3',
+            'devcode': '4120180421',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '井盖开启',
@@ -20,35 +21,38 @@
             'jobStatus': '处理中'
           },
           {
-            'wellId': 2,
+            'wellId': 1,
             'wellCode': 'E32TFW3R3',
+            'devcode': '11201804212',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': 39.9,
+            'lngGaode': 116.4,
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
             'wellId': 3,
             'wellCode': 'E32TFW3R1',
+            'devcode': '11201804574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': '39.917787',
+            'lngGaode': '116.411291',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
-            'boxId': 4,
-            'boxCode': 'E32TFW3Rx',
+            'wellId': 4,
+            'wellCode': 'E32TFW3Rx',
+            'devcode': '11201904574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
             'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'lngGaode': '116.411371',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           }
@@ -119,7 +123,7 @@
           'deptId': '24',
           'deptName': '第一分公司',
           'position': '长安街55号',
-          'wellTypeName':'雨水井',
+          'wellTypeName': '雨水井',
           'alarmList': [
             {
               'devcode': '412018202100',
@@ -183,30 +187,28 @@
       return {
         'code': 200,
         'message': 'success',
-        'data': {
-          'list': [
-            {
-              'value': '1',
-              'name': '雨水井'
-            },
-            {
-              'value': '2',
-              'name': '污水井'
-            },
-            {
-              'value': '3',
-              'name': '燃气井'
-            },
-            {
-              'value': '4',
-              'name': '热力井'
-            },
-            {
-              'value': '5',
-              'name': '电力井'
-            }
-          ]
-        }
+        'data': [
+          {
+            'value': '1',
+            'name': '雨水井'
+          },
+          {
+            'value': '2',
+            'name': '污水井'
+          },
+          {
+            'value': '3',
+            'name': '燃气井'
+          },
+          {
+            'value': '4',
+            'name': '热力井'
+          },
+          {
+            'value': '5',
+            'name': '电力井'
+          }
+        ]
       }
     }
   },
diff --git a/package.json b/package.json
index 9ae379e..09eeab9 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "^0.4.0",
+    "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
diff --git a/src/main.js b/src/main.js
index 649996e..303cb2a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,10 @@
 const { mockXHR } = require('../mock')
 mockXHR()
 
+// 引入动画
+import animated from 'animate.css'
+Vue.use(animated)
+
 // 引入高德地图
 // import VueAMap from 'vue-amap'
 // Vue.use(VueAMap)
diff --git a/src/views/overview/components/alarmList.vue b/src/views/overview/components/alarmList.vue
index e1445a7..d3ee778 100644
--- a/src/views/overview/components/alarmList.vue
+++ b/src/views/overview/components/alarmList.vue
@@ -4,153 +4,178 @@
  * @Date: 2022-05-13
  -->
 <template>
-  <div v-if="alarmWells.length>0" class="map-alarm-div">
-    <div class="map-alarm-div-header">
-      告警列表
-      <span class="icon-right" @click="tableShow=!tableShow">
-          <i v-if="tableShow" class="el-icon-arrow-up" />
-          <i v-else class="el-icon-arrow-down" />
-        </span>
-    </div>
-    <transition name="el-collapse-transition">
-      <el-scrollbar
-        v-show="tableShow"
-        :style="{visibility: tableShow?'visible':'hidden'}"
-        :class="{moredatascollor:alarmList.length>6}"
-        :native="false"
-      >
-        <el-table
-          :data="alarmList"
-          class="alarm-list-table"
-          border
-          @row-click="rowClick"
+  <div v-if="this.show && data.length>0">
+    <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" :duration="500" mode="out-in">
+      <div v-if="!tableShow" class="alarm-hidden-div" @click="tableShow=!tableShow">
+        告警列表
+      </div>
+    </transition>
+    <transition enter-active-class="animate__animated animate__slideInLeft" leave-active-class="animate__animated animate__slideOutLeft" :duration="500" mode="out-in">
+      <div v-if="tableShow" class="map-alarm-div">
+        <!--报警列表展开样式-->
+        <el-scrollbar
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:data.length>6, 'overview-alarm-scroll':true}"
+          :native="false"
         >
-          <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-            <template slot-scope="scope">
-              {{ scope.row[column.value] }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-scrollbar>
+          <el-table
+            :data="data"
+            class="alarm-list-table"
+            border
+            row-class-name="alarm-table-row"
+            header-row-class-name="alarm-table-th"
+            @row-click="rowClick"
+          >
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+        <div class="map-alarm-div-header">
+          <div class="header-box" @click="tableShow = false">
+            告警列表
+            <!--            <span class="icon-right">-->
+            <!--              <i class="el-icon-d-arrow-left" />-->
+            <!--            </span>-->
+          </div>
+        </div>
+      </div>
     </transition>
   </div>
 </template>
 
 <script>
-  export default {
-    name: "AlarmList",
-    props:{
-      show: {
-        type: Boolean,
-        default: true
-      }, // 是否显示
-      alarmList:{
-        type: Array,
-        default: ()=>[]
-      } //报警列表
-    },
-    computed(){
-      tableShow(){
-        return this.show && this.alarmList.length>0
-      }
-    },
-    data(){
-      return {
-        columns: [
-          {
-            text: '井编号',
-            value: 'wellCode',
-            width: 100,
-            align: 'center'
-          },
-          {
-            text: '设备编号',
-            value: 'devcode',
-            width: 120,
-            align: 'center'
-          },
-          {
-            text: '告警原因',
-            value: 'alarmContent',
-            align: 'center',
-            width: 120
-          },
-          {
-            text: '时间',
-            value: 'alarmTime',
-            width: 180,
-            align: 'center'
-          }
-        ], // 告警列表显示列
-        tableIcon: 'el-icon-arrow-up',
-      }
-    },
-    methods:{
-      rowClick(row, column, event){
-        this.$emit('row-click',row, column, event)
-      }
+export default {
+  name: 'AlarmList',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    data: {
+      type: Array,
+      default: () => []
+    } // 报警列表
+  },
+  data() {
+    return {
+      columns: [
+        { text: '井编号', value: 'wellCode', width: 110, align: 'center' },
+        { text: '设备编号', value: 'devcode', width: 120, align: 'center' },
+        { text: '告警原因', value: 'alarmContent', align: 'center' },
+        { text: '时间', value: 'alarmTime', width: 180, align: 'center' }
+      ], // 告警列表显示列
+      tableShow: true // 表格显示
     }
-
+  },
+  methods: {
+    rowClick(row, column, event) {
+      this.$emit('row-click', row, column, event)
+    }
   }
+
+}
 </script>
 
-<style scoped>
-  // 报警列表
-  .map-alarm-div{
-    position: absolute;
-    z-index: 100;
-    background-color: rgba(255, 234, 241,0.8);
-    top: 60px;
-    left: 10px;
-  .map-alarm-div-header{
-    line-height: 40px;
-    width: 504px;
-    padding-left: 10px;
-  .icon-right{
-    position: absolute;
-    right: 15px;
-  }
-  .icon-right:hover{
-    color: #409EFF;
+<style lang="scss" scoped>
+.alarm-hidden-div{
+  position: absolute;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  box-sizing: border-box;
+  padding: 10px;
+  border-radius: 0px 10px 10px 0px;
+  background-color: rgba(255, 234, 241,1);
+  border: 1px solid #d2d0d0;
+  border-left: 0px;
+  font-size: 16px;
+  font-weight: 500;
+  writing-mode:vertical-rl;
+  color: #7f7e7e;
+  &:hover{
     cursor: pointer;
+    color: #535252;
   }
+}
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  align-items: flex-start;
+  .map-alarm-div-header{
+    .header-box{
+      border-radius: 0px 10px 10px 0px;
+      background-color: rgba(255, 234, 241,1);
+      border: 1px solid #d4cfcf;
+      border-left: 0px;
+      font-size: 16px;
+      font-weight: 400;
+      writing-mode:vertical-rl;
+      box-sizing: border-box;
+      padding: 10px;
+      color: #535252;
+      .icon-right{
+        width: 16px;
+        height: 26px;
+      }
+      &:hover{
+        cursor: pointer;
+        color: #7f7e7e;
+      }
+    }
   }
-  .el-scrollbar {
-    /*height: 200px;*/
-    width: 100%;
+  .overview-alarm-scroll {
+    width: 504px;
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
   }
   .moredatascollor{
     height: 200px;
   }
+  .alarm-list-table{
+    td{
+      padding: 5px 0px;
+    }
+  }
+}
+
+</style>
+<style lang="scss">
+.overview-alarm-scroll {
+  width: 100%;
   .el-scrollbar__wrap {
     overflow-y: auto;
     overflow-x: hidden;
+    padding: 0px !important;
     margin-bottom: 0px !important;
   }
+}
+.alarm-table-row{
+  background-color: rgba(255, 234, 241, 0.8) !important;
+  td:hover{
+    background-color: rgba(255, 234, 241, 1) !important;
+  }
+  &:hover{
+    cursor: pointer;
+    td{
+      background-color: rgba(255, 234, 241, 1) !important;
+    }
+  }
+}
+.alarm-table-th{
+  th{
+    padding: 7px 0px !important;
+    background-color: rgba(255, 234, 241, 0.9) !important;
+  }
 
-  .el-table th{
-    /*background-color: rgba(255, 229, 230, 0.8);*/
-    padding: 7px 0px;
-  }
-  .el-table td{
-    /*background-color: rgba(255, 234, 241, 0.8);*/
-    padding: 5px 0px;
-    /*line-height: 1;*/
-  }
-  .el-table td:hover{
-    /*background-color: rgba(255, 234, 241, 0.8);*/
-  }
-  .transition-box {
-    margin-bottom: 10px;
-    width: 200px;
-    height: 100px;
-    border-radius: 4px;
-    background-color: #409EFF;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    box-sizing: border-box;
-    margin-right: 20px;
-  }
-  }
+}
 </style>

diff --git a/mock/biz/overview.js b/mock/biz/overview.js
index 5fc8151..033ff41 100644
--- a/mock/biz/overview.js
+++ b/mock/biz/overview.js
@@ -10,7 +10,8 @@
         'data': [
           {
             'wellId': 1,
-            'wellCode': 'E32TFXR',
+            'wellCode': 'E32TFW3R3',
+            'devcode': '4120180421',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '井盖开启',
@@ -20,35 +21,38 @@
             'jobStatus': '处理中'
           },
           {
-            'wellId': 2,
+            'wellId': 1,
             'wellCode': 'E32TFW3R3',
+            'devcode': '11201804212',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': 39.9,
+            'lngGaode': 116.4,
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
             'wellId': 3,
             'wellCode': 'E32TFW3R1',
+            'devcode': '11201804574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': '39.917787',
+            'lngGaode': '116.411291',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
-            'boxId': 4,
-            'boxCode': 'E32TFW3Rx',
+            'wellId': 4,
+            'wellCode': 'E32TFW3Rx',
+            'devcode': '11201904574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
             'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'lngGaode': '116.411371',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           }
@@ -119,7 +123,7 @@
           'deptId': '24',
           'deptName': '第一分公司',
           'position': '长安街55号',
-          'wellTypeName':'雨水井',
+          'wellTypeName': '雨水井',
           'alarmList': [
             {
               'devcode': '412018202100',
@@ -183,30 +187,28 @@
       return {
         'code': 200,
         'message': 'success',
-        'data': {
-          'list': [
-            {
-              'value': '1',
-              'name': '雨水井'
-            },
-            {
-              'value': '2',
-              'name': '污水井'
-            },
-            {
-              'value': '3',
-              'name': '燃气井'
-            },
-            {
-              'value': '4',
-              'name': '热力井'
-            },
-            {
-              'value': '5',
-              'name': '电力井'
-            }
-          ]
-        }
+        'data': [
+          {
+            'value': '1',
+            'name': '雨水井'
+          },
+          {
+            'value': '2',
+            'name': '污水井'
+          },
+          {
+            'value': '3',
+            'name': '燃气井'
+          },
+          {
+            'value': '4',
+            'name': '热力井'
+          },
+          {
+            'value': '5',
+            'name': '电力井'
+          }
+        ]
       }
     }
   },
diff --git a/package.json b/package.json
index 9ae379e..09eeab9 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "^0.4.0",
+    "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
diff --git a/src/main.js b/src/main.js
index 649996e..303cb2a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,10 @@
 const { mockXHR } = require('../mock')
 mockXHR()
 
+// 引入动画
+import animated from 'animate.css'
+Vue.use(animated)
+
 // 引入高德地图
 // import VueAMap from 'vue-amap'
 // Vue.use(VueAMap)
diff --git a/src/views/overview/components/alarmList.vue b/src/views/overview/components/alarmList.vue
index e1445a7..d3ee778 100644
--- a/src/views/overview/components/alarmList.vue
+++ b/src/views/overview/components/alarmList.vue
@@ -4,153 +4,178 @@
  * @Date: 2022-05-13
  -->
 <template>
-  <div v-if="alarmWells.length>0" class="map-alarm-div">
-    <div class="map-alarm-div-header">
-      告警列表
-      <span class="icon-right" @click="tableShow=!tableShow">
-          <i v-if="tableShow" class="el-icon-arrow-up" />
-          <i v-else class="el-icon-arrow-down" />
-        </span>
-    </div>
-    <transition name="el-collapse-transition">
-      <el-scrollbar
-        v-show="tableShow"
-        :style="{visibility: tableShow?'visible':'hidden'}"
-        :class="{moredatascollor:alarmList.length>6}"
-        :native="false"
-      >
-        <el-table
-          :data="alarmList"
-          class="alarm-list-table"
-          border
-          @row-click="rowClick"
+  <div v-if="this.show && data.length>0">
+    <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" :duration="500" mode="out-in">
+      <div v-if="!tableShow" class="alarm-hidden-div" @click="tableShow=!tableShow">
+        告警列表
+      </div>
+    </transition>
+    <transition enter-active-class="animate__animated animate__slideInLeft" leave-active-class="animate__animated animate__slideOutLeft" :duration="500" mode="out-in">
+      <div v-if="tableShow" class="map-alarm-div">
+        <!--报警列表展开样式-->
+        <el-scrollbar
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:data.length>6, 'overview-alarm-scroll':true}"
+          :native="false"
         >
-          <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-            <template slot-scope="scope">
-              {{ scope.row[column.value] }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-scrollbar>
+          <el-table
+            :data="data"
+            class="alarm-list-table"
+            border
+            row-class-name="alarm-table-row"
+            header-row-class-name="alarm-table-th"
+            @row-click="rowClick"
+          >
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+        <div class="map-alarm-div-header">
+          <div class="header-box" @click="tableShow = false">
+            告警列表
+            <!--            <span class="icon-right">-->
+            <!--              <i class="el-icon-d-arrow-left" />-->
+            <!--            </span>-->
+          </div>
+        </div>
+      </div>
     </transition>
   </div>
 </template>
 
 <script>
-  export default {
-    name: "AlarmList",
-    props:{
-      show: {
-        type: Boolean,
-        default: true
-      }, // 是否显示
-      alarmList:{
-        type: Array,
-        default: ()=>[]
-      } //报警列表
-    },
-    computed(){
-      tableShow(){
-        return this.show && this.alarmList.length>0
-      }
-    },
-    data(){
-      return {
-        columns: [
-          {
-            text: '井编号',
-            value: 'wellCode',
-            width: 100,
-            align: 'center'
-          },
-          {
-            text: '设备编号',
-            value: 'devcode',
-            width: 120,
-            align: 'center'
-          },
-          {
-            text: '告警原因',
-            value: 'alarmContent',
-            align: 'center',
-            width: 120
-          },
-          {
-            text: '时间',
-            value: 'alarmTime',
-            width: 180,
-            align: 'center'
-          }
-        ], // 告警列表显示列
-        tableIcon: 'el-icon-arrow-up',
-      }
-    },
-    methods:{
-      rowClick(row, column, event){
-        this.$emit('row-click',row, column, event)
-      }
+export default {
+  name: 'AlarmList',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    data: {
+      type: Array,
+      default: () => []
+    } // 报警列表
+  },
+  data() {
+    return {
+      columns: [
+        { text: '井编号', value: 'wellCode', width: 110, align: 'center' },
+        { text: '设备编号', value: 'devcode', width: 120, align: 'center' },
+        { text: '告警原因', value: 'alarmContent', align: 'center' },
+        { text: '时间', value: 'alarmTime', width: 180, align: 'center' }
+      ], // 告警列表显示列
+      tableShow: true // 表格显示
     }
-
+  },
+  methods: {
+    rowClick(row, column, event) {
+      this.$emit('row-click', row, column, event)
+    }
   }
+
+}
 </script>
 
-<style scoped>
-  // 报警列表
-  .map-alarm-div{
-    position: absolute;
-    z-index: 100;
-    background-color: rgba(255, 234, 241,0.8);
-    top: 60px;
-    left: 10px;
-  .map-alarm-div-header{
-    line-height: 40px;
-    width: 504px;
-    padding-left: 10px;
-  .icon-right{
-    position: absolute;
-    right: 15px;
-  }
-  .icon-right:hover{
-    color: #409EFF;
+<style lang="scss" scoped>
+.alarm-hidden-div{
+  position: absolute;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  box-sizing: border-box;
+  padding: 10px;
+  border-radius: 0px 10px 10px 0px;
+  background-color: rgba(255, 234, 241,1);
+  border: 1px solid #d2d0d0;
+  border-left: 0px;
+  font-size: 16px;
+  font-weight: 500;
+  writing-mode:vertical-rl;
+  color: #7f7e7e;
+  &:hover{
     cursor: pointer;
+    color: #535252;
   }
+}
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  align-items: flex-start;
+  .map-alarm-div-header{
+    .header-box{
+      border-radius: 0px 10px 10px 0px;
+      background-color: rgba(255, 234, 241,1);
+      border: 1px solid #d4cfcf;
+      border-left: 0px;
+      font-size: 16px;
+      font-weight: 400;
+      writing-mode:vertical-rl;
+      box-sizing: border-box;
+      padding: 10px;
+      color: #535252;
+      .icon-right{
+        width: 16px;
+        height: 26px;
+      }
+      &:hover{
+        cursor: pointer;
+        color: #7f7e7e;
+      }
+    }
   }
-  .el-scrollbar {
-    /*height: 200px;*/
-    width: 100%;
+  .overview-alarm-scroll {
+    width: 504px;
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
   }
   .moredatascollor{
     height: 200px;
   }
+  .alarm-list-table{
+    td{
+      padding: 5px 0px;
+    }
+  }
+}
+
+</style>
+<style lang="scss">
+.overview-alarm-scroll {
+  width: 100%;
   .el-scrollbar__wrap {
     overflow-y: auto;
     overflow-x: hidden;
+    padding: 0px !important;
     margin-bottom: 0px !important;
   }
+}
+.alarm-table-row{
+  background-color: rgba(255, 234, 241, 0.8) !important;
+  td:hover{
+    background-color: rgba(255, 234, 241, 1) !important;
+  }
+  &:hover{
+    cursor: pointer;
+    td{
+      background-color: rgba(255, 234, 241, 1) !important;
+    }
+  }
+}
+.alarm-table-th{
+  th{
+    padding: 7px 0px !important;
+    background-color: rgba(255, 234, 241, 0.9) !important;
+  }
 
-  .el-table th{
-    /*background-color: rgba(255, 229, 230, 0.8);*/
-    padding: 7px 0px;
-  }
-  .el-table td{
-    /*background-color: rgba(255, 234, 241, 0.8);*/
-    padding: 5px 0px;
-    /*line-height: 1;*/
-  }
-  .el-table td:hover{
-    /*background-color: rgba(255, 234, 241, 0.8);*/
-  }
-  .transition-box {
-    margin-bottom: 10px;
-    width: 200px;
-    height: 100px;
-    border-radius: 4px;
-    background-color: #409EFF;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    box-sizing: border-box;
-    margin-right: 20px;
-  }
-  }
+}
 </style>
diff --git a/src/views/overview/components/toolBox.vue b/src/views/overview/components/toolBox.vue
new file mode 100644
index 0000000..5790190
--- /dev/null
+++ b/src/views/overview/components/toolBox.vue
@@ -0,0 +1,20 @@
+<!--
+ * @Description: 工具栏
+ * @Author: 王晓颖
+ * @Date: 2022-05-16 18:41:50
+ -->
+<template />
+
+<script>
+export default {
+  name: 'ToolBox',
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/mock/biz/overview.js b/mock/biz/overview.js
index 5fc8151..033ff41 100644
--- a/mock/biz/overview.js
+++ b/mock/biz/overview.js
@@ -10,7 +10,8 @@
         'data': [
           {
             'wellId': 1,
-            'wellCode': 'E32TFXR',
+            'wellCode': 'E32TFW3R3',
+            'devcode': '4120180421',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '井盖开启',
@@ -20,35 +21,38 @@
             'jobStatus': '处理中'
           },
           {
-            'wellId': 2,
+            'wellId': 1,
             'wellCode': 'E32TFW3R3',
+            'devcode': '11201804212',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': 39.9,
+            'lngGaode': 116.4,
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
             'wellId': 3,
             'wellCode': 'E32TFW3R1',
+            'devcode': '11201804574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': '39.917787',
+            'lngGaode': '116.411291',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
-            'boxId': 4,
-            'boxCode': 'E32TFW3Rx',
+            'wellId': 4,
+            'wellCode': 'E32TFW3Rx',
+            'devcode': '11201904574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
             'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'lngGaode': '116.411371',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           }
@@ -119,7 +123,7 @@
           'deptId': '24',
           'deptName': '第一分公司',
           'position': '长安街55号',
-          'wellTypeName':'雨水井',
+          'wellTypeName': '雨水井',
           'alarmList': [
             {
               'devcode': '412018202100',
@@ -183,30 +187,28 @@
       return {
         'code': 200,
         'message': 'success',
-        'data': {
-          'list': [
-            {
-              'value': '1',
-              'name': '雨水井'
-            },
-            {
-              'value': '2',
-              'name': '污水井'
-            },
-            {
-              'value': '3',
-              'name': '燃气井'
-            },
-            {
-              'value': '4',
-              'name': '热力井'
-            },
-            {
-              'value': '5',
-              'name': '电力井'
-            }
-          ]
-        }
+        'data': [
+          {
+            'value': '1',
+            'name': '雨水井'
+          },
+          {
+            'value': '2',
+            'name': '污水井'
+          },
+          {
+            'value': '3',
+            'name': '燃气井'
+          },
+          {
+            'value': '4',
+            'name': '热力井'
+          },
+          {
+            'value': '5',
+            'name': '电力井'
+          }
+        ]
       }
     }
   },
diff --git a/package.json b/package.json
index 9ae379e..09eeab9 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "^0.4.0",
+    "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
diff --git a/src/main.js b/src/main.js
index 649996e..303cb2a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,10 @@
 const { mockXHR } = require('../mock')
 mockXHR()
 
+// 引入动画
+import animated from 'animate.css'
+Vue.use(animated)
+
 // 引入高德地图
 // import VueAMap from 'vue-amap'
 // Vue.use(VueAMap)
diff --git a/src/views/overview/components/alarmList.vue b/src/views/overview/components/alarmList.vue
index e1445a7..d3ee778 100644
--- a/src/views/overview/components/alarmList.vue
+++ b/src/views/overview/components/alarmList.vue
@@ -4,153 +4,178 @@
  * @Date: 2022-05-13
  -->
 <template>
-  <div v-if="alarmWells.length>0" class="map-alarm-div">
-    <div class="map-alarm-div-header">
-      告警列表
-      <span class="icon-right" @click="tableShow=!tableShow">
-          <i v-if="tableShow" class="el-icon-arrow-up" />
-          <i v-else class="el-icon-arrow-down" />
-        </span>
-    </div>
-    <transition name="el-collapse-transition">
-      <el-scrollbar
-        v-show="tableShow"
-        :style="{visibility: tableShow?'visible':'hidden'}"
-        :class="{moredatascollor:alarmList.length>6}"
-        :native="false"
-      >
-        <el-table
-          :data="alarmList"
-          class="alarm-list-table"
-          border
-          @row-click="rowClick"
+  <div v-if="this.show && data.length>0">
+    <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" :duration="500" mode="out-in">
+      <div v-if="!tableShow" class="alarm-hidden-div" @click="tableShow=!tableShow">
+        告警列表
+      </div>
+    </transition>
+    <transition enter-active-class="animate__animated animate__slideInLeft" leave-active-class="animate__animated animate__slideOutLeft" :duration="500" mode="out-in">
+      <div v-if="tableShow" class="map-alarm-div">
+        <!--报警列表展开样式-->
+        <el-scrollbar
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:data.length>6, 'overview-alarm-scroll':true}"
+          :native="false"
         >
-          <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-            <template slot-scope="scope">
-              {{ scope.row[column.value] }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-scrollbar>
+          <el-table
+            :data="data"
+            class="alarm-list-table"
+            border
+            row-class-name="alarm-table-row"
+            header-row-class-name="alarm-table-th"
+            @row-click="rowClick"
+          >
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+        <div class="map-alarm-div-header">
+          <div class="header-box" @click="tableShow = false">
+            告警列表
+            <!--            <span class="icon-right">-->
+            <!--              <i class="el-icon-d-arrow-left" />-->
+            <!--            </span>-->
+          </div>
+        </div>
+      </div>
     </transition>
   </div>
 </template>
 
 <script>
-  export default {
-    name: "AlarmList",
-    props:{
-      show: {
-        type: Boolean,
-        default: true
-      }, // 是否显示
-      alarmList:{
-        type: Array,
-        default: ()=>[]
-      } //报警列表
-    },
-    computed(){
-      tableShow(){
-        return this.show && this.alarmList.length>0
-      }
-    },
-    data(){
-      return {
-        columns: [
-          {
-            text: '井编号',
-            value: 'wellCode',
-            width: 100,
-            align: 'center'
-          },
-          {
-            text: '设备编号',
-            value: 'devcode',
-            width: 120,
-            align: 'center'
-          },
-          {
-            text: '告警原因',
-            value: 'alarmContent',
-            align: 'center',
-            width: 120
-          },
-          {
-            text: '时间',
-            value: 'alarmTime',
-            width: 180,
-            align: 'center'
-          }
-        ], // 告警列表显示列
-        tableIcon: 'el-icon-arrow-up',
-      }
-    },
-    methods:{
-      rowClick(row, column, event){
-        this.$emit('row-click',row, column, event)
-      }
+export default {
+  name: 'AlarmList',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    data: {
+      type: Array,
+      default: () => []
+    } // 报警列表
+  },
+  data() {
+    return {
+      columns: [
+        { text: '井编号', value: 'wellCode', width: 110, align: 'center' },
+        { text: '设备编号', value: 'devcode', width: 120, align: 'center' },
+        { text: '告警原因', value: 'alarmContent', align: 'center' },
+        { text: '时间', value: 'alarmTime', width: 180, align: 'center' }
+      ], // 告警列表显示列
+      tableShow: true // 表格显示
     }
-
+  },
+  methods: {
+    rowClick(row, column, event) {
+      this.$emit('row-click', row, column, event)
+    }
   }
+
+}
 </script>
 
-<style scoped>
-  // 报警列表
-  .map-alarm-div{
-    position: absolute;
-    z-index: 100;
-    background-color: rgba(255, 234, 241,0.8);
-    top: 60px;
-    left: 10px;
-  .map-alarm-div-header{
-    line-height: 40px;
-    width: 504px;
-    padding-left: 10px;
-  .icon-right{
-    position: absolute;
-    right: 15px;
-  }
-  .icon-right:hover{
-    color: #409EFF;
+<style lang="scss" scoped>
+.alarm-hidden-div{
+  position: absolute;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  box-sizing: border-box;
+  padding: 10px;
+  border-radius: 0px 10px 10px 0px;
+  background-color: rgba(255, 234, 241,1);
+  border: 1px solid #d2d0d0;
+  border-left: 0px;
+  font-size: 16px;
+  font-weight: 500;
+  writing-mode:vertical-rl;
+  color: #7f7e7e;
+  &:hover{
     cursor: pointer;
+    color: #535252;
   }
+}
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  align-items: flex-start;
+  .map-alarm-div-header{
+    .header-box{
+      border-radius: 0px 10px 10px 0px;
+      background-color: rgba(255, 234, 241,1);
+      border: 1px solid #d4cfcf;
+      border-left: 0px;
+      font-size: 16px;
+      font-weight: 400;
+      writing-mode:vertical-rl;
+      box-sizing: border-box;
+      padding: 10px;
+      color: #535252;
+      .icon-right{
+        width: 16px;
+        height: 26px;
+      }
+      &:hover{
+        cursor: pointer;
+        color: #7f7e7e;
+      }
+    }
   }
-  .el-scrollbar {
-    /*height: 200px;*/
-    width: 100%;
+  .overview-alarm-scroll {
+    width: 504px;
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
   }
   .moredatascollor{
     height: 200px;
   }
+  .alarm-list-table{
+    td{
+      padding: 5px 0px;
+    }
+  }
+}
+
+</style>
+<style lang="scss">
+.overview-alarm-scroll {
+  width: 100%;
   .el-scrollbar__wrap {
     overflow-y: auto;
     overflow-x: hidden;
+    padding: 0px !important;
     margin-bottom: 0px !important;
   }
+}
+.alarm-table-row{
+  background-color: rgba(255, 234, 241, 0.8) !important;
+  td:hover{
+    background-color: rgba(255, 234, 241, 1) !important;
+  }
+  &:hover{
+    cursor: pointer;
+    td{
+      background-color: rgba(255, 234, 241, 1) !important;
+    }
+  }
+}
+.alarm-table-th{
+  th{
+    padding: 7px 0px !important;
+    background-color: rgba(255, 234, 241, 0.9) !important;
+  }
 
-  .el-table th{
-    /*background-color: rgba(255, 229, 230, 0.8);*/
-    padding: 7px 0px;
-  }
-  .el-table td{
-    /*background-color: rgba(255, 234, 241, 0.8);*/
-    padding: 5px 0px;
-    /*line-height: 1;*/
-  }
-  .el-table td:hover{
-    /*background-color: rgba(255, 234, 241, 0.8);*/
-  }
-  .transition-box {
-    margin-bottom: 10px;
-    width: 200px;
-    height: 100px;
-    border-radius: 4px;
-    background-color: #409EFF;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    box-sizing: border-box;
-    margin-right: 20px;
-  }
-  }
+}
 </style>
diff --git a/src/views/overview/components/toolBox.vue b/src/views/overview/components/toolBox.vue
new file mode 100644
index 0000000..5790190
--- /dev/null
+++ b/src/views/overview/components/toolBox.vue
@@ -0,0 +1,20 @@
+<!--
+ * @Description: 工具栏
+ * @Author: 王晓颖
+ * @Date: 2022-05-16 18:41:50
+ -->
+<template />
+
+<script>
+export default {
+  name: 'ToolBox',
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/overview/overviewAmap.vue b/src/views/overview/overviewAmap.vue
index c6ab767..ff344d7 100644
--- a/src/views/overview/overviewAmap.vue
+++ b/src/views/overview/overviewAmap.vue
@@ -3,7 +3,12 @@
   <div>
     <div class="overview-map-container">
       <!--地图-->
-      <a-map-container ref="map" :center="center" :zoom="zoom" :style="{height:(bodyHeight-20)+'px'}" vid="overview" class="map-demo" @ready="mapReady" />
+      <a-map-container ref="map" :center="center" :zoom="zoom" :style="{height:(bodyHeight-20)+'px'}" vid="overview" class="map-demo" @ready="mapReady">
+        <a-map-marker v-for="alarmWell of alarmWells" :position="alarmWell.coordinates" :offset="alarmOffset">
+          <el-image :src="alarmIcon" :style="{'width':alarmIconSize[0]+'px','height':alarmIconSize[1]+'px'}" fit="fill" @click="openAlarmWindow(alarmWell.wellId, alarmWell.coordinates)" />
+        </a-map-marker>
+      </a-map-container>
+      <alarm-list :data="alarmList" @row-click="alarmRowClick" />
     </div>
   </div>
 </template>
@@ -12,15 +17,17 @@
 import { mapGetters } from 'vuex'
 import { getWellType } from '@/api/well/well'
 import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview/wellOverview'
+import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
 import DeptSelect from '../../components/DeptSelect/index'
 import AMapContainer from '@/components/Amap/AMapContainer'
 import AlarmInfoWindow from './components/alarmInfoWindow'
-import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
-// import Vue from 'vue/dist/vue.esm.js'
+import AMapMarker from '@/components/Amap/AMapMarker'
+import AlarmList from './components/alarmList'
 import Vue from 'vue'
+
 export default {
   name: 'Overview',
-  components: { AMapContainer, DeptSelect },
+  components: { AlarmList, AMapMarker, AMapContainer, DeptSelect },
   data() {
     return {
       map: null, // 地图对象
@@ -29,10 +36,10 @@
       type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
       refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
       alarmIcon: require('../../assets/icons/icon-alarm1.png'), // 报警图标
-      alarmIconSize: [], // 报警图标大小
+      alarmIconSize: [30, 30], // 报警图标大小
       alarmOffset: [-15, -30], // 报警图标偏移量
       wellIcon: require('../../assets/icons/icon-position.png'), // 井图标
-      wellIconSize: [], // 井图标大小
+      wellIconSize: [30, 30], // 井图标大小
       wellOffset: [-10, -10], // 井偏移量
       showAlarm: true, // 是否显示报警
       showAll: this.baseConfig.showAllWell, // 是否显示全部井
@@ -56,7 +63,6 @@
       alarmWells: [], // 报警井列表
       latestAlarmTime: '', // 列表中最新报警事件
       alarmFirstAmount: true, // 是否初次加载报警
-
       firstAmount: true, // 是否第一次加载井数据
       loading: true, // 加载图标是否显示
       markers: [], // 所有井的点原始数据
@@ -124,7 +130,7 @@
       this.refreshAlarm()
       if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
         setTimeout(() => {
-          this.countDown()
+          // this.countDown()
         }, 1000)
       }
     },
@@ -143,12 +149,10 @@
       getWellType().then(response => {
         this.wellTypeList = []
         // 如果该用户支持的井类型只有一个，则不显示该筛选框
-        const wellTypes = this.$store.getters.wellTypes
-        for (const wellType of response.data) {
-          if (wellTypes.indexOf(wellType.value) !== -1) {
-            this.wellTypeList.push(wellType)
-          }
-        }
+        const supportWellTypes = this.$store.getters.wellTypes
+        this.wellTypeList = response.data.filter(wellType => {
+          return supportWellTypes.findIndex(item => item == wellType.value) > -1
+        })
         if (this.wellTypeList.length <= 1) {
           this.showWellType = false
         }
@@ -437,23 +441,24 @@
           this.alarmFirstAmount = false // 初次加载完毕
           // 获取当前报警列表
           this.alarmListOri = response.data // 列表原始
-          this.alarmList = response.data
-          if (this.alarmList.length > 0) {
-            this.hasAlarm = true
-          }
-          this.alarmWells = []
+          this.alarmList = response.data // 要显示的报警列表
+          this.alarmWells = [] // 报警的井列表
           for (const alarm of response.data) {
-            this.alarmWells.push({
-              wellCode: alarm.wellCode,
-              wellId: alarm.wellId,
-              wellType: alarm.wellType,
-              lngGaode: alarm.lngGaode,
-              latGaode: alarm.latGaode,
-              position: alarm.position,
-              visible: true
-            })
+            if (this.alarmWells.findIndex(item => item.wellCode === alarm.wellCode) == -1) {
+              this.alarmWells.push({
+                wellCode: alarm.wellCode,
+                wellId: alarm.wellId,
+                wellType: alarm.wellType,
+                lngGaode: alarm.lngGaode,
+                latGaode: alarm.latGaode,
+                coordinates: [alarm.lngGaode, alarm.latGaode],
+                position: alarm.position,
+                visible: true
+              })
+            }
           }
-          this.drawMarkers(this.alarmWells, 'alarm')
+          console.log('alarmWells Length', this.alarmWells.length)
+          // this.drawMarkers(this.alarmWells, 'alarm')
         }
       })
     },
@@ -474,29 +479,38 @@
         }
       }
     },
-    // 点击报警详情
-    openAlarmWindow(wellId, position) {
+    /**
+     * 打开报警弹窗
+     * @param wellId 井id
+     * @param coordinates 弹窗位置： [经度，纬度]
+     */
+    openAlarmWindow(wellId, coordinates, needCenter = false) {
+      console.log('openAlarmWindow:' + wellId)
+      if (this.needCenter) { // 如果需要居中
+        this.center = coordinates
+      }
       // 获取报警详情
       getWellAlarms(wellId).then(response => {
         if (response.code === 200) {
           const wellInfo = response.data
           const alarmInfo = {
-            wellCode: wellInfo.wellCode,
-            position: wellInfo.position,
-            deptName: wellInfo.deptName,
-            wellTypeName: wellInfo.wellTypeName,
-            alarms: wellInfo.alarmList,
-            deep: wellInfo.deep
+            wellCode: response.data.wellCode,
+            position: response.data.position,
+            deptName: response.data.deptName,
+            wellTypeName: response.data.wellTypeName,
+            alarms: response.data.alarmList,
+            deep: response.data.deep
           }
-          this.center = position
           const AlarmWindow = Vue.extend({
             render: h => h(AlarmInfoWindow, { props: { alarmInfo: alarmInfo }})
           })
           const alarmWindow = new AlarmWindow().$mount()
           const infoWindow = new window.AMap.InfoWindow({
-            content: alarmWindow.$el
+            content: alarmWindow.$el, // 显示内容
+            offset: [0, this.alarmOffset[1]], // 偏移
+            autoMove: true // 是否自动调整窗体到视野内
           })
-          infoWindow.open(this.map, new window.AMap.LngLat(position[0], position[1]))
+          infoWindow.open(this.map, new toLngLat(coordinates))
         }
       })
     },
@@ -506,11 +520,11 @@
       const wellId = row.wellId
       for (const alarmWell of this.alarmWells) {
         if (alarmWell.wellId === wellId) {
-          this.center = alarmWell.position
+          // this.center = alarmWell.coordinates
           if (this.zoom < 16) {
             this.zoom = 16
           }
-          this.openAlarmWindow(alarmWell.wellId, alarmWell.position)
+          this.openAlarmWindow(alarmWell.wellId, alarmWell.coordinates, true)
         }
       }
     },
@@ -597,7 +611,6 @@
 // 地图
 .overview-map-container{
   width: 100%;
-  padding: 5px;
   .map-demo{
     width: 100%;
     .svg-icon{

diff --git a/mock/biz/overview.js b/mock/biz/overview.js
index 5fc8151..033ff41 100644
--- a/mock/biz/overview.js
+++ b/mock/biz/overview.js
@@ -10,7 +10,8 @@
         'data': [
           {
             'wellId': 1,
-            'wellCode': 'E32TFXR',
+            'wellCode': 'E32TFW3R3',
+            'devcode': '4120180421',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '井盖开启',
@@ -20,35 +21,38 @@
             'jobStatus': '处理中'
           },
           {
-            'wellId': 2,
+            'wellId': 1,
             'wellCode': 'E32TFW3R3',
+            'devcode': '11201804212',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': 39.9,
+            'lngGaode': 116.4,
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
             'wellId': 3,
             'wellCode': 'E32TFW3R1',
+            'devcode': '11201804574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
-            'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'latGaode': '39.917787',
+            'lngGaode': '116.411291',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           },
           {
-            'boxId': 4,
-            'boxCode': 'E32TFW3Rx',
+            'wellId': 4,
+            'wellCode': 'E32TFW3Rx',
+            'devcode': '11201904574',
             'position': '长安街55号',
             'alarmId': 1,
             'alarmContent': '水位超限',
             'latGaode': '39.917797',
-            'lngGaode': '116.411391',
+            'lngGaode': '116.411371',
             'alarmTime': '2019-03-20 10:55:00',
             'jobStatus': '待处理'
           }
@@ -119,7 +123,7 @@
           'deptId': '24',
           'deptName': '第一分公司',
           'position': '长安街55号',
-          'wellTypeName':'雨水井',
+          'wellTypeName': '雨水井',
           'alarmList': [
             {
               'devcode': '412018202100',
@@ -183,30 +187,28 @@
       return {
         'code': 200,
         'message': 'success',
-        'data': {
-          'list': [
-            {
-              'value': '1',
-              'name': '雨水井'
-            },
-            {
-              'value': '2',
-              'name': '污水井'
-            },
-            {
-              'value': '3',
-              'name': '燃气井'
-            },
-            {
-              'value': '4',
-              'name': '热力井'
-            },
-            {
-              'value': '5',
-              'name': '电力井'
-            }
-          ]
-        }
+        'data': [
+          {
+            'value': '1',
+            'name': '雨水井'
+          },
+          {
+            'value': '2',
+            'name': '污水井'
+          },
+          {
+            'value': '3',
+            'name': '燃气井'
+          },
+          {
+            'value': '4',
+            'name': '热力井'
+          },
+          {
+            'value': '5',
+            'name': '电力井'
+          }
+        ]
       }
     }
   },
diff --git a/package.json b/package.json
index 9ae379e..09eeab9 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "^0.4.0",
+    "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
diff --git a/src/main.js b/src/main.js
index 649996e..303cb2a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,10 @@
 const { mockXHR } = require('../mock')
 mockXHR()
 
+// 引入动画
+import animated from 'animate.css'
+Vue.use(animated)
+
 // 引入高德地图
 // import VueAMap from 'vue-amap'
 // Vue.use(VueAMap)
diff --git a/src/views/overview/components/alarmList.vue b/src/views/overview/components/alarmList.vue
index e1445a7..d3ee778 100644
--- a/src/views/overview/components/alarmList.vue
+++ b/src/views/overview/components/alarmList.vue
@@ -4,153 +4,178 @@
  * @Date: 2022-05-13
  -->
 <template>
-  <div v-if="alarmWells.length>0" class="map-alarm-div">
-    <div class="map-alarm-div-header">
-      告警列表
-      <span class="icon-right" @click="tableShow=!tableShow">
-          <i v-if="tableShow" class="el-icon-arrow-up" />
-          <i v-else class="el-icon-arrow-down" />
-        </span>
-    </div>
-    <transition name="el-collapse-transition">
-      <el-scrollbar
-        v-show="tableShow"
-        :style="{visibility: tableShow?'visible':'hidden'}"
-        :class="{moredatascollor:alarmList.length>6}"
-        :native="false"
-      >
-        <el-table
-          :data="alarmList"
-          class="alarm-list-table"
-          border
-          @row-click="rowClick"
+  <div v-if="this.show && data.length>0">
+    <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" :duration="500" mode="out-in">
+      <div v-if="!tableShow" class="alarm-hidden-div" @click="tableShow=!tableShow">
+        告警列表
+      </div>
+    </transition>
+    <transition enter-active-class="animate__animated animate__slideInLeft" leave-active-class="animate__animated animate__slideOutLeft" :duration="500" mode="out-in">
+      <div v-if="tableShow" class="map-alarm-div">
+        <!--报警列表展开样式-->
+        <el-scrollbar
+          :style="{visibility: tableShow?'visible':'hidden'}"
+          :class="{moredatascollor:data.length>6, 'overview-alarm-scroll':true}"
+          :native="false"
         >
-          <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-            <template slot-scope="scope">
-              {{ scope.row[column.value] }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-scrollbar>
+          <el-table
+            :data="data"
+            class="alarm-list-table"
+            border
+            row-class-name="alarm-table-row"
+            header-row-class-name="alarm-table-th"
+            @row-click="rowClick"
+          >
+            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row[column.value] }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-scrollbar>
+        <div class="map-alarm-div-header">
+          <div class="header-box" @click="tableShow = false">
+            告警列表
+            <!--            <span class="icon-right">-->
+            <!--              <i class="el-icon-d-arrow-left" />-->
+            <!--            </span>-->
+          </div>
+        </div>
+      </div>
     </transition>
   </div>
 </template>
 
 <script>
-  export default {
-    name: "AlarmList",
-    props:{
-      show: {
-        type: Boolean,
-        default: true
-      }, // 是否显示
-      alarmList:{
-        type: Array,
-        default: ()=>[]
-      } //报警列表
-    },
-    computed(){
-      tableShow(){
-        return this.show && this.alarmList.length>0
-      }
-    },
-    data(){
-      return {
-        columns: [
-          {
-            text: '井编号',
-            value: 'wellCode',
-            width: 100,
-            align: 'center'
-          },
-          {
-            text: '设备编号',
-            value: 'devcode',
-            width: 120,
-            align: 'center'
-          },
-          {
-            text: '告警原因',
-            value: 'alarmContent',
-            align: 'center',
-            width: 120
-          },
-          {
-            text: '时间',
-            value: 'alarmTime',
-            width: 180,
-            align: 'center'
-          }
-        ], // 告警列表显示列
-        tableIcon: 'el-icon-arrow-up',
-      }
-    },
-    methods:{
-      rowClick(row, column, event){
-        this.$emit('row-click',row, column, event)
-      }
+export default {
+  name: 'AlarmList',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    data: {
+      type: Array,
+      default: () => []
+    } // 报警列表
+  },
+  data() {
+    return {
+      columns: [
+        { text: '井编号', value: 'wellCode', width: 110, align: 'center' },
+        { text: '设备编号', value: 'devcode', width: 120, align: 'center' },
+        { text: '告警原因', value: 'alarmContent', align: 'center' },
+        { text: '时间', value: 'alarmTime', width: 180, align: 'center' }
+      ], // 告警列表显示列
+      tableShow: true // 表格显示
     }
-
+  },
+  methods: {
+    rowClick(row, column, event) {
+      this.$emit('row-click', row, column, event)
+    }
   }
+
+}
 </script>
 
-<style scoped>
-  // 报警列表
-  .map-alarm-div{
-    position: absolute;
-    z-index: 100;
-    background-color: rgba(255, 234, 241,0.8);
-    top: 60px;
-    left: 10px;
-  .map-alarm-div-header{
-    line-height: 40px;
-    width: 504px;
-    padding-left: 10px;
-  .icon-right{
-    position: absolute;
-    right: 15px;
-  }
-  .icon-right:hover{
-    color: #409EFF;
+<style lang="scss" scoped>
+.alarm-hidden-div{
+  position: absolute;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  box-sizing: border-box;
+  padding: 10px;
+  border-radius: 0px 10px 10px 0px;
+  background-color: rgba(255, 234, 241,1);
+  border: 1px solid #d2d0d0;
+  border-left: 0px;
+  font-size: 16px;
+  font-weight: 500;
+  writing-mode:vertical-rl;
+  color: #7f7e7e;
+  &:hover{
     cursor: pointer;
+    color: #535252;
   }
+}
+.map-alarm-div{
+  position: absolute;
+  z-index: 100;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  align-items: flex-start;
+  .map-alarm-div-header{
+    .header-box{
+      border-radius: 0px 10px 10px 0px;
+      background-color: rgba(255, 234, 241,1);
+      border: 1px solid #d4cfcf;
+      border-left: 0px;
+      font-size: 16px;
+      font-weight: 400;
+      writing-mode:vertical-rl;
+      box-sizing: border-box;
+      padding: 10px;
+      color: #535252;
+      .icon-right{
+        width: 16px;
+        height: 26px;
+      }
+      &:hover{
+        cursor: pointer;
+        color: #7f7e7e;
+      }
+    }
   }
-  .el-scrollbar {
-    /*height: 200px;*/
-    width: 100%;
+  .overview-alarm-scroll {
+    width: 504px;
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 0px !important;
+      margin-bottom: 0px !important;
+    }
   }
   .moredatascollor{
     height: 200px;
   }
+  .alarm-list-table{
+    td{
+      padding: 5px 0px;
+    }
+  }
+}
+
+</style>
+<style lang="scss">
+.overview-alarm-scroll {
+  width: 100%;
   .el-scrollbar__wrap {
     overflow-y: auto;
     overflow-x: hidden;
+    padding: 0px !important;
     margin-bottom: 0px !important;
   }
+}
+.alarm-table-row{
+  background-color: rgba(255, 234, 241, 0.8) !important;
+  td:hover{
+    background-color: rgba(255, 234, 241, 1) !important;
+  }
+  &:hover{
+    cursor: pointer;
+    td{
+      background-color: rgba(255, 234, 241, 1) !important;
+    }
+  }
+}
+.alarm-table-th{
+  th{
+    padding: 7px 0px !important;
+    background-color: rgba(255, 234, 241, 0.9) !important;
+  }
 
-  .el-table th{
-    /*background-color: rgba(255, 229, 230, 0.8);*/
-    padding: 7px 0px;
-  }
-  .el-table td{
-    /*background-color: rgba(255, 234, 241, 0.8);*/
-    padding: 5px 0px;
-    /*line-height: 1;*/
-  }
-  .el-table td:hover{
-    /*background-color: rgba(255, 234, 241, 0.8);*/
-  }
-  .transition-box {
-    margin-bottom: 10px;
-    width: 200px;
-    height: 100px;
-    border-radius: 4px;
-    background-color: #409EFF;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    box-sizing: border-box;
-    margin-right: 20px;
-  }
-  }
+}
 </style>
diff --git a/src/views/overview/components/toolBox.vue b/src/views/overview/components/toolBox.vue
new file mode 100644
index 0000000..5790190
--- /dev/null
+++ b/src/views/overview/components/toolBox.vue
@@ -0,0 +1,20 @@
+<!--
+ * @Description: 工具栏
+ * @Author: 王晓颖
+ * @Date: 2022-05-16 18:41:50
+ -->
+<template />
+
+<script>
+export default {
+  name: 'ToolBox',
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/views/overview/overviewAmap.vue b/src/views/overview/overviewAmap.vue
index c6ab767..ff344d7 100644
--- a/src/views/overview/overviewAmap.vue
+++ b/src/views/overview/overviewAmap.vue
@@ -3,7 +3,12 @@
   <div>
     <div class="overview-map-container">
       <!--地图-->
-      <a-map-container ref="map" :center="center" :zoom="zoom" :style="{height:(bodyHeight-20)+'px'}" vid="overview" class="map-demo" @ready="mapReady" />
+      <a-map-container ref="map" :center="center" :zoom="zoom" :style="{height:(bodyHeight-20)+'px'}" vid="overview" class="map-demo" @ready="mapReady">
+        <a-map-marker v-for="alarmWell of alarmWells" :position="alarmWell.coordinates" :offset="alarmOffset">
+          <el-image :src="alarmIcon" :style="{'width':alarmIconSize[0]+'px','height':alarmIconSize[1]+'px'}" fit="fill" @click="openAlarmWindow(alarmWell.wellId, alarmWell.coordinates)" />
+        </a-map-marker>
+      </a-map-container>
+      <alarm-list :data="alarmList" @row-click="alarmRowClick" />
     </div>
   </div>
 </template>
@@ -12,15 +17,17 @@
 import { mapGetters } from 'vuex'
 import { getWellType } from '@/api/well/well'
 import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview/wellOverview'
+import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
 import DeptSelect from '../../components/DeptSelect/index'
 import AMapContainer from '@/components/Amap/AMapContainer'
 import AlarmInfoWindow from './components/alarmInfoWindow'
-import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
-// import Vue from 'vue/dist/vue.esm.js'
+import AMapMarker from '@/components/Amap/AMapMarker'
+import AlarmList from './components/alarmList'
 import Vue from 'vue'
+
 export default {
   name: 'Overview',
-  components: { AMapContainer, DeptSelect },
+  components: { AlarmList, AMapMarker, AMapContainer, DeptSelect },
   data() {
     return {
       map: null, // 地图对象
@@ -29,10 +36,10 @@
       type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
       refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
       alarmIcon: require('../../assets/icons/icon-alarm1.png'), // 报警图标
-      alarmIconSize: [], // 报警图标大小
+      alarmIconSize: [30, 30], // 报警图标大小
       alarmOffset: [-15, -30], // 报警图标偏移量
       wellIcon: require('../../assets/icons/icon-position.png'), // 井图标
-      wellIconSize: [], // 井图标大小
+      wellIconSize: [30, 30], // 井图标大小
       wellOffset: [-10, -10], // 井偏移量
       showAlarm: true, // 是否显示报警
       showAll: this.baseConfig.showAllWell, // 是否显示全部井
@@ -56,7 +63,6 @@
       alarmWells: [], // 报警井列表
       latestAlarmTime: '', // 列表中最新报警事件
       alarmFirstAmount: true, // 是否初次加载报警
-
       firstAmount: true, // 是否第一次加载井数据
       loading: true, // 加载图标是否显示
       markers: [], // 所有井的点原始数据
@@ -124,7 +130,7 @@
       this.refreshAlarm()
       if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
         setTimeout(() => {
-          this.countDown()
+          // this.countDown()
         }, 1000)
       }
     },
@@ -143,12 +149,10 @@
       getWellType().then(response => {
         this.wellTypeList = []
         // 如果该用户支持的井类型只有一个，则不显示该筛选框
-        const wellTypes = this.$store.getters.wellTypes
-        for (const wellType of response.data) {
-          if (wellTypes.indexOf(wellType.value) !== -1) {
-            this.wellTypeList.push(wellType)
-          }
-        }
+        const supportWellTypes = this.$store.getters.wellTypes
+        this.wellTypeList = response.data.filter(wellType => {
+          return supportWellTypes.findIndex(item => item == wellType.value) > -1
+        })
         if (this.wellTypeList.length <= 1) {
           this.showWellType = false
         }
@@ -437,23 +441,24 @@
           this.alarmFirstAmount = false // 初次加载完毕
           // 获取当前报警列表
           this.alarmListOri = response.data // 列表原始
-          this.alarmList = response.data
-          if (this.alarmList.length > 0) {
-            this.hasAlarm = true
-          }
-          this.alarmWells = []
+          this.alarmList = response.data // 要显示的报警列表
+          this.alarmWells = [] // 报警的井列表
           for (const alarm of response.data) {
-            this.alarmWells.push({
-              wellCode: alarm.wellCode,
-              wellId: alarm.wellId,
-              wellType: alarm.wellType,
-              lngGaode: alarm.lngGaode,
-              latGaode: alarm.latGaode,
-              position: alarm.position,
-              visible: true
-            })
+            if (this.alarmWells.findIndex(item => item.wellCode === alarm.wellCode) == -1) {
+              this.alarmWells.push({
+                wellCode: alarm.wellCode,
+                wellId: alarm.wellId,
+                wellType: alarm.wellType,
+                lngGaode: alarm.lngGaode,
+                latGaode: alarm.latGaode,
+                coordinates: [alarm.lngGaode, alarm.latGaode],
+                position: alarm.position,
+                visible: true
+              })
+            }
           }
-          this.drawMarkers(this.alarmWells, 'alarm')
+          console.log('alarmWells Length', this.alarmWells.length)
+          // this.drawMarkers(this.alarmWells, 'alarm')
         }
       })
     },
@@ -474,29 +479,38 @@
         }
       }
     },
-    // 点击报警详情
-    openAlarmWindow(wellId, position) {
+    /**
+     * 打开报警弹窗
+     * @param wellId 井id
+     * @param coordinates 弹窗位置： [经度，纬度]
+     */
+    openAlarmWindow(wellId, coordinates, needCenter = false) {
+      console.log('openAlarmWindow:' + wellId)
+      if (this.needCenter) { // 如果需要居中
+        this.center = coordinates
+      }
       // 获取报警详情
       getWellAlarms(wellId).then(response => {
         if (response.code === 200) {
           const wellInfo = response.data
           const alarmInfo = {
-            wellCode: wellInfo.wellCode,
-            position: wellInfo.position,
-            deptName: wellInfo.deptName,
-            wellTypeName: wellInfo.wellTypeName,
-            alarms: wellInfo.alarmList,
-            deep: wellInfo.deep
+            wellCode: response.data.wellCode,
+            position: response.data.position,
+            deptName: response.data.deptName,
+            wellTypeName: response.data.wellTypeName,
+            alarms: response.data.alarmList,
+            deep: response.data.deep
           }
-          this.center = position
           const AlarmWindow = Vue.extend({
             render: h => h(AlarmInfoWindow, { props: { alarmInfo: alarmInfo }})
           })
           const alarmWindow = new AlarmWindow().$mount()
           const infoWindow = new window.AMap.InfoWindow({
-            content: alarmWindow.$el
+            content: alarmWindow.$el, // 显示内容
+            offset: [0, this.alarmOffset[1]], // 偏移
+            autoMove: true // 是否自动调整窗体到视野内
           })
-          infoWindow.open(this.map, new window.AMap.LngLat(position[0], position[1]))
+          infoWindow.open(this.map, new toLngLat(coordinates))
         }
       })
     },
@@ -506,11 +520,11 @@
       const wellId = row.wellId
       for (const alarmWell of this.alarmWells) {
         if (alarmWell.wellId === wellId) {
-          this.center = alarmWell.position
+          // this.center = alarmWell.coordinates
           if (this.zoom < 16) {
             this.zoom = 16
           }
-          this.openAlarmWindow(alarmWell.wellId, alarmWell.position)
+          this.openAlarmWindow(alarmWell.wellId, alarmWell.coordinates, true)
         }
       }
     },
@@ -597,7 +611,6 @@
 // 地图
 .overview-map-container{
   width: 100%;
-  padding: 5px;
   .map-demo{
     width: 100%;
     .svg-icon{
diff --git a/vue.config.js b/vue.config.js
index 93d4386..809b451 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -30,6 +30,7 @@
   lintOnSave: process.env.NODE_ENV === 'development', // set to 'default' or 'error' may cause the compilation to failed
   productionSourceMap: false, // speed up production builds
   devServer: { // development server config
+    host: 'localhost',
     port: port,
     open: true,
     overlay: {