diff --git "a/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png" "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0337d8a
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
Binary files differ

diff --git "a/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png" "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0337d8a
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..cf2925f
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
Binary files differ

diff --git "a/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png" "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0337d8a
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..cf2925f
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png" "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
new file mode 100644
index 0000000..40144aa
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
Binary files differ

diff --git "a/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png" "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0337d8a
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..cf2925f
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png" "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
new file mode 100644
index 0000000..40144aa
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..d5832ce
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
Binary files differ

diff --git "a/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png" "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0337d8a
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..cf2925f
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png" "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
new file mode 100644
index 0000000..40144aa
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..d5832ce
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png" "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..9edb0c1
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
Binary files differ

diff --git "a/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png" "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0337d8a
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..cf2925f
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png" "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
new file mode 100644
index 0000000..40144aa
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..d5832ce
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png" "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..9edb0c1
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" "b/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ "b/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"

diff --git "a/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png" "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0337d8a
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..cf2925f
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png" "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
new file mode 100644
index 0000000..40144aa
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..d5832ce
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png" "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..9edb0c1
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" "b/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ "b/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
new file mode 100644
index 0000000..0367821
--- /dev/null
+++ b/src/api/home/well/well.ts
@@ -0,0 +1,21 @@
+/**
+ * 闸井监测接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getWellListPage(data: any) {
+  return request({
+    url: `/monitor/well/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 列表-不分页
+export function getWellList(data: any) {
+  return request({
+    url: '/monitor/well/list',
+    method: 'post',
+    data,
+  })
+}

diff --git "a/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png" "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0337d8a
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..cf2925f
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png" "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
new file mode 100644
index 0000000..40144aa
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..d5832ce
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png" "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..9edb0c1
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" "b/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ "b/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
new file mode 100644
index 0000000..0367821
--- /dev/null
+++ b/src/api/home/well/well.ts
@@ -0,0 +1,21 @@
+/**
+ * 闸井监测接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getWellListPage(data: any) {
+  return request({
+    url: `/monitor/well/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 列表-不分页
+export function getWellList(data: any) {
+  return request({
+    url: '/monitor/well/list',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
new file mode 100644
index 0000000..da6f6b2
--- /dev/null
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -0,0 +1,65 @@
+<!--
+  Description: 综合大屏-信息窗体
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup name="infoWindow">
+const dialogFormVisible = ref(false)
+const overlay = ref()
+const infoWindow = ref()
+// 弹窗展示数据信息
+const info = ref()
+// 弹窗展示的内容
+const flag = ref('')
+// 初始化
+const initDialog = (e: any) => {
+  // console.log(e, '信息窗体接收的数据')
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  info.value = e.info
+  dialogFormVisible.value = true
+  if (e.map) {
+    e.map.setZoom(15)
+  }
+}
+
+// 关闭
+const close = () => {
+  infoWindow.value?.close()
+}
+
+defineExpose({ initDialog, close })
+</script>
+
+<template>
+  <div v-show="dialogFormVisible" class="container" @mouseleave="() => {}">
+    <div class="header">
+      <span @click="close">x</span>
+    </div>
+    <div>
+      闸井详情数据
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  width: 360px;
+  padding: 0 10px;
+  background: rgba($color: #feffff, $alpha: 95%);
+  border: 2px solid #79b5e6;
+  position: relative;
+
+  .header {
+    float: right;
+    color: #4875a0;
+    font-size: 18px;
+    font-weight: 700;
+
+    &:hover {
+      cursor: pointer;
+      color: #658eb4;
+    }
+  }
+}
+</style>

diff --git "a/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png" "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0337d8a
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..cf2925f
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png" "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
new file mode 100644
index 0000000..40144aa
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..d5832ce
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png" "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..9edb0c1
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" "b/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ "b/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
new file mode 100644
index 0000000..0367821
--- /dev/null
+++ b/src/api/home/well/well.ts
@@ -0,0 +1,21 @@
+/**
+ * 闸井监测接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getWellListPage(data: any) {
+  return request({
+    url: `/monitor/well/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 列表-不分页
+export function getWellList(data: any) {
+  return request({
+    url: '/monitor/well/list',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
new file mode 100644
index 0000000..da6f6b2
--- /dev/null
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -0,0 +1,65 @@
+<!--
+  Description: 综合大屏-信息窗体
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup name="infoWindow">
+const dialogFormVisible = ref(false)
+const overlay = ref()
+const infoWindow = ref()
+// 弹窗展示数据信息
+const info = ref()
+// 弹窗展示的内容
+const flag = ref('')
+// 初始化
+const initDialog = (e: any) => {
+  // console.log(e, '信息窗体接收的数据')
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  info.value = e.info
+  dialogFormVisible.value = true
+  if (e.map) {
+    e.map.setZoom(15)
+  }
+}
+
+// 关闭
+const close = () => {
+  infoWindow.value?.close()
+}
+
+defineExpose({ initDialog, close })
+</script>
+
+<template>
+  <div v-show="dialogFormVisible" class="container" @mouseleave="() => {}">
+    <div class="header">
+      <span @click="close">x</span>
+    </div>
+    <div>
+      闸井详情数据
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  width: 360px;
+  padding: 0 10px;
+  background: rgba($color: #feffff, $alpha: 95%);
+  border: 2px solid #79b5e6;
+  position: relative;
+
+  .header {
+    float: right;
+    color: #4875a0;
+    font-size: 18px;
+    font-weight: 700;
+
+    &:hover {
+      cursor: pointer;
+      color: #658eb4;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
index 5913db3..f58c925 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -4,18 +4,159 @@
   Date: 2023-07-08
  -->
 <script lang="ts" setup name="AlarmMap">
+import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
+
 const $props = defineProps({
   height: {
     type: Number,
     default: 0,
   },
+  data: {
+    type: Array,
+    default: () => ([]),
+  },
 })
+// 地图实例
+const mapRef = ref()
+const publicPath = window.location.origin
+console.log(publicPath, 'publicPath')
+// 初次加载标识
+const pageIsFirst = ref(true)
+// 绘制标记点
+const drawMarker = () => {
+  const style = [
+    {
+      url: `${publicPath}/image/well/闸井-正常.png`, // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: `${publicPath}/image/well/闸井-异常.png`, // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: `${publicPath}/image/well/闸井-离线.png`, // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: `${publicPath}/image/well/闸井-未部署.png`, // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+  ]
+  // （0：未监控，1：正常，2：异常，3：离线）
+  const styleDict = {
+    0: 3,
+    1: 0,
+    2: 1,
+    3: 2,
+  } as { [key: string]: number }
+  const data = $props.data.filter((item: any) => item.lngGaode && item.latGaode).map((item: any) => ({
+    lnglat: [item.lngGaode, item.latGaode],
+    name: item.ledgerName,
+    style: item.monitorState ? styleDict[item.monitorState] : 3,
+    id: item.id,
+  }))
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  //
+  if (pageIsFirst.value) {
+    mapRef.value.map.setCenter([116.397428, 39.90923])
+  }
+  else {
+    mapRef.value.map.setFitView()
+  }
+  mapRef.value.map.setZoom(10.5)
+}
+// 点标记弹窗
+const detail = ref()
+const detailRef = ref()
+const massMarksClick = (data: any) => {
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  console.log(data.event.target)
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+  })
+}
+
+// 打开信息窗体
+const openInfoDetail = (data: any) => {
+  mapRef.value.map.setZoom(10.5)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  setTimeout(() => {
+    detail.value.open(mapRef.value.map, data.lnglat)
+    // 初始化信息窗口
+    detailRef.value.initDialog({
+      // overlay: data.event.target,
+      infoWindow: detail.value,
+      info: data,
+      map: mapRef.value.map,
+    })
+    mapRef.value.map.setCenter(data.lnglat)
+    // mapRef.value.map.setZoom(15)
+  })
+}
+
+// 地图绘制完毕
+const completeMap = () => {
+  console.log($props.data, '地图绘制完毕')
+  // 绘制海量点
+  drawMarker()
+  pageIsFirst.value = false
+}
+watch(() => $props.data, (newVal) => {
+  if (pageIsFirst.value) { return }
+  mapRef.value.removeMassMarks()
+  if (detailRef.value) {
+    detailRef.value.close()
+  }
+  if (newVal.length) {
+    // 清空标记点重新绘制
+    drawMarker()
+  }
+}, {
+  deep: true,
+})
+defineExpose({ openInfoDetail })
 </script>
 
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
-    <a-map />
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map ref="mapRef" @complete="completeMap" @massMarksClick="massMarksClick" />
   </div>
 </template>
 

diff --git "a/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png" "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0337d8a
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..cf2925f
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png" "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
new file mode 100644
index 0000000..40144aa
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\234\252\351\203\250\347\275\262.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png" "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..d5832ce
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png" "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..9edb0c1
--- /dev/null
+++ "b/public/image/well/\351\227\270\344\272\225-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt" "b/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ "b/public/image/\346\226\260\345\273\272 \346\226\207\346\234\254\346\226\207\346\241\243.txt"
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
new file mode 100644
index 0000000..0367821
--- /dev/null
+++ b/src/api/home/well/well.ts
@@ -0,0 +1,21 @@
+/**
+ * 闸井监测接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getWellListPage(data: any) {
+  return request({
+    url: `/monitor/well/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 列表-不分页
+export function getWellList(data: any) {
+  return request({
+    url: '/monitor/well/list',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
new file mode 100644
index 0000000..da6f6b2
--- /dev/null
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -0,0 +1,65 @@
+<!--
+  Description: 综合大屏-信息窗体
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup name="infoWindow">
+const dialogFormVisible = ref(false)
+const overlay = ref()
+const infoWindow = ref()
+// 弹窗展示数据信息
+const info = ref()
+// 弹窗展示的内容
+const flag = ref('')
+// 初始化
+const initDialog = (e: any) => {
+  // console.log(e, '信息窗体接收的数据')
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  info.value = e.info
+  dialogFormVisible.value = true
+  if (e.map) {
+    e.map.setZoom(15)
+  }
+}
+
+// 关闭
+const close = () => {
+  infoWindow.value?.close()
+}
+
+defineExpose({ initDialog, close })
+</script>
+
+<template>
+  <div v-show="dialogFormVisible" class="container" @mouseleave="() => {}">
+    <div class="header">
+      <span @click="close">x</span>
+    </div>
+    <div>
+      闸井详情数据
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  width: 360px;
+  padding: 0 10px;
+  background: rgba($color: #feffff, $alpha: 95%);
+  border: 2px solid #79b5e6;
+  position: relative;
+
+  .header {
+    float: right;
+    color: #4875a0;
+    font-size: 18px;
+    font-weight: 700;
+
+    &:hover {
+      cursor: pointer;
+      color: #658eb4;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
index 5913db3..f58c925 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -4,18 +4,159 @@
   Date: 2023-07-08
  -->
 <script lang="ts" setup name="AlarmMap">
+import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
+
 const $props = defineProps({
   height: {
     type: Number,
     default: 0,
   },
+  data: {
+    type: Array,
+    default: () => ([]),
+  },
 })
+// 地图实例
+const mapRef = ref()
+const publicPath = window.location.origin
+console.log(publicPath, 'publicPath')
+// 初次加载标识
+const pageIsFirst = ref(true)
+// 绘制标记点
+const drawMarker = () => {
+  const style = [
+    {
+      url: `${publicPath}/image/well/闸井-正常.png`, // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: `${publicPath}/image/well/闸井-异常.png`, // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: `${publicPath}/image/well/闸井-离线.png`, // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: `${publicPath}/image/well/闸井-未部署.png`, // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+  ]
+  // （0：未监控，1：正常，2：异常，3：离线）
+  const styleDict = {
+    0: 3,
+    1: 0,
+    2: 1,
+    3: 2,
+  } as { [key: string]: number }
+  const data = $props.data.filter((item: any) => item.lngGaode && item.latGaode).map((item: any) => ({
+    lnglat: [item.lngGaode, item.latGaode],
+    name: item.ledgerName,
+    style: item.monitorState ? styleDict[item.monitorState] : 3,
+    id: item.id,
+  }))
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  //
+  if (pageIsFirst.value) {
+    mapRef.value.map.setCenter([116.397428, 39.90923])
+  }
+  else {
+    mapRef.value.map.setFitView()
+  }
+  mapRef.value.map.setZoom(10.5)
+}
+// 点标记弹窗
+const detail = ref()
+const detailRef = ref()
+const massMarksClick = (data: any) => {
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  console.log(data.event.target)
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+  })
+}
+
+// 打开信息窗体
+const openInfoDetail = (data: any) => {
+  mapRef.value.map.setZoom(10.5)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  setTimeout(() => {
+    detail.value.open(mapRef.value.map, data.lnglat)
+    // 初始化信息窗口
+    detailRef.value.initDialog({
+      // overlay: data.event.target,
+      infoWindow: detail.value,
+      info: data,
+      map: mapRef.value.map,
+    })
+    mapRef.value.map.setCenter(data.lnglat)
+    // mapRef.value.map.setZoom(15)
+  })
+}
+
+// 地图绘制完毕
+const completeMap = () => {
+  console.log($props.data, '地图绘制完毕')
+  // 绘制海量点
+  drawMarker()
+  pageIsFirst.value = false
+}
+watch(() => $props.data, (newVal) => {
+  if (pageIsFirst.value) { return }
+  mapRef.value.removeMassMarks()
+  if (detailRef.value) {
+    detailRef.value.close()
+  }
+  if (newVal.length) {
+    // 清空标记点重新绘制
+    drawMarker()
+  }
+}, {
+  deep: true,
+})
+defineExpose({ openInfoDetail })
 </script>
 
 <template>
   <div :style="`height: ${$props.height}px`" class="map-container">
-    <a-map />
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map ref="mapRef" @complete="completeMap" @massMarksClick="massMarksClick" />
   </div>
 </template>
 
diff --git a/src/views/home/well/index.vue b/src/views/home/well/index.vue
index d6d9cf7..6c0e28a 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -4,50 +4,28 @@
   Date: 2023-07-12
  -->
 <script lang="ts" setup name="WellMonitor">
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import { getWellList, getWellListPage } from '@/api/home/well/well'
+import { getDictByCode } from '@/api/system/dict'
 // 表格数据
-const list = ref([
-  {
-    wellId: 'N57X508',
-    wellNo: '01110200745927',
-    name: '中压A闸1',
-    dept: '第一分公司/运维1所/1班',
-    property: '富源里小区',
-    manage: '自管',
-    use: '投用',
-    defence: '布防',
-    status: '正常',
-    device: '1',
-    tag: '',
-  },
-  {
-    wellId: 'N57X508',
-    wellNo: '01110200745927',
-    name: '中压A闸1',
-    dept: '第一分公司/运维1所/1班',
-    property: '富源里小区',
-    manage: '自管',
-    use: '停用',
-    defence: '撤防',
-    status: '正常',
-    device: '1',
-    tag: '',
-  },
-])
+const list = ref([])
 const total = ref(0)
+// 地图数据
+const mapList = ref([])
+
 // 初始展示列
 const columns = ref<any>([
-  { text: '闸井位号', value: 'wellId', align: 'center' },
-  { text: '闸井编号', value: 'wellNo', align: 'center' },
-  { text: '闸井名称', value: 'name', align: 'center' },
-  { text: '管理单位', value: 'dept', align: 'center' },
-  { text: '产权单位', value: 'property', align: 'center' },
-  { text: '管理方式', value: 'manage', align: 'center' },
-  { text: '使用状态', value: 'use', align: 'center' },
-  { text: '布防状态', value: 'defence', align: 'center' },
-  { text: '状态', value: 'status', align: 'center' },
+  { text: '闸井位号', value: 'tagNumber', align: 'center' },
+  { text: '闸井编号', value: 'ledgerCode', align: 'center' },
+  { text: '闸井名称', value: 'ledgerName', align: 'center' },
+  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '产权单位', value: 'propertyOwner', align: 'center' },
+  { text: '管理方式', value: 'manageTypeName', align: 'center' },
+  { text: '使用状态', value: 'onStateName', align: 'center' },
+  { text: '布防状态', value: 'bfztName', align: 'center' },
+  { text: '状态', value: 'monitorStateName', align: 'center' },
   { text: '感知设备', value: 'device', align: 'center' },
   { text: '标签', value: 'tag', align: 'center' },
 ])
@@ -62,28 +40,46 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
-})
-// 开始结束时间
-const datetimerange = ref()
-watch(() => datetimerange.value, (newVal) => {
-  // listQuery.createTimeStart = ''
-  // listQuery.createTimeEnd = ''
-  if (Array.isArray(newVal)) {
-    if (newVal.length) {
-      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
-      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
-    }
-  }
+  tagNumber: '', // 闸井位号
+  ledgerName: '', // 闸井名称
+  ledgerCode: '', // 闸井编号
+  responsibleDept: '', // 管理单位
+  propertyOwner: '', // 产权单位
+  manageType: '', // 管理方式
+  onState: '', // 使用状态
+  bfzt: '', // 布防状态
+  monitorState: '', // 监控状态
 })
 // 查询数据
 const fetchData = () => {
-  setTimeout(() => {
+  loadingTable.value = true
+  getWellListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({ ...item, bfztName: item.bfzt === '1' ? '布防' : '撤防' }))
+    total.value = res.data.total
     loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+  getWellList(listQuery.value).then((res) => {
+    mapList.value = res.data
   })
 }
 // 重置查询条件f
 const reset = () => {
-
+  listQuery.value = {
+    limit: 20,
+    offset: 1,
+    tagNumber: '', // 闸井位号
+    ledgerName: '', // 闸井名称
+    ledgerCode: '', // 闸井编号
+    responsibleDept: '', // 管理单位
+    propertyOwner: '', // 产权单位
+    manageType: '', // 管理方式
+    onState: '', // 使用状态
+    bfzt: '', // 布防状态
+    monitorState: '', // 监控状态
+  }
+  fetchData()
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size: number; page: number }) => {
@@ -96,26 +92,81 @@
   fetchData()
 }
 
+// 获取字典
+const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
+const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
+const bfztList = ref<{ id: string; name: string; value: string }[]>([]) // 布防状态
+const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
+const fetchDict = () => {
+  // 管理方式
+  getDictByCode('manageType').then((res) => {
+    manageTypeList.value = res.data
+  })
+  // 使用状态
+  getDictByCode('onState').then((res) => {
+    onStateList.value = res.data
+  })
+  // 布防状态
+  getDictByCode('organizeDefenceStatus').then((res) => {
+    bfztList.value = res.data
+  })
+  // 监控状态
+  getDictByCode('monitorState').then((res) => {
+    monitorStateList.value = res.data
+  })
+}
 onMounted(() => {
+  fetchDict()
   fetchData()
 })
 
 // 表格标识  地图或普通
+const mapRef = ref()
 const tableFlag = ref('normal')
 const switchMode = (type: string) => {
-  if (!list.value.length) {
+  if (!mapList.value.length) {
     ElMessage.warning('暂无数据')
     return
   }
   tableFlag.value = type
 }
+// 点击数据行
+const rowClick = (data: any) => {
+  if (tableFlag.value === 'normal') { return }
+  if (!data.lngGaode || !data.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.openInfoDetail({
+    lnglat: [data.lngGaode, data.latGaode],
+    id: data.id,
+    name: data.ledgerName,
+  })
+}
+// 布防/撤防
+const changeDefense = (row: any) => {
+  ElMessageBox.confirm(
+    `确定要${row.bfzt === '1' ? '撤防' : '布防'}${row.ledgerName}吗？`,
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+  })
+}
+// 查看/编辑
+const editRow = (type: string, row: any) => {
+
+}
 </script>
 
 <template>
   <!-- 布局 -->
-  <app-container>
+  <app-container class="container">
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" :height="350" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" class="map" :height="350" :data="mapList" />
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
         <arrow-up-bold />
@@ -124,31 +175,39 @@
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="闸井位号" clearable />
+        <el-input v-model.trim="listQuery.tagNumber" placeholder="闸井位号" clearable />
       </search-item>
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+        <el-input v-model.trim="listQuery.ledgerCode" placeholder="闸井编号" clearable />
       </search-item>
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+        <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.keywords" placeholder="管理单位" :clearable="true" class="select" />
+        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 175px;" />
       </search-item>
       <search-item>
-        <el-input v-model.trim="listQuery.keywords" placeholder="产权单位" clearable />
+        <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="管理方式" clearable class="select" />
+        <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select">
+          <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="使用状态" clearable class="select" />
+        <el-select v-model="listQuery.onState" placeholder="使用状态" clearable class="select">
+          <el-option v-for="item in onStateList" :key="item.id" :label="item.name" :value="item.value" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="布防状态" clearable class="select" />
+        <el-select v-model="listQuery.bfzt" placeholder="布防状态" clearable class="select">
+          <el-option v-for="item in bfztList" :key="item.id" :label="item.name" :value="item.value" />
+        </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.keywords" placeholder="监控状态" clearable class="select" />
+        <el-select v-model="listQuery.monitorState" placeholder="监控状态" clearable class="select">
+          <el-option v-for="item in monitorStateList" :key="item.id" :label="item.name" :value="item.value" />
+        </el-select>
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.keywords" placeholder="标签" clearable class="select" />
@@ -178,7 +237,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage"
+        @change="changePage" @rowClick="rowClick"
       >
         <template #preColumns>
           <!-- <el-table-column label="选择" width="55" align="center">
@@ -186,7 +245,7 @@
                 <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
               </template>
   </el-table-column> -->
-          <el-table-column label="序号" width="55" align="center">
+          <el-table-column label="序号" width="75" align="center">
             <template #default="scope">
               {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
             </template>
@@ -195,18 +254,18 @@
         <template #columns>
           <el-table-column label="布/撤防" align="center" width="80">
             <template #default="scope">
-              <el-button type="primary" link size="small">
-                布防 {{ scope.$index }}
+              <el-button type="primary" link size="small" @click="changeDefense(scope.row)">
+                {{ scope.row.bfzt === '1' ? '撤防' : '布防' }}
               </el-button>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" width="120">
             <template #default="scope">
-              <el-button type="primary" link size="small">
-                查看 {{ scope.$index }}
+              <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
+                查看
               </el-button>
-              <el-button type="primary" link size="small">
-                编辑 {{ scope.$index }}
+              <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
+                编辑
               </el-button>
             </template>
           </el-table-column>
@@ -227,4 +286,17 @@
     cursor: pointer;
   }
 }
+
+// .container{
+//   position: relative;
+//   .map{
+//     position: fixed;
+//   }
+// }
+</style>
+
+<style>
+.select {
+  width: 175px;
+}
 </style>