diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/infoWindowWell.vue b/src/views/overview/components/infoWindowWell.vue
new file mode 100644
index 0000000..b18edf3
--- /dev/null
+++ b/src/views/overview/components/infoWindowWell.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 井信息弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-13
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'WellInfoWindow',
+  props: {
+    wellInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-window{
+  max-width: 260px;
+  min-width: 200px;
+  .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;
+  }
+}
+</style>

diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/infoWindowWell.vue b/src/views/overview/components/infoWindowWell.vue
new file mode 100644
index 0000000..b18edf3
--- /dev/null
+++ b/src/views/overview/components/infoWindowWell.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 井信息弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-13
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'WellInfoWindow',
+  props: {
+    wellInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-window{
+  max-width: 260px;
+  min-width: 200px;
+  .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;
+  }
+}
+</style>
diff --git a/src/views/overview/components/layerChooseWindow.vue b/src/views/overview/components/layerChooseWindow.vue
deleted file mode 100644
index fbffa65..0000000
--- a/src/views/overview/components/layerChooseWindow.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
- * @Description: 图层选择窗口
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
-    <div v-show="show" class="layer-choose-window">
-      <div class="window-title">
-        <div>图层</div>
-        <i class="el-icon-close close-icon" @click="close" />
-      </div>
-      <div class="window-body">
-        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
-          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
-        </el-scrollbar>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'LayerChooseWindow',
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    },
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    checked: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    clickItem() {
-      const checked = this.$refs.tree.getCheckedKeys()
-      console.log(checked)
-      this.$emit('checked-change', checked)
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.layer-choose-window{
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  width: 200px;
-  background-color: rgba(255,255,255,0.9);
-  .window-body{
-
-  }
-}
-.window-title{
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 10px;
-  .close-icon:hover{
-    cursor: pointer;
-    color: #36a3f7;
-  }
-}
-</style>

diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/infoWindowWell.vue b/src/views/overview/components/infoWindowWell.vue
new file mode 100644
index 0000000..b18edf3
--- /dev/null
+++ b/src/views/overview/components/infoWindowWell.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 井信息弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-13
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'WellInfoWindow',
+  props: {
+    wellInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-window{
+  max-width: 260px;
+  min-width: 200px;
+  .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;
+  }
+}
+</style>
diff --git a/src/views/overview/components/layerChooseWindow.vue b/src/views/overview/components/layerChooseWindow.vue
deleted file mode 100644
index fbffa65..0000000
--- a/src/views/overview/components/layerChooseWindow.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
- * @Description: 图层选择窗口
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
-    <div v-show="show" class="layer-choose-window">
-      <div class="window-title">
-        <div>图层</div>
-        <i class="el-icon-close close-icon" @click="close" />
-      </div>
-      <div class="window-body">
-        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
-          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
-        </el-scrollbar>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'LayerChooseWindow',
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    },
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    checked: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    clickItem() {
-      const checked = this.$refs.tree.getCheckedKeys()
-      console.log(checked)
-      this.$emit('checked-change', checked)
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.layer-choose-window{
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  width: 200px;
-  background-color: rgba(255,255,255,0.9);
-  .window-body{
-
-  }
-}
-.window-title{
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 10px;
-  .close-icon:hover{
-    cursor: pointer;
-    color: #36a3f7;
-  }
-}
-</style>
diff --git a/src/views/overview/components/popupDataFilter.vue b/src/views/overview/components/popupDataFilter.vue
new file mode 100644
index 0000000..db2bdf8
--- /dev/null
+++ b/src/views/overview/components/popupDataFilter.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Description: 数据筛选菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>数据筛选</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="listQuery" label-position="top" size="small">
+            <el-form-item label="所属组织机构">
+              <dept-select style="width:100%" :need-top="false" placeholder="请选择组织机构" clearable />
+            </el-form-item>
+            <el-form-item v-if="wellTypeList.length>1" label="井类型">
+              <el-select v-model="listQuery.wellType" placeholder="选择井类型" style="width:100%" clearable>
+                <el-option
+                  v-for="item in wellTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="filter">
+                数据筛选
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="clearSelected">
+                清除筛选
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+export default {
+  name: 'PopupDataFilter',
+  components: { DeptSelect },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    wellTypeList: {
+      type: Array,
+      required: true
+    } // 井类型列表
+  },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 执行过滤
+    filter(force = false) {
+      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '' && !force) {
+        this.$message.warning('条件不能为空')
+      } else {
+        this.$emit('filter', this.listQuery, true)
+      }
+    },
+    // 清除过滤
+    clearSelected() {
+      this.listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      }
+      this.$emit('filter', this.listQuery, false)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>

diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/infoWindowWell.vue b/src/views/overview/components/infoWindowWell.vue
new file mode 100644
index 0000000..b18edf3
--- /dev/null
+++ b/src/views/overview/components/infoWindowWell.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 井信息弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-13
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'WellInfoWindow',
+  props: {
+    wellInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-window{
+  max-width: 260px;
+  min-width: 200px;
+  .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;
+  }
+}
+</style>
diff --git a/src/views/overview/components/layerChooseWindow.vue b/src/views/overview/components/layerChooseWindow.vue
deleted file mode 100644
index fbffa65..0000000
--- a/src/views/overview/components/layerChooseWindow.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
- * @Description: 图层选择窗口
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
-    <div v-show="show" class="layer-choose-window">
-      <div class="window-title">
-        <div>图层</div>
-        <i class="el-icon-close close-icon" @click="close" />
-      </div>
-      <div class="window-body">
-        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
-          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
-        </el-scrollbar>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'LayerChooseWindow',
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    },
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    checked: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    clickItem() {
-      const checked = this.$refs.tree.getCheckedKeys()
-      console.log(checked)
-      this.$emit('checked-change', checked)
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.layer-choose-window{
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  width: 200px;
-  background-color: rgba(255,255,255,0.9);
-  .window-body{
-
-  }
-}
-.window-title{
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 10px;
-  .close-icon:hover{
-    cursor: pointer;
-    color: #36a3f7;
-  }
-}
-</style>
diff --git a/src/views/overview/components/popupDataFilter.vue b/src/views/overview/components/popupDataFilter.vue
new file mode 100644
index 0000000..db2bdf8
--- /dev/null
+++ b/src/views/overview/components/popupDataFilter.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Description: 数据筛选菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>数据筛选</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="listQuery" label-position="top" size="small">
+            <el-form-item label="所属组织机构">
+              <dept-select style="width:100%" :need-top="false" placeholder="请选择组织机构" clearable />
+            </el-form-item>
+            <el-form-item v-if="wellTypeList.length>1" label="井类型">
+              <el-select v-model="listQuery.wellType" placeholder="选择井类型" style="width:100%" clearable>
+                <el-option
+                  v-for="item in wellTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="filter">
+                数据筛选
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="clearSelected">
+                清除筛选
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+export default {
+  name: 'PopupDataFilter',
+  components: { DeptSelect },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    wellTypeList: {
+      type: Array,
+      required: true
+    } // 井类型列表
+  },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 执行过滤
+    filter(force = false) {
+      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '' && !force) {
+        this.$message.warning('条件不能为空')
+      } else {
+        this.$emit('filter', this.listQuery, true)
+      }
+    },
+    // 清除过滤
+    clearSelected() {
+      this.listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      }
+      this.$emit('filter', this.listQuery, false)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLayerChoose.vue b/src/views/overview/components/popupLayerChoose.vue
new file mode 100644
index 0000000..bc90e36
--- /dev/null
+++ b/src/views/overview/components/popupLayerChoose.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Description: 图层选择窗口
+ * @Author: 王晓颖
+ * @Date: 2022-05-17
+ -->
+<template>
+  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+    <div v-show="show" class="layer-choose-window">
+      <div class="window-title">
+        <div>图层</div>
+        <i class="el-icon-close close-icon" @click="close" />
+      </div>
+      <div class="window-body">
+        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
+          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
+        </el-scrollbar>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'LayerChooseWindow',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否显示窗口
+    layers: {
+      type: Array,
+      default: () => []
+    }, // 图层列表，树结构，[{id:'',name:'', children:[...]},...]
+    checked: {
+      type: Array,
+      default: () => []
+    } // 选中图层，id的列表
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      } // 树结构默认参数
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 复选框点击事件，将所有选中id传递给父组件
+    clickItem() {
+      const checked = this.$refs.tree.getCheckedKeys()
+      this.$emit('checked-change', checked)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 200px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>

diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/infoWindowWell.vue b/src/views/overview/components/infoWindowWell.vue
new file mode 100644
index 0000000..b18edf3
--- /dev/null
+++ b/src/views/overview/components/infoWindowWell.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 井信息弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-13
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'WellInfoWindow',
+  props: {
+    wellInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-window{
+  max-width: 260px;
+  min-width: 200px;
+  .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;
+  }
+}
+</style>
diff --git a/src/views/overview/components/layerChooseWindow.vue b/src/views/overview/components/layerChooseWindow.vue
deleted file mode 100644
index fbffa65..0000000
--- a/src/views/overview/components/layerChooseWindow.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
- * @Description: 图层选择窗口
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
-    <div v-show="show" class="layer-choose-window">
-      <div class="window-title">
-        <div>图层</div>
-        <i class="el-icon-close close-icon" @click="close" />
-      </div>
-      <div class="window-body">
-        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
-          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
-        </el-scrollbar>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'LayerChooseWindow',
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    },
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    checked: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    clickItem() {
-      const checked = this.$refs.tree.getCheckedKeys()
-      console.log(checked)
-      this.$emit('checked-change', checked)
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.layer-choose-window{
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  width: 200px;
-  background-color: rgba(255,255,255,0.9);
-  .window-body{
-
-  }
-}
-.window-title{
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 10px;
-  .close-icon:hover{
-    cursor: pointer;
-    color: #36a3f7;
-  }
-}
-</style>
diff --git a/src/views/overview/components/popupDataFilter.vue b/src/views/overview/components/popupDataFilter.vue
new file mode 100644
index 0000000..db2bdf8
--- /dev/null
+++ b/src/views/overview/components/popupDataFilter.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Description: 数据筛选菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>数据筛选</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="listQuery" label-position="top" size="small">
+            <el-form-item label="所属组织机构">
+              <dept-select style="width:100%" :need-top="false" placeholder="请选择组织机构" clearable />
+            </el-form-item>
+            <el-form-item v-if="wellTypeList.length>1" label="井类型">
+              <el-select v-model="listQuery.wellType" placeholder="选择井类型" style="width:100%" clearable>
+                <el-option
+                  v-for="item in wellTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="filter">
+                数据筛选
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="clearSelected">
+                清除筛选
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+export default {
+  name: 'PopupDataFilter',
+  components: { DeptSelect },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    wellTypeList: {
+      type: Array,
+      required: true
+    } // 井类型列表
+  },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 执行过滤
+    filter(force = false) {
+      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '' && !force) {
+        this.$message.warning('条件不能为空')
+      } else {
+        this.$emit('filter', this.listQuery, true)
+      }
+    },
+    // 清除过滤
+    clearSelected() {
+      this.listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      }
+      this.$emit('filter', this.listQuery, false)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLayerChoose.vue b/src/views/overview/components/popupLayerChoose.vue
new file mode 100644
index 0000000..bc90e36
--- /dev/null
+++ b/src/views/overview/components/popupLayerChoose.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Description: 图层选择窗口
+ * @Author: 王晓颖
+ * @Date: 2022-05-17
+ -->
+<template>
+  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+    <div v-show="show" class="layer-choose-window">
+      <div class="window-title">
+        <div>图层</div>
+        <i class="el-icon-close close-icon" @click="close" />
+      </div>
+      <div class="window-body">
+        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
+          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
+        </el-scrollbar>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'LayerChooseWindow',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否显示窗口
+    layers: {
+      type: Array,
+      default: () => []
+    }, // 图层列表，树结构，[{id:'',name:'', children:[...]},...]
+    checked: {
+      type: Array,
+      default: () => []
+    } // 选中图层，id的列表
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      } // 树结构默认参数
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 复选框点击事件，将所有选中id传递给父组件
+    clickItem() {
+      const checked = this.$refs.tree.getCheckedKeys()
+      this.$emit('checked-change', checked)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 200px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLocation.vue b/src/views/overview/components/popupLocation.vue
new file mode 100644
index 0000000..8a8e836
--- /dev/null
+++ b/src/views/overview/components/popupLocation.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Description: 坐标定位菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>坐标定位</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="query" size="small">
+            <el-form-item label="经度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <el-form-item label="纬度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="picker">
+                图上拾取
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="search">
+                坐标定位
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PopupLocation',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    } // 是否显示
+  },
+  data() {
+    return {
+      query: {
+        lng: '', // 经度
+        lat: '', // 纬度
+        deep: '' // 高程
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 坐标定位
+    search() {
+      const position = [this.query.lng, this.query.lat]
+      this.$emit('search', position)
+    },
+    // 图上拾取
+    picker() {
+      this.$emit('picker')
+    },
+    // 设置拾取结果, 提供给父组件调用
+    setQuery(location) {
+      this.query.lng = location[0] ? location[0] : ''
+      this.query.lat = location[1] ? location[1] : ''
+      this.query.deep = location[2] ? location[2] : ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>

diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/infoWindowWell.vue b/src/views/overview/components/infoWindowWell.vue
new file mode 100644
index 0000000..b18edf3
--- /dev/null
+++ b/src/views/overview/components/infoWindowWell.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 井信息弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-13
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'WellInfoWindow',
+  props: {
+    wellInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-window{
+  max-width: 260px;
+  min-width: 200px;
+  .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;
+  }
+}
+</style>
diff --git a/src/views/overview/components/layerChooseWindow.vue b/src/views/overview/components/layerChooseWindow.vue
deleted file mode 100644
index fbffa65..0000000
--- a/src/views/overview/components/layerChooseWindow.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
- * @Description: 图层选择窗口
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
-    <div v-show="show" class="layer-choose-window">
-      <div class="window-title">
-        <div>图层</div>
-        <i class="el-icon-close close-icon" @click="close" />
-      </div>
-      <div class="window-body">
-        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
-          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
-        </el-scrollbar>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'LayerChooseWindow',
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    },
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    checked: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    clickItem() {
-      const checked = this.$refs.tree.getCheckedKeys()
-      console.log(checked)
-      this.$emit('checked-change', checked)
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.layer-choose-window{
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  width: 200px;
-  background-color: rgba(255,255,255,0.9);
-  .window-body{
-
-  }
-}
-.window-title{
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 10px;
-  .close-icon:hover{
-    cursor: pointer;
-    color: #36a3f7;
-  }
-}
-</style>
diff --git a/src/views/overview/components/popupDataFilter.vue b/src/views/overview/components/popupDataFilter.vue
new file mode 100644
index 0000000..db2bdf8
--- /dev/null
+++ b/src/views/overview/components/popupDataFilter.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Description: 数据筛选菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>数据筛选</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="listQuery" label-position="top" size="small">
+            <el-form-item label="所属组织机构">
+              <dept-select style="width:100%" :need-top="false" placeholder="请选择组织机构" clearable />
+            </el-form-item>
+            <el-form-item v-if="wellTypeList.length>1" label="井类型">
+              <el-select v-model="listQuery.wellType" placeholder="选择井类型" style="width:100%" clearable>
+                <el-option
+                  v-for="item in wellTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="filter">
+                数据筛选
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="clearSelected">
+                清除筛选
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+export default {
+  name: 'PopupDataFilter',
+  components: { DeptSelect },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    wellTypeList: {
+      type: Array,
+      required: true
+    } // 井类型列表
+  },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 执行过滤
+    filter(force = false) {
+      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '' && !force) {
+        this.$message.warning('条件不能为空')
+      } else {
+        this.$emit('filter', this.listQuery, true)
+      }
+    },
+    // 清除过滤
+    clearSelected() {
+      this.listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      }
+      this.$emit('filter', this.listQuery, false)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLayerChoose.vue b/src/views/overview/components/popupLayerChoose.vue
new file mode 100644
index 0000000..bc90e36
--- /dev/null
+++ b/src/views/overview/components/popupLayerChoose.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Description: 图层选择窗口
+ * @Author: 王晓颖
+ * @Date: 2022-05-17
+ -->
+<template>
+  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+    <div v-show="show" class="layer-choose-window">
+      <div class="window-title">
+        <div>图层</div>
+        <i class="el-icon-close close-icon" @click="close" />
+      </div>
+      <div class="window-body">
+        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
+          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
+        </el-scrollbar>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'LayerChooseWindow',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否显示窗口
+    layers: {
+      type: Array,
+      default: () => []
+    }, // 图层列表，树结构，[{id:'',name:'', children:[...]},...]
+    checked: {
+      type: Array,
+      default: () => []
+    } // 选中图层，id的列表
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      } // 树结构默认参数
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 复选框点击事件，将所有选中id传递给父组件
+    clickItem() {
+      const checked = this.$refs.tree.getCheckedKeys()
+      this.$emit('checked-change', checked)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 200px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLocation.vue b/src/views/overview/components/popupLocation.vue
new file mode 100644
index 0000000..8a8e836
--- /dev/null
+++ b/src/views/overview/components/popupLocation.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Description: 坐标定位菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>坐标定位</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="query" size="small">
+            <el-form-item label="经度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <el-form-item label="纬度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="picker">
+                图上拾取
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="search">
+                坐标定位
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PopupLocation',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    } // 是否显示
+  },
+  data() {
+    return {
+      query: {
+        lng: '', // 经度
+        lat: '', // 纬度
+        deep: '' // 高程
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 坐标定位
+    search() {
+      const position = [this.query.lng, this.query.lat]
+      this.$emit('search', position)
+    },
+    // 图上拾取
+    picker() {
+      this.$emit('picker')
+    },
+    // 设置拾取结果, 提供给父组件调用
+    setQuery(location) {
+      this.query.lng = location[0] ? location[0] : ''
+      this.query.lat = location[1] ? location[1] : ''
+      this.query.deep = location[2] ? location[2] : ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/searchComp.vue b/src/views/overview/components/searchComp.vue
new file mode 100644
index 0000000..d6f138a
--- /dev/null
+++ b/src/views/overview/components/searchComp.vue
@@ -0,0 +1,109 @@
+<!--
+ * @Description: 搜索组件
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <!--搜索条件-->
+    <div class="map-search-div">
+      <el-input v-model.trim="keywords" :placeholder="placeholder" clearable>
+        <el-button slot="append" class="filter-item" type="primary" icon="el-icon-search" @click="search">
+          搜索
+        </el-button>
+      </el-input>
+    </div>
+    <!--搜索结果弹出框-->
+    <el-popover
+      v-show="list.length>0"
+      v-model="resultShow"
+      placement="bottom-end"
+      width="290"
+      trigger="click"
+    >
+      <el-card slot="reference" shadow="always" class="selectAnswer">
+        共找到 {{ list.length }} 个符合条件的{{ name }}
+      </el-card>
+      <div v-show="list.length>0">
+        <search-item v-for="(data,index) in currentPageList" :key="'search-item-'+index" :data="data" :index="index" @click="clickItem" />
+      </div>
+      <div class="clear" />
+      <el-pagination
+        :total="list.length"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :hide-on-single-page="true"
+        small
+        layout="prev, pager, next"
+        @current-change="changePage"
+      />
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchComp',
+  props: {
+    name: {
+      type: String,
+      default: '井'
+    }, // 结果展示类型
+    placeholder: {
+      type: String,
+      default: '关键字'
+    },
+    list: {
+      type: Array,
+      default: () => []
+    } // 结果列表
+  },
+  data() {
+    return {
+      resultShow: false, // 是否显示查询结果
+      keywords: '', // 查询条件
+      currentPageList: [], // 当前页数据
+      pageSize: 5, // 页面容量
+      pageNum: 1 // 页码
+    }
+  },
+  watch: {
+    list(val) { // 监控list的数量，为0时不显示
+      if (val && val.length > 0) {
+        this.resultShow = true
+        this.changePage(1)
+      } else {
+        this.resultShow = false
+        this.currentPageList = []
+      }
+    }
+  },
+  methods: {
+    // 点击搜索按钮
+    search() {
+      this.$emit('search', this.keywords)
+    },
+    // 切换页码
+    changePage(val) {
+      const offset = val
+      const start = (offset - 1) * this.pageSize
+      const end = start + this.pageSize
+      this.currentPageList = this.list.slice(start, end)
+      this.$emit('change-page', this.currentPageList)
+    },
+    // 点击结果项
+    clickItem(item) {
+      this.$emit('click-item', item)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  left: 30px;
+  top: 5px;
+}
+</style>

diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/infoWindowWell.vue b/src/views/overview/components/infoWindowWell.vue
new file mode 100644
index 0000000..b18edf3
--- /dev/null
+++ b/src/views/overview/components/infoWindowWell.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 井信息弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-13
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'WellInfoWindow',
+  props: {
+    wellInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-window{
+  max-width: 260px;
+  min-width: 200px;
+  .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;
+  }
+}
+</style>
diff --git a/src/views/overview/components/layerChooseWindow.vue b/src/views/overview/components/layerChooseWindow.vue
deleted file mode 100644
index fbffa65..0000000
--- a/src/views/overview/components/layerChooseWindow.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
- * @Description: 图层选择窗口
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
-    <div v-show="show" class="layer-choose-window">
-      <div class="window-title">
-        <div>图层</div>
-        <i class="el-icon-close close-icon" @click="close" />
-      </div>
-      <div class="window-body">
-        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
-          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
-        </el-scrollbar>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'LayerChooseWindow',
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    },
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    checked: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    clickItem() {
-      const checked = this.$refs.tree.getCheckedKeys()
-      console.log(checked)
-      this.$emit('checked-change', checked)
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.layer-choose-window{
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  width: 200px;
-  background-color: rgba(255,255,255,0.9);
-  .window-body{
-
-  }
-}
-.window-title{
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 10px;
-  .close-icon:hover{
-    cursor: pointer;
-    color: #36a3f7;
-  }
-}
-</style>
diff --git a/src/views/overview/components/popupDataFilter.vue b/src/views/overview/components/popupDataFilter.vue
new file mode 100644
index 0000000..db2bdf8
--- /dev/null
+++ b/src/views/overview/components/popupDataFilter.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Description: 数据筛选菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>数据筛选</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="listQuery" label-position="top" size="small">
+            <el-form-item label="所属组织机构">
+              <dept-select style="width:100%" :need-top="false" placeholder="请选择组织机构" clearable />
+            </el-form-item>
+            <el-form-item v-if="wellTypeList.length>1" label="井类型">
+              <el-select v-model="listQuery.wellType" placeholder="选择井类型" style="width:100%" clearable>
+                <el-option
+                  v-for="item in wellTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="filter">
+                数据筛选
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="clearSelected">
+                清除筛选
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+export default {
+  name: 'PopupDataFilter',
+  components: { DeptSelect },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    wellTypeList: {
+      type: Array,
+      required: true
+    } // 井类型列表
+  },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 执行过滤
+    filter(force = false) {
+      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '' && !force) {
+        this.$message.warning('条件不能为空')
+      } else {
+        this.$emit('filter', this.listQuery, true)
+      }
+    },
+    // 清除过滤
+    clearSelected() {
+      this.listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      }
+      this.$emit('filter', this.listQuery, false)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLayerChoose.vue b/src/views/overview/components/popupLayerChoose.vue
new file mode 100644
index 0000000..bc90e36
--- /dev/null
+++ b/src/views/overview/components/popupLayerChoose.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Description: 图层选择窗口
+ * @Author: 王晓颖
+ * @Date: 2022-05-17
+ -->
+<template>
+  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+    <div v-show="show" class="layer-choose-window">
+      <div class="window-title">
+        <div>图层</div>
+        <i class="el-icon-close close-icon" @click="close" />
+      </div>
+      <div class="window-body">
+        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
+          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
+        </el-scrollbar>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'LayerChooseWindow',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否显示窗口
+    layers: {
+      type: Array,
+      default: () => []
+    }, // 图层列表，树结构，[{id:'',name:'', children:[...]},...]
+    checked: {
+      type: Array,
+      default: () => []
+    } // 选中图层，id的列表
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      } // 树结构默认参数
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 复选框点击事件，将所有选中id传递给父组件
+    clickItem() {
+      const checked = this.$refs.tree.getCheckedKeys()
+      this.$emit('checked-change', checked)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 200px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLocation.vue b/src/views/overview/components/popupLocation.vue
new file mode 100644
index 0000000..8a8e836
--- /dev/null
+++ b/src/views/overview/components/popupLocation.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Description: 坐标定位菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>坐标定位</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="query" size="small">
+            <el-form-item label="经度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <el-form-item label="纬度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="picker">
+                图上拾取
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="search">
+                坐标定位
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PopupLocation',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    } // 是否显示
+  },
+  data() {
+    return {
+      query: {
+        lng: '', // 经度
+        lat: '', // 纬度
+        deep: '' // 高程
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 坐标定位
+    search() {
+      const position = [this.query.lng, this.query.lat]
+      this.$emit('search', position)
+    },
+    // 图上拾取
+    picker() {
+      this.$emit('picker')
+    },
+    // 设置拾取结果, 提供给父组件调用
+    setQuery(location) {
+      this.query.lng = location[0] ? location[0] : ''
+      this.query.lat = location[1] ? location[1] : ''
+      this.query.deep = location[2] ? location[2] : ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/searchComp.vue b/src/views/overview/components/searchComp.vue
new file mode 100644
index 0000000..d6f138a
--- /dev/null
+++ b/src/views/overview/components/searchComp.vue
@@ -0,0 +1,109 @@
+<!--
+ * @Description: 搜索组件
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <!--搜索条件-->
+    <div class="map-search-div">
+      <el-input v-model.trim="keywords" :placeholder="placeholder" clearable>
+        <el-button slot="append" class="filter-item" type="primary" icon="el-icon-search" @click="search">
+          搜索
+        </el-button>
+      </el-input>
+    </div>
+    <!--搜索结果弹出框-->
+    <el-popover
+      v-show="list.length>0"
+      v-model="resultShow"
+      placement="bottom-end"
+      width="290"
+      trigger="click"
+    >
+      <el-card slot="reference" shadow="always" class="selectAnswer">
+        共找到 {{ list.length }} 个符合条件的{{ name }}
+      </el-card>
+      <div v-show="list.length>0">
+        <search-item v-for="(data,index) in currentPageList" :key="'search-item-'+index" :data="data" :index="index" @click="clickItem" />
+      </div>
+      <div class="clear" />
+      <el-pagination
+        :total="list.length"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :hide-on-single-page="true"
+        small
+        layout="prev, pager, next"
+        @current-change="changePage"
+      />
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchComp',
+  props: {
+    name: {
+      type: String,
+      default: '井'
+    }, // 结果展示类型
+    placeholder: {
+      type: String,
+      default: '关键字'
+    },
+    list: {
+      type: Array,
+      default: () => []
+    } // 结果列表
+  },
+  data() {
+    return {
+      resultShow: false, // 是否显示查询结果
+      keywords: '', // 查询条件
+      currentPageList: [], // 当前页数据
+      pageSize: 5, // 页面容量
+      pageNum: 1 // 页码
+    }
+  },
+  watch: {
+    list(val) { // 监控list的数量，为0时不显示
+      if (val && val.length > 0) {
+        this.resultShow = true
+        this.changePage(1)
+      } else {
+        this.resultShow = false
+        this.currentPageList = []
+      }
+    }
+  },
+  methods: {
+    // 点击搜索按钮
+    search() {
+      this.$emit('search', this.keywords)
+    },
+    // 切换页码
+    changePage(val) {
+      const offset = val
+      const start = (offset - 1) * this.pageSize
+      const end = start + this.pageSize
+      this.currentPageList = this.list.slice(start, end)
+      this.$emit('change-page', this.currentPageList)
+    },
+    // 点击结果项
+    clickItem(item) {
+      this.$emit('click-item', item)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  left: 30px;
+  top: 5px;
+}
+</style>
diff --git a/src/views/overview/components/searchItem.vue b/src/views/overview/components/searchItem.vue
new file mode 100644
index 0000000..eb1a0ce
--- /dev/null
+++ b/src/views/overview/components/searchItem.vue
@@ -0,0 +1,80 @@
+<!--
+ * @Description: 搜索结果项组件
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div :key="data[props.label]" class="search-card" @click="clickItem()">
+    <div class="card-left">
+      {{ index+1 }}
+    </div>
+    <div class="card-right">
+      <div class="card-title">
+        {{ data[props.name] }}
+      </div>
+      <div class="card-content">
+        <span class="card-detail">{{ data[props.detail] }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number | String,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          label: 'wellCode',
+          name: 'wellName',
+          detail: 'position'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    clickItem() {
+      this.$emit('click', this.data)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.search-card{
+  padding:5px 10px;
+  overflow: auto;
+  .card-left,.card-right{
+    float:left
+  }
+  .card-left{
+    width:10%;
+    line-height:25px;
+  }
+  .card-right{
+    width:90%;
+  }
+  .card-title{
+    font-size:16px;
+    font-weight: bold;
+    line-height: 25px;
+  }
+  .card-detail{
+    line-height:25px;
+  }
+}
+</style>

diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/infoWindowWell.vue b/src/views/overview/components/infoWindowWell.vue
new file mode 100644
index 0000000..b18edf3
--- /dev/null
+++ b/src/views/overview/components/infoWindowWell.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 井信息弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-13
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'WellInfoWindow',
+  props: {
+    wellInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-window{
+  max-width: 260px;
+  min-width: 200px;
+  .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;
+  }
+}
+</style>
diff --git a/src/views/overview/components/layerChooseWindow.vue b/src/views/overview/components/layerChooseWindow.vue
deleted file mode 100644
index fbffa65..0000000
--- a/src/views/overview/components/layerChooseWindow.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
- * @Description: 图层选择窗口
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
-    <div v-show="show" class="layer-choose-window">
-      <div class="window-title">
-        <div>图层</div>
-        <i class="el-icon-close close-icon" @click="close" />
-      </div>
-      <div class="window-body">
-        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
-          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
-        </el-scrollbar>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'LayerChooseWindow',
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    },
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    checked: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    clickItem() {
-      const checked = this.$refs.tree.getCheckedKeys()
-      console.log(checked)
-      this.$emit('checked-change', checked)
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.layer-choose-window{
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  width: 200px;
-  background-color: rgba(255,255,255,0.9);
-  .window-body{
-
-  }
-}
-.window-title{
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 10px;
-  .close-icon:hover{
-    cursor: pointer;
-    color: #36a3f7;
-  }
-}
-</style>
diff --git a/src/views/overview/components/popupDataFilter.vue b/src/views/overview/components/popupDataFilter.vue
new file mode 100644
index 0000000..db2bdf8
--- /dev/null
+++ b/src/views/overview/components/popupDataFilter.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Description: 数据筛选菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>数据筛选</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="listQuery" label-position="top" size="small">
+            <el-form-item label="所属组织机构">
+              <dept-select style="width:100%" :need-top="false" placeholder="请选择组织机构" clearable />
+            </el-form-item>
+            <el-form-item v-if="wellTypeList.length>1" label="井类型">
+              <el-select v-model="listQuery.wellType" placeholder="选择井类型" style="width:100%" clearable>
+                <el-option
+                  v-for="item in wellTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="filter">
+                数据筛选
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="clearSelected">
+                清除筛选
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+export default {
+  name: 'PopupDataFilter',
+  components: { DeptSelect },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    wellTypeList: {
+      type: Array,
+      required: true
+    } // 井类型列表
+  },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 执行过滤
+    filter(force = false) {
+      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '' && !force) {
+        this.$message.warning('条件不能为空')
+      } else {
+        this.$emit('filter', this.listQuery, true)
+      }
+    },
+    // 清除过滤
+    clearSelected() {
+      this.listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      }
+      this.$emit('filter', this.listQuery, false)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLayerChoose.vue b/src/views/overview/components/popupLayerChoose.vue
new file mode 100644
index 0000000..bc90e36
--- /dev/null
+++ b/src/views/overview/components/popupLayerChoose.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Description: 图层选择窗口
+ * @Author: 王晓颖
+ * @Date: 2022-05-17
+ -->
+<template>
+  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+    <div v-show="show" class="layer-choose-window">
+      <div class="window-title">
+        <div>图层</div>
+        <i class="el-icon-close close-icon" @click="close" />
+      </div>
+      <div class="window-body">
+        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
+          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
+        </el-scrollbar>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'LayerChooseWindow',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否显示窗口
+    layers: {
+      type: Array,
+      default: () => []
+    }, // 图层列表，树结构，[{id:'',name:'', children:[...]},...]
+    checked: {
+      type: Array,
+      default: () => []
+    } // 选中图层，id的列表
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      } // 树结构默认参数
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 复选框点击事件，将所有选中id传递给父组件
+    clickItem() {
+      const checked = this.$refs.tree.getCheckedKeys()
+      this.$emit('checked-change', checked)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 200px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLocation.vue b/src/views/overview/components/popupLocation.vue
new file mode 100644
index 0000000..8a8e836
--- /dev/null
+++ b/src/views/overview/components/popupLocation.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Description: 坐标定位菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>坐标定位</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="query" size="small">
+            <el-form-item label="经度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <el-form-item label="纬度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="picker">
+                图上拾取
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="search">
+                坐标定位
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PopupLocation',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    } // 是否显示
+  },
+  data() {
+    return {
+      query: {
+        lng: '', // 经度
+        lat: '', // 纬度
+        deep: '' // 高程
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 坐标定位
+    search() {
+      const position = [this.query.lng, this.query.lat]
+      this.$emit('search', position)
+    },
+    // 图上拾取
+    picker() {
+      this.$emit('picker')
+    },
+    // 设置拾取结果, 提供给父组件调用
+    setQuery(location) {
+      this.query.lng = location[0] ? location[0] : ''
+      this.query.lat = location[1] ? location[1] : ''
+      this.query.deep = location[2] ? location[2] : ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/searchComp.vue b/src/views/overview/components/searchComp.vue
new file mode 100644
index 0000000..d6f138a
--- /dev/null
+++ b/src/views/overview/components/searchComp.vue
@@ -0,0 +1,109 @@
+<!--
+ * @Description: 搜索组件
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <!--搜索条件-->
+    <div class="map-search-div">
+      <el-input v-model.trim="keywords" :placeholder="placeholder" clearable>
+        <el-button slot="append" class="filter-item" type="primary" icon="el-icon-search" @click="search">
+          搜索
+        </el-button>
+      </el-input>
+    </div>
+    <!--搜索结果弹出框-->
+    <el-popover
+      v-show="list.length>0"
+      v-model="resultShow"
+      placement="bottom-end"
+      width="290"
+      trigger="click"
+    >
+      <el-card slot="reference" shadow="always" class="selectAnswer">
+        共找到 {{ list.length }} 个符合条件的{{ name }}
+      </el-card>
+      <div v-show="list.length>0">
+        <search-item v-for="(data,index) in currentPageList" :key="'search-item-'+index" :data="data" :index="index" @click="clickItem" />
+      </div>
+      <div class="clear" />
+      <el-pagination
+        :total="list.length"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :hide-on-single-page="true"
+        small
+        layout="prev, pager, next"
+        @current-change="changePage"
+      />
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchComp',
+  props: {
+    name: {
+      type: String,
+      default: '井'
+    }, // 结果展示类型
+    placeholder: {
+      type: String,
+      default: '关键字'
+    },
+    list: {
+      type: Array,
+      default: () => []
+    } // 结果列表
+  },
+  data() {
+    return {
+      resultShow: false, // 是否显示查询结果
+      keywords: '', // 查询条件
+      currentPageList: [], // 当前页数据
+      pageSize: 5, // 页面容量
+      pageNum: 1 // 页码
+    }
+  },
+  watch: {
+    list(val) { // 监控list的数量，为0时不显示
+      if (val && val.length > 0) {
+        this.resultShow = true
+        this.changePage(1)
+      } else {
+        this.resultShow = false
+        this.currentPageList = []
+      }
+    }
+  },
+  methods: {
+    // 点击搜索按钮
+    search() {
+      this.$emit('search', this.keywords)
+    },
+    // 切换页码
+    changePage(val) {
+      const offset = val
+      const start = (offset - 1) * this.pageSize
+      const end = start + this.pageSize
+      this.currentPageList = this.list.slice(start, end)
+      this.$emit('change-page', this.currentPageList)
+    },
+    // 点击结果项
+    clickItem(item) {
+      this.$emit('click-item', item)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  left: 30px;
+  top: 5px;
+}
+</style>
diff --git a/src/views/overview/components/searchItem.vue b/src/views/overview/components/searchItem.vue
new file mode 100644
index 0000000..eb1a0ce
--- /dev/null
+++ b/src/views/overview/components/searchItem.vue
@@ -0,0 +1,80 @@
+<!--
+ * @Description: 搜索结果项组件
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div :key="data[props.label]" class="search-card" @click="clickItem()">
+    <div class="card-left">
+      {{ index+1 }}
+    </div>
+    <div class="card-right">
+      <div class="card-title">
+        {{ data[props.name] }}
+      </div>
+      <div class="card-content">
+        <span class="card-detail">{{ data[props.detail] }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number | String,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          label: 'wellCode',
+          name: 'wellName',
+          detail: 'position'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    clickItem() {
+      this.$emit('click', this.data)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.search-card{
+  padding:5px 10px;
+  overflow: auto;
+  .card-left,.card-right{
+    float:left
+  }
+  .card-left{
+    width:10%;
+    line-height:25px;
+  }
+  .card-right{
+    width:90%;
+  }
+  .card-title{
+    font-size:16px;
+    font-weight: bold;
+    line-height: 25px;
+  }
+  .card-detail{
+    line-height:25px;
+  }
+}
+</style>
diff --git a/src/views/overview/components/toolBox.vue b/src/views/overview/components/toolBox.vue
index 0e8f159..9b0eb95 100644
--- a/src/views/overview/components/toolBox.vue
+++ b/src/views/overview/components/toolBox.vue
@@ -16,9 +16,18 @@
       </div>
       <div v-show="showLayer && showTool" class="vertical-seperate" />
       <div v-show="showBaseMap && !showLayer && showTool" class="vertical-seperate" />
-      <div v-show="showTool" class="box-btn" @click="clickBox('tool')">
-        <i class="el-icon-suitcase-1" /> 工具箱
-      </div>
+      <!--工具箱弹窗-->
+      <el-popover v-show="showTool" v-model="menuShow" placement="bottom-end" width="80" trigger="hover">
+        <div class="menu-list">
+          <div v-for="menu of toolMenu" :key="menu.menu" class="menu-item" @click="clickMenu(menu)">
+            <i :class="'el-icon-'+menu.icon" />
+            {{ menu.name }}
+          </div>
+        </div>
+        <div slot="reference" class="box-btn" @click="clickBox('tool')">
+          <i class="el-icon-suitcase-1" /> 工具箱
+        </div>
+      </el-popover>
     </div>
     <!--底图选择-->
     <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
@@ -49,7 +58,7 @@
 </template>
 
 <script>
-import LayerChooseWindow from './layerChooseWindow'
+import LayerChooseWindow from './popupLayerChoose'
 export default {
   name: 'ToolBox',
   components: { LayerChooseWindow },
@@ -57,7 +66,7 @@
     show: {
       type: Boolean,
       default: false
-    },
+    }, // 组件是否显示
     showBaseMap: {
       type: Boolean,
       default: true
@@ -73,26 +82,34 @@
     mapType: {
       type: String,
       default: 'gaode_vec'
-    },
+    }, // 当前底图类型
     layers: {
       type: Array,
       default: () => []
-    },
+    }, // 图层列表
     layerChecked: {
       type: Array,
       default: () => []
-    }
+    }, // 选中的图层
+    toolMenu: {
+      type: Array,
+      default: () => []
+    } // 工具栏菜单，格式为{menu:'dataFilter', icon'search', name:'数据筛选'}
   },
   data() {
     return {
-      baseMapWindowShow: false,
-      layerWindowShow: true,
-      tollWindowShow: false
+      baseMapWindowShow: false, // 底图选择窗口显示
+      layerWindowShow: false, // 图层选择窗口显示
+      toolWindowShow: false, // 工具菜单窗口显示
+      menuShow: false // 工具菜单显示
     }
   },
   methods: {
-    // 点击工具箱，更改显示状态
+    // 点击工具栏菜单
     clickBox(type) {
+      this.layerWindowShow = false
+      this.baseMapWindowShow = false
+      this.closeMenuPop()
       this[type + 'WindowShow'] = !this[type + 'WindowShow']
       this.$emit('click' + type)
     },
@@ -100,9 +117,21 @@
     changeBaseMap(maptype) {
       this.$emit('change-base-map', maptype)
     },
-    // 更改选中土城
+    // 更改选中图层
     checkedLayerChange(checkedLayer) {
       this.$emit('layer-change', checkedLayer)
+    },
+    // 点击工具箱中菜单项
+    clickMenu(menu) {
+      this.menuShow = false
+      // 清除其他的显示
+      this.baseMapWindowShow = false
+      this.layerWindowShow = false
+      this.$emit('click-menu', menu)
+    },
+    // 触发工具箱相关弹窗关闭
+    closeMenuPop() {
+      this.$emit('close-menu-pop')
     }
   }
 }
@@ -178,4 +207,19 @@
     color: #36a3f7;
   }
 }
+.menu-list{
+  padding: 0px;
+  .menu-item{
+    width: 100%;
+    padding: 5px 10px;
+    i{
+      margin-right: 5px;
+    }
+    &:hover{
+      cursor: pointer;
+      background-color: #8cc5ff;
+      color: #FFF;
+    }
+  }
+}
 </style>

diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/infoWindowWell.vue b/src/views/overview/components/infoWindowWell.vue
new file mode 100644
index 0000000..b18edf3
--- /dev/null
+++ b/src/views/overview/components/infoWindowWell.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 井信息弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-13
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'WellInfoWindow',
+  props: {
+    wellInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-window{
+  max-width: 260px;
+  min-width: 200px;
+  .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;
+  }
+}
+</style>
diff --git a/src/views/overview/components/layerChooseWindow.vue b/src/views/overview/components/layerChooseWindow.vue
deleted file mode 100644
index fbffa65..0000000
--- a/src/views/overview/components/layerChooseWindow.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
- * @Description: 图层选择窗口
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
-    <div v-show="show" class="layer-choose-window">
-      <div class="window-title">
-        <div>图层</div>
-        <i class="el-icon-close close-icon" @click="close" />
-      </div>
-      <div class="window-body">
-        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
-          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
-        </el-scrollbar>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'LayerChooseWindow',
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    },
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    checked: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    clickItem() {
-      const checked = this.$refs.tree.getCheckedKeys()
-      console.log(checked)
-      this.$emit('checked-change', checked)
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.layer-choose-window{
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  width: 200px;
-  background-color: rgba(255,255,255,0.9);
-  .window-body{
-
-  }
-}
-.window-title{
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 10px;
-  .close-icon:hover{
-    cursor: pointer;
-    color: #36a3f7;
-  }
-}
-</style>
diff --git a/src/views/overview/components/popupDataFilter.vue b/src/views/overview/components/popupDataFilter.vue
new file mode 100644
index 0000000..db2bdf8
--- /dev/null
+++ b/src/views/overview/components/popupDataFilter.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Description: 数据筛选菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>数据筛选</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="listQuery" label-position="top" size="small">
+            <el-form-item label="所属组织机构">
+              <dept-select style="width:100%" :need-top="false" placeholder="请选择组织机构" clearable />
+            </el-form-item>
+            <el-form-item v-if="wellTypeList.length>1" label="井类型">
+              <el-select v-model="listQuery.wellType" placeholder="选择井类型" style="width:100%" clearable>
+                <el-option
+                  v-for="item in wellTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="filter">
+                数据筛选
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="clearSelected">
+                清除筛选
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+export default {
+  name: 'PopupDataFilter',
+  components: { DeptSelect },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    wellTypeList: {
+      type: Array,
+      required: true
+    } // 井类型列表
+  },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 执行过滤
+    filter(force = false) {
+      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '' && !force) {
+        this.$message.warning('条件不能为空')
+      } else {
+        this.$emit('filter', this.listQuery, true)
+      }
+    },
+    // 清除过滤
+    clearSelected() {
+      this.listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      }
+      this.$emit('filter', this.listQuery, false)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLayerChoose.vue b/src/views/overview/components/popupLayerChoose.vue
new file mode 100644
index 0000000..bc90e36
--- /dev/null
+++ b/src/views/overview/components/popupLayerChoose.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Description: 图层选择窗口
+ * @Author: 王晓颖
+ * @Date: 2022-05-17
+ -->
+<template>
+  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+    <div v-show="show" class="layer-choose-window">
+      <div class="window-title">
+        <div>图层</div>
+        <i class="el-icon-close close-icon" @click="close" />
+      </div>
+      <div class="window-body">
+        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
+          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
+        </el-scrollbar>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'LayerChooseWindow',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否显示窗口
+    layers: {
+      type: Array,
+      default: () => []
+    }, // 图层列表，树结构，[{id:'',name:'', children:[...]},...]
+    checked: {
+      type: Array,
+      default: () => []
+    } // 选中图层，id的列表
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      } // 树结构默认参数
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 复选框点击事件，将所有选中id传递给父组件
+    clickItem() {
+      const checked = this.$refs.tree.getCheckedKeys()
+      this.$emit('checked-change', checked)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 200px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLocation.vue b/src/views/overview/components/popupLocation.vue
new file mode 100644
index 0000000..8a8e836
--- /dev/null
+++ b/src/views/overview/components/popupLocation.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Description: 坐标定位菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>坐标定位</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="query" size="small">
+            <el-form-item label="经度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <el-form-item label="纬度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="picker">
+                图上拾取
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="search">
+                坐标定位
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PopupLocation',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    } // 是否显示
+  },
+  data() {
+    return {
+      query: {
+        lng: '', // 经度
+        lat: '', // 纬度
+        deep: '' // 高程
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 坐标定位
+    search() {
+      const position = [this.query.lng, this.query.lat]
+      this.$emit('search', position)
+    },
+    // 图上拾取
+    picker() {
+      this.$emit('picker')
+    },
+    // 设置拾取结果, 提供给父组件调用
+    setQuery(location) {
+      this.query.lng = location[0] ? location[0] : ''
+      this.query.lat = location[1] ? location[1] : ''
+      this.query.deep = location[2] ? location[2] : ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/searchComp.vue b/src/views/overview/components/searchComp.vue
new file mode 100644
index 0000000..d6f138a
--- /dev/null
+++ b/src/views/overview/components/searchComp.vue
@@ -0,0 +1,109 @@
+<!--
+ * @Description: 搜索组件
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <!--搜索条件-->
+    <div class="map-search-div">
+      <el-input v-model.trim="keywords" :placeholder="placeholder" clearable>
+        <el-button slot="append" class="filter-item" type="primary" icon="el-icon-search" @click="search">
+          搜索
+        </el-button>
+      </el-input>
+    </div>
+    <!--搜索结果弹出框-->
+    <el-popover
+      v-show="list.length>0"
+      v-model="resultShow"
+      placement="bottom-end"
+      width="290"
+      trigger="click"
+    >
+      <el-card slot="reference" shadow="always" class="selectAnswer">
+        共找到 {{ list.length }} 个符合条件的{{ name }}
+      </el-card>
+      <div v-show="list.length>0">
+        <search-item v-for="(data,index) in currentPageList" :key="'search-item-'+index" :data="data" :index="index" @click="clickItem" />
+      </div>
+      <div class="clear" />
+      <el-pagination
+        :total="list.length"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :hide-on-single-page="true"
+        small
+        layout="prev, pager, next"
+        @current-change="changePage"
+      />
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchComp',
+  props: {
+    name: {
+      type: String,
+      default: '井'
+    }, // 结果展示类型
+    placeholder: {
+      type: String,
+      default: '关键字'
+    },
+    list: {
+      type: Array,
+      default: () => []
+    } // 结果列表
+  },
+  data() {
+    return {
+      resultShow: false, // 是否显示查询结果
+      keywords: '', // 查询条件
+      currentPageList: [], // 当前页数据
+      pageSize: 5, // 页面容量
+      pageNum: 1 // 页码
+    }
+  },
+  watch: {
+    list(val) { // 监控list的数量，为0时不显示
+      if (val && val.length > 0) {
+        this.resultShow = true
+        this.changePage(1)
+      } else {
+        this.resultShow = false
+        this.currentPageList = []
+      }
+    }
+  },
+  methods: {
+    // 点击搜索按钮
+    search() {
+      this.$emit('search', this.keywords)
+    },
+    // 切换页码
+    changePage(val) {
+      const offset = val
+      const start = (offset - 1) * this.pageSize
+      const end = start + this.pageSize
+      this.currentPageList = this.list.slice(start, end)
+      this.$emit('change-page', this.currentPageList)
+    },
+    // 点击结果项
+    clickItem(item) {
+      this.$emit('click-item', item)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  left: 30px;
+  top: 5px;
+}
+</style>
diff --git a/src/views/overview/components/searchItem.vue b/src/views/overview/components/searchItem.vue
new file mode 100644
index 0000000..eb1a0ce
--- /dev/null
+++ b/src/views/overview/components/searchItem.vue
@@ -0,0 +1,80 @@
+<!--
+ * @Description: 搜索结果项组件
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div :key="data[props.label]" class="search-card" @click="clickItem()">
+    <div class="card-left">
+      {{ index+1 }}
+    </div>
+    <div class="card-right">
+      <div class="card-title">
+        {{ data[props.name] }}
+      </div>
+      <div class="card-content">
+        <span class="card-detail">{{ data[props.detail] }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number | String,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          label: 'wellCode',
+          name: 'wellName',
+          detail: 'position'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    clickItem() {
+      this.$emit('click', this.data)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.search-card{
+  padding:5px 10px;
+  overflow: auto;
+  .card-left,.card-right{
+    float:left
+  }
+  .card-left{
+    width:10%;
+    line-height:25px;
+  }
+  .card-right{
+    width:90%;
+  }
+  .card-title{
+    font-size:16px;
+    font-weight: bold;
+    line-height: 25px;
+  }
+  .card-detail{
+    line-height:25px;
+  }
+}
+</style>
diff --git a/src/views/overview/components/toolBox.vue b/src/views/overview/components/toolBox.vue
index 0e8f159..9b0eb95 100644
--- a/src/views/overview/components/toolBox.vue
+++ b/src/views/overview/components/toolBox.vue
@@ -16,9 +16,18 @@
       </div>
       <div v-show="showLayer && showTool" class="vertical-seperate" />
       <div v-show="showBaseMap && !showLayer && showTool" class="vertical-seperate" />
-      <div v-show="showTool" class="box-btn" @click="clickBox('tool')">
-        <i class="el-icon-suitcase-1" /> 工具箱
-      </div>
+      <!--工具箱弹窗-->
+      <el-popover v-show="showTool" v-model="menuShow" placement="bottom-end" width="80" trigger="hover">
+        <div class="menu-list">
+          <div v-for="menu of toolMenu" :key="menu.menu" class="menu-item" @click="clickMenu(menu)">
+            <i :class="'el-icon-'+menu.icon" />
+            {{ menu.name }}
+          </div>
+        </div>
+        <div slot="reference" class="box-btn" @click="clickBox('tool')">
+          <i class="el-icon-suitcase-1" /> 工具箱
+        </div>
+      </el-popover>
     </div>
     <!--底图选择-->
     <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
@@ -49,7 +58,7 @@
 </template>
 
 <script>
-import LayerChooseWindow from './layerChooseWindow'
+import LayerChooseWindow from './popupLayerChoose'
 export default {
   name: 'ToolBox',
   components: { LayerChooseWindow },
@@ -57,7 +66,7 @@
     show: {
       type: Boolean,
       default: false
-    },
+    }, // 组件是否显示
     showBaseMap: {
       type: Boolean,
       default: true
@@ -73,26 +82,34 @@
     mapType: {
       type: String,
       default: 'gaode_vec'
-    },
+    }, // 当前底图类型
     layers: {
       type: Array,
       default: () => []
-    },
+    }, // 图层列表
     layerChecked: {
       type: Array,
       default: () => []
-    }
+    }, // 选中的图层
+    toolMenu: {
+      type: Array,
+      default: () => []
+    } // 工具栏菜单，格式为{menu:'dataFilter', icon'search', name:'数据筛选'}
   },
   data() {
     return {
-      baseMapWindowShow: false,
-      layerWindowShow: true,
-      tollWindowShow: false
+      baseMapWindowShow: false, // 底图选择窗口显示
+      layerWindowShow: false, // 图层选择窗口显示
+      toolWindowShow: false, // 工具菜单窗口显示
+      menuShow: false // 工具菜单显示
     }
   },
   methods: {
-    // 点击工具箱，更改显示状态
+    // 点击工具栏菜单
     clickBox(type) {
+      this.layerWindowShow = false
+      this.baseMapWindowShow = false
+      this.closeMenuPop()
       this[type + 'WindowShow'] = !this[type + 'WindowShow']
       this.$emit('click' + type)
     },
@@ -100,9 +117,21 @@
     changeBaseMap(maptype) {
       this.$emit('change-base-map', maptype)
     },
-    // 更改选中土城
+    // 更改选中图层
     checkedLayerChange(checkedLayer) {
       this.$emit('layer-change', checkedLayer)
+    },
+    // 点击工具箱中菜单项
+    clickMenu(menu) {
+      this.menuShow = false
+      // 清除其他的显示
+      this.baseMapWindowShow = false
+      this.layerWindowShow = false
+      this.$emit('click-menu', menu)
+    },
+    // 触发工具箱相关弹窗关闭
+    closeMenuPop() {
+      this.$emit('close-menu-pop')
     }
   }
 }
@@ -178,4 +207,19 @@
     color: #36a3f7;
   }
 }
+.menu-list{
+  padding: 0px;
+  .menu-item{
+    width: 100%;
+    padding: 5px 10px;
+    i{
+      margin-right: 5px;
+    }
+    &:hover{
+      cursor: pointer;
+      background-color: #8cc5ff;
+      color: #FFF;
+    }
+  }
+}
 </style>
diff --git a/src/views/overview/components/wellInfoWindow.vue b/src/views/overview/components/wellInfoWindow.vue
deleted file mode 100644
index b18edf3..0000000
--- a/src/views/overview/components/wellInfoWindow.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<!--
- * @Description: 井信息弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-13
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'WellInfoWindow',
-  props: {
-    wellInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.info-window{
-  max-width: 260px;
-  min-width: 200px;
-  .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;
-  }
-}
-</style>

diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue
deleted file mode 100644
index d69f178..0000000
--- a/src/views/overview/components/alarmInfoWindow.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Description: 报警弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-12 17:17:01
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'AlarmInfoWindow',
-  props: {
-    alarmInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .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/overview/components/infoWindowAlarm.vue b/src/views/overview/components/infoWindowAlarm.vue
new file mode 100644
index 0000000..d69f178
--- /dev/null
+++ b/src/views/overview/components/infoWindowAlarm.vue
@@ -0,0 +1,60 @@
+<!--
+ * @Description: 报警弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-12 17:17:01
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'AlarmInfoWindow',
+  props: {
+    alarmInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .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/overview/components/infoWindowWell.vue b/src/views/overview/components/infoWindowWell.vue
new file mode 100644
index 0000000..b18edf3
--- /dev/null
+++ b/src/views/overview/components/infoWindowWell.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Description: 井信息弹窗
+ * @Author: 王晓颖
+ * @Date: 2022-05-13
+ -->
+<template>
+  <div 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>
+</template>
+
+<script>
+export default {
+  name: 'WellInfoWindow',
+  props: {
+    wellInfo: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-window{
+  max-width: 260px;
+  min-width: 200px;
+  .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;
+  }
+}
+</style>
diff --git a/src/views/overview/components/layerChooseWindow.vue b/src/views/overview/components/layerChooseWindow.vue
deleted file mode 100644
index fbffa65..0000000
--- a/src/views/overview/components/layerChooseWindow.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
- * @Description: 图层选择窗口
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
-    <div v-show="show" class="layer-choose-window">
-      <div class="window-title">
-        <div>图层</div>
-        <i class="el-icon-close close-icon" @click="close" />
-      </div>
-      <div class="window-body">
-        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
-          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
-        </el-scrollbar>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'LayerChooseWindow',
-  props: {
-    show: {
-      type: Boolean,
-      default: true
-    },
-    layers: {
-      type: Array,
-      default: () => []
-    },
-    checked: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      }
-    }
-  },
-  methods: {
-    close() {
-      this.$emit('close')
-    },
-    clickItem() {
-      const checked = this.$refs.tree.getCheckedKeys()
-      console.log(checked)
-      this.$emit('checked-change', checked)
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.layer-choose-window{
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  width: 200px;
-  background-color: rgba(255,255,255,0.9);
-  .window-body{
-
-  }
-}
-.window-title{
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 10px;
-  .close-icon:hover{
-    cursor: pointer;
-    color: #36a3f7;
-  }
-}
-</style>
diff --git a/src/views/overview/components/popupDataFilter.vue b/src/views/overview/components/popupDataFilter.vue
new file mode 100644
index 0000000..db2bdf8
--- /dev/null
+++ b/src/views/overview/components/popupDataFilter.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Description: 数据筛选菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>数据筛选</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="listQuery" label-position="top" size="small">
+            <el-form-item label="所属组织机构">
+              <dept-select style="width:100%" :need-top="false" placeholder="请选择组织机构" clearable />
+            </el-form-item>
+            <el-form-item v-if="wellTypeList.length>1" label="井类型">
+              <el-select v-model="listQuery.wellType" placeholder="选择井类型" style="width:100%" clearable>
+                <el-option
+                  v-for="item in wellTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="filter">
+                数据筛选
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="clearSelected">
+                清除筛选
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+export default {
+  name: 'PopupDataFilter',
+  components: { DeptSelect },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }, // 是否显示
+    wellTypeList: {
+      type: Array,
+      required: true
+    } // 井类型列表
+  },
+  data() {
+    return {
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 执行过滤
+    filter(force = false) {
+      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '' && !force) {
+        this.$message.warning('条件不能为空')
+      } else {
+        this.$emit('filter', this.listQuery, true)
+      }
+    },
+    // 清除过滤
+    clearSelected() {
+      this.listQuery = {
+        keywords: '', // 关键字
+        wellType: '', // 井类型
+        deptid: '' // 组织机构
+      }
+      this.$emit('filter', this.listQuery, false)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLayerChoose.vue b/src/views/overview/components/popupLayerChoose.vue
new file mode 100644
index 0000000..bc90e36
--- /dev/null
+++ b/src/views/overview/components/popupLayerChoose.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Description: 图层选择窗口
+ * @Author: 王晓颖
+ * @Date: 2022-05-17
+ -->
+<template>
+  <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+    <div v-show="show" class="layer-choose-window">
+      <div class="window-title">
+        <div>图层</div>
+        <i class="el-icon-close close-icon" @click="close" />
+      </div>
+      <div class="window-body">
+        <el-scrollbar ref="layerScroll" :style="{'height':(300)+'px'}" class="layer-scroll">
+          <el-tree ref="tree" :data="layers" :props="defaultProps" node-key="id" :default-checked-keys="checked" default-expand-all show-checkbox @check="clickItem" />
+        </el-scrollbar>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'LayerChooseWindow',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }, // 是否显示窗口
+    layers: {
+      type: Array,
+      default: () => []
+    }, // 图层列表，树结构，[{id:'',name:'', children:[...]},...]
+    checked: {
+      type: Array,
+      default: () => []
+    } // 选中图层，id的列表
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      } // 树结构默认参数
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 复选框点击事件，将所有选中id传递给父组件
+    clickItem() {
+      const checked = this.$refs.tree.getCheckedKeys()
+      this.$emit('checked-change', checked)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 200px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/popupLocation.vue b/src/views/overview/components/popupLocation.vue
new file mode 100644
index 0000000..8a8e836
--- /dev/null
+++ b/src/views/overview/components/popupLocation.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Description: 坐标定位菜单
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
+      <div v-show="show" class="layer-choose-window">
+        <div class="window-title">
+          <div>坐标定位</div>
+          <i class="el-icon-close close-icon" @click="close" />
+        </div>
+        <div class="window-body">
+          <!-- 筛选条件-->
+          <el-form ref="selectForm" :model="query" size="small">
+            <el-form-item label="经度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <el-form-item label="纬度">
+              <el-input v-model="query.lng" />
+            </el-form-item>
+            <div class="btn-line">
+              <el-button class="filter-item" type="primary" size="small" @click="picker">
+                图上拾取
+              </el-button>
+              <el-button class="filter-item" type="default" size="small" @click="search">
+                坐标定位
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PopupLocation',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    } // 是否显示
+  },
+  data() {
+    return {
+      query: {
+        lng: '', // 经度
+        lat: '', // 纬度
+        deep: '' // 高程
+      } // 筛选条件
+    }
+  },
+  methods: {
+    // 关闭窗口
+    close() {
+      this.$emit('close')
+    },
+    // 坐标定位
+    search() {
+      const position = [this.query.lng, this.query.lat]
+      this.$emit('search', position)
+    },
+    // 图上拾取
+    picker() {
+      this.$emit('picker')
+    },
+    // 设置拾取结果, 提供给父组件调用
+    setQuery(location) {
+      this.query.lng = location[0] ? location[0] : ''
+      this.query.lat = location[1] ? location[1] : ''
+      this.query.deep = location[2] ? location[2] : ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.layer-choose-window{
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  width: 270px;
+  background-color: rgba(255,255,255,0.9);
+  .window-body{
+    padding: 10px 30px;
+    .btn-line{
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.window-title{
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 10px;
+  .close-icon:hover{
+    cursor: pointer;
+    color: #36a3f7;
+  }
+}
+</style>
diff --git a/src/views/overview/components/searchComp.vue b/src/views/overview/components/searchComp.vue
new file mode 100644
index 0000000..d6f138a
--- /dev/null
+++ b/src/views/overview/components/searchComp.vue
@@ -0,0 +1,109 @@
+<!--
+ * @Description: 搜索组件
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div>
+    <!--搜索条件-->
+    <div class="map-search-div">
+      <el-input v-model.trim="keywords" :placeholder="placeholder" clearable>
+        <el-button slot="append" class="filter-item" type="primary" icon="el-icon-search" @click="search">
+          搜索
+        </el-button>
+      </el-input>
+    </div>
+    <!--搜索结果弹出框-->
+    <el-popover
+      v-show="list.length>0"
+      v-model="resultShow"
+      placement="bottom-end"
+      width="290"
+      trigger="click"
+    >
+      <el-card slot="reference" shadow="always" class="selectAnswer">
+        共找到 {{ list.length }} 个符合条件的{{ name }}
+      </el-card>
+      <div v-show="list.length>0">
+        <search-item v-for="(data,index) in currentPageList" :key="'search-item-'+index" :data="data" :index="index" @click="clickItem" />
+      </div>
+      <div class="clear" />
+      <el-pagination
+        :total="list.length"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :hide-on-single-page="true"
+        small
+        layout="prev, pager, next"
+        @current-change="changePage"
+      />
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchComp',
+  props: {
+    name: {
+      type: String,
+      default: '井'
+    }, // 结果展示类型
+    placeholder: {
+      type: String,
+      default: '关键字'
+    },
+    list: {
+      type: Array,
+      default: () => []
+    } // 结果列表
+  },
+  data() {
+    return {
+      resultShow: false, // 是否显示查询结果
+      keywords: '', // 查询条件
+      currentPageList: [], // 当前页数据
+      pageSize: 5, // 页面容量
+      pageNum: 1 // 页码
+    }
+  },
+  watch: {
+    list(val) { // 监控list的数量，为0时不显示
+      if (val && val.length > 0) {
+        this.resultShow = true
+        this.changePage(1)
+      } else {
+        this.resultShow = false
+        this.currentPageList = []
+      }
+    }
+  },
+  methods: {
+    // 点击搜索按钮
+    search() {
+      this.$emit('search', this.keywords)
+    },
+    // 切换页码
+    changePage(val) {
+      const offset = val
+      const start = (offset - 1) * this.pageSize
+      const end = start + this.pageSize
+      this.currentPageList = this.list.slice(start, end)
+      this.$emit('change-page', this.currentPageList)
+    },
+    // 点击结果项
+    clickItem(item) {
+      this.$emit('click-item', item)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.map-search-div{
+  position: absolute;
+  z-index: 100;
+  left: 30px;
+  top: 5px;
+}
+</style>
diff --git a/src/views/overview/components/searchItem.vue b/src/views/overview/components/searchItem.vue
new file mode 100644
index 0000000..eb1a0ce
--- /dev/null
+++ b/src/views/overview/components/searchItem.vue
@@ -0,0 +1,80 @@
+<!--
+ * @Description: 搜索结果项组件
+ * @Author: 王晓颖
+ * @Date: 2022-05-18
+ -->
+<template>
+  <div :key="data[props.label]" class="search-card" @click="clickItem()">
+    <div class="card-left">
+      {{ index+1 }}
+    </div>
+    <div class="card-right">
+      <div class="card-title">
+        {{ data[props.name] }}
+      </div>
+      <div class="card-content">
+        <span class="card-detail">{{ data[props.detail] }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number | String,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          label: 'wellCode',
+          name: 'wellName',
+          detail: 'position'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    clickItem() {
+      this.$emit('click', this.data)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.search-card{
+  padding:5px 10px;
+  overflow: auto;
+  .card-left,.card-right{
+    float:left
+  }
+  .card-left{
+    width:10%;
+    line-height:25px;
+  }
+  .card-right{
+    width:90%;
+  }
+  .card-title{
+    font-size:16px;
+    font-weight: bold;
+    line-height: 25px;
+  }
+  .card-detail{
+    line-height:25px;
+  }
+}
+</style>
diff --git a/src/views/overview/components/toolBox.vue b/src/views/overview/components/toolBox.vue
index 0e8f159..9b0eb95 100644
--- a/src/views/overview/components/toolBox.vue
+++ b/src/views/overview/components/toolBox.vue
@@ -16,9 +16,18 @@
       </div>
       <div v-show="showLayer && showTool" class="vertical-seperate" />
       <div v-show="showBaseMap && !showLayer && showTool" class="vertical-seperate" />
-      <div v-show="showTool" class="box-btn" @click="clickBox('tool')">
-        <i class="el-icon-suitcase-1" /> 工具箱
-      </div>
+      <!--工具箱弹窗-->
+      <el-popover v-show="showTool" v-model="menuShow" placement="bottom-end" width="80" trigger="hover">
+        <div class="menu-list">
+          <div v-for="menu of toolMenu" :key="menu.menu" class="menu-item" @click="clickMenu(menu)">
+            <i :class="'el-icon-'+menu.icon" />
+            {{ menu.name }}
+          </div>
+        </div>
+        <div slot="reference" class="box-btn" @click="clickBox('tool')">
+          <i class="el-icon-suitcase-1" /> 工具箱
+        </div>
+      </el-popover>
     </div>
     <!--底图选择-->
     <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
@@ -49,7 +58,7 @@
 </template>
 
 <script>
-import LayerChooseWindow from './layerChooseWindow'
+import LayerChooseWindow from './popupLayerChoose'
 export default {
   name: 'ToolBox',
   components: { LayerChooseWindow },
@@ -57,7 +66,7 @@
     show: {
       type: Boolean,
       default: false
-    },
+    }, // 组件是否显示
     showBaseMap: {
       type: Boolean,
       default: true
@@ -73,26 +82,34 @@
     mapType: {
       type: String,
       default: 'gaode_vec'
-    },
+    }, // 当前底图类型
     layers: {
       type: Array,
       default: () => []
-    },
+    }, // 图层列表
     layerChecked: {
       type: Array,
       default: () => []
-    }
+    }, // 选中的图层
+    toolMenu: {
+      type: Array,
+      default: () => []
+    } // 工具栏菜单，格式为{menu:'dataFilter', icon'search', name:'数据筛选'}
   },
   data() {
     return {
-      baseMapWindowShow: false,
-      layerWindowShow: true,
-      tollWindowShow: false
+      baseMapWindowShow: false, // 底图选择窗口显示
+      layerWindowShow: false, // 图层选择窗口显示
+      toolWindowShow: false, // 工具菜单窗口显示
+      menuShow: false // 工具菜单显示
     }
   },
   methods: {
-    // 点击工具箱，更改显示状态
+    // 点击工具栏菜单
     clickBox(type) {
+      this.layerWindowShow = false
+      this.baseMapWindowShow = false
+      this.closeMenuPop()
       this[type + 'WindowShow'] = !this[type + 'WindowShow']
       this.$emit('click' + type)
     },
@@ -100,9 +117,21 @@
     changeBaseMap(maptype) {
       this.$emit('change-base-map', maptype)
     },
-    // 更改选中土城
+    // 更改选中图层
     checkedLayerChange(checkedLayer) {
       this.$emit('layer-change', checkedLayer)
+    },
+    // 点击工具箱中菜单项
+    clickMenu(menu) {
+      this.menuShow = false
+      // 清除其他的显示
+      this.baseMapWindowShow = false
+      this.layerWindowShow = false
+      this.$emit('click-menu', menu)
+    },
+    // 触发工具箱相关弹窗关闭
+    closeMenuPop() {
+      this.$emit('close-menu-pop')
     }
   }
 }
@@ -178,4 +207,19 @@
     color: #36a3f7;
   }
 }
+.menu-list{
+  padding: 0px;
+  .menu-item{
+    width: 100%;
+    padding: 5px 10px;
+    i{
+      margin-right: 5px;
+    }
+    &:hover{
+      cursor: pointer;
+      background-color: #8cc5ff;
+      color: #FFF;
+    }
+  }
+}
 </style>
diff --git a/src/views/overview/components/wellInfoWindow.vue b/src/views/overview/components/wellInfoWindow.vue
deleted file mode 100644
index b18edf3..0000000
--- a/src/views/overview/components/wellInfoWindow.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<!--
- * @Description: 井信息弹窗
- * @Author: 王晓颖
- * @Date: 2022-05-13
- -->
-<template>
-  <div 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>
-</template>
-
-<script>
-export default {
-  name: 'WellInfoWindow',
-  props: {
-    wellInfo: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.info-window{
-  max-width: 260px;
-  min-width: 200px;
-  .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;
-  }
-}
-</style>
diff --git a/src/views/overview/overviewAmap.vue b/src/views/overview/overviewAmap.vue
index 2af19b8..0ee8bfd 100644
--- a/src/views/overview/overviewAmap.vue
+++ b/src/views/overview/overviewAmap.vue
@@ -8,10 +8,16 @@
           <el-image :src="alarmIcon" :style="{'width':alarmIconSize[0]+'px','height':alarmIconSize[1]+'px'}" fit="fill" @click="openAlarmWindow(alarmWell.wellId, alarmWell.coordinates)" />
         </a-map-marker>
       </a-map-container>
+      <!--搜索框-->
+      <search-comp :list="resultList" placeholder="井编号/名称/位置" @search="search" />
       <!--报警列表-->
       <alarm-list :show="showAlarm" :data="alarmList" @row-click="alarmRowClick" />
       <!--工具箱-->
-      <tool-box :show="!loading" :layers="layers" :layer-checked="checkedLayer" @change-base-map="changeBaseMap" @layer-change="filterLayer" />
+      <tool-box :show="!loading" :layers="layers" :layer-checked="checkedLayer" :tool-menu="menus.menuList" @change-base-map="changeBaseMap" @layer-change="filterLayer" @click-menu="clickMenu" @close-menu-pop="closeAllPopup" />
+      <!--数据筛选窗口-->
+      <popup-data-filter :show="menus.dataFilterWindowShow" :well-type-list="wellTypeList" @filter="dataFilter" @close="closePopupDataFilter" />
+      <!--坐标定位窗口-->
+      <popup-location :show="menus.locationWindowShow" @search="setCenter" @picker="pickerPosition" @close="closePopupLocation" />
     </div>
   </div>
 </template>
@@ -23,22 +29,25 @@
 import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
 import DeptSelect from '../../components/DeptSelect/index'
 import AMapContainer from '@/components/Amap/AMapContainer'
-import AlarmInfoWindow from './components/alarmInfoWindow'
-import WellInfoWindow from './components/wellInfoWindow'
+import AlarmInfoWindow from './components/infoWindowAlarm'
+import WellInfoWindow from './components/infoWindowWell'
 import AMapMarker from '@/components/Amap/AMapMarker'
 import AlarmList from './components/alarmList'
 import Vue from 'vue'
 import ToolBox from '@/views/overview/components/toolBox'
+import PopupDataFilter from '@/views/overview/components/popupDataFilter'
+import PopupLocation from '@/views/overview/components/popupLocation'
+import SearchComp from '@/views/overview/components/searchComp'
 
 export default {
   name: 'Overview',
-  components: { ToolBox, AlarmList, AMapMarker, AMapContainer, DeptSelect },
+  components: { SearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList, AMapMarker, AMapContainer, DeptSelect },
   data() {
     return {
       map: null, // 地图对象
       baseLayer: 'gaode_vec', // 底图图层
-      layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'alarm', name: '报警图层' }],
-      checkedLayer: [],
+      layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
+      checkedLayer: [], // 选中的图层
       center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
       zoom: 12, // 地图缩放比例
       type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
@@ -54,15 +63,16 @@
       massMarkerOffset: [8, 8],
       showAlarm: true, // 是否显示报警
       toolShow: false, // 工具栏是否显示
+      menus: {
+        menuList: [{ icon: 'search', menu: 'dataFilter', name: '数据筛选' }, { icon: 'coordinate', menu: 'location', name: '坐标定位' }],
+        dataFilterWindowShow: false, // 数据筛选窗口是否显示
+        locationWindowShow: false // 坐标定位窗口是否显示
+      }, // 工具栏菜单
       listQuery: {
         keywords: '', // 关键字
         wellType: '', // 井类型
-        deptid: '', // 组织机构
-        isAlarm: '1' // 是否报警
+        deptid: '' // 组织机构
       }, // 筛选条件
-      searchQuery: {
-        keywords: '' // 关键字： 井编号、名称、位置
-      }, // 查询条件
       count: 30, // 倒计时显示时间
       clock: null, // 计时器
       showWellType: false, // 是否显示井类型下拉,默认边上
@@ -72,6 +82,7 @@
       alarmListOri: [], // 原始报警列表
       alarmList: [], // 显示报警列表
       alarmWells: [], // 报警井列表
+      resultList: [], // 搜索结果列表
       latestAlarmTime: '', // 列表中最新报警事件
       alarmFirstAmount: true, // 是否初次加载报警
       firstAmount: true, // 是否第一次加载井数据
@@ -90,36 +101,8 @@
     ])
   },
   watch: {
-    showAll(val) {
-      if (val) { // 显示全部
-        // 先清空筛选条件
-        this.listQuery.deptid = ''
-        this.listQuery.keywords = ''
-        this.listQuery.wellType = ''
-        if (this.firstAmount) { // 初次加载直接调用mount
-          if (this.type === 'massMarkers') {
-            this.mountMassMarker() // 加载海量点
-          } else if (this.type === 'cluster') {
-            this.mountClusters() // 加载聚合点
-          }
-        } else {
-          this.filterIcon()
-        }
-      } else { // 仅显示报警
-        this.filterIcon()
-      }
-    },
-    needRefresh(val) {
-      // 需要刷新
-      if (val) {
-        this.refreshAlarm()
-      }
-    },
-    showAlarm(val) {
-      // 关闭报警显示地时候清除掉报警弹窗
-      if (!val) {
-        this.clearInfoWindow()
-      }
+    needRefresh(val) { // 需要刷新报警
+      if (val) this.refreshAlarm()
     }
   },
   created() {
@@ -140,9 +123,7 @@
       this.toolShow = true
       this.refreshAlarm()
       if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
-        setTimeout(() => {
-          // this.countDown()
-        }, 1000)
+        setTimeout(() => { this.countDown() }, 1000)
       }
     },
     // 切换底图
@@ -189,25 +170,36 @@
         }
       })
     },
+    /**
+     * 数据筛选
+     * @param listQuery 筛选条件
+     * @param showMessage 是否告知筛选结果
+     */
+    dataFilter(listQuery, showMessage = true) {
+      if (this.type === 'massMarkers') { // 过滤海量点
+        this.filterMassMarker(listQuery, showMessage)
+        this.filterAlarm(listQuery, showMessage)
+      } else if (this.type === 'cluster') { // 过滤聚合点
+        this.filterClusters(listQuery, showMessage)
+        this.filterAlarm(listQuery, showMessage)
+      }
+    },
     // 数据查询
-    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('查询条件不能为空')
+    search(keywords) {
+      if (keywords === '') {
+        this.$message.warning('搜索条件不能为空')
       } else {
-        this.showClearBtn = true
-        this.filterIcon(showMessage)
+        // todo: 待完善查询逻辑
+        this.resultList = this.markers
       }
     },
     // 清除查询
     clearSearch() {
-      this.listQuery.wellType = ''
-      this.listQuery.deptid = ''
-      this.listQuery.keywords = ''
-      this.filterIcon()
-      this.showClearBtn = false
+      // this.listQuery.wellType = ''
+      // this.listQuery.deptid = ''
+      // this.listQuery.keywords = ''
+      // this.filterIcon()
+      // this.showClearBtn = false
     },
     // 过滤海量点，给markers赋visible值
     filterMassMarker(listQuery, showMessage = false) {
@@ -215,7 +207,7 @@
       let center = [] // 待移动到的地图中心
       // 2. 整理查询条件
       const keywords = listQuery.keywords // 关键字
-      const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : [listQuery.wellType] // 井类型
+      const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 井类型
       let deptids = [] // 所有权属
       if (listQuery.deptid) {
         deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
@@ -250,7 +242,7 @@
       const hideWellIds = []// 要隐藏的井编号
       // 整理筛选条件
       const keywords = listQuery.keywords
-      const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : [listQuery.wellType]
+      const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 井类型
       let deptids = [] // 所有权属
       if (listQuery.deptid) {
         deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
@@ -278,9 +270,6 @@
       }
       // 4.过滤报警marker：alarmWells  如果没有找到符合要求的井，直接将全部查询结果隐藏，并将所有报警隐藏，否则按照查询结果筛选需要隐藏的报警
       if (hideWellIds.length === this.alarmWells.length) {
-        if (showMessage) {
-          this.$message.warning('查无结果')
-        }
         for (const alarmWell of this.alarmWells) {
           alarmWell.visible = false
         }
@@ -566,6 +555,41 @@
         }
       }
     },
+    // 点击工具箱菜单, menu:{menu:'xxx', name:''}, 建议菜单menu属性的命名与自定义弹窗的show属性名称保持同一规则
+    clickMenu(menu) {
+      this.closeAllPopup()
+      const key = menu.menu + 'WindowShow'
+      const obj = {}
+      obj[key] = true // 将该值置为false, 需要借助obj中转
+      Object.assign(this.menus, obj)
+    },
+    // 关闭所有菜单点出的弹窗
+    closeAllPopup() {
+      for (const key in this.menus) {
+        if (key.indexOf('WindowShow') > -1) {
+          // 将该值置为false, 需要借助obj中转
+          const obj = {}
+          obj[key] = false
+          Object.assign(this.menus, obj)
+        }
+      }
+    },
+    // 关闭数据筛选弹窗
+    closePopupDataFilter() {
+      Object.assign(this.menus, { dataFilterWindowShow: false })
+    },
+    // TODO: 坐标定位，居中，绘点
+    setCenter() {
+
+    },
+    // TODO: 坐标拾取， 在地图上绘点
+    pickerPosition() {
+
+    },
+    // TODO: 关闭坐标定位窗口， 清除地图上的标注
+    closePopupLocation() {
+      Object.assign(this.menus, { locationWindowShow: false })
+    },
     // 获取当前deptid的所有下级id,仅最多支持3级
     fetchDeptList(deptid) {
       console.log('fetchDeptList')