diff --git a/src/main.js b/src/main.js
index 91f9c7d..f1c60a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,8 +43,8 @@
 Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: 'b6c27a2051691fcb386543c800356e05', // key
-  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'Geolocation'], // 插件
-  uiVersion: '1.0.11', // ui组件库版本号
+  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'MarkerClusterer'], // 插件
+  // uiVersion: '1.1', // ui组件库版本号
   v: '1.4.4' // sdk版本
 })
 Vue.config.productionTip = false

diff --git a/src/main.js b/src/main.js
index 91f9c7d..f1c60a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,8 +43,8 @@
 Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: 'b6c27a2051691fcb386543c800356e05', // key
-  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'Geolocation'], // 插件
-  uiVersion: '1.0.11', // ui组件库版本号
+  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'MarkerClusterer'], // 插件
+  // uiVersion: '1.1', // ui组件库版本号
   v: '1.4.4' // sdk版本
 })
 Vue.config.productionTip = false
diff --git a/src/utils/structure.js b/src/utils/structure.js
index b325ab0..34a6672 100644
--- a/src/utils/structure.js
+++ b/src/utils/structure.js
@@ -1,53 +1,135 @@
-import store from '../store'
+// 数据结构转换工具
+
 /**
- * 判断是否有权限
+ * 判断是否有转树的必要
+ * @param plainList 平行数据列表
+ * @param id 祖宗id
+ * @returns {boolean}  有返回true,无返回false
  */
-export function hasPermission(permission) {
-  const btns = store.getters.btns
-  return btns.some(btn => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return btn.url === permission
-  })
-}
-// 根据用户权限判断是否要显示井类型下拉框
-export function showWellType() {
-  console.log('是否显示井类型下拉')
-  const wellTypes = store.getters.wellTypes
-  if (wellTypes.length > 1) return true
-  else return false
+export function judgeTree(plainList, id = '0') {
+  if (plainList && plainList.length > 0) {
+    let flag = false // 是否需要转成树结构
+    const pid = plainList[0].pid
+    for (const item of plainList) {
+      if (item.pid !== pid) {
+        flag = true
+        break
+      }
+    }
+    return flag
+  } else { return false }
 }
 
-// 根据用户权限判断是否要显示设备类型下拉框
-export function showDeviceType() {
-  const deviceTypes = store.getters.deviceTypes
-  if (deviceTypes.length > 1) return true
-  else return false
+/**
+ * 平面数据数据转树结构
+ * @param plainList 平行数据列表
+ * @param id 祖宗id
+ * @param isSelect 是否是下拉需要顶级的树
+ * @returns {*}
+ */
+export function toTreeList(plainList, id = '0', isSelect = false) {
+  const pid = findPid(plainList)
+  if (pid.length > 1) {
+    return plainList
+  } else {
+    const tree = cleanChildren(buildTree(plainList, pid[0], isSelect))
+    return tree
+  }
 }
-// 根据用户权限判断是否要显示IP配置项，集中器不显示ip
-export function showIpConfig() {
-  const communications = store.getters.communications
-  return communications.some(communication => { // 遍历通讯方式，只要没有1(集中器)就是返回true
-    return communication !== '1'
-  })
+// 构建树
+function buildTree(plainList, id = '0', isSelect) {
+  // 递归函数
+  const fa = (parentId) => {
+    const temp = []
+    for (let i = 0; i < plainList.length; i++) {
+      const n = plainList[i]
+      const id = '' + n.id
+      const pid = '' + n.pid
+      if (pid === parentId) {
+        n.children = fa(id)
+        temp.push(n)
+      }
+    }
+    return temp
+  }
+  // 如果是下拉框需要使用的树，首先寻找顶级，将顶级也放入列表
+  if (isSelect) {
+    let flag = 1
+    const list = []
+    for (const n of plainList) {
+      const nid = '' + n.id
+      if (nid === id) {
+        n.children = fa(id)
+        flag = 0
+        list.push(n)
+        return list
+      }
+    } if (flag === 1) { // 没有找到父级，按原流程走
+      return fa(id)
+    }
+  } else {
+    return fa(id)
+  }
 }
-export function notContainConcentrator() {
-  const communications = store.getters.communications
-  return communications.some(communication => { // 遍历通讯方式，只要有1(集中器)就是返回true
-    return communication === '1'
-  })
+
+// 清除空 children项
+function cleanChildren(data) {
+  const fa = (list) => {
+    list.map((e) => {
+      if (e && e.children && e.children.length) {
+        fa(e.children)
+      } else {
+        delete e.children
+      }
+      return e
+    })
+    return list
+  }
+  return fa(data)
 }
-// 判断用户是否为运维人员或其他管理员
-export function isOperation() {
-  const roleTips = store.getters.roleTips
-  console.log(roleTips)
-  return roleTips.some(tip => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return (tip === 'operation' || tip === 'administrator')
-  })
+
+function findPid(plainList) {
+  const pidList = new Set()
+  for (const item of plainList) {
+    pidList.add(item.pid)
+  }
+  for (const item of plainList) {
+    if (pidList.has(item.id)) {
+      pidList.delete(item.id)
+    }
+  }
+  var arr = [...pidList]
+  return arr
 }
-// 判断是不是超级管理员
-export function isAdministrator() {
-  const roleTips = store.getters.roleTips
-  console.log(roleTips)
-  return roleTips.some(tip => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return (tip === 'administrator')
-  })
+
+// 平面数据数据转树结构
+export function getShowItem(plainList, id = '0') {
+  const expandList = []
+  const openedList = []
+  for (let i = 0; i < plainList.length; i++) {
+    if (plainList[i].open === 'true' || plainList[i].open === true) {
+      expandList.push(plainList[i].id)
+    }
+    if (plainList[i].checked === 'true' || plainList[i].checked === true) {
+      openedList.push(plainList[i].id)
+    }
+  }
+  return [expandList, openedList]
+}
+
+// 从树列表中删除指定元素
+export function deleteItem(list, des) {
+  const del = (list, item) => {
+    for (const i in list) {
+      if (list[i].id === des.id) {
+        list.splice(i, 1)
+        return
+      } else {
+        if (list[i].children && list[i].children.length > 0) {
+          del(list[i].children, des)
+        }
+      }
+    }
+  }
+  del(list, des)
 }

diff --git a/src/main.js b/src/main.js
index 91f9c7d..f1c60a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,8 +43,8 @@
 Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: 'b6c27a2051691fcb386543c800356e05', // key
-  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'Geolocation'], // 插件
-  uiVersion: '1.0.11', // ui组件库版本号
+  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'MarkerClusterer'], // 插件
+  // uiVersion: '1.1', // ui组件库版本号
   v: '1.4.4' // sdk版本
 })
 Vue.config.productionTip = false
diff --git a/src/utils/structure.js b/src/utils/structure.js
index b325ab0..34a6672 100644
--- a/src/utils/structure.js
+++ b/src/utils/structure.js
@@ -1,53 +1,135 @@
-import store from '../store'
+// 数据结构转换工具
+
 /**
- * 判断是否有权限
+ * 判断是否有转树的必要
+ * @param plainList 平行数据列表
+ * @param id 祖宗id
+ * @returns {boolean}  有返回true,无返回false
  */
-export function hasPermission(permission) {
-  const btns = store.getters.btns
-  return btns.some(btn => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return btn.url === permission
-  })
-}
-// 根据用户权限判断是否要显示井类型下拉框
-export function showWellType() {
-  console.log('是否显示井类型下拉')
-  const wellTypes = store.getters.wellTypes
-  if (wellTypes.length > 1) return true
-  else return false
+export function judgeTree(plainList, id = '0') {
+  if (plainList && plainList.length > 0) {
+    let flag = false // 是否需要转成树结构
+    const pid = plainList[0].pid
+    for (const item of plainList) {
+      if (item.pid !== pid) {
+        flag = true
+        break
+      }
+    }
+    return flag
+  } else { return false }
 }
 
-// 根据用户权限判断是否要显示设备类型下拉框
-export function showDeviceType() {
-  const deviceTypes = store.getters.deviceTypes
-  if (deviceTypes.length > 1) return true
-  else return false
+/**
+ * 平面数据数据转树结构
+ * @param plainList 平行数据列表
+ * @param id 祖宗id
+ * @param isSelect 是否是下拉需要顶级的树
+ * @returns {*}
+ */
+export function toTreeList(plainList, id = '0', isSelect = false) {
+  const pid = findPid(plainList)
+  if (pid.length > 1) {
+    return plainList
+  } else {
+    const tree = cleanChildren(buildTree(plainList, pid[0], isSelect))
+    return tree
+  }
 }
-// 根据用户权限判断是否要显示IP配置项，集中器不显示ip
-export function showIpConfig() {
-  const communications = store.getters.communications
-  return communications.some(communication => { // 遍历通讯方式，只要没有1(集中器)就是返回true
-    return communication !== '1'
-  })
+// 构建树
+function buildTree(plainList, id = '0', isSelect) {
+  // 递归函数
+  const fa = (parentId) => {
+    const temp = []
+    for (let i = 0; i < plainList.length; i++) {
+      const n = plainList[i]
+      const id = '' + n.id
+      const pid = '' + n.pid
+      if (pid === parentId) {
+        n.children = fa(id)
+        temp.push(n)
+      }
+    }
+    return temp
+  }
+  // 如果是下拉框需要使用的树，首先寻找顶级，将顶级也放入列表
+  if (isSelect) {
+    let flag = 1
+    const list = []
+    for (const n of plainList) {
+      const nid = '' + n.id
+      if (nid === id) {
+        n.children = fa(id)
+        flag = 0
+        list.push(n)
+        return list
+      }
+    } if (flag === 1) { // 没有找到父级，按原流程走
+      return fa(id)
+    }
+  } else {
+    return fa(id)
+  }
 }
-export function notContainConcentrator() {
-  const communications = store.getters.communications
-  return communications.some(communication => { // 遍历通讯方式，只要有1(集中器)就是返回true
-    return communication === '1'
-  })
+
+// 清除空 children项
+function cleanChildren(data) {
+  const fa = (list) => {
+    list.map((e) => {
+      if (e && e.children && e.children.length) {
+        fa(e.children)
+      } else {
+        delete e.children
+      }
+      return e
+    })
+    return list
+  }
+  return fa(data)
 }
-// 判断用户是否为运维人员或其他管理员
-export function isOperation() {
-  const roleTips = store.getters.roleTips
-  console.log(roleTips)
-  return roleTips.some(tip => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return (tip === 'operation' || tip === 'administrator')
-  })
+
+function findPid(plainList) {
+  const pidList = new Set()
+  for (const item of plainList) {
+    pidList.add(item.pid)
+  }
+  for (const item of plainList) {
+    if (pidList.has(item.id)) {
+      pidList.delete(item.id)
+    }
+  }
+  var arr = [...pidList]
+  return arr
 }
-// 判断是不是超级管理员
-export function isAdministrator() {
-  const roleTips = store.getters.roleTips
-  console.log(roleTips)
-  return roleTips.some(tip => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return (tip === 'administrator')
-  })
+
+// 平面数据数据转树结构
+export function getShowItem(plainList, id = '0') {
+  const expandList = []
+  const openedList = []
+  for (let i = 0; i < plainList.length; i++) {
+    if (plainList[i].open === 'true' || plainList[i].open === true) {
+      expandList.push(plainList[i].id)
+    }
+    if (plainList[i].checked === 'true' || plainList[i].checked === true) {
+      openedList.push(plainList[i].id)
+    }
+  }
+  return [expandList, openedList]
+}
+
+// 从树列表中删除指定元素
+export function deleteItem(list, des) {
+  const del = (list, item) => {
+    for (const i in list) {
+      if (list[i].id === des.id) {
+        list.splice(i, 1)
+        return
+      } else {
+        if (list[i].children && list[i].children.length > 0) {
+          del(list[i].children, des)
+        }
+      }
+    }
+  }
+  del(list, des)
 }
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 88921aa..e6b7993 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -11,7 +11,7 @@
             <el-select v-model="listQuery.wellType" placeholder="选择窨井类型" clearable>
               <el-option
                 v-for="item in wellTypeList"
-                :key="item.value"
+                :key="'welltype_'+item.value"
                 :label="item.name"
                 :value="item.value"/>
             </el-select>
@@ -27,10 +27,16 @@
         </el-row>
       </el-form>
     </div>
-    <div class="refresh-div">
+    <!--倒计时刷新-->
+    <div v-if="refreshType=='clock'" class="refresh-div">
       <span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
     </div>
-    <div v-if="alarmWells.length>0" class="map-alarm-div">
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>
+    </div>
+    <div v-if="showAlarm==true && alarmWells.length>0" class="map-alarm-div">
       <div class="map-alarm-div-header">
         告警列表
         <span class="icon-right" @click="tableShow=!tableShow">
@@ -62,6 +68,7 @@
       <!--地图-->
       <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"-->
@@ -69,18 +76,19 @@
         <!--:offset="offset"-->
         <!--:vid="index"-->
         <!--:visible="marker.visible"-->
-        <!--&gt;-->
+        <!--:events="marker.events">-->
         <!--<div>-->
         <!--<svg-icon :icon-class="marker.icon" @click="openInfoWindow(marker.wellId)" />-->
         <!--</div>-->
         <!--</el-amap-marker>-->
+        <!--</div>-->
         <!--报警marker-->
         <el-amap-marker
           v-for="(alarm,index) in alarmWells"
-          :key="alarm.wellId"
+          :key="'alarm_'+index"
           :position="alarm.position"
           :offset="alarmOffset"
-          :visible="alarm.visible"
+          :visible="showAlarm&&alarm.visible"
           :vid="index"
         >
           <div>
@@ -137,9 +145,14 @@
   components: { DeptSelect, SelectTree },
   data() {
     return {
+      aMapManager,
+      type: 'cluster', // 加载数据方式：massMarkers或cluster
+      refreshType: 'clock', // 刷新数据方式：clock或websocket
+      showAlarm: false, // 是否显示报警
+      showAll: true, // 是否显示全部井
       listQuery: {
         keywords: '', // 关键字
-        wellType: '', // 井类型
+        wellType: '1', // 井类型
         deptid: '', // 组织机构
         isAlarm: '1' // 是否报警
       }, // 筛选条件
@@ -174,19 +187,13 @@
       count: 30,
       showWellType: this.showWellType(), // 是否显示井类型下拉
       wellTypeList: [], // 井类型列表
-      deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
-      }, // 权属单位树形下拉菜单
-      deptTreeList: null, // 组织树列表数据
       showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
       commonIcon: 'well-common-green', // 通用图标 绿
       commonIconAlarm: 'well-common-red', // 通用图标 红
       center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
       zoom: 12, // 地图缩放比例
       markers: [], // 井列表标注marker
+      markerRefs: [], // markers对象列表
       alarmList: [], // 报警列表
       alarmWells: [], // 报警井列表
       offset: [-10, -10], // 偏移量
@@ -215,18 +222,18 @@
       deptShowTop: false, // 是否显示顶级
       clock: null, // 计时器
       hasAlarm: false, // 是否有报警,
-      showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
       firstAmount: true, // 是否第一次加载井数据
       loading: true, // 加载图标是否显示
-      aMapManager,
       massMarks: null, // 海量点
+      mapMarkers: [],
+      clusters: [],
       showClearBtn: false // 是否显示清除查询按钮
     }
   },
   watch: {
     showAll(val) {
       if (val) { // 显示全部
-        this.listQuery.isAlarm = '0'
+        // this.listQuery.isAlarm = '0'
         // 先清空查询条件
         this.listQuery.deptid = ''
         this.listQuery.keywords = ''
@@ -238,7 +245,7 @@
           this.filterIcon()
         }
       } else { // 仅显示报警
-        this.listQuery.isAlarm = '1'
+        // this.listQuery.isAlarm = '1'
         this.filterIcon()
       }
     }
@@ -246,14 +253,19 @@
   mounted() {
     var that = this
     that.fetchWellType()
-    setTimeout(function() {
-      that.getWellList()
-      that.refreshAlarm()
-      that.countDown()
-    }, 1000)
+    if (this.showAll) {
+      this.getWellList()
+    }
+    if (this.refreshType === 'clock') {
+      setTimeout(function() {
+        // that.getWellList()
+        that.refreshAlarm()
+        that.countDown()
+      }, 1000)
+    }
   },
   methods: {
-    // 倒计时函数，暂时不用了
+    // 倒计时函数
     countDown() {
       this.clock = window.setInterval(() => {
         this.count--
@@ -306,7 +318,7 @@
       const keywords = this.listQuery.keywords
       const deptid = this.listQuery.deptid
       const wellType = this.listQuery.wellType
-      const isAlarm = this.listQuery.isAlarm
+      // const isAlarm = this.listQuery.isAlarm
       console.log('markers length:', this.markers.length)
       let center = []
       // 查询全部井，是否匹配
@@ -325,19 +337,19 @@
           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)
-          }
-        }
+        // 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)
+        //   }
+        // }
         if (show === false) {
           hideWellIds.push(marker.wellId)
         } else {
@@ -366,12 +378,15 @@
       if (center.length > 0) {
         this.center = center
       }
-      this.resetMassMarker()
+      if (this.type === 'massMarkers') {
+        this.resetMassMarker()
+      } else if (this.type === 'cluster') {
+        this.clearClusters()
+      }
     },
     // 加载海量点
     mountMassMarker() {
       const map = aMapManager.getMap()
-
       // 创建样式对象
       const style = {
         url: './static/images/well/pin.svg',
@@ -407,78 +422,169 @@
       // 将海量点添加至地图实例
       this.massMarks.setMap(map)
     },
+    // 加载聚合点
+    mountClusters() {
+      const self = this
+      // 聚合点数据应该是一组包含经纬度信息的数组。lnglat 为经纬度信息字段，weight 字段为可选数据，表示权重值，以权重高的点为中心进行聚合。
+      var points = this.markers
+      const markers = []
+      var icon = new AMap.Icon({
+        size: new AMap.Size(20, 20), // 图标尺寸
+        image: 'static/images/well/pin.svg', // Icon的图像
+        imageSize: new AMap.Size(20, 20) // 根据所设置的大小拉伸或压缩图片
+      })
+      for (var i = 0; i < points.length; i += 1) {
+        markers.push(new AMap.Marker({
+          position: points[i]['lnglat'],
+          icon: icon, // 添加 Icon 实例
+          offset: new AMap.Pixel(-10, 0)
+        }))
+      }
+      // 添加聚合组件
+      const map = aMapManager.getMap()
+      const cluster = new AMap.MarkerClusterer(map, markers, {
+        gridSize: 80,
+        renderCluserMarker: self._renderCluserMarker,
+        maxZoom: 16 })
+    },
+    // 清除聚合点
+    clearClusters() {
+
+    },
+    _renderCluserMarker(context) {
+      console.log(context)
+      const count = this.markers.length
+      const factor = Math.pow(context.count / count, 1 / 18)
+      const div = document.createElement('div')
+      const Hue = 180 - factor * 180
+      const bgColor = 'hsla(' + Hue + ',100%,50%,0.9)'
+      const fontColor = '#ffffff'
+      const borderColor = 'hsla(' + Hue + ',100%,40%,1)'
+      const shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
+      div.style.backgroundColor = bgColor
+      const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
+      div.style.width = div.style.height = size + 'px'
+      div.style.border = 'solid 1px ' + borderColor
+      div.style.borderRadius = size / 2 + 'px'
+      div.style.boxShadow = '0 0 1px ' + shadowColor
+      div.innerHTML = context.count
+      div.style.lineHeight = size + 'px'
+      div.style.color = fontColor
+      div.style.fontSize = '14px'
+      div.style.textAlign = 'center'
+      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: '', // 井类型
-        deptid: '', // 组织机构
-        isAlarm: this.listQuery.isAlarm
+        wellType: '1', // 井类型
+        deptid: '' // 组织机构
+        // isAlarm: this.listQuery.isAlarm
       }
       getWellList(listQuery).then(response => {
         this.loading = false
         if (response.code === 200) {
           const wells = response.data
+          this.firstAmount = false
           if (wells.length > 0) {
-            // 查询正在报警的井
-            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]]
+            this.markers = []
+            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'
+                // events: {
+                //   init(o) {
+                //     console.log(self)
+                //     self.markerRefs.push(o)
+                //   }
+                // }
+              })
+              centerxs.push(parseFloat(well.lngGaode))
+              centerys.push(parseFloat(well.latGaode))
             }
-            this.mountMassMarker()
+            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()
+            }
           }
         }
       })
@@ -509,8 +615,10 @@
     refreshAlarm() {
       console.log('refreshAlarm')
       this.count = 60
+      this.loading = true
       getAlarmsNow().then(response => {
         if (response.code === 200) {
+          this.loading = false
           // 获取当前报警列表
           this.alarmList = response.data
           if (this.alarmList.length > 0) {

diff --git a/src/main.js b/src/main.js
index 91f9c7d..f1c60a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,8 +43,8 @@
 Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: 'b6c27a2051691fcb386543c800356e05', // key
-  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'Geolocation'], // 插件
-  uiVersion: '1.0.11', // ui组件库版本号
+  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'MarkerClusterer'], // 插件
+  // uiVersion: '1.1', // ui组件库版本号
   v: '1.4.4' // sdk版本
 })
 Vue.config.productionTip = false
diff --git a/src/utils/structure.js b/src/utils/structure.js
index b325ab0..34a6672 100644
--- a/src/utils/structure.js
+++ b/src/utils/structure.js
@@ -1,53 +1,135 @@
-import store from '../store'
+// 数据结构转换工具
+
 /**
- * 判断是否有权限
+ * 判断是否有转树的必要
+ * @param plainList 平行数据列表
+ * @param id 祖宗id
+ * @returns {boolean}  有返回true,无返回false
  */
-export function hasPermission(permission) {
-  const btns = store.getters.btns
-  return btns.some(btn => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return btn.url === permission
-  })
-}
-// 根据用户权限判断是否要显示井类型下拉框
-export function showWellType() {
-  console.log('是否显示井类型下拉')
-  const wellTypes = store.getters.wellTypes
-  if (wellTypes.length > 1) return true
-  else return false
+export function judgeTree(plainList, id = '0') {
+  if (plainList && plainList.length > 0) {
+    let flag = false // 是否需要转成树结构
+    const pid = plainList[0].pid
+    for (const item of plainList) {
+      if (item.pid !== pid) {
+        flag = true
+        break
+      }
+    }
+    return flag
+  } else { return false }
 }
 
-// 根据用户权限判断是否要显示设备类型下拉框
-export function showDeviceType() {
-  const deviceTypes = store.getters.deviceTypes
-  if (deviceTypes.length > 1) return true
-  else return false
+/**
+ * 平面数据数据转树结构
+ * @param plainList 平行数据列表
+ * @param id 祖宗id
+ * @param isSelect 是否是下拉需要顶级的树
+ * @returns {*}
+ */
+export function toTreeList(plainList, id = '0', isSelect = false) {
+  const pid = findPid(plainList)
+  if (pid.length > 1) {
+    return plainList
+  } else {
+    const tree = cleanChildren(buildTree(plainList, pid[0], isSelect))
+    return tree
+  }
 }
-// 根据用户权限判断是否要显示IP配置项，集中器不显示ip
-export function showIpConfig() {
-  const communications = store.getters.communications
-  return communications.some(communication => { // 遍历通讯方式，只要没有1(集中器)就是返回true
-    return communication !== '1'
-  })
+// 构建树
+function buildTree(plainList, id = '0', isSelect) {
+  // 递归函数
+  const fa = (parentId) => {
+    const temp = []
+    for (let i = 0; i < plainList.length; i++) {
+      const n = plainList[i]
+      const id = '' + n.id
+      const pid = '' + n.pid
+      if (pid === parentId) {
+        n.children = fa(id)
+        temp.push(n)
+      }
+    }
+    return temp
+  }
+  // 如果是下拉框需要使用的树，首先寻找顶级，将顶级也放入列表
+  if (isSelect) {
+    let flag = 1
+    const list = []
+    for (const n of plainList) {
+      const nid = '' + n.id
+      if (nid === id) {
+        n.children = fa(id)
+        flag = 0
+        list.push(n)
+        return list
+      }
+    } if (flag === 1) { // 没有找到父级，按原流程走
+      return fa(id)
+    }
+  } else {
+    return fa(id)
+  }
 }
-export function notContainConcentrator() {
-  const communications = store.getters.communications
-  return communications.some(communication => { // 遍历通讯方式，只要有1(集中器)就是返回true
-    return communication === '1'
-  })
+
+// 清除空 children项
+function cleanChildren(data) {
+  const fa = (list) => {
+    list.map((e) => {
+      if (e && e.children && e.children.length) {
+        fa(e.children)
+      } else {
+        delete e.children
+      }
+      return e
+    })
+    return list
+  }
+  return fa(data)
 }
-// 判断用户是否为运维人员或其他管理员
-export function isOperation() {
-  const roleTips = store.getters.roleTips
-  console.log(roleTips)
-  return roleTips.some(tip => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return (tip === 'operation' || tip === 'administrator')
-  })
+
+function findPid(plainList) {
+  const pidList = new Set()
+  for (const item of plainList) {
+    pidList.add(item.pid)
+  }
+  for (const item of plainList) {
+    if (pidList.has(item.id)) {
+      pidList.delete(item.id)
+    }
+  }
+  var arr = [...pidList]
+  return arr
 }
-// 判断是不是超级管理员
-export function isAdministrator() {
-  const roleTips = store.getters.roleTips
-  console.log(roleTips)
-  return roleTips.some(tip => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return (tip === 'administrator')
-  })
+
+// 平面数据数据转树结构
+export function getShowItem(plainList, id = '0') {
+  const expandList = []
+  const openedList = []
+  for (let i = 0; i < plainList.length; i++) {
+    if (plainList[i].open === 'true' || plainList[i].open === true) {
+      expandList.push(plainList[i].id)
+    }
+    if (plainList[i].checked === 'true' || plainList[i].checked === true) {
+      openedList.push(plainList[i].id)
+    }
+  }
+  return [expandList, openedList]
+}
+
+// 从树列表中删除指定元素
+export function deleteItem(list, des) {
+  const del = (list, item) => {
+    for (const i in list) {
+      if (list[i].id === des.id) {
+        list.splice(i, 1)
+        return
+      } else {
+        if (list[i].children && list[i].children.length > 0) {
+          del(list[i].children, des)
+        }
+      }
+    }
+  }
+  del(list, des)
 }
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 88921aa..e6b7993 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -11,7 +11,7 @@
             <el-select v-model="listQuery.wellType" placeholder="选择窨井类型" clearable>
               <el-option
                 v-for="item in wellTypeList"
-                :key="item.value"
+                :key="'welltype_'+item.value"
                 :label="item.name"
                 :value="item.value"/>
             </el-select>
@@ -27,10 +27,16 @@
         </el-row>
       </el-form>
     </div>
-    <div class="refresh-div">
+    <!--倒计时刷新-->
+    <div v-if="refreshType=='clock'" class="refresh-div">
       <span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
     </div>
-    <div v-if="alarmWells.length>0" class="map-alarm-div">
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>
+    </div>
+    <div v-if="showAlarm==true && alarmWells.length>0" class="map-alarm-div">
       <div class="map-alarm-div-header">
         告警列表
         <span class="icon-right" @click="tableShow=!tableShow">
@@ -62,6 +68,7 @@
       <!--地图-->
       <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"-->
@@ -69,18 +76,19 @@
         <!--:offset="offset"-->
         <!--:vid="index"-->
         <!--:visible="marker.visible"-->
-        <!--&gt;-->
+        <!--:events="marker.events">-->
         <!--<div>-->
         <!--<svg-icon :icon-class="marker.icon" @click="openInfoWindow(marker.wellId)" />-->
         <!--</div>-->
         <!--</el-amap-marker>-->
+        <!--</div>-->
         <!--报警marker-->
         <el-amap-marker
           v-for="(alarm,index) in alarmWells"
-          :key="alarm.wellId"
+          :key="'alarm_'+index"
           :position="alarm.position"
           :offset="alarmOffset"
-          :visible="alarm.visible"
+          :visible="showAlarm&&alarm.visible"
           :vid="index"
         >
           <div>
@@ -137,9 +145,14 @@
   components: { DeptSelect, SelectTree },
   data() {
     return {
+      aMapManager,
+      type: 'cluster', // 加载数据方式：massMarkers或cluster
+      refreshType: 'clock', // 刷新数据方式：clock或websocket
+      showAlarm: false, // 是否显示报警
+      showAll: true, // 是否显示全部井
       listQuery: {
         keywords: '', // 关键字
-        wellType: '', // 井类型
+        wellType: '1', // 井类型
         deptid: '', // 组织机构
         isAlarm: '1' // 是否报警
       }, // 筛选条件
@@ -174,19 +187,13 @@
       count: 30,
       showWellType: this.showWellType(), // 是否显示井类型下拉
       wellTypeList: [], // 井类型列表
-      deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
-      }, // 权属单位树形下拉菜单
-      deptTreeList: null, // 组织树列表数据
       showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
       commonIcon: 'well-common-green', // 通用图标 绿
       commonIconAlarm: 'well-common-red', // 通用图标 红
       center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
       zoom: 12, // 地图缩放比例
       markers: [], // 井列表标注marker
+      markerRefs: [], // markers对象列表
       alarmList: [], // 报警列表
       alarmWells: [], // 报警井列表
       offset: [-10, -10], // 偏移量
@@ -215,18 +222,18 @@
       deptShowTop: false, // 是否显示顶级
       clock: null, // 计时器
       hasAlarm: false, // 是否有报警,
-      showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
       firstAmount: true, // 是否第一次加载井数据
       loading: true, // 加载图标是否显示
-      aMapManager,
       massMarks: null, // 海量点
+      mapMarkers: [],
+      clusters: [],
       showClearBtn: false // 是否显示清除查询按钮
     }
   },
   watch: {
     showAll(val) {
       if (val) { // 显示全部
-        this.listQuery.isAlarm = '0'
+        // this.listQuery.isAlarm = '0'
         // 先清空查询条件
         this.listQuery.deptid = ''
         this.listQuery.keywords = ''
@@ -238,7 +245,7 @@
           this.filterIcon()
         }
       } else { // 仅显示报警
-        this.listQuery.isAlarm = '1'
+        // this.listQuery.isAlarm = '1'
         this.filterIcon()
       }
     }
@@ -246,14 +253,19 @@
   mounted() {
     var that = this
     that.fetchWellType()
-    setTimeout(function() {
-      that.getWellList()
-      that.refreshAlarm()
-      that.countDown()
-    }, 1000)
+    if (this.showAll) {
+      this.getWellList()
+    }
+    if (this.refreshType === 'clock') {
+      setTimeout(function() {
+        // that.getWellList()
+        that.refreshAlarm()
+        that.countDown()
+      }, 1000)
+    }
   },
   methods: {
-    // 倒计时函数，暂时不用了
+    // 倒计时函数
     countDown() {
       this.clock = window.setInterval(() => {
         this.count--
@@ -306,7 +318,7 @@
       const keywords = this.listQuery.keywords
       const deptid = this.listQuery.deptid
       const wellType = this.listQuery.wellType
-      const isAlarm = this.listQuery.isAlarm
+      // const isAlarm = this.listQuery.isAlarm
       console.log('markers length:', this.markers.length)
       let center = []
       // 查询全部井，是否匹配
@@ -325,19 +337,19 @@
           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)
-          }
-        }
+        // 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)
+        //   }
+        // }
         if (show === false) {
           hideWellIds.push(marker.wellId)
         } else {
@@ -366,12 +378,15 @@
       if (center.length > 0) {
         this.center = center
       }
-      this.resetMassMarker()
+      if (this.type === 'massMarkers') {
+        this.resetMassMarker()
+      } else if (this.type === 'cluster') {
+        this.clearClusters()
+      }
     },
     // 加载海量点
     mountMassMarker() {
       const map = aMapManager.getMap()
-
       // 创建样式对象
       const style = {
         url: './static/images/well/pin.svg',
@@ -407,78 +422,169 @@
       // 将海量点添加至地图实例
       this.massMarks.setMap(map)
     },
+    // 加载聚合点
+    mountClusters() {
+      const self = this
+      // 聚合点数据应该是一组包含经纬度信息的数组。lnglat 为经纬度信息字段，weight 字段为可选数据，表示权重值，以权重高的点为中心进行聚合。
+      var points = this.markers
+      const markers = []
+      var icon = new AMap.Icon({
+        size: new AMap.Size(20, 20), // 图标尺寸
+        image: 'static/images/well/pin.svg', // Icon的图像
+        imageSize: new AMap.Size(20, 20) // 根据所设置的大小拉伸或压缩图片
+      })
+      for (var i = 0; i < points.length; i += 1) {
+        markers.push(new AMap.Marker({
+          position: points[i]['lnglat'],
+          icon: icon, // 添加 Icon 实例
+          offset: new AMap.Pixel(-10, 0)
+        }))
+      }
+      // 添加聚合组件
+      const map = aMapManager.getMap()
+      const cluster = new AMap.MarkerClusterer(map, markers, {
+        gridSize: 80,
+        renderCluserMarker: self._renderCluserMarker,
+        maxZoom: 16 })
+    },
+    // 清除聚合点
+    clearClusters() {
+
+    },
+    _renderCluserMarker(context) {
+      console.log(context)
+      const count = this.markers.length
+      const factor = Math.pow(context.count / count, 1 / 18)
+      const div = document.createElement('div')
+      const Hue = 180 - factor * 180
+      const bgColor = 'hsla(' + Hue + ',100%,50%,0.9)'
+      const fontColor = '#ffffff'
+      const borderColor = 'hsla(' + Hue + ',100%,40%,1)'
+      const shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
+      div.style.backgroundColor = bgColor
+      const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
+      div.style.width = div.style.height = size + 'px'
+      div.style.border = 'solid 1px ' + borderColor
+      div.style.borderRadius = size / 2 + 'px'
+      div.style.boxShadow = '0 0 1px ' + shadowColor
+      div.innerHTML = context.count
+      div.style.lineHeight = size + 'px'
+      div.style.color = fontColor
+      div.style.fontSize = '14px'
+      div.style.textAlign = 'center'
+      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: '', // 井类型
-        deptid: '', // 组织机构
-        isAlarm: this.listQuery.isAlarm
+        wellType: '1', // 井类型
+        deptid: '' // 组织机构
+        // isAlarm: this.listQuery.isAlarm
       }
       getWellList(listQuery).then(response => {
         this.loading = false
         if (response.code === 200) {
           const wells = response.data
+          this.firstAmount = false
           if (wells.length > 0) {
-            // 查询正在报警的井
-            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]]
+            this.markers = []
+            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'
+                // events: {
+                //   init(o) {
+                //     console.log(self)
+                //     self.markerRefs.push(o)
+                //   }
+                // }
+              })
+              centerxs.push(parseFloat(well.lngGaode))
+              centerys.push(parseFloat(well.latGaode))
             }
-            this.mountMassMarker()
+            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()
+            }
           }
         }
       })
@@ -509,8 +615,10 @@
     refreshAlarm() {
       console.log('refreshAlarm')
       this.count = 60
+      this.loading = true
       getAlarmsNow().then(response => {
         if (response.code === 200) {
+          this.loading = false
           // 获取当前报警列表
           this.alarmList = response.data
           if (this.alarmList.length > 0) {
diff --git a/src/views/overview/overview_old.vue b/src/views/overview/overview_old.vue
new file mode 100644
index 0000000..3137d98
--- /dev/null
+++ b/src/views/overview/overview_old.vue
@@ -0,0 +1,730 @@
+<template>
+  <div>
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item label="搜索：">
+            <el-input v-model.trim="listQuery.keywords" placeholder="窨井编号/地址" clearable/>
+          </el-form-item>
+          <el-form-item v-if="wellTypeList.length>1">
+            <el-select v-model="listQuery.wellType" placeholder="选择窨井类型" clearable>
+              <el-option
+                v-for="item in wellTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <dept-select 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>
+          <el-form-item style="margin-left:10px">
+            <el-checkbox v-model="showAll">显示全部窨井</el-checkbox>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="refresh-div">
+      <span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>
+    </div>
+    <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="alarmRowClick">
+            <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>
+      </transition>
+    </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-->
+        <!--<el-amap-marker-->
+        <!--v-for="(marker,index) in markers"-->
+        <!--:key="'well'+marker.wellId"-->
+        <!--:position="marker.position"-->
+        <!--:offset="offset"-->
+        <!--:vid="index"-->
+        <!--:visible="marker.visible"-->
+        <!--&gt;-->
+        <!--<div>-->
+        <!--<svg-icon :icon-class="marker.icon" @click="openInfoWindow(marker.wellId)" />-->
+        <!--</div>-->
+        <!--</el-amap-marker>-->
+        <!--报警marker-->
+        <el-amap-marker
+          v-for="(alarm,index) in alarmWells"
+          :key="alarm.wellId"
+          :position="alarm.position"
+          :offset="alarmOffset"
+          :visible="alarm.visible"
+          :vid="index"
+        >
+          <div>
+            <svg-icon icon-class="alarm-well" class="alarm-icon" @click="openAlarmWindow(alarm.wellId,alarm.position)" />
+          </div>
+        </el-amap-marker>
+        <!--正常信息弹窗-->
+        <el-amap-info-window
+          v-if="wellInfo"
+          :position="currentWindow.position"
+          :visible="currentWindow.visible"
+          :class="infoWindowClass"
+        >
+          <div v-if="currentWindow.windowType=='info'?true:false" class="info-window">
+            <div class="info-header">{{ wellInfo.wellCode }}</div>
+            <div class="info-body">
+              <div>井类型：{{ wellInfo.wellTypeName }}</div>
+              <div>权属单位：{{ wellInfo.deptName }}</div>
+              <div>详细地址：{{ wellInfo.position }}</div>
+            </div>
+          </div>
+          <div v-if="currentWindow.windowType=='alarm'?true:false" class="alarm-window">
+            <div class="alarm-header">
+              <svg-icon icon-class="alarm-red" />
+              {{ alarmInfo.wellCode }}
+            </div>
+            <div class="alarm-body">
+              <div v-for="alarm in alarmInfo.alarms" :key="alarm.id">
+                <div>告警原因：<span class="alarm-red">{{ alarm.alarmContent }}</span></div>
+                <div>设备编号：<span>{{ alarm.devcode }}</span></div>
+              </div>
+              <el-divider/>
+              <div>井类型：{{ alarmInfo.wellTypeName }}</div>
+              <div>权属单位：{{ alarmInfo.deptName }}</div>
+              <div>详细地址：{{ alarmInfo.position }}</div>
+            </div>
+          </div>
+        </el-amap-info-window>
+      </el-amap>
+    </div>
+  </div>
+</template>
+
+<script>
+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()
+export default {
+  name: 'Overview',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: '1' // 是否报警
+      }, // 筛选条件
+      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'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      count: 30,
+      showWellType: this.showWellType(), // 是否显示井类型下拉
+      wellTypeList: [], // 井类型列表
+      deptProps: {
+        parent: 'pid',
+        value: 'id',
+        label: 'name',
+        children: 'children'
+      }, // 权属单位树形下拉菜单
+      deptTreeList: null, // 组织树列表数据
+      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+      zoom: 12, // 地图缩放比例
+      markers: [], // 井列表标注marker
+      alarmList: [], // 报警列表
+      alarmWells: [], // 报警井列表
+      offset: [-10, -10], // 偏移量
+      alarmOffset: [-15, -30], // 偏移量
+      wellInfo: {
+        wellCode: '',
+        position: '',
+        wellTypeName: '',
+        deptName: '',
+        bfztName: '',
+        deep: ''
+      }, // 显示井详细信息气泡内容
+      alarmInfo: {
+        wellCode: '',
+        deptName: '',
+        position: '',
+        deep: '',
+        alarms: []
+      }, // 显示报警详情气泡内容
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      infoWindowClass: 'nomal-info-window',
+      deptShowTop: false, // 是否显示顶级
+      clock: null, // 计时器
+      hasAlarm: false, // 是否有报警,
+      showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
+      firstAmount: true, // 是否第一次加载井数据
+      loading: true, // 加载图标是否显示
+      aMapManager,
+      massMarks: null, // 海量点
+      showClearBtn: false // 是否显示清除查询按钮
+    }
+  },
+  watch: {
+    showAll(val) {
+      if (val) { // 显示全部
+        this.listQuery.isAlarm = '0'
+        // 先清空查询条件
+        this.listQuery.deptid = ''
+        this.listQuery.keywords = ''
+        this.listQuery.wellType = ''
+        // 如果是第一次勾选这个选项，从后台加载全部数据，否则只需要过滤对象，更新显示
+        if (this.firstAmount === true) {
+          this.getWellList()
+        } else {
+          this.filterIcon()
+        }
+      } else { // 仅显示报警
+        this.listQuery.isAlarm = '1'
+        this.filterIcon()
+      }
+    }
+  },
+  mounted() {
+    var that = this
+    that.fetchWellType()
+    setTimeout(function() {
+      that.getWellList()
+      that.refreshAlarm()
+      that.countDown()
+    }, 1000)
+  },
+  methods: {
+    // 倒计时函数，暂时不用了
+    countDown() {
+      this.clock = window.setInterval(() => {
+        this.count--
+        if (this.count < 0) { // 当倒计时小于0时清除定时器
+          this.refreshAlarm()
+          this.count = 60
+        }
+      }, 1000)
+    },
+    // 获取井类型，显示井类型下拉
+    fetchWellType() {
+      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)
+          }
+        }
+        if (this.wellTypeList.length <= 1) {
+          this.showWellType = false
+        }
+      })
+    },
+    // 数据查询
+    search(showMessage = true) {
+      const keywords = this.listQuery.keywords
+      const deptid = this.listQuery.deptid
+      const wellType = this.listQuery.wellType
+      if (keywords === '' && deptid === '' && wellType === '') {
+        this.$message.warning('查询条件不能为空')
+      } else {
+        this.showClearBtn = true
+        this.filterIcon(showMessage)
+      }
+    },
+    // 清除查询
+    clearSearch() {
+      this.listQuery.wellType = ''
+      this.listQuery.deptid = ''
+      this.listQuery.keywords = ''
+      this.filterIcon()
+      this.showClearBtn = false
+    },
+    // 过滤Marker
+    filterIcon(showMessage = false) {
+      this.currentWindow.visible = false // 弹窗隐藏
+      const hideWellIds = []// 要隐藏的井编号
+      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 = []
+      // 查询全部井，是否匹配
+      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) {
+          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)
+          }
+        }
+        if (show === false) {
+          hideWellIds.push(marker.wellId)
+        } else {
+          center = marker.position
+        }
+        marker.visible = show
+      }
+      // 如果没有找到符合要求的井，将全部查询结果隐藏
+      if (hideWellIds.length === this.markers.length) {
+        if (showMessage) {
+          this.$message.warning('查无结果')
+        }
+        for (const alarmWell of this.alarmWells) {
+          alarmWell.visible = false
+        }
+      } else {
+        // 将报警隐藏
+        for (const alarmWell of this.alarmWells) {
+          if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
+            alarmWell.visible = false
+          } else {
+            alarmWell.visible = true
+          }
+        }
+      }
+      if (center.length > 0) {
+        this.center = center
+      }
+      this.resetMassMarker()
+    },
+    // 加载海量点
+    mountMassMarker() {
+      const map = aMapManager.getMap()
+
+      // 创建样式对象
+      const style = {
+        url: 'static/images/well/pin.svg',
+        anchor: new AMap.Pixel(8, 15),
+        size: new AMap.Size(15, 15)
+      }
+      // 海量点初始化
+      this.massMarks = new AMap.MassMarks(this.markers, {
+        zIndex: 5, // 海量点图层叠加的顺序
+        zooms: [3, 20], // 在指定地图缩放级别范围内展示海量点图层
+        style: style // 设置样式对象
+      })
+      // 将海量点添加至地图实例
+      this.massMarks.setMap(map)
+      // 海量点点击事件
+      const that = this
+      this.massMarks.on('click', function(e) {
+        that.openInfoWindow(e.data.id)
+      })
+    },
+    // 过滤海量点
+    resetMassMarker() {
+      const map = aMapManager.getMap()
+      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)
+    },
+    // 获取井列表
+    getWellList() {
+      this.loading = true
+      const listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: this.listQuery.isAlarm
+      }
+      getWellList(listQuery).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          const wells = response.data
+          if (wells.length > 0) {
+            // 查询正在报警的井
+            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]]
+            }
+            this.mountMassMarker()
+          }
+        }
+      })
+    },
+    // 点击井详情气泡
+    openInfoWindow(wellId) {
+      this.currentWindow.visible = false
+      getWellInfo(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = response.data
+          this.wellInfo = {
+            wellCode: wellInfo.wellCode,
+            position: wellInfo.position,
+            wellTypeName: wellInfo.wellTypeName,
+            deptName: wellInfo.deptName,
+            bfztName: wellInfo.bfztName,
+            deep: wellInfo.deep
+          }
+          this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
+          this.$nextTick(() => {
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'info'
+          })
+        }
+      })
+    },
+    // 刷新报警列表
+    refreshAlarm() {
+      console.log('refreshAlarm')
+      this.count = 60
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          this.alarmList = response.data
+          if (this.alarmList.length > 0) {
+            this.hasAlarm = true
+          }
+          this.alarmWells = []
+          for (const alarm of response.data) {
+            // 如果在markers找到该井，更改进状态为alarm
+            // const item = this.markers.findIndex(item => {
+            //   return item.wellCode === alarm.wellCode
+            // })
+            // if (item !== -1) {
+            //   this.markers[item].wellStatus = 'alarm'
+            // }
+            this.alarmWells.push({
+              wellCode: alarm.wellCode,
+              wellId: alarm.wellId,
+              position: [alarm.lngGaode, alarm.latGaode],
+              positionInfo: alarm.position,
+              visible: true
+            })
+            // }
+          }
+        }
+      })
+    },
+    // 点击报警详情
+    openAlarmWindow(wellId, position) {
+      // 旧弹窗不显示
+      this.currentWindow.visible = false
+      this.filterIcon()
+      getWellAlarms(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = response.data
+          this.alarmInfo = {
+            wellCode: wellInfo.wellCode,
+            position: wellInfo.position,
+            deptName: wellInfo.deptName,
+            wellTypeName: wellInfo.wellTypeName,
+            alarms: wellInfo.alarmList,
+            deep: wellInfo.deep
+          }
+          this.currentWindow.position = position
+          this.center = position
+          this.$nextTick(() => {
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'alarm'
+          })
+        }
+      })
+    },
+    // 点击报警列表
+    alarmRowClick(row, column, event) {
+      console.log('alarmRowClick')
+      const wellId = row.wellId
+      for (const alarmWell of this.alarmWells) {
+        if (alarmWell.wellId === wellId) {
+          this.center = alarmWell.position
+          if (this.zoom < 16) {
+            this.zoom = 16
+          }
+          this.openAlarmWindow(alarmWell.wellId, alarmWell.position)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+// 报警列表
+.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;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !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;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  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;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 146px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width: 29px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>

diff --git a/src/main.js b/src/main.js
index 91f9c7d..f1c60a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,8 +43,8 @@
 Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: 'b6c27a2051691fcb386543c800356e05', // key
-  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'Geolocation'], // 插件
-  uiVersion: '1.0.11', // ui组件库版本号
+  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'MarkerClusterer'], // 插件
+  // uiVersion: '1.1', // ui组件库版本号
   v: '1.4.4' // sdk版本
 })
 Vue.config.productionTip = false
diff --git a/src/utils/structure.js b/src/utils/structure.js
index b325ab0..34a6672 100644
--- a/src/utils/structure.js
+++ b/src/utils/structure.js
@@ -1,53 +1,135 @@
-import store from '../store'
+// 数据结构转换工具
+
 /**
- * 判断是否有权限
+ * 判断是否有转树的必要
+ * @param plainList 平行数据列表
+ * @param id 祖宗id
+ * @returns {boolean}  有返回true,无返回false
  */
-export function hasPermission(permission) {
-  const btns = store.getters.btns
-  return btns.some(btn => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return btn.url === permission
-  })
-}
-// 根据用户权限判断是否要显示井类型下拉框
-export function showWellType() {
-  console.log('是否显示井类型下拉')
-  const wellTypes = store.getters.wellTypes
-  if (wellTypes.length > 1) return true
-  else return false
+export function judgeTree(plainList, id = '0') {
+  if (plainList && plainList.length > 0) {
+    let flag = false // 是否需要转成树结构
+    const pid = plainList[0].pid
+    for (const item of plainList) {
+      if (item.pid !== pid) {
+        flag = true
+        break
+      }
+    }
+    return flag
+  } else { return false }
 }
 
-// 根据用户权限判断是否要显示设备类型下拉框
-export function showDeviceType() {
-  const deviceTypes = store.getters.deviceTypes
-  if (deviceTypes.length > 1) return true
-  else return false
+/**
+ * 平面数据数据转树结构
+ * @param plainList 平行数据列表
+ * @param id 祖宗id
+ * @param isSelect 是否是下拉需要顶级的树
+ * @returns {*}
+ */
+export function toTreeList(plainList, id = '0', isSelect = false) {
+  const pid = findPid(plainList)
+  if (pid.length > 1) {
+    return plainList
+  } else {
+    const tree = cleanChildren(buildTree(plainList, pid[0], isSelect))
+    return tree
+  }
 }
-// 根据用户权限判断是否要显示IP配置项，集中器不显示ip
-export function showIpConfig() {
-  const communications = store.getters.communications
-  return communications.some(communication => { // 遍历通讯方式，只要没有1(集中器)就是返回true
-    return communication !== '1'
-  })
+// 构建树
+function buildTree(plainList, id = '0', isSelect) {
+  // 递归函数
+  const fa = (parentId) => {
+    const temp = []
+    for (let i = 0; i < plainList.length; i++) {
+      const n = plainList[i]
+      const id = '' + n.id
+      const pid = '' + n.pid
+      if (pid === parentId) {
+        n.children = fa(id)
+        temp.push(n)
+      }
+    }
+    return temp
+  }
+  // 如果是下拉框需要使用的树，首先寻找顶级，将顶级也放入列表
+  if (isSelect) {
+    let flag = 1
+    const list = []
+    for (const n of plainList) {
+      const nid = '' + n.id
+      if (nid === id) {
+        n.children = fa(id)
+        flag = 0
+        list.push(n)
+        return list
+      }
+    } if (flag === 1) { // 没有找到父级，按原流程走
+      return fa(id)
+    }
+  } else {
+    return fa(id)
+  }
 }
-export function notContainConcentrator() {
-  const communications = store.getters.communications
-  return communications.some(communication => { // 遍历通讯方式，只要有1(集中器)就是返回true
-    return communication === '1'
-  })
+
+// 清除空 children项
+function cleanChildren(data) {
+  const fa = (list) => {
+    list.map((e) => {
+      if (e && e.children && e.children.length) {
+        fa(e.children)
+      } else {
+        delete e.children
+      }
+      return e
+    })
+    return list
+  }
+  return fa(data)
 }
-// 判断用户是否为运维人员或其他管理员
-export function isOperation() {
-  const roleTips = store.getters.roleTips
-  console.log(roleTips)
-  return roleTips.some(tip => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return (tip === 'operation' || tip === 'administrator')
-  })
+
+function findPid(plainList) {
+  const pidList = new Set()
+  for (const item of plainList) {
+    pidList.add(item.pid)
+  }
+  for (const item of plainList) {
+    if (pidList.has(item.id)) {
+      pidList.delete(item.id)
+    }
+  }
+  var arr = [...pidList]
+  return arr
 }
-// 判断是不是超级管理员
-export function isAdministrator() {
-  const roleTips = store.getters.roleTips
-  console.log(roleTips)
-  return roleTips.some(tip => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return (tip === 'administrator')
-  })
+
+// 平面数据数据转树结构
+export function getShowItem(plainList, id = '0') {
+  const expandList = []
+  const openedList = []
+  for (let i = 0; i < plainList.length; i++) {
+    if (plainList[i].open === 'true' || plainList[i].open === true) {
+      expandList.push(plainList[i].id)
+    }
+    if (plainList[i].checked === 'true' || plainList[i].checked === true) {
+      openedList.push(plainList[i].id)
+    }
+  }
+  return [expandList, openedList]
+}
+
+// 从树列表中删除指定元素
+export function deleteItem(list, des) {
+  const del = (list, item) => {
+    for (const i in list) {
+      if (list[i].id === des.id) {
+        list.splice(i, 1)
+        return
+      } else {
+        if (list[i].children && list[i].children.length > 0) {
+          del(list[i].children, des)
+        }
+      }
+    }
+  }
+  del(list, des)
 }
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 88921aa..e6b7993 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -11,7 +11,7 @@
             <el-select v-model="listQuery.wellType" placeholder="选择窨井类型" clearable>
               <el-option
                 v-for="item in wellTypeList"
-                :key="item.value"
+                :key="'welltype_'+item.value"
                 :label="item.name"
                 :value="item.value"/>
             </el-select>
@@ -27,10 +27,16 @@
         </el-row>
       </el-form>
     </div>
-    <div class="refresh-div">
+    <!--倒计时刷新-->
+    <div v-if="refreshType=='clock'" class="refresh-div">
       <span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
     </div>
-    <div v-if="alarmWells.length>0" class="map-alarm-div">
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>
+    </div>
+    <div v-if="showAlarm==true && alarmWells.length>0" class="map-alarm-div">
       <div class="map-alarm-div-header">
         告警列表
         <span class="icon-right" @click="tableShow=!tableShow">
@@ -62,6 +68,7 @@
       <!--地图-->
       <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"-->
@@ -69,18 +76,19 @@
         <!--:offset="offset"-->
         <!--:vid="index"-->
         <!--:visible="marker.visible"-->
-        <!--&gt;-->
+        <!--:events="marker.events">-->
         <!--<div>-->
         <!--<svg-icon :icon-class="marker.icon" @click="openInfoWindow(marker.wellId)" />-->
         <!--</div>-->
         <!--</el-amap-marker>-->
+        <!--</div>-->
         <!--报警marker-->
         <el-amap-marker
           v-for="(alarm,index) in alarmWells"
-          :key="alarm.wellId"
+          :key="'alarm_'+index"
           :position="alarm.position"
           :offset="alarmOffset"
-          :visible="alarm.visible"
+          :visible="showAlarm&&alarm.visible"
           :vid="index"
         >
           <div>
@@ -137,9 +145,14 @@
   components: { DeptSelect, SelectTree },
   data() {
     return {
+      aMapManager,
+      type: 'cluster', // 加载数据方式：massMarkers或cluster
+      refreshType: 'clock', // 刷新数据方式：clock或websocket
+      showAlarm: false, // 是否显示报警
+      showAll: true, // 是否显示全部井
       listQuery: {
         keywords: '', // 关键字
-        wellType: '', // 井类型
+        wellType: '1', // 井类型
         deptid: '', // 组织机构
         isAlarm: '1' // 是否报警
       }, // 筛选条件
@@ -174,19 +187,13 @@
       count: 30,
       showWellType: this.showWellType(), // 是否显示井类型下拉
       wellTypeList: [], // 井类型列表
-      deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
-      }, // 权属单位树形下拉菜单
-      deptTreeList: null, // 组织树列表数据
       showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
       commonIcon: 'well-common-green', // 通用图标 绿
       commonIconAlarm: 'well-common-red', // 通用图标 红
       center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
       zoom: 12, // 地图缩放比例
       markers: [], // 井列表标注marker
+      markerRefs: [], // markers对象列表
       alarmList: [], // 报警列表
       alarmWells: [], // 报警井列表
       offset: [-10, -10], // 偏移量
@@ -215,18 +222,18 @@
       deptShowTop: false, // 是否显示顶级
       clock: null, // 计时器
       hasAlarm: false, // 是否有报警,
-      showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
       firstAmount: true, // 是否第一次加载井数据
       loading: true, // 加载图标是否显示
-      aMapManager,
       massMarks: null, // 海量点
+      mapMarkers: [],
+      clusters: [],
       showClearBtn: false // 是否显示清除查询按钮
     }
   },
   watch: {
     showAll(val) {
       if (val) { // 显示全部
-        this.listQuery.isAlarm = '0'
+        // this.listQuery.isAlarm = '0'
         // 先清空查询条件
         this.listQuery.deptid = ''
         this.listQuery.keywords = ''
@@ -238,7 +245,7 @@
           this.filterIcon()
         }
       } else { // 仅显示报警
-        this.listQuery.isAlarm = '1'
+        // this.listQuery.isAlarm = '1'
         this.filterIcon()
       }
     }
@@ -246,14 +253,19 @@
   mounted() {
     var that = this
     that.fetchWellType()
-    setTimeout(function() {
-      that.getWellList()
-      that.refreshAlarm()
-      that.countDown()
-    }, 1000)
+    if (this.showAll) {
+      this.getWellList()
+    }
+    if (this.refreshType === 'clock') {
+      setTimeout(function() {
+        // that.getWellList()
+        that.refreshAlarm()
+        that.countDown()
+      }, 1000)
+    }
   },
   methods: {
-    // 倒计时函数，暂时不用了
+    // 倒计时函数
     countDown() {
       this.clock = window.setInterval(() => {
         this.count--
@@ -306,7 +318,7 @@
       const keywords = this.listQuery.keywords
       const deptid = this.listQuery.deptid
       const wellType = this.listQuery.wellType
-      const isAlarm = this.listQuery.isAlarm
+      // const isAlarm = this.listQuery.isAlarm
       console.log('markers length:', this.markers.length)
       let center = []
       // 查询全部井，是否匹配
@@ -325,19 +337,19 @@
           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)
-          }
-        }
+        // 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)
+        //   }
+        // }
         if (show === false) {
           hideWellIds.push(marker.wellId)
         } else {
@@ -366,12 +378,15 @@
       if (center.length > 0) {
         this.center = center
       }
-      this.resetMassMarker()
+      if (this.type === 'massMarkers') {
+        this.resetMassMarker()
+      } else if (this.type === 'cluster') {
+        this.clearClusters()
+      }
     },
     // 加载海量点
     mountMassMarker() {
       const map = aMapManager.getMap()
-
       // 创建样式对象
       const style = {
         url: './static/images/well/pin.svg',
@@ -407,78 +422,169 @@
       // 将海量点添加至地图实例
       this.massMarks.setMap(map)
     },
+    // 加载聚合点
+    mountClusters() {
+      const self = this
+      // 聚合点数据应该是一组包含经纬度信息的数组。lnglat 为经纬度信息字段，weight 字段为可选数据，表示权重值，以权重高的点为中心进行聚合。
+      var points = this.markers
+      const markers = []
+      var icon = new AMap.Icon({
+        size: new AMap.Size(20, 20), // 图标尺寸
+        image: 'static/images/well/pin.svg', // Icon的图像
+        imageSize: new AMap.Size(20, 20) // 根据所设置的大小拉伸或压缩图片
+      })
+      for (var i = 0; i < points.length; i += 1) {
+        markers.push(new AMap.Marker({
+          position: points[i]['lnglat'],
+          icon: icon, // 添加 Icon 实例
+          offset: new AMap.Pixel(-10, 0)
+        }))
+      }
+      // 添加聚合组件
+      const map = aMapManager.getMap()
+      const cluster = new AMap.MarkerClusterer(map, markers, {
+        gridSize: 80,
+        renderCluserMarker: self._renderCluserMarker,
+        maxZoom: 16 })
+    },
+    // 清除聚合点
+    clearClusters() {
+
+    },
+    _renderCluserMarker(context) {
+      console.log(context)
+      const count = this.markers.length
+      const factor = Math.pow(context.count / count, 1 / 18)
+      const div = document.createElement('div')
+      const Hue = 180 - factor * 180
+      const bgColor = 'hsla(' + Hue + ',100%,50%,0.9)'
+      const fontColor = '#ffffff'
+      const borderColor = 'hsla(' + Hue + ',100%,40%,1)'
+      const shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
+      div.style.backgroundColor = bgColor
+      const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
+      div.style.width = div.style.height = size + 'px'
+      div.style.border = 'solid 1px ' + borderColor
+      div.style.borderRadius = size / 2 + 'px'
+      div.style.boxShadow = '0 0 1px ' + shadowColor
+      div.innerHTML = context.count
+      div.style.lineHeight = size + 'px'
+      div.style.color = fontColor
+      div.style.fontSize = '14px'
+      div.style.textAlign = 'center'
+      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: '', // 井类型
-        deptid: '', // 组织机构
-        isAlarm: this.listQuery.isAlarm
+        wellType: '1', // 井类型
+        deptid: '' // 组织机构
+        // isAlarm: this.listQuery.isAlarm
       }
       getWellList(listQuery).then(response => {
         this.loading = false
         if (response.code === 200) {
           const wells = response.data
+          this.firstAmount = false
           if (wells.length > 0) {
-            // 查询正在报警的井
-            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]]
+            this.markers = []
+            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'
+                // events: {
+                //   init(o) {
+                //     console.log(self)
+                //     self.markerRefs.push(o)
+                //   }
+                // }
+              })
+              centerxs.push(parseFloat(well.lngGaode))
+              centerys.push(parseFloat(well.latGaode))
             }
-            this.mountMassMarker()
+            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()
+            }
           }
         }
       })
@@ -509,8 +615,10 @@
     refreshAlarm() {
       console.log('refreshAlarm')
       this.count = 60
+      this.loading = true
       getAlarmsNow().then(response => {
         if (response.code === 200) {
+          this.loading = false
           // 获取当前报警列表
           this.alarmList = response.data
           if (this.alarmList.length > 0) {
diff --git a/src/views/overview/overview_old.vue b/src/views/overview/overview_old.vue
new file mode 100644
index 0000000..3137d98
--- /dev/null
+++ b/src/views/overview/overview_old.vue
@@ -0,0 +1,730 @@
+<template>
+  <div>
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item label="搜索：">
+            <el-input v-model.trim="listQuery.keywords" placeholder="窨井编号/地址" clearable/>
+          </el-form-item>
+          <el-form-item v-if="wellTypeList.length>1">
+            <el-select v-model="listQuery.wellType" placeholder="选择窨井类型" clearable>
+              <el-option
+                v-for="item in wellTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <dept-select 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>
+          <el-form-item style="margin-left:10px">
+            <el-checkbox v-model="showAll">显示全部窨井</el-checkbox>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="refresh-div">
+      <span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>
+    </div>
+    <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="alarmRowClick">
+            <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>
+      </transition>
+    </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-->
+        <!--<el-amap-marker-->
+        <!--v-for="(marker,index) in markers"-->
+        <!--:key="'well'+marker.wellId"-->
+        <!--:position="marker.position"-->
+        <!--:offset="offset"-->
+        <!--:vid="index"-->
+        <!--:visible="marker.visible"-->
+        <!--&gt;-->
+        <!--<div>-->
+        <!--<svg-icon :icon-class="marker.icon" @click="openInfoWindow(marker.wellId)" />-->
+        <!--</div>-->
+        <!--</el-amap-marker>-->
+        <!--报警marker-->
+        <el-amap-marker
+          v-for="(alarm,index) in alarmWells"
+          :key="alarm.wellId"
+          :position="alarm.position"
+          :offset="alarmOffset"
+          :visible="alarm.visible"
+          :vid="index"
+        >
+          <div>
+            <svg-icon icon-class="alarm-well" class="alarm-icon" @click="openAlarmWindow(alarm.wellId,alarm.position)" />
+          </div>
+        </el-amap-marker>
+        <!--正常信息弹窗-->
+        <el-amap-info-window
+          v-if="wellInfo"
+          :position="currentWindow.position"
+          :visible="currentWindow.visible"
+          :class="infoWindowClass"
+        >
+          <div v-if="currentWindow.windowType=='info'?true:false" class="info-window">
+            <div class="info-header">{{ wellInfo.wellCode }}</div>
+            <div class="info-body">
+              <div>井类型：{{ wellInfo.wellTypeName }}</div>
+              <div>权属单位：{{ wellInfo.deptName }}</div>
+              <div>详细地址：{{ wellInfo.position }}</div>
+            </div>
+          </div>
+          <div v-if="currentWindow.windowType=='alarm'?true:false" class="alarm-window">
+            <div class="alarm-header">
+              <svg-icon icon-class="alarm-red" />
+              {{ alarmInfo.wellCode }}
+            </div>
+            <div class="alarm-body">
+              <div v-for="alarm in alarmInfo.alarms" :key="alarm.id">
+                <div>告警原因：<span class="alarm-red">{{ alarm.alarmContent }}</span></div>
+                <div>设备编号：<span>{{ alarm.devcode }}</span></div>
+              </div>
+              <el-divider/>
+              <div>井类型：{{ alarmInfo.wellTypeName }}</div>
+              <div>权属单位：{{ alarmInfo.deptName }}</div>
+              <div>详细地址：{{ alarmInfo.position }}</div>
+            </div>
+          </div>
+        </el-amap-info-window>
+      </el-amap>
+    </div>
+  </div>
+</template>
+
+<script>
+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()
+export default {
+  name: 'Overview',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: '1' // 是否报警
+      }, // 筛选条件
+      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'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      count: 30,
+      showWellType: this.showWellType(), // 是否显示井类型下拉
+      wellTypeList: [], // 井类型列表
+      deptProps: {
+        parent: 'pid',
+        value: 'id',
+        label: 'name',
+        children: 'children'
+      }, // 权属单位树形下拉菜单
+      deptTreeList: null, // 组织树列表数据
+      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+      zoom: 12, // 地图缩放比例
+      markers: [], // 井列表标注marker
+      alarmList: [], // 报警列表
+      alarmWells: [], // 报警井列表
+      offset: [-10, -10], // 偏移量
+      alarmOffset: [-15, -30], // 偏移量
+      wellInfo: {
+        wellCode: '',
+        position: '',
+        wellTypeName: '',
+        deptName: '',
+        bfztName: '',
+        deep: ''
+      }, // 显示井详细信息气泡内容
+      alarmInfo: {
+        wellCode: '',
+        deptName: '',
+        position: '',
+        deep: '',
+        alarms: []
+      }, // 显示报警详情气泡内容
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      infoWindowClass: 'nomal-info-window',
+      deptShowTop: false, // 是否显示顶级
+      clock: null, // 计时器
+      hasAlarm: false, // 是否有报警,
+      showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
+      firstAmount: true, // 是否第一次加载井数据
+      loading: true, // 加载图标是否显示
+      aMapManager,
+      massMarks: null, // 海量点
+      showClearBtn: false // 是否显示清除查询按钮
+    }
+  },
+  watch: {
+    showAll(val) {
+      if (val) { // 显示全部
+        this.listQuery.isAlarm = '0'
+        // 先清空查询条件
+        this.listQuery.deptid = ''
+        this.listQuery.keywords = ''
+        this.listQuery.wellType = ''
+        // 如果是第一次勾选这个选项，从后台加载全部数据，否则只需要过滤对象，更新显示
+        if (this.firstAmount === true) {
+          this.getWellList()
+        } else {
+          this.filterIcon()
+        }
+      } else { // 仅显示报警
+        this.listQuery.isAlarm = '1'
+        this.filterIcon()
+      }
+    }
+  },
+  mounted() {
+    var that = this
+    that.fetchWellType()
+    setTimeout(function() {
+      that.getWellList()
+      that.refreshAlarm()
+      that.countDown()
+    }, 1000)
+  },
+  methods: {
+    // 倒计时函数，暂时不用了
+    countDown() {
+      this.clock = window.setInterval(() => {
+        this.count--
+        if (this.count < 0) { // 当倒计时小于0时清除定时器
+          this.refreshAlarm()
+          this.count = 60
+        }
+      }, 1000)
+    },
+    // 获取井类型，显示井类型下拉
+    fetchWellType() {
+      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)
+          }
+        }
+        if (this.wellTypeList.length <= 1) {
+          this.showWellType = false
+        }
+      })
+    },
+    // 数据查询
+    search(showMessage = true) {
+      const keywords = this.listQuery.keywords
+      const deptid = this.listQuery.deptid
+      const wellType = this.listQuery.wellType
+      if (keywords === '' && deptid === '' && wellType === '') {
+        this.$message.warning('查询条件不能为空')
+      } else {
+        this.showClearBtn = true
+        this.filterIcon(showMessage)
+      }
+    },
+    // 清除查询
+    clearSearch() {
+      this.listQuery.wellType = ''
+      this.listQuery.deptid = ''
+      this.listQuery.keywords = ''
+      this.filterIcon()
+      this.showClearBtn = false
+    },
+    // 过滤Marker
+    filterIcon(showMessage = false) {
+      this.currentWindow.visible = false // 弹窗隐藏
+      const hideWellIds = []// 要隐藏的井编号
+      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 = []
+      // 查询全部井，是否匹配
+      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) {
+          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)
+          }
+        }
+        if (show === false) {
+          hideWellIds.push(marker.wellId)
+        } else {
+          center = marker.position
+        }
+        marker.visible = show
+      }
+      // 如果没有找到符合要求的井，将全部查询结果隐藏
+      if (hideWellIds.length === this.markers.length) {
+        if (showMessage) {
+          this.$message.warning('查无结果')
+        }
+        for (const alarmWell of this.alarmWells) {
+          alarmWell.visible = false
+        }
+      } else {
+        // 将报警隐藏
+        for (const alarmWell of this.alarmWells) {
+          if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
+            alarmWell.visible = false
+          } else {
+            alarmWell.visible = true
+          }
+        }
+      }
+      if (center.length > 0) {
+        this.center = center
+      }
+      this.resetMassMarker()
+    },
+    // 加载海量点
+    mountMassMarker() {
+      const map = aMapManager.getMap()
+
+      // 创建样式对象
+      const style = {
+        url: 'static/images/well/pin.svg',
+        anchor: new AMap.Pixel(8, 15),
+        size: new AMap.Size(15, 15)
+      }
+      // 海量点初始化
+      this.massMarks = new AMap.MassMarks(this.markers, {
+        zIndex: 5, // 海量点图层叠加的顺序
+        zooms: [3, 20], // 在指定地图缩放级别范围内展示海量点图层
+        style: style // 设置样式对象
+      })
+      // 将海量点添加至地图实例
+      this.massMarks.setMap(map)
+      // 海量点点击事件
+      const that = this
+      this.massMarks.on('click', function(e) {
+        that.openInfoWindow(e.data.id)
+      })
+    },
+    // 过滤海量点
+    resetMassMarker() {
+      const map = aMapManager.getMap()
+      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)
+    },
+    // 获取井列表
+    getWellList() {
+      this.loading = true
+      const listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: this.listQuery.isAlarm
+      }
+      getWellList(listQuery).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          const wells = response.data
+          if (wells.length > 0) {
+            // 查询正在报警的井
+            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]]
+            }
+            this.mountMassMarker()
+          }
+        }
+      })
+    },
+    // 点击井详情气泡
+    openInfoWindow(wellId) {
+      this.currentWindow.visible = false
+      getWellInfo(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = response.data
+          this.wellInfo = {
+            wellCode: wellInfo.wellCode,
+            position: wellInfo.position,
+            wellTypeName: wellInfo.wellTypeName,
+            deptName: wellInfo.deptName,
+            bfztName: wellInfo.bfztName,
+            deep: wellInfo.deep
+          }
+          this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
+          this.$nextTick(() => {
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'info'
+          })
+        }
+      })
+    },
+    // 刷新报警列表
+    refreshAlarm() {
+      console.log('refreshAlarm')
+      this.count = 60
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          this.alarmList = response.data
+          if (this.alarmList.length > 0) {
+            this.hasAlarm = true
+          }
+          this.alarmWells = []
+          for (const alarm of response.data) {
+            // 如果在markers找到该井，更改进状态为alarm
+            // const item = this.markers.findIndex(item => {
+            //   return item.wellCode === alarm.wellCode
+            // })
+            // if (item !== -1) {
+            //   this.markers[item].wellStatus = 'alarm'
+            // }
+            this.alarmWells.push({
+              wellCode: alarm.wellCode,
+              wellId: alarm.wellId,
+              position: [alarm.lngGaode, alarm.latGaode],
+              positionInfo: alarm.position,
+              visible: true
+            })
+            // }
+          }
+        }
+      })
+    },
+    // 点击报警详情
+    openAlarmWindow(wellId, position) {
+      // 旧弹窗不显示
+      this.currentWindow.visible = false
+      this.filterIcon()
+      getWellAlarms(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = response.data
+          this.alarmInfo = {
+            wellCode: wellInfo.wellCode,
+            position: wellInfo.position,
+            deptName: wellInfo.deptName,
+            wellTypeName: wellInfo.wellTypeName,
+            alarms: wellInfo.alarmList,
+            deep: wellInfo.deep
+          }
+          this.currentWindow.position = position
+          this.center = position
+          this.$nextTick(() => {
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'alarm'
+          })
+        }
+      })
+    },
+    // 点击报警列表
+    alarmRowClick(row, column, event) {
+      console.log('alarmRowClick')
+      const wellId = row.wellId
+      for (const alarmWell of this.alarmWells) {
+        if (alarmWell.wellId === wellId) {
+          this.center = alarmWell.position
+          if (this.zoom < 16) {
+            this.zoom = 16
+          }
+          this.openAlarmWindow(alarmWell.wellId, alarmWell.position)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+// 报警列表
+.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;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !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;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  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;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 146px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width: 29px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/views/systemConfig/responsibleUser/listResponsibleUser.vue b/src/views/systemConfig/responsibleUser/listResponsibleUser.vue
index 7cc4654..15cc4de 100644
--- a/src/views/systemConfig/responsibleUser/listResponsibleUser.vue
+++ b/src/views/systemConfig/responsibleUser/listResponsibleUser.vue
@@ -111,6 +111,7 @@
       getDeptList(this.listQuery).then(response => {
         this.list = toTreeList(response.data.list, '0', false)
         this.list = this.list[0].children
+        // this.list = response.data.list
         this.listLoading = false
       })
     },

diff --git a/src/main.js b/src/main.js
index 91f9c7d..f1c60a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,8 +43,8 @@
 Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: 'b6c27a2051691fcb386543c800356e05', // key
-  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'Geolocation'], // 插件
-  uiVersion: '1.0.11', // ui组件库版本号
+  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'MarkerClusterer'], // 插件
+  // uiVersion: '1.1', // ui组件库版本号
   v: '1.4.4' // sdk版本
 })
 Vue.config.productionTip = false
diff --git a/src/utils/structure.js b/src/utils/structure.js
index b325ab0..34a6672 100644
--- a/src/utils/structure.js
+++ b/src/utils/structure.js
@@ -1,53 +1,135 @@
-import store from '../store'
+// 数据结构转换工具
+
 /**
- * 判断是否有权限
+ * 判断是否有转树的必要
+ * @param plainList 平行数据列表
+ * @param id 祖宗id
+ * @returns {boolean}  有返回true,无返回false
  */
-export function hasPermission(permission) {
-  const btns = store.getters.btns
-  return btns.some(btn => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return btn.url === permission
-  })
-}
-// 根据用户权限判断是否要显示井类型下拉框
-export function showWellType() {
-  console.log('是否显示井类型下拉')
-  const wellTypes = store.getters.wellTypes
-  if (wellTypes.length > 1) return true
-  else return false
+export function judgeTree(plainList, id = '0') {
+  if (plainList && plainList.length > 0) {
+    let flag = false // 是否需要转成树结构
+    const pid = plainList[0].pid
+    for (const item of plainList) {
+      if (item.pid !== pid) {
+        flag = true
+        break
+      }
+    }
+    return flag
+  } else { return false }
 }
 
-// 根据用户权限判断是否要显示设备类型下拉框
-export function showDeviceType() {
-  const deviceTypes = store.getters.deviceTypes
-  if (deviceTypes.length > 1) return true
-  else return false
+/**
+ * 平面数据数据转树结构
+ * @param plainList 平行数据列表
+ * @param id 祖宗id
+ * @param isSelect 是否是下拉需要顶级的树
+ * @returns {*}
+ */
+export function toTreeList(plainList, id = '0', isSelect = false) {
+  const pid = findPid(plainList)
+  if (pid.length > 1) {
+    return plainList
+  } else {
+    const tree = cleanChildren(buildTree(plainList, pid[0], isSelect))
+    return tree
+  }
 }
-// 根据用户权限判断是否要显示IP配置项，集中器不显示ip
-export function showIpConfig() {
-  const communications = store.getters.communications
-  return communications.some(communication => { // 遍历通讯方式，只要没有1(集中器)就是返回true
-    return communication !== '1'
-  })
+// 构建树
+function buildTree(plainList, id = '0', isSelect) {
+  // 递归函数
+  const fa = (parentId) => {
+    const temp = []
+    for (let i = 0; i < plainList.length; i++) {
+      const n = plainList[i]
+      const id = '' + n.id
+      const pid = '' + n.pid
+      if (pid === parentId) {
+        n.children = fa(id)
+        temp.push(n)
+      }
+    }
+    return temp
+  }
+  // 如果是下拉框需要使用的树，首先寻找顶级，将顶级也放入列表
+  if (isSelect) {
+    let flag = 1
+    const list = []
+    for (const n of plainList) {
+      const nid = '' + n.id
+      if (nid === id) {
+        n.children = fa(id)
+        flag = 0
+        list.push(n)
+        return list
+      }
+    } if (flag === 1) { // 没有找到父级，按原流程走
+      return fa(id)
+    }
+  } else {
+    return fa(id)
+  }
 }
-export function notContainConcentrator() {
-  const communications = store.getters.communications
-  return communications.some(communication => { // 遍历通讯方式，只要有1(集中器)就是返回true
-    return communication === '1'
-  })
+
+// 清除空 children项
+function cleanChildren(data) {
+  const fa = (list) => {
+    list.map((e) => {
+      if (e && e.children && e.children.length) {
+        fa(e.children)
+      } else {
+        delete e.children
+      }
+      return e
+    })
+    return list
+  }
+  return fa(data)
 }
-// 判断用户是否为运维人员或其他管理员
-export function isOperation() {
-  const roleTips = store.getters.roleTips
-  console.log(roleTips)
-  return roleTips.some(tip => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return (tip === 'operation' || tip === 'administrator')
-  })
+
+function findPid(plainList) {
+  const pidList = new Set()
+  for (const item of plainList) {
+    pidList.add(item.pid)
+  }
+  for (const item of plainList) {
+    if (pidList.has(item.id)) {
+      pidList.delete(item.id)
+    }
+  }
+  var arr = [...pidList]
+  return arr
 }
-// 判断是不是超级管理员
-export function isAdministrator() {
-  const roleTips = store.getters.roleTips
-  console.log(roleTips)
-  return roleTips.some(tip => { // 遍历btns，查找btn.url是否有匹配的permission，有则返回true，否则返回false
-    return (tip === 'administrator')
-  })
+
+// 平面数据数据转树结构
+export function getShowItem(plainList, id = '0') {
+  const expandList = []
+  const openedList = []
+  for (let i = 0; i < plainList.length; i++) {
+    if (plainList[i].open === 'true' || plainList[i].open === true) {
+      expandList.push(plainList[i].id)
+    }
+    if (plainList[i].checked === 'true' || plainList[i].checked === true) {
+      openedList.push(plainList[i].id)
+    }
+  }
+  return [expandList, openedList]
+}
+
+// 从树列表中删除指定元素
+export function deleteItem(list, des) {
+  const del = (list, item) => {
+    for (const i in list) {
+      if (list[i].id === des.id) {
+        list.splice(i, 1)
+        return
+      } else {
+        if (list[i].children && list[i].children.length > 0) {
+          del(list[i].children, des)
+        }
+      }
+    }
+  }
+  del(list, des)
 }
diff --git a/src/views/overview/overview.vue b/src/views/overview/overview.vue
index 88921aa..e6b7993 100644
--- a/src/views/overview/overview.vue
+++ b/src/views/overview/overview.vue
@@ -11,7 +11,7 @@
             <el-select v-model="listQuery.wellType" placeholder="选择窨井类型" clearable>
               <el-option
                 v-for="item in wellTypeList"
-                :key="item.value"
+                :key="'welltype_'+item.value"
                 :label="item.name"
                 :value="item.value"/>
             </el-select>
@@ -27,10 +27,16 @@
         </el-row>
       </el-form>
     </div>
-    <div class="refresh-div">
+    <!--倒计时刷新-->
+    <div v-if="refreshType=='clock'" class="refresh-div">
       <span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
     </div>
-    <div v-if="alarmWells.length>0" class="map-alarm-div">
+    <div v-if="refreshType=='websocket'" class="function-div">
+      <el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
+      <el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>
+    </div>
+    <div v-if="showAlarm==true && alarmWells.length>0" class="map-alarm-div">
       <div class="map-alarm-div-header">
         告警列表
         <span class="icon-right" @click="tableShow=!tableShow">
@@ -62,6 +68,7 @@
       <!--地图-->
       <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"-->
@@ -69,18 +76,19 @@
         <!--:offset="offset"-->
         <!--:vid="index"-->
         <!--:visible="marker.visible"-->
-        <!--&gt;-->
+        <!--:events="marker.events">-->
         <!--<div>-->
         <!--<svg-icon :icon-class="marker.icon" @click="openInfoWindow(marker.wellId)" />-->
         <!--</div>-->
         <!--</el-amap-marker>-->
+        <!--</div>-->
         <!--报警marker-->
         <el-amap-marker
           v-for="(alarm,index) in alarmWells"
-          :key="alarm.wellId"
+          :key="'alarm_'+index"
           :position="alarm.position"
           :offset="alarmOffset"
-          :visible="alarm.visible"
+          :visible="showAlarm&&alarm.visible"
           :vid="index"
         >
           <div>
@@ -137,9 +145,14 @@
   components: { DeptSelect, SelectTree },
   data() {
     return {
+      aMapManager,
+      type: 'cluster', // 加载数据方式：massMarkers或cluster
+      refreshType: 'clock', // 刷新数据方式：clock或websocket
+      showAlarm: false, // 是否显示报警
+      showAll: true, // 是否显示全部井
       listQuery: {
         keywords: '', // 关键字
-        wellType: '', // 井类型
+        wellType: '1', // 井类型
         deptid: '', // 组织机构
         isAlarm: '1' // 是否报警
       }, // 筛选条件
@@ -174,19 +187,13 @@
       count: 30,
       showWellType: this.showWellType(), // 是否显示井类型下拉
       wellTypeList: [], // 井类型列表
-      deptProps: {
-        parent: 'pid',
-        value: 'id',
-        label: 'name',
-        children: 'children'
-      }, // 权属单位树形下拉菜单
-      deptTreeList: null, // 组织树列表数据
       showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
       commonIcon: 'well-common-green', // 通用图标 绿
       commonIconAlarm: 'well-common-red', // 通用图标 红
       center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
       zoom: 12, // 地图缩放比例
       markers: [], // 井列表标注marker
+      markerRefs: [], // markers对象列表
       alarmList: [], // 报警列表
       alarmWells: [], // 报警井列表
       offset: [-10, -10], // 偏移量
@@ -215,18 +222,18 @@
       deptShowTop: false, // 是否显示顶级
       clock: null, // 计时器
       hasAlarm: false, // 是否有报警,
-      showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
       firstAmount: true, // 是否第一次加载井数据
       loading: true, // 加载图标是否显示
-      aMapManager,
       massMarks: null, // 海量点
+      mapMarkers: [],
+      clusters: [],
       showClearBtn: false // 是否显示清除查询按钮
     }
   },
   watch: {
     showAll(val) {
       if (val) { // 显示全部
-        this.listQuery.isAlarm = '0'
+        // this.listQuery.isAlarm = '0'
         // 先清空查询条件
         this.listQuery.deptid = ''
         this.listQuery.keywords = ''
@@ -238,7 +245,7 @@
           this.filterIcon()
         }
       } else { // 仅显示报警
-        this.listQuery.isAlarm = '1'
+        // this.listQuery.isAlarm = '1'
         this.filterIcon()
       }
     }
@@ -246,14 +253,19 @@
   mounted() {
     var that = this
     that.fetchWellType()
-    setTimeout(function() {
-      that.getWellList()
-      that.refreshAlarm()
-      that.countDown()
-    }, 1000)
+    if (this.showAll) {
+      this.getWellList()
+    }
+    if (this.refreshType === 'clock') {
+      setTimeout(function() {
+        // that.getWellList()
+        that.refreshAlarm()
+        that.countDown()
+      }, 1000)
+    }
   },
   methods: {
-    // 倒计时函数，暂时不用了
+    // 倒计时函数
     countDown() {
       this.clock = window.setInterval(() => {
         this.count--
@@ -306,7 +318,7 @@
       const keywords = this.listQuery.keywords
       const deptid = this.listQuery.deptid
       const wellType = this.listQuery.wellType
-      const isAlarm = this.listQuery.isAlarm
+      // const isAlarm = this.listQuery.isAlarm
       console.log('markers length:', this.markers.length)
       let center = []
       // 查询全部井，是否匹配
@@ -325,19 +337,19 @@
           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)
-          }
-        }
+        // 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)
+        //   }
+        // }
         if (show === false) {
           hideWellIds.push(marker.wellId)
         } else {
@@ -366,12 +378,15 @@
       if (center.length > 0) {
         this.center = center
       }
-      this.resetMassMarker()
+      if (this.type === 'massMarkers') {
+        this.resetMassMarker()
+      } else if (this.type === 'cluster') {
+        this.clearClusters()
+      }
     },
     // 加载海量点
     mountMassMarker() {
       const map = aMapManager.getMap()
-
       // 创建样式对象
       const style = {
         url: './static/images/well/pin.svg',
@@ -407,78 +422,169 @@
       // 将海量点添加至地图实例
       this.massMarks.setMap(map)
     },
+    // 加载聚合点
+    mountClusters() {
+      const self = this
+      // 聚合点数据应该是一组包含经纬度信息的数组。lnglat 为经纬度信息字段，weight 字段为可选数据，表示权重值，以权重高的点为中心进行聚合。
+      var points = this.markers
+      const markers = []
+      var icon = new AMap.Icon({
+        size: new AMap.Size(20, 20), // 图标尺寸
+        image: 'static/images/well/pin.svg', // Icon的图像
+        imageSize: new AMap.Size(20, 20) // 根据所设置的大小拉伸或压缩图片
+      })
+      for (var i = 0; i < points.length; i += 1) {
+        markers.push(new AMap.Marker({
+          position: points[i]['lnglat'],
+          icon: icon, // 添加 Icon 实例
+          offset: new AMap.Pixel(-10, 0)
+        }))
+      }
+      // 添加聚合组件
+      const map = aMapManager.getMap()
+      const cluster = new AMap.MarkerClusterer(map, markers, {
+        gridSize: 80,
+        renderCluserMarker: self._renderCluserMarker,
+        maxZoom: 16 })
+    },
+    // 清除聚合点
+    clearClusters() {
+
+    },
+    _renderCluserMarker(context) {
+      console.log(context)
+      const count = this.markers.length
+      const factor = Math.pow(context.count / count, 1 / 18)
+      const div = document.createElement('div')
+      const Hue = 180 - factor * 180
+      const bgColor = 'hsla(' + Hue + ',100%,50%,0.9)'
+      const fontColor = '#ffffff'
+      const borderColor = 'hsla(' + Hue + ',100%,40%,1)'
+      const shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
+      div.style.backgroundColor = bgColor
+      const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
+      div.style.width = div.style.height = size + 'px'
+      div.style.border = 'solid 1px ' + borderColor
+      div.style.borderRadius = size / 2 + 'px'
+      div.style.boxShadow = '0 0 1px ' + shadowColor
+      div.innerHTML = context.count
+      div.style.lineHeight = size + 'px'
+      div.style.color = fontColor
+      div.style.fontSize = '14px'
+      div.style.textAlign = 'center'
+      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: '', // 井类型
-        deptid: '', // 组织机构
-        isAlarm: this.listQuery.isAlarm
+        wellType: '1', // 井类型
+        deptid: '' // 组织机构
+        // isAlarm: this.listQuery.isAlarm
       }
       getWellList(listQuery).then(response => {
         this.loading = false
         if (response.code === 200) {
           const wells = response.data
+          this.firstAmount = false
           if (wells.length > 0) {
-            // 查询正在报警的井
-            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]]
+            this.markers = []
+            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'
+                // events: {
+                //   init(o) {
+                //     console.log(self)
+                //     self.markerRefs.push(o)
+                //   }
+                // }
+              })
+              centerxs.push(parseFloat(well.lngGaode))
+              centerys.push(parseFloat(well.latGaode))
             }
-            this.mountMassMarker()
+            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()
+            }
           }
         }
       })
@@ -509,8 +615,10 @@
     refreshAlarm() {
       console.log('refreshAlarm')
       this.count = 60
+      this.loading = true
       getAlarmsNow().then(response => {
         if (response.code === 200) {
+          this.loading = false
           // 获取当前报警列表
           this.alarmList = response.data
           if (this.alarmList.length > 0) {
diff --git a/src/views/overview/overview_old.vue b/src/views/overview/overview_old.vue
new file mode 100644
index 0000000..3137d98
--- /dev/null
+++ b/src/views/overview/overview_old.vue
@@ -0,0 +1,730 @@
+<template>
+  <div>
+    <!--筛选条件-->
+    <div class="map-search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item label="搜索：">
+            <el-input v-model.trim="listQuery.keywords" placeholder="窨井编号/地址" clearable/>
+          </el-form-item>
+          <el-form-item v-if="wellTypeList.length>1">
+            <el-select v-model="listQuery.wellType" placeholder="选择窨井类型" clearable>
+              <el-option
+                v-for="item in wellTypeList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <dept-select 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>
+          <el-form-item style="margin-left:10px">
+            <el-checkbox v-model="showAll">显示全部窨井</el-checkbox>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="refresh-div">
+      <span class="font-red">{{ count }}</span>  s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>
+    </div>
+    <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="alarmRowClick">
+            <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>
+      </transition>
+    </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-->
+        <!--<el-amap-marker-->
+        <!--v-for="(marker,index) in markers"-->
+        <!--:key="'well'+marker.wellId"-->
+        <!--:position="marker.position"-->
+        <!--:offset="offset"-->
+        <!--:vid="index"-->
+        <!--:visible="marker.visible"-->
+        <!--&gt;-->
+        <!--<div>-->
+        <!--<svg-icon :icon-class="marker.icon" @click="openInfoWindow(marker.wellId)" />-->
+        <!--</div>-->
+        <!--</el-amap-marker>-->
+        <!--报警marker-->
+        <el-amap-marker
+          v-for="(alarm,index) in alarmWells"
+          :key="alarm.wellId"
+          :position="alarm.position"
+          :offset="alarmOffset"
+          :visible="alarm.visible"
+          :vid="index"
+        >
+          <div>
+            <svg-icon icon-class="alarm-well" class="alarm-icon" @click="openAlarmWindow(alarm.wellId,alarm.position)" />
+          </div>
+        </el-amap-marker>
+        <!--正常信息弹窗-->
+        <el-amap-info-window
+          v-if="wellInfo"
+          :position="currentWindow.position"
+          :visible="currentWindow.visible"
+          :class="infoWindowClass"
+        >
+          <div v-if="currentWindow.windowType=='info'?true:false" class="info-window">
+            <div class="info-header">{{ wellInfo.wellCode }}</div>
+            <div class="info-body">
+              <div>井类型：{{ wellInfo.wellTypeName }}</div>
+              <div>权属单位：{{ wellInfo.deptName }}</div>
+              <div>详细地址：{{ wellInfo.position }}</div>
+            </div>
+          </div>
+          <div v-if="currentWindow.windowType=='alarm'?true:false" class="alarm-window">
+            <div class="alarm-header">
+              <svg-icon icon-class="alarm-red" />
+              {{ alarmInfo.wellCode }}
+            </div>
+            <div class="alarm-body">
+              <div v-for="alarm in alarmInfo.alarms" :key="alarm.id">
+                <div>告警原因：<span class="alarm-red">{{ alarm.alarmContent }}</span></div>
+                <div>设备编号：<span>{{ alarm.devcode }}</span></div>
+              </div>
+              <el-divider/>
+              <div>井类型：{{ alarmInfo.wellTypeName }}</div>
+              <div>权属单位：{{ alarmInfo.deptName }}</div>
+              <div>详细地址：{{ alarmInfo.position }}</div>
+            </div>
+          </div>
+        </el-amap-info-window>
+      </el-amap>
+    </div>
+  </div>
+</template>
+
+<script>
+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()
+export default {
+  name: 'Overview',
+  components: { DeptSelect, SelectTree },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: '1' // 是否报警
+      }, // 筛选条件
+      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'
+        }
+      ], // 告警列表显示列
+      tableShow: true, // 是否显示告警列表
+      tableIcon: 'el-icon-arrow-up',
+      count: 30,
+      showWellType: this.showWellType(), // 是否显示井类型下拉
+      wellTypeList: [], // 井类型列表
+      deptProps: {
+        parent: 'pid',
+        value: 'id',
+        label: 'name',
+        children: 'children'
+      }, // 权属单位树形下拉菜单
+      deptTreeList: null, // 组织树列表数据
+      showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+      zoom: 12, // 地图缩放比例
+      markers: [], // 井列表标注marker
+      alarmList: [], // 报警列表
+      alarmWells: [], // 报警井列表
+      offset: [-10, -10], // 偏移量
+      alarmOffset: [-15, -30], // 偏移量
+      wellInfo: {
+        wellCode: '',
+        position: '',
+        wellTypeName: '',
+        deptName: '',
+        bfztName: '',
+        deep: ''
+      }, // 显示井详细信息气泡内容
+      alarmInfo: {
+        wellCode: '',
+        deptName: '',
+        position: '',
+        deep: '',
+        alarms: []
+      }, // 显示报警详情气泡内容
+      currentWindow: {
+        visible: false, // 窗体显示与否
+        position: [this.$store.getters.lng, this.$store.getters.lat],
+        windowType: 'info' // 窗体类型：详情info或报警alarm
+      }, // 当前窗体属性
+      infoWindowClass: 'nomal-info-window',
+      deptShowTop: false, // 是否显示顶级
+      clock: null, // 计时器
+      hasAlarm: false, // 是否有报警,
+      showAll: false, // 是否显示全部井（包含报警和不报警，为false时只显示报警）
+      firstAmount: true, // 是否第一次加载井数据
+      loading: true, // 加载图标是否显示
+      aMapManager,
+      massMarks: null, // 海量点
+      showClearBtn: false // 是否显示清除查询按钮
+    }
+  },
+  watch: {
+    showAll(val) {
+      if (val) { // 显示全部
+        this.listQuery.isAlarm = '0'
+        // 先清空查询条件
+        this.listQuery.deptid = ''
+        this.listQuery.keywords = ''
+        this.listQuery.wellType = ''
+        // 如果是第一次勾选这个选项，从后台加载全部数据，否则只需要过滤对象，更新显示
+        if (this.firstAmount === true) {
+          this.getWellList()
+        } else {
+          this.filterIcon()
+        }
+      } else { // 仅显示报警
+        this.listQuery.isAlarm = '1'
+        this.filterIcon()
+      }
+    }
+  },
+  mounted() {
+    var that = this
+    that.fetchWellType()
+    setTimeout(function() {
+      that.getWellList()
+      that.refreshAlarm()
+      that.countDown()
+    }, 1000)
+  },
+  methods: {
+    // 倒计时函数，暂时不用了
+    countDown() {
+      this.clock = window.setInterval(() => {
+        this.count--
+        if (this.count < 0) { // 当倒计时小于0时清除定时器
+          this.refreshAlarm()
+          this.count = 60
+        }
+      }, 1000)
+    },
+    // 获取井类型，显示井类型下拉
+    fetchWellType() {
+      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)
+          }
+        }
+        if (this.wellTypeList.length <= 1) {
+          this.showWellType = false
+        }
+      })
+    },
+    // 数据查询
+    search(showMessage = true) {
+      const keywords = this.listQuery.keywords
+      const deptid = this.listQuery.deptid
+      const wellType = this.listQuery.wellType
+      if (keywords === '' && deptid === '' && wellType === '') {
+        this.$message.warning('查询条件不能为空')
+      } else {
+        this.showClearBtn = true
+        this.filterIcon(showMessage)
+      }
+    },
+    // 清除查询
+    clearSearch() {
+      this.listQuery.wellType = ''
+      this.listQuery.deptid = ''
+      this.listQuery.keywords = ''
+      this.filterIcon()
+      this.showClearBtn = false
+    },
+    // 过滤Marker
+    filterIcon(showMessage = false) {
+      this.currentWindow.visible = false // 弹窗隐藏
+      const hideWellIds = []// 要隐藏的井编号
+      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 = []
+      // 查询全部井，是否匹配
+      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) {
+          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)
+          }
+        }
+        if (show === false) {
+          hideWellIds.push(marker.wellId)
+        } else {
+          center = marker.position
+        }
+        marker.visible = show
+      }
+      // 如果没有找到符合要求的井，将全部查询结果隐藏
+      if (hideWellIds.length === this.markers.length) {
+        if (showMessage) {
+          this.$message.warning('查无结果')
+        }
+        for (const alarmWell of this.alarmWells) {
+          alarmWell.visible = false
+        }
+      } else {
+        // 将报警隐藏
+        for (const alarmWell of this.alarmWells) {
+          if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
+            alarmWell.visible = false
+          } else {
+            alarmWell.visible = true
+          }
+        }
+      }
+      if (center.length > 0) {
+        this.center = center
+      }
+      this.resetMassMarker()
+    },
+    // 加载海量点
+    mountMassMarker() {
+      const map = aMapManager.getMap()
+
+      // 创建样式对象
+      const style = {
+        url: 'static/images/well/pin.svg',
+        anchor: new AMap.Pixel(8, 15),
+        size: new AMap.Size(15, 15)
+      }
+      // 海量点初始化
+      this.massMarks = new AMap.MassMarks(this.markers, {
+        zIndex: 5, // 海量点图层叠加的顺序
+        zooms: [3, 20], // 在指定地图缩放级别范围内展示海量点图层
+        style: style // 设置样式对象
+      })
+      // 将海量点添加至地图实例
+      this.massMarks.setMap(map)
+      // 海量点点击事件
+      const that = this
+      this.massMarks.on('click', function(e) {
+        that.openInfoWindow(e.data.id)
+      })
+    },
+    // 过滤海量点
+    resetMassMarker() {
+      const map = aMapManager.getMap()
+      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)
+    },
+    // 获取井列表
+    getWellList() {
+      this.loading = true
+      const listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '', // 组织机构
+        isAlarm: this.listQuery.isAlarm
+      }
+      getWellList(listQuery).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          const wells = response.data
+          if (wells.length > 0) {
+            // 查询正在报警的井
+            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]]
+            }
+            this.mountMassMarker()
+          }
+        }
+      })
+    },
+    // 点击井详情气泡
+    openInfoWindow(wellId) {
+      this.currentWindow.visible = false
+      getWellInfo(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = response.data
+          this.wellInfo = {
+            wellCode: wellInfo.wellCode,
+            position: wellInfo.position,
+            wellTypeName: wellInfo.wellTypeName,
+            deptName: wellInfo.deptName,
+            bfztName: wellInfo.bfztName,
+            deep: wellInfo.deep
+          }
+          this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
+          this.$nextTick(() => {
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'info'
+          })
+        }
+      })
+    },
+    // 刷新报警列表
+    refreshAlarm() {
+      console.log('refreshAlarm')
+      this.count = 60
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          // 获取当前报警列表
+          this.alarmList = response.data
+          if (this.alarmList.length > 0) {
+            this.hasAlarm = true
+          }
+          this.alarmWells = []
+          for (const alarm of response.data) {
+            // 如果在markers找到该井，更改进状态为alarm
+            // const item = this.markers.findIndex(item => {
+            //   return item.wellCode === alarm.wellCode
+            // })
+            // if (item !== -1) {
+            //   this.markers[item].wellStatus = 'alarm'
+            // }
+            this.alarmWells.push({
+              wellCode: alarm.wellCode,
+              wellId: alarm.wellId,
+              position: [alarm.lngGaode, alarm.latGaode],
+              positionInfo: alarm.position,
+              visible: true
+            })
+            // }
+          }
+        }
+      })
+    },
+    // 点击报警详情
+    openAlarmWindow(wellId, position) {
+      // 旧弹窗不显示
+      this.currentWindow.visible = false
+      this.filterIcon()
+      getWellAlarms(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = response.data
+          this.alarmInfo = {
+            wellCode: wellInfo.wellCode,
+            position: wellInfo.position,
+            deptName: wellInfo.deptName,
+            wellTypeName: wellInfo.wellTypeName,
+            alarms: wellInfo.alarmList,
+            deep: wellInfo.deep
+          }
+          this.currentWindow.position = position
+          this.center = position
+          this.$nextTick(() => {
+            this.currentWindow.visible = true
+            this.currentWindow.windowType = 'alarm'
+          })
+        }
+      })
+    },
+    // 点击报警列表
+    alarmRowClick(row, column, event) {
+      console.log('alarmRowClick')
+      const wellId = row.wellId
+      for (const alarmWell of this.alarmWells) {
+        if (alarmWell.wellId === wellId) {
+          this.center = alarmWell.position
+          if (this.zoom < 16) {
+            this.zoom = 16
+          }
+          this.openAlarmWindow(alarmWell.wellId, alarmWell.position)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+// 查询框
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  padding: 5px 20px;
+  background-color: rgba(244, 244, 244, 0.9);
+  /*left: 90px;*/
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+}
+// 报警列表
+.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;
+      cursor: pointer;
+    }
+  }
+  .el-scrollbar {
+    /*height: 200px;*/
+    width: 100%;
+  }
+  .moredatascollor{
+    height: 200px;
+  }
+  .el-scrollbar__wrap {
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 0px !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;
+  }
+}
+// 刷新框
+.refresh-div{
+  position: absolute;
+  right: 10px;
+  top: 7px;
+  z-index: 100;
+  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;
+  }
+}
+// 地图
+.overview-map-container{
+  width: 100%;
+  padding: 5px;
+  .map-demo{
+    width: 100%;
+    height: calc(100vh - 146px);
+    .svg-icon{
+      width: 20px;
+      height: 20px;
+    }
+    .alarm-icon{
+      width: 29px;
+      height: 30px;
+    }
+    .nomal-info-window{
+      background-color: pink;
+    }
+    .info-window{
+      max-width: 250px;
+      /*background-color: lightcyan;*/
+      .info-header{
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        font-weight: bold;
+        /*background-color: #eaf4ff;*/
+      }
+      .info-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+      }
+    }
+    .alarm-window{
+      max-width: 250px;
+      /*background-color: #ffeaf1;*/
+      .alarm-header {
+        padding: 10px 10px 5px 10px;
+        line-height: 30px;
+        color: red;
+        font-weight: bold;
+        /*background-color: #ffecec;*/
+      }
+      .alarm-body{
+        padding: 5px 10px 10px 10px;
+        line-height: 23px;
+        font-size: 14px;
+        .alarm-red{
+          color: #ff0000;
+        }
+      }
+    }
+  }
+}
+  .el-divider--horizontal{
+    margin: 5px 0;
+  }
+</style>
diff --git a/src/views/systemConfig/responsibleUser/listResponsibleUser.vue b/src/views/systemConfig/responsibleUser/listResponsibleUser.vue
index 7cc4654..15cc4de 100644
--- a/src/views/systemConfig/responsibleUser/listResponsibleUser.vue
+++ b/src/views/systemConfig/responsibleUser/listResponsibleUser.vue
@@ -111,6 +111,7 @@
       getDeptList(this.listQuery).then(response => {
         this.list = toTreeList(response.data.list, '0', false)
         this.list = this.list[0].children
+        // this.list = response.data.list
         this.listLoading = false
       })
     },
diff --git a/static/images/well/cluster_yellow.png b/static/images/well/cluster_yellow.png
new file mode 100644
index 0000000..b999cbc
--- /dev/null
+++ b/static/images/well/cluster_yellow.png
Binary files differ