diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 4a720ee..2d45018 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -45,6 +45,7 @@
   }, // 接收绑定参数
   data() {
     return {
+      originList: [], // 原始数据
       deptTreeList: [],
       multiData: false,
       defaultProps: {
@@ -80,6 +81,7 @@
       }
       getDeptTreeList(listQuery).then(response => {
         const list = response.data.list
+        this.originList = [...response.data.list]
         if (!this.deptShow && list.length <= 1) {
           this.showDeptSelect = false
         } else {
@@ -100,6 +102,10 @@
           }
         }
       })
+    },
+    // 获取列表
+    fetchDeptTree() {
+      return this.originList
     }
   }
 }

diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 4a720ee..2d45018 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -45,6 +45,7 @@
   }, // 接收绑定参数
   data() {
     return {
+      originList: [], // 原始数据
       deptTreeList: [],
       multiData: false,
       defaultProps: {
@@ -80,6 +81,7 @@
       }
       getDeptTreeList(listQuery).then(response => {
         const list = response.data.list
+        this.originList = [...response.data.list]
         if (!this.deptShow && list.length <= 1) {
           this.showDeptSelect = false
         } else {
@@ -100,6 +102,10 @@
           }
         }
       })
+    },
+    // 获取列表
+    fetchDeptTree() {
+      return this.originList
     }
   }
 }
diff --git a/src/store/getters.js b/src/store/getters.js
index 8846aab..c5581c6 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -24,6 +24,9 @@
   communications: state => state.user.communications, // 用户支持的通讯方式
   area: state => state.user.area, // 用户所在区域
   lng: state => state.user.lng, // 纬度
-  lat: state => state.user.lat // 经度
+  lat: state => state.user.lat, // 经度
+  websocket: state => state.websocket.websocket, // websocket对象
+  wsStatus: state => state.websocket.wsStatus, // websocket连接状态
+  needRefresh: state => state.websocket.needRefresh // 是否需要刷新
 }
 export default getters

diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 4a720ee..2d45018 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -45,6 +45,7 @@
   }, // 接收绑定参数
   data() {
     return {
+      originList: [], // 原始数据
       deptTreeList: [],
       multiData: false,
       defaultProps: {
@@ -80,6 +81,7 @@
       }
       getDeptTreeList(listQuery).then(response => {
         const list = response.data.list
+        this.originList = [...response.data.list]
         if (!this.deptShow && list.length <= 1) {
           this.showDeptSelect = false
         } else {
@@ -100,6 +102,10 @@
           }
         }
       })
+    },
+    // 获取列表
+    fetchDeptTree() {
+      return this.originList
     }
   }
 }
diff --git a/src/store/getters.js b/src/store/getters.js
index 8846aab..c5581c6 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -24,6 +24,9 @@
   communications: state => state.user.communications, // 用户支持的通讯方式
   area: state => state.user.area, // 用户所在区域
   lng: state => state.user.lng, // 纬度
-  lat: state => state.user.lat // 经度
+  lat: state => state.user.lat, // 经度
+  websocket: state => state.websocket.websocket, // websocket对象
+  wsStatus: state => state.websocket.wsStatus, // websocket连接状态
+  needRefresh: state => state.websocket.needRefresh // 是否需要刷新
 }
 export default getters
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..f55c01c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import websocket from './modules/websocket'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    websocket
   },
   getters
 })

diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 4a720ee..2d45018 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -45,6 +45,7 @@
   }, // 接收绑定参数
   data() {
     return {
+      originList: [], // 原始数据
       deptTreeList: [],
       multiData: false,
       defaultProps: {
@@ -80,6 +81,7 @@
       }
       getDeptTreeList(listQuery).then(response => {
         const list = response.data.list
+        this.originList = [...response.data.list]
         if (!this.deptShow && list.length <= 1) {
           this.showDeptSelect = false
         } else {
@@ -100,6 +102,10 @@
           }
         }
       })
+    },
+    // 获取列表
+    fetchDeptTree() {
+      return this.originList
     }
   }
 }
diff --git a/src/store/getters.js b/src/store/getters.js
index 8846aab..c5581c6 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -24,6 +24,9 @@
   communications: state => state.user.communications, // 用户支持的通讯方式
   area: state => state.user.area, // 用户所在区域
   lng: state => state.user.lng, // 纬度
-  lat: state => state.user.lat // 经度
+  lat: state => state.user.lat, // 经度
+  websocket: state => state.websocket.websocket, // websocket对象
+  wsStatus: state => state.websocket.wsStatus, // websocket连接状态
+  needRefresh: state => state.websocket.needRefresh // 是否需要刷新
 }
 export default getters
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..f55c01c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import websocket from './modules/websocket'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    websocket
   },
   getters
 })
diff --git a/src/store/modules/websocket.js b/src/store/modules/websocket.js
new file mode 100644
index 0000000..63c87c9
--- /dev/null
+++ b/src/store/modules/websocket.js
@@ -0,0 +1,88 @@
+import { Notification } from 'element-ui'
+import router from '../../router'
+import user from './user'
+const websocket = {
+  state: {
+    wsUrl: 'ws://111.198.10.15:11307/websocket/',
+    websocket: null,
+    wsStatus: false, // websocket连接状态
+    needRefresh: false // 是否需要刷新数据
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+
+  actions: {
+    // 连接websocket
+    initWebSocket({ commit }) {
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
+        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
+        const socketUrl = websocket.state.wsUrl + user.state.id
+        console.log(socketUrl)
+        const socket = new WebSocket(socketUrl)
+        commit('SET_WEBSOCKET', socket)
+        commit('SET_WS_STATUS', true)
+        // 监听socket打开
+        socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        socket.onmessage = function(msg) {
+          // 转换为json对象
+          const data = JSON.parse(msg.data)
+          console.log(data)
+          if (data.type === 'alarm') {
+            commit('SET_NEED_REFRESH', true)
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: data.message,
+              type: 'warning',
+              onClick: () => {
+                router.push({
+                  path: '/overview',
+                  query: { refresh: true }
+                })
+              }
+            })
+            setTimeout(function() {
+              commit('SET_NEED_REFRESH', false)
+            }, 2000)
+          }
+        }
+        // 监听socket错误
+        socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        socket.onclose = function() {
+          console.log('WebSocket已关闭')
+          commit('SET_WS_STATUS', false)
+        }
+      }
+    }
+  }
+}
+
+export default websocket

diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 4a720ee..2d45018 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -45,6 +45,7 @@
   }, // 接收绑定参数
   data() {
     return {
+      originList: [], // 原始数据
       deptTreeList: [],
       multiData: false,
       defaultProps: {
@@ -80,6 +81,7 @@
       }
       getDeptTreeList(listQuery).then(response => {
         const list = response.data.list
+        this.originList = [...response.data.list]
         if (!this.deptShow && list.length <= 1) {
           this.showDeptSelect = false
         } else {
@@ -100,6 +102,10 @@
           }
         }
       })
+    },
+    // 获取列表
+    fetchDeptTree() {
+      return this.originList
     }
   }
 }
diff --git a/src/store/getters.js b/src/store/getters.js
index 8846aab..c5581c6 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -24,6 +24,9 @@
   communications: state => state.user.communications, // 用户支持的通讯方式
   area: state => state.user.area, // 用户所在区域
   lng: state => state.user.lng, // 纬度
-  lat: state => state.user.lat // 经度
+  lat: state => state.user.lat, // 经度
+  websocket: state => state.websocket.websocket, // websocket对象
+  wsStatus: state => state.websocket.wsStatus, // websocket连接状态
+  needRefresh: state => state.websocket.needRefresh // 是否需要刷新
 }
 export default getters
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..f55c01c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import websocket from './modules/websocket'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    websocket
   },
   getters
 })
diff --git a/src/store/modules/websocket.js b/src/store/modules/websocket.js
new file mode 100644
index 0000000..63c87c9
--- /dev/null
+++ b/src/store/modules/websocket.js
@@ -0,0 +1,88 @@
+import { Notification } from 'element-ui'
+import router from '../../router'
+import user from './user'
+const websocket = {
+  state: {
+    wsUrl: 'ws://111.198.10.15:11307/websocket/',
+    websocket: null,
+    wsStatus: false, // websocket连接状态
+    needRefresh: false // 是否需要刷新数据
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+
+  actions: {
+    // 连接websocket
+    initWebSocket({ commit }) {
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
+        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
+        const socketUrl = websocket.state.wsUrl + user.state.id
+        console.log(socketUrl)
+        const socket = new WebSocket(socketUrl)
+        commit('SET_WEBSOCKET', socket)
+        commit('SET_WS_STATUS', true)
+        // 监听socket打开
+        socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        socket.onmessage = function(msg) {
+          // 转换为json对象
+          const data = JSON.parse(msg.data)
+          console.log(data)
+          if (data.type === 'alarm') {
+            commit('SET_NEED_REFRESH', true)
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: data.message,
+              type: 'warning',
+              onClick: () => {
+                router.push({
+                  path: '/overview',
+                  query: { refresh: true }
+                })
+              }
+            })
+            setTimeout(function() {
+              commit('SET_NEED_REFRESH', false)
+            }, 2000)
+          }
+        }
+        // 监听socket错误
+        socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        socket.onclose = function() {
+          console.log('WebSocket已关闭')
+          commit('SET_WS_STATUS', false)
+        }
+      }
+    }
+  }
+}
+
+export default websocket
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d875d75..3e52c4d 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -73,6 +73,14 @@
       'communications',
       'area'
     ])
+  },
+  mounted() {
+    this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
   }
 }
 </script>

diff --git a/src/components/DeptSelect/index.vue b/src/components/DeptSelect/index.vue
index 4a720ee..2d45018 100644
--- a/src/components/DeptSelect/index.vue
+++ b/src/components/DeptSelect/index.vue
@@ -45,6 +45,7 @@
   }, // 接收绑定参数
   data() {
     return {
+      originList: [], // 原始数据
       deptTreeList: [],
       multiData: false,
       defaultProps: {
@@ -80,6 +81,7 @@
       }
       getDeptTreeList(listQuery).then(response => {
         const list = response.data.list
+        this.originList = [...response.data.list]
         if (!this.deptShow && list.length <= 1) {
           this.showDeptSelect = false
         } else {
@@ -100,6 +102,10 @@
           }
         }
       })
+    },
+    // 获取列表
+    fetchDeptTree() {
+      return this.originList
     }
   }
 }
diff --git a/src/store/getters.js b/src/store/getters.js
index 8846aab..c5581c6 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -24,6 +24,9 @@
   communications: state => state.user.communications, // 用户支持的通讯方式
   area: state => state.user.area, // 用户所在区域
   lng: state => state.user.lng, // 纬度
-  lat: state => state.user.lat // 经度
+  lat: state => state.user.lat, // 经度
+  websocket: state => state.websocket.websocket, // websocket对象
+  wsStatus: state => state.websocket.wsStatus, // websocket连接状态
+  needRefresh: state => state.websocket.needRefresh // 是否需要刷新
 }
 export default getters
diff --git a/src/store/index.js b/src/store/index.js
index c7e23ff..f55c01c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@
 import user from './modules/user'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import websocket from './modules/websocket'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -13,7 +14,8 @@
     app,
     user,
     permission,
-    tagsView
+    tagsView,
+    websocket
   },
   getters
 })
diff --git a/src/store/modules/websocket.js b/src/store/modules/websocket.js
new file mode 100644
index 0000000..63c87c9
--- /dev/null
+++ b/src/store/modules/websocket.js
@@ -0,0 +1,88 @@
+import { Notification } from 'element-ui'
+import router from '../../router'
+import user from './user'
+const websocket = {
+  state: {
+    wsUrl: 'ws://111.198.10.15:11307/websocket/',
+    websocket: null,
+    wsStatus: false, // websocket连接状态
+    needRefresh: false // 是否需要刷新数据
+  },
+  mutations: {
+    SET_WEBSOCKET: (state, websocket) => {
+      state.websocket = websocket
+    },
+    SET_WS_STATUS: (state, wsStatus) => {
+      state.wsStatus = wsStatus
+    },
+    SET_NEED_REFRESH: (state, needRefresh) => {
+      state.needRefresh = needRefresh
+    }
+  },
+
+  actions: {
+    // 连接websocket
+    initWebSocket({ commit }) {
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
+        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
+        const socketUrl = websocket.state.wsUrl + user.state.id
+        console.log(socketUrl)
+        const socket = new WebSocket(socketUrl)
+        commit('SET_WEBSOCKET', socket)
+        commit('SET_WS_STATUS', true)
+        // 监听socket打开
+        socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        socket.onmessage = function(msg) {
+          // 转换为json对象
+          const data = JSON.parse(msg.data)
+          console.log(data)
+          if (data.type === 'alarm') {
+            commit('SET_NEED_REFRESH', true)
+            Notification({
+              title: '新报警来了',
+              // 这里也可以把返回信息加入到message中显示
+              message: data.message,
+              type: 'warning',
+              onClick: () => {
+                router.push({
+                  path: '/overview',
+                  query: { refresh: true }
+                })
+              }
+            })
+            setTimeout(function() {
+              commit('SET_NEED_REFRESH', false)
+            }, 2000)
+          }
+        }
+        // 监听socket错误
+        socket.onerror = function() {
+          Notification({
+            title: '服务器错误',
+            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+            type: 'error',
+            duration: 0
+          })
+        }
+        // 监听socket关闭
+        socket.onclose = function() {
+          console.log('WebSocket已关闭')
+          commit('SET_WS_STATUS', false)
+        }
+      }
+    }
+  }
+}
+
+export default websocket
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d875d75..3e52c4d 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -73,6 +73,14 @@
       'communications',
       'area'
     ])
+  },
+  mounted() {
+    this.webSocket()
+  },
+  methods: {
+    webSocket() {
+      this.$store.dispatch('initWebSocket')
+    }
   }
 }
 </script>
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 7bb3a37..df08f76 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -1,3 +1,4 @@
+<!--suppress ALL -->
 <template>
   <div>
     <!--筛选条件-->
@@ -17,7 +18,7 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <dept-select v-model="listQuery.deptid" :need-top="deptShowTop" dept-type="03" placeholder="选择权属单位"/>
+            <dept-select ref="deptSelect" v-model="listQuery.deptid" :need-top="deptShowTop" dept-type="03" placeholder="选择权属单位"/>
           </el-form-item>
           <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
           <el-button v-show="showClearBtn" class="filter-item" @click="clearSearch">清除查询</el-button>
@@ -66,22 +67,7 @@
     </div>
     <div v-loading="loading" class="overview-map-container">
       <!--地图-->
-      <el-amap ref="map" :center="center" :amap-manager="aMapManager" :zoom="zoom" vid="overview" class="map-demo">
-        <!--井marker-->
-        <!--<div v-if="type=='cluster'">-->
-        <!--<el-amap-marker-->
-        <!--v-for="(marker,index) in markers"-->
-        <!--:key="'well'+marker.wellId"-->
-        <!--:position="marker.position"-->
-        <!--:offset="offset"-->
-        <!--:vid="index"-->
-        <!--:visible="marker.visible"-->
-        <!--:events="marker.events">-->
-        <!--<div>-->
-        <!--<svg-icon :icon-class="marker.icon" @click="openInfoWindow(marker.wellId)" />-->
-        <!--</div>-->
-        <!--</el-amap-marker>-->
-        <!--</div>-->
+      <el-amap ref="map" :center="center" :amap-manager="aMapManager" :zoom="zoom" :events="events" vid="overview" class="map-demo">
         <!--报警marker-->
         <el-amap-marker
           v-for="(alarm,index) in alarmWells"
@@ -133,26 +119,26 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import SelectTree from '@/components/SelectTree/singleSelect'
 import { getWellType } from '@/api/well'
 import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview'
 import DeptSelect from '../../components/DeptSelect/index'
-// import { AMapManager } from 'vue-amap'
-import VueAMap from 'vue-amap'
-const aMapManager = new VueAMap.AMapManager()
+import { AMapManager } from 'vue-amap'
+const aMapManager = new AMapManager()
 export default {
   name: 'Overview',
   components: { DeptSelect, SelectTree },
   data() {
     return {
       aMapManager,
-      type: 'cluster', // 加载数据方式：massMarkers或cluster
-      refreshType: 'clock', // 刷新数据方式：clock或websocket
-      showAlarm: false, // 是否显示报警
-      showAll: true, // 是否显示全部井
+      type: 'massMarkers', // 加载数据方式：massMarkers或cluster
+      refreshType: 'websocket', // 刷新数据方式：clock或websocket
+      showAlarm: true, // 是否显示报警
+      showAll: false, // 是否显示全部井
       listQuery: {
         keywords: '', // 关键字
-        wellType: '1', // 井类型
+        wellType: '', // 井类型
         deptid: '', // 组织机构
         isAlarm: '1' // 是否报警
       }, // 筛选条件
@@ -192,8 +178,8 @@
       commonIconAlarm: 'well-common-red', // 通用图标 红
       center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
       zoom: 12, // 地图缩放比例
-      markers: [], // 井列表标注marker
-      markerRefs: [], // markers对象列表
+      markers: [], // 所有井的点原始数据
+      alarmListOri: [], // 原始报警列表
       alarmList: [], // 报警列表
       alarmWells: [], // 报警井列表
       offset: [-10, -10], // 偏移量
@@ -227,44 +213,71 @@
       massMarks: null, // 海量点
       mapMarkers: [],
       clusters: [],
+      events: {
+        complete: () => {
+          this.init()
+        }
+        // 'zoomchange': (val) => {
+        //   console.log(val)
+        //   this.onZoomChange()
+        // }
+      },
       showClearBtn: false // 是否显示清除查询按钮
     }
   },
+  computed: {
+    ...mapGetters([
+      'needRefresh'
+    ])
+  },
   watch: {
     showAll(val) {
       if (val) { // 显示全部
-        // this.listQuery.isAlarm = '0'
         // 先清空查询条件
         this.listQuery.deptid = ''
         this.listQuery.keywords = ''
         this.listQuery.wellType = ''
-        // 如果是第一次勾选这个选项，从后台加载全部数据，否则只需要过滤对象，更新显示
-        if (this.firstAmount === true) {
-          this.getWellList()
+        if (this.firstAmount) { // 初次加载直接调用mount
+          if (this.type === 'massMarkers') {
+            this.mountMassMarker() // 加载海量点
+          } else if (this.type === 'cluster') {
+            this.mountClusters() // 加载聚合点
+          }
         } else {
           this.filterIcon()
         }
       } else { // 仅显示报警
-        // this.listQuery.isAlarm = '1'
         this.filterIcon()
       }
+    },
+    needRefresh(val) {
+      // 需要刷新
+      if (val) {
+        this.playAudio()
+        this.refreshAlarm()
+      }
+    },
+    showAlarm(val){
+      if(!val && this.currentWindow.windowType=='alarm'){
+        this.currentWindow.visible = false
+      }
     }
   },
-  mounted() {
-    var that = this
-    that.fetchWellType()
-    if (this.showAll) {
-      this.getWellList()
-    }
-    if (this.refreshType === 'clock') {
-      setTimeout(function() {
-        // that.getWellList()
-        that.refreshAlarm()
-        that.countDown()
-      }, 1000)
-    }
+  created() {
+    this.fetchWellType()
   },
   methods: {
+    // 初始化放这里
+    init() {
+      var that = this
+      this.getWellList()
+      this.refreshAlarm()
+      if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
+        setTimeout(function() {
+          that.countDown()
+        }, 1000)
+      }
+    },
     // 倒计时函数
     countDown() {
       this.clock = window.setInterval(() => {
@@ -313,43 +326,35 @@
     },
     // 过滤Marker
     filterIcon(showMessage = false) {
-      this.currentWindow.visible = false // 弹窗隐藏
+      // 1.如果有弹窗，将弹窗隐藏
+      this.currentWindow.visible = false
       const hideWellIds = []// 要隐藏的井编号
+      let center = [] // 待移动到的地图中心
+      // 2. 整理查询条件
       const keywords = this.listQuery.keywords
-      const deptid = this.listQuery.deptid
       const wellType = this.listQuery.wellType
-      // const isAlarm = this.listQuery.isAlarm
-      console.log('markers length:', this.markers.length)
-      let center = []
-      // 查询全部井，是否匹配
+      const deptid = this.listQuery.deptid
+      let deptids = []
+      if (deptid) {
+        deptids = this.fetchDeptList(deptid) // 获取所有下级
+      }
+      debugger
+      // 3.查询全部井，是否匹配，只要有一项不匹配则show为false
       for (const marker of this.markers) {
         let show = true
-        // 关键字不为空，且没有匹配成功，不显示
+        // 关键字不为空，且没有匹配成功，不显示， 关键字匹配井编号和位置
         if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.positionInfo.indexOf(keywords) !== -1)) {
           show = false
         }
-        // 部门不为空， 且没有匹配成功
-        if (deptid && deptid !== '' && marker.deptid !== deptid) {
+        // 部门不为空， 且没有匹配成功，多部门匹配
+        if (deptid && deptid !== '' && deptids.indexOf(marker.deptid) === -1) {
           show = false
         }
         // 井类型不为空，且没有匹配成功
         if (wellType && wellType !== '' && marker.wellType !== wellType) {
           show = false
         }
-        // 如果只显示报警,井的状态不是报警
-        // if (isAlarm === '1') {
-        //   const index = this.alarmWells.filter(item => {
-        //     if (item.wellCode === marker.wellCode) {
-        //       console.log('匹配')
-        //     }
-        //     return item.wellCode === marker.wellCode
-        //   })
-        //   if (index.length === 0) { // 如果不在alarmWells中，即index=-1,表示没有匹配成功，show=false
-        //     show = false
-        //   } else {
-        //     console.log('no hide:', marker.wellCode)
-        //   }
-        // }
+        // 如果show为false，放入需要隐藏的井id列表
         if (show === false) {
           hideWellIds.push(marker.wellId)
         } else {
@@ -357,7 +362,7 @@
         }
         marker.visible = show
       }
-      // 如果没有找到符合要求的井，将全部查询结果隐藏
+      // 4.过滤报警marker：alarmWells  如果没有找到符合要求的井，直接将全部查询结果隐藏，并将所有报警隐藏，否则按照查询结果筛选需要隐藏的报警
       if (hideWellIds.length === this.markers.length) {
         if (showMessage) {
           this.$message.warning('查无结果')
@@ -375,6 +380,18 @@
           }
         }
       }
+      // 5.过滤显示列表：alarmList
+      this.alarmList = []
+      if (hideWellIds.length > 0) { // 如果有要隐藏的井，过滤
+        for (const alarm of this.alarmListOri) {
+          const findFlag = hideWellIds.findIndex(code => code === alarm.wellId)
+          if (findFlag === -1) {
+            this.alarmList.push(alarm)
+          }
+        }
+      }else{ //如果没有直接等于alarmListOri
+        this.alarmList = this.alarmListOri
+      }
       if (center.length > 0) {
         this.center = center
       }
@@ -386,6 +403,7 @@
     },
     // 加载海量点
     mountMassMarker() {
+      this.firstAmount = false
       const map = aMapManager.getMap()
       // 创建样式对象
       const style = {
@@ -410,17 +428,21 @@
     // 过滤海量点
     resetMassMarker() {
       const map = aMapManager.getMap()
-      let markers = this.markers.filter(item => {
-        return item.visible === true
-      })
-      if (markers === null) {
-        markers = []
+      if (this.showAll === false) { // 如果showAll为false 则不显示海量点
         this.massMarks.clear()
       } else {
-        this.massMarks.setData(markers)
+        let markers = this.markers.filter(item => {
+          return item.visible === true
+        })
+        if (markers === null) {
+          markers = []
+          this.massMarks.clear()
+        } else {
+          this.massMarks.setData(markers)
+        }
+        // 将海量点添加至地图实例
+        this.massMarks.setMap(map)
       }
-      // 将海量点添加至地图实例
-      this.massMarks.setMap(map)
     },
     // 加载聚合点
     mountClusters() {
@@ -475,24 +497,16 @@
       context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
       context.marker.setContent(div)
     },
-    // 获取井列表
+    // 获取全部井列表
     getWellList() {
-      // const self = this
       this.loading = true
-      const listQuery = {
-        keywords: '', // 关键字
-        wellType: '1', // 井类型
-        deptid: '' // 组织机构
-        // isAlarm: this.listQuery.isAlarm
-      }
-      getWellList(listQuery).then(response => {
+      getWellList().then(response => {
         this.loading = false
         if (response.code === 200) {
           const wells = response.data
-          this.firstAmount = false
           if (wells.length > 0) {
             this.markers = []
-            const centerxs = []
+            const centerxs = [] // 存储所有坐标，用于计算中点
             const centerys = []
             for (const well of wells) {
               this.markers.push({
@@ -509,81 +523,19 @@
                 icon: this.commonIcon,
                 visible: true,
                 wellStatus: 'normal'
-                // events: {
-                //   init(o) {
-                //     console.log(self)
-                //     self.markerRefs.push(o)
-                //   }
-                // }
               })
               centerxs.push(parseFloat(well.lngGaode))
               centerys.push(parseFloat(well.latGaode))
             }
+            // 坐标排序取最中间的为中心
             centerxs.sort()
             centerys.sort()
             const index = Math.floor(centerxs.length / 2)
             this.center = [centerxs[index], centerys[index]]
-            // 查询正在报警的井
-            // if (listQuery.isAlarm === '1') {
-            //   this.markers = []
-            //   // centerxs和centerys用于获取所有坐标，目的是排序找到中位数
-            //   const centerxs = []
-            //   const centerys = []
-            //   for (const well of wells) {
-            //     this.markers.push({
-            //       wellId: well.id,
-            //       id: well.id,
-            //       name: well.wellCode,
-            //       wellCode: well.wellCode,
-            //       position: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
-            //       lnglat: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
-            //       positionInfo: well.position,
-            //       wellType: well.wellType,
-            //       deptid: well.deptid,
-            //       bfzt: well.bfzt,
-            //       icon: this.commonIcon,
-            //       visible: true,
-            //       wellStatus: 'alarm'
-            //     })
-            //     centerxs.push(parseFloat(well.lngGaode))
-            //     centerys.push(parseFloat(well.latGaode))
-            //   }
-            //   centerxs.sort()
-            //   centerys.sort()
-            //   const index = Math.floor(centerxs.length / 2)
-            //   this.center = [centerxs[index], centerys[index]]
-            // } else if (listQuery.isAlarm === '0') { // 查询状态正常的井
-            //   this.firstAmount = false
-            //   const centerxs = []
-            //   const centerys = []
-            //   for (const well of wells) {
-            //     this.markers.push({
-            //       wellId: well.id,
-            //       wellCode: well.wellCode,
-            //       id: well.id,
-            //       name: well.wellCode,
-            //       lnglat: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
-            //       position: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
-            //       positionInfo: well.position,
-            //       wellType: well.wellType,
-            //       deptid: well.deptid,
-            //       bfzt: well.bfzt,
-            //       icon: this.commonIcon,
-            //       visible: true,
-            //       wellStatus: 'normal'
-            //     })
-            //     centerxs.push(parseFloat(well.lngGaode))
-            //     centerys.push(parseFloat(well.latGaode))
-            //   }
-            //   centerxs.sort()
-            //   centerys.sort()
-            //   const index = Math.floor(centerxs.length / 2)
-            //   this.center = [centerxs[index], centerys[index]]
-            // }
-            if (this.type === 'massMarkers') {
-              this.mountMassMarker()
-            } else if (this.type === 'cluster') {
-              this.mountClusters()
+            if (this.type === 'massMarkers' && this.showAll) {
+              this.mountMassMarker() // 加载海量点
+            } else if (this.type === 'cluster' && this.showAll) {
+              this.mountClusters() // 加载聚合点
             }
           }
         }
@@ -620,6 +572,7 @@
         if (response.code === 200) {
           this.loading = false
           // 获取当前报警列表
+          this.alarmListOri = response.data // 列表原始
           this.alarmList = response.data
           if (this.alarmList.length > 0) {
             this.hasAlarm = true
@@ -649,7 +602,7 @@
     openAlarmWindow(wellId, position) {
       // 旧弹窗不显示
       this.currentWindow.visible = false
-      this.filterIcon()
+      // this.filterIcon()
       getWellAlarms(wellId).then(response => {
         if (response.code === 200) {
           const wellInfo = response.data
@@ -683,6 +636,30 @@
           this.openAlarmWindow(alarmWell.wellId, alarmWell.position)
         }
       }
+    },
+    // 获取当前deptid的所有下级id,仅最多支持3级
+    fetchDeptList(deptid) {
+      console.log('fetchDeptList')
+      const deptids = [deptid] // 储存了该pid和其子集
+      const deptlist = this.$refs.deptSelect.fetchDeptTree()
+      for (const dept of deptlist) {
+        if (dept.pid === deptid) {
+          deptids.push(dept.id)
+        }
+      }
+      const result = []
+      // 查找所有列表中有没有deptids里面的本人或子集
+      if (deptlist.length > 0) {
+        for (const dept of deptlist) {
+          if (deptids.indexOf(dept.id) !== -1) {
+            result.push(dept.id)
+          } else if (deptids.indexOf(dept.pid) !== -1) {
+            result.push(dept.id)
+          }
+        }
+      }
+      console.log(result)
+      return result
     }
   }
 }
@@ -700,6 +677,26 @@
     margin-bottom: 0px;
   }
 }
+// 刷新框
+.function-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 1100;
+  padding: 10px;
+  color: #ce8b74;
+  font-size: 14px;
+  /*background-color: rgba(244, 233, 230, 1.0);*/
+  .font-red{
+    color: red;
+    font-weight: bold;
+  }
+  .el-icon-refresh:hover{
+    color: red;
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
 // 报警列表
 .map-alarm-div{
   position: absolute;