diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index b8bcbbf..3b8d5f7 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -119,6 +119,19 @@
           auth: '/well',
         },
       },
+      {
+        path: '/well/:type',
+        component: () => import('@/views/home/well/components/detail.vue'),
+        name: 'WellMonitorDetail',
+        meta: {
+          title: '闸井详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/well',
+          auth: '/well/detail',
+        },
+      },
     ],
   },
   {

diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index b8bcbbf..3b8d5f7 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -119,6 +119,19 @@
           auth: '/well',
         },
       },
+      {
+        path: '/well/:type',
+        component: () => import('@/views/home/well/components/detail.vue'),
+        name: 'WellMonitorDetail',
+        meta: {
+          title: '闸井详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/well',
+          auth: '/well/detail',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
new file mode 100644
index 0000000..17c4b8d
--- /dev/null
+++ b/src/views/home/well/components/detail.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 闸井监测-详情
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井名称',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '是否直埋',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系电话',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '启用日期',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: '',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    detailInfo.value = {
+
+    }
+  }, 1500)
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <detail-page title="闸井详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+</style>

diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index b8bcbbf..3b8d5f7 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -119,6 +119,19 @@
           auth: '/well',
         },
       },
+      {
+        path: '/well/:type',
+        component: () => import('@/views/home/well/components/detail.vue'),
+        name: 'WellMonitorDetail',
+        meta: {
+          title: '闸井详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/well',
+          auth: '/well/detail',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
new file mode 100644
index 0000000..17c4b8d
--- /dev/null
+++ b/src/views/home/well/components/detail.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 闸井监测-详情
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井名称',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '是否直埋',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系电话',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '启用日期',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: '',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    detailInfo.value = {
+
+    }
+  }, 1500)
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <detail-page title="闸井详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+</style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
new file mode 100644
index 0000000..fb87a94
--- /dev/null
+++ b/src/views/home/well/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from './lifeCycleRecord.vue'
+import maintenanceRecord from './maintenanceRecord.vue'
+const activeName = ref('监控数据')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="监控数据" name="监控数据">
+      <monitor-data />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record />
+    </el-tab-pane>
+  </el-tabs>
+</template>

diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index b8bcbbf..3b8d5f7 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -119,6 +119,19 @@
           auth: '/well',
         },
       },
+      {
+        path: '/well/:type',
+        component: () => import('@/views/home/well/components/detail.vue'),
+        name: 'WellMonitorDetail',
+        meta: {
+          title: '闸井详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/well',
+          auth: '/well/detail',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
new file mode 100644
index 0000000..17c4b8d
--- /dev/null
+++ b/src/views/home/well/components/detail.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 闸井监测-详情
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井名称',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '是否直埋',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系电话',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '启用日期',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: '',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    detailInfo.value = {
+
+    }
+  }, 1500)
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <detail-page title="闸井详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+</style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
new file mode 100644
index 0000000..fb87a94
--- /dev/null
+++ b/src/views/home/well/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from './lifeCycleRecord.vue'
+import maintenanceRecord from './maintenanceRecord.vue'
+const activeName = ref('监控数据')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="监控数据" name="监控数据">
+      <monitor-data />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index da6f6b2..1b52d44 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -1,5 +1,5 @@
 <!--
-  Description: 综合大屏-信息窗体
+  Description: 闸井管理-信息窗体
   Author: 李亚光
   Date: 2024-07-18
  -->
@@ -7,20 +7,84 @@
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-// 弹窗展示数据信息
-const info = ref()
-// 弹窗展示的内容
-const flag = ref('')
+// 基本数据
+const baseInfo = ref({
+  ledgerCode: '', // 闸井编号
+  ledgerName: '', // 闸井名称
+  lngGaode: '',
+  latGaode: '',
+})
+// 详细信息
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: '',
+    align: 'center',
+  },
+])
 // 初始化
 const initDialog = (e: any) => {
-  // console.log(e, '信息窗体接收的数据')
+  console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
   infoWindow.value = e.infoWindow
-  info.value = e.info
+  baseInfo.value = e.info.row
   dialogFormVisible.value = true
   if (e.map) {
     e.map.setZoom(15)
   }
+  // 获取详细信息
 }
 
 // 关闭
@@ -32,34 +96,96 @@
 </script>
 
 <template>
-  <div v-show="dialogFormVisible" class="container" @mouseleave="() => {}">
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
-      <span @click="close">x</span>
+      <el-tooltip
+        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        placement="top"
+      >
+        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+      </el-tooltip>
+      <span class="close" @click="close">x</span>
     </div>
-    <div>
-      闸井详情数据
+    <div class="body">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 20%;
+}
+
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+}
+
 .container {
-  width: 360px;
-  padding: 0 10px;
+  width: 500px;
+  // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
-  border: 2px solid #79b5e6;
+  border: 1.5px solid #79b5e6;
   position: relative;
 
   .header {
     float: right;
-    color: #4875a0;
-    font-size: 18px;
-    font-weight: 700;
+    background-color: #ccc;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 10px;
+    align-items: center;
 
-    &:hover {
-      cursor: pointer;
-      color: #658eb4;
+    .title {
+      font-weight: 700;
+      display: inline-block;
+      width: 90%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .close {
+      color: #4875a0;
+      font-size: 22px;
+      font-weight: 700;
+
+      &:hover {
+        cursor: pointer;
+        color: #658eb4;
+      }
     }
   }
+
+  .body {
+    // padding: 10px;
+    // display: flex;
+    // flex-wrap: wrap;
+    width: 100%;
+
+    .name {
+      width: 30%;
+    }
+
+    .value {
+      width: 70%;
+    }
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
 }
 </style>

diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index b8bcbbf..3b8d5f7 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -119,6 +119,19 @@
           auth: '/well',
         },
       },
+      {
+        path: '/well/:type',
+        component: () => import('@/views/home/well/components/detail.vue'),
+        name: 'WellMonitorDetail',
+        meta: {
+          title: '闸井详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/well',
+          auth: '/well/detail',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
new file mode 100644
index 0000000..17c4b8d
--- /dev/null
+++ b/src/views/home/well/components/detail.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 闸井监测-详情
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井名称',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '是否直埋',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系电话',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '启用日期',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: '',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    detailInfo.value = {
+
+    }
+  }, 1500)
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <detail-page title="闸井详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+</style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
new file mode 100644
index 0000000..fb87a94
--- /dev/null
+++ b/src/views/home/well/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from './lifeCycleRecord.vue'
+import maintenanceRecord from './maintenanceRecord.vue'
+const activeName = ref('监控数据')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="监控数据" name="监控数据">
+      <monitor-data />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index da6f6b2..1b52d44 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -1,5 +1,5 @@
 <!--
-  Description: 综合大屏-信息窗体
+  Description: 闸井管理-信息窗体
   Author: 李亚光
   Date: 2024-07-18
  -->
@@ -7,20 +7,84 @@
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-// 弹窗展示数据信息
-const info = ref()
-// 弹窗展示的内容
-const flag = ref('')
+// 基本数据
+const baseInfo = ref({
+  ledgerCode: '', // 闸井编号
+  ledgerName: '', // 闸井名称
+  lngGaode: '',
+  latGaode: '',
+})
+// 详细信息
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: '',
+    align: 'center',
+  },
+])
 // 初始化
 const initDialog = (e: any) => {
-  // console.log(e, '信息窗体接收的数据')
+  console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
   infoWindow.value = e.infoWindow
-  info.value = e.info
+  baseInfo.value = e.info.row
   dialogFormVisible.value = true
   if (e.map) {
     e.map.setZoom(15)
   }
+  // 获取详细信息
 }
 
 // 关闭
@@ -32,34 +96,96 @@
 </script>
 
 <template>
-  <div v-show="dialogFormVisible" class="container" @mouseleave="() => {}">
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
-      <span @click="close">x</span>
+      <el-tooltip
+        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        placement="top"
+      >
+        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+      </el-tooltip>
+      <span class="close" @click="close">x</span>
     </div>
-    <div>
-      闸井详情数据
+    <div class="body">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 20%;
+}
+
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+}
+
 .container {
-  width: 360px;
-  padding: 0 10px;
+  width: 500px;
+  // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
-  border: 2px solid #79b5e6;
+  border: 1.5px solid #79b5e6;
   position: relative;
 
   .header {
     float: right;
-    color: #4875a0;
-    font-size: 18px;
-    font-weight: 700;
+    background-color: #ccc;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 10px;
+    align-items: center;
 
-    &:hover {
-      cursor: pointer;
-      color: #658eb4;
+    .title {
+      font-weight: 700;
+      display: inline-block;
+      width: 90%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .close {
+      color: #4875a0;
+      font-size: 22px;
+      font-weight: 700;
+
+      &:hover {
+        cursor: pointer;
+        color: #658eb4;
+      }
     }
   }
+
+  .body {
+    // padding: 10px;
+    // display: flex;
+    // flex-wrap: wrap;
+    width: 100%;
+
+    .name {
+      width: 30%;
+    }
+
+    .value {
+      width: 70%;
+    }
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
 }
 </style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
new file mode 100644
index 0000000..1f37b5a
--- /dev/null
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 闸井监测-详情数据-全生命周期记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailLifeRecord">
+// 时间查询条件
+const timerang = ref()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '是否误报', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+  { text: '处置时长', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;">
+        搜索
+      </el-button>
+      <el-button type="primary">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="80">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>

diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index b8bcbbf..3b8d5f7 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -119,6 +119,19 @@
           auth: '/well',
         },
       },
+      {
+        path: '/well/:type',
+        component: () => import('@/views/home/well/components/detail.vue'),
+        name: 'WellMonitorDetail',
+        meta: {
+          title: '闸井详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/well',
+          auth: '/well/detail',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
new file mode 100644
index 0000000..17c4b8d
--- /dev/null
+++ b/src/views/home/well/components/detail.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 闸井监测-详情
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井名称',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '是否直埋',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系电话',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '启用日期',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: '',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    detailInfo.value = {
+
+    }
+  }, 1500)
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <detail-page title="闸井详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+</style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
new file mode 100644
index 0000000..fb87a94
--- /dev/null
+++ b/src/views/home/well/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from './lifeCycleRecord.vue'
+import maintenanceRecord from './maintenanceRecord.vue'
+const activeName = ref('监控数据')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="监控数据" name="监控数据">
+      <monitor-data />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index da6f6b2..1b52d44 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -1,5 +1,5 @@
 <!--
-  Description: 综合大屏-信息窗体
+  Description: 闸井管理-信息窗体
   Author: 李亚光
   Date: 2024-07-18
  -->
@@ -7,20 +7,84 @@
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-// 弹窗展示数据信息
-const info = ref()
-// 弹窗展示的内容
-const flag = ref('')
+// 基本数据
+const baseInfo = ref({
+  ledgerCode: '', // 闸井编号
+  ledgerName: '', // 闸井名称
+  lngGaode: '',
+  latGaode: '',
+})
+// 详细信息
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: '',
+    align: 'center',
+  },
+])
 // 初始化
 const initDialog = (e: any) => {
-  // console.log(e, '信息窗体接收的数据')
+  console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
   infoWindow.value = e.infoWindow
-  info.value = e.info
+  baseInfo.value = e.info.row
   dialogFormVisible.value = true
   if (e.map) {
     e.map.setZoom(15)
   }
+  // 获取详细信息
 }
 
 // 关闭
@@ -32,34 +96,96 @@
 </script>
 
 <template>
-  <div v-show="dialogFormVisible" class="container" @mouseleave="() => {}">
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
-      <span @click="close">x</span>
+      <el-tooltip
+        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        placement="top"
+      >
+        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+      </el-tooltip>
+      <span class="close" @click="close">x</span>
     </div>
-    <div>
-      闸井详情数据
+    <div class="body">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 20%;
+}
+
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+}
+
 .container {
-  width: 360px;
-  padding: 0 10px;
+  width: 500px;
+  // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
-  border: 2px solid #79b5e6;
+  border: 1.5px solid #79b5e6;
   position: relative;
 
   .header {
     float: right;
-    color: #4875a0;
-    font-size: 18px;
-    font-weight: 700;
+    background-color: #ccc;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 10px;
+    align-items: center;
 
-    &:hover {
-      cursor: pointer;
-      color: #658eb4;
+    .title {
+      font-weight: 700;
+      display: inline-block;
+      width: 90%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .close {
+      color: #4875a0;
+      font-size: 22px;
+      font-weight: 700;
+
+      &:hover {
+        cursor: pointer;
+        color: #658eb4;
+      }
     }
   }
+
+  .body {
+    // padding: 10px;
+    // display: flex;
+    // flex-wrap: wrap;
+    width: 100%;
+
+    .name {
+      width: 30%;
+    }
+
+    .value {
+      width: 70%;
+    }
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
 }
 </style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
new file mode 100644
index 0000000..1f37b5a
--- /dev/null
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 闸井监测-详情数据-全生命周期记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailLifeRecord">
+// 时间查询条件
+const timerang = ref()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '是否误报', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+  { text: '处置时长', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;">
+        搜索
+      </el-button>
+      <el-button type="primary">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="80">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
new file mode 100644
index 0000000..a389d61
--- /dev/null
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -0,0 +1,32 @@
+<!--
+  Description: 闸井监测-详情数据-监控设备维护记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMaintenanceRecord">
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '设备类型', value: '', align: 'center' },
+  { text: '设备型号', value: '', align: 'center' },
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '厂商', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作时间', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+</template>

diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index b8bcbbf..3b8d5f7 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -119,6 +119,19 @@
           auth: '/well',
         },
       },
+      {
+        path: '/well/:type',
+        component: () => import('@/views/home/well/components/detail.vue'),
+        name: 'WellMonitorDetail',
+        meta: {
+          title: '闸井详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/well',
+          auth: '/well/detail',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
new file mode 100644
index 0000000..17c4b8d
--- /dev/null
+++ b/src/views/home/well/components/detail.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 闸井监测-详情
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井名称',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '是否直埋',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系电话',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '启用日期',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: '',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    detailInfo.value = {
+
+    }
+  }, 1500)
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <detail-page title="闸井详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+</style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
new file mode 100644
index 0000000..fb87a94
--- /dev/null
+++ b/src/views/home/well/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from './lifeCycleRecord.vue'
+import maintenanceRecord from './maintenanceRecord.vue'
+const activeName = ref('监控数据')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="监控数据" name="监控数据">
+      <monitor-data />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index da6f6b2..1b52d44 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -1,5 +1,5 @@
 <!--
-  Description: 综合大屏-信息窗体
+  Description: 闸井管理-信息窗体
   Author: 李亚光
   Date: 2024-07-18
  -->
@@ -7,20 +7,84 @@
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-// 弹窗展示数据信息
-const info = ref()
-// 弹窗展示的内容
-const flag = ref('')
+// 基本数据
+const baseInfo = ref({
+  ledgerCode: '', // 闸井编号
+  ledgerName: '', // 闸井名称
+  lngGaode: '',
+  latGaode: '',
+})
+// 详细信息
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: '',
+    align: 'center',
+  },
+])
 // 初始化
 const initDialog = (e: any) => {
-  // console.log(e, '信息窗体接收的数据')
+  console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
   infoWindow.value = e.infoWindow
-  info.value = e.info
+  baseInfo.value = e.info.row
   dialogFormVisible.value = true
   if (e.map) {
     e.map.setZoom(15)
   }
+  // 获取详细信息
 }
 
 // 关闭
@@ -32,34 +96,96 @@
 </script>
 
 <template>
-  <div v-show="dialogFormVisible" class="container" @mouseleave="() => {}">
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
-      <span @click="close">x</span>
+      <el-tooltip
+        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        placement="top"
+      >
+        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+      </el-tooltip>
+      <span class="close" @click="close">x</span>
     </div>
-    <div>
-      闸井详情数据
+    <div class="body">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 20%;
+}
+
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+}
+
 .container {
-  width: 360px;
-  padding: 0 10px;
+  width: 500px;
+  // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
-  border: 2px solid #79b5e6;
+  border: 1.5px solid #79b5e6;
   position: relative;
 
   .header {
     float: right;
-    color: #4875a0;
-    font-size: 18px;
-    font-weight: 700;
+    background-color: #ccc;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 10px;
+    align-items: center;
 
-    &:hover {
-      cursor: pointer;
-      color: #658eb4;
+    .title {
+      font-weight: 700;
+      display: inline-block;
+      width: 90%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .close {
+      color: #4875a0;
+      font-size: 22px;
+      font-weight: 700;
+
+      &:hover {
+        cursor: pointer;
+        color: #658eb4;
+      }
     }
   }
+
+  .body {
+    // padding: 10px;
+    // display: flex;
+    // flex-wrap: wrap;
+    width: 100%;
+
+    .name {
+      width: 30%;
+    }
+
+    .value {
+      width: 70%;
+    }
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
 }
 </style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
new file mode 100644
index 0000000..1f37b5a
--- /dev/null
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 闸井监测-详情数据-全生命周期记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailLifeRecord">
+// 时间查询条件
+const timerang = ref()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '是否误报', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+  { text: '处置时长', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;">
+        搜索
+      </el-button>
+      <el-button type="primary">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="80">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
new file mode 100644
index 0000000..a389d61
--- /dev/null
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -0,0 +1,32 @@
+<!--
+  Description: 闸井监测-详情数据-监控设备维护记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMaintenanceRecord">
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '设备类型', value: '', align: 'center' },
+  { text: '设备型号', value: '', align: 'center' },
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '厂商', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作时间', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+</template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
index f58c925..5341746 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -3,7 +3,7 @@
   Author: 李亚光
   Date: 2023-07-08
  -->
-<script lang="ts" setup name="AlarmMap">
+<script lang="ts" setup name="WellMap">
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
 
@@ -20,7 +20,42 @@
 // 地图实例
 const mapRef = ref()
 const publicPath = window.location.origin
-console.log(publicPath, 'publicPath')
+// console.log(publicPath, 'publicPath')
+// 展示图例数据
+const legendShowData = ref(['1', '2', '3', '0'])
+// 地图图例数据
+const legendData = ref([
+  {
+    name: '正常',
+    url: `${publicPath}/image/well/闸井-正常.png`,
+    value: '1',
+  },
+  {
+    name: '异常',
+    url: `${publicPath}/image/well/闸井-异常.png`,
+    value: '2',
+  },
+  {
+    name: '离线',
+    url: `${publicPath}/image/well/闸井-离线.png`,
+    value: '3',
+  },
+  {
+    name: '未监控',
+    url: `${publicPath}/image/well/闸井-未部署.png`,
+    value: '0',
+  },
+])
+// 控制图例
+const clickLegend = (type: string) => {
+  if (legendShowData.value.includes(type)) {
+    legendShowData.value = legendShowData.value.filter((item: string) => item !== type)
+  }
+  else {
+    legendShowData.value.push(type)
+  }
+  resetDraw()
+}
 // 初次加载标识
 const pageIsFirst = ref(true)
 // 绘制标记点
@@ -58,16 +93,17 @@
     2: 1,
     3: 2,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => item.lngGaode && item.latGaode).map((item: any) => ({
+  const data = $props.data.map((item: any) => ({ ...item, monitorState: item.monitorState || '0' })).filter((item: any) => legendShowData.value.includes(item.monitorState)).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,
+    row: item,
   }))
   mapRef.value.addMassMarks({
     path: data,
     zIndex: 111,
-    zooms: [10.5, 20],
+    zooms: [3, 20],
     style,
   })
   //
@@ -94,7 +130,6 @@
   // 打开信息窗口
   detail.value.open(data.map, data.event.data.lnglat)
   // 初始化信息窗口
-  console.log(data.event.target)
   detailRef.value.initDialog({
     overlay: data.event.target,
     infoWindow: detail.value,
@@ -118,37 +153,31 @@
     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 }
+function resetDraw() {
   mapRef.value.removeMassMarks()
   if (detailRef.value) {
     detailRef.value.close()
   }
-  if (newVal.length) {
+  if ($props.data) {
     // 清空标记点重新绘制
     drawMarker()
   }
-}, {
-  deep: true,
-})
-defineExpose({ openInfoDetail })
+}
+// 地图绘制完毕
+const completeMap = () => {
+  console.log('地图绘制完毕')
+  // 绘制海量点
+  resetDraw()
+}
+defineExpose({ openInfoDetail, drawMarker, resetDraw })
 </script>
 
 <template>
@@ -157,11 +186,46 @@
     <detail-info ref="detailRef" />
     <!-- 地图 -->
     <a-map ref="mapRef" @complete="completeMap" @massMarksClick="massMarksClick" />
+    <!-- 图例 -->
+    <div class="legend">
+      <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
+        <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
+        <span v-show="!legendShowData.includes(item.value)" class="img" />
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .map-container {
   width: 100%;
+  position: relative;
+}
+
+.legend {
+  background: rgb(68 66 66 / 20%);
+  position: absolute;
+  z-index: 1;
+  left: 15px;
+  bottom: 10px;
+  padding: 0 10px;
+  border-radius: 8px;
+
+  .legend-item {
+    margin: 5px 0;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+
+    .img {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }
 </style>

diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index b8bcbbf..3b8d5f7 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -119,6 +119,19 @@
           auth: '/well',
         },
       },
+      {
+        path: '/well/:type',
+        component: () => import('@/views/home/well/components/detail.vue'),
+        name: 'WellMonitorDetail',
+        meta: {
+          title: '闸井详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/well',
+          auth: '/well/detail',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
new file mode 100644
index 0000000..17c4b8d
--- /dev/null
+++ b/src/views/home/well/components/detail.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 闸井监测-详情
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井名称',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '是否直埋',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系电话',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '启用日期',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: '',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    detailInfo.value = {
+
+    }
+  }, 1500)
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <detail-page title="闸井详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+</style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
new file mode 100644
index 0000000..fb87a94
--- /dev/null
+++ b/src/views/home/well/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from './lifeCycleRecord.vue'
+import maintenanceRecord from './maintenanceRecord.vue'
+const activeName = ref('监控数据')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="监控数据" name="监控数据">
+      <monitor-data />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index da6f6b2..1b52d44 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -1,5 +1,5 @@
 <!--
-  Description: 综合大屏-信息窗体
+  Description: 闸井管理-信息窗体
   Author: 李亚光
   Date: 2024-07-18
  -->
@@ -7,20 +7,84 @@
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-// 弹窗展示数据信息
-const info = ref()
-// 弹窗展示的内容
-const flag = ref('')
+// 基本数据
+const baseInfo = ref({
+  ledgerCode: '', // 闸井编号
+  ledgerName: '', // 闸井名称
+  lngGaode: '',
+  latGaode: '',
+})
+// 详细信息
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: '',
+    align: 'center',
+  },
+])
 // 初始化
 const initDialog = (e: any) => {
-  // console.log(e, '信息窗体接收的数据')
+  console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
   infoWindow.value = e.infoWindow
-  info.value = e.info
+  baseInfo.value = e.info.row
   dialogFormVisible.value = true
   if (e.map) {
     e.map.setZoom(15)
   }
+  // 获取详细信息
 }
 
 // 关闭
@@ -32,34 +96,96 @@
 </script>
 
 <template>
-  <div v-show="dialogFormVisible" class="container" @mouseleave="() => {}">
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
-      <span @click="close">x</span>
+      <el-tooltip
+        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        placement="top"
+      >
+        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+      </el-tooltip>
+      <span class="close" @click="close">x</span>
     </div>
-    <div>
-      闸井详情数据
+    <div class="body">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 20%;
+}
+
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+}
+
 .container {
-  width: 360px;
-  padding: 0 10px;
+  width: 500px;
+  // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
-  border: 2px solid #79b5e6;
+  border: 1.5px solid #79b5e6;
   position: relative;
 
   .header {
     float: right;
-    color: #4875a0;
-    font-size: 18px;
-    font-weight: 700;
+    background-color: #ccc;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 10px;
+    align-items: center;
 
-    &:hover {
-      cursor: pointer;
-      color: #658eb4;
+    .title {
+      font-weight: 700;
+      display: inline-block;
+      width: 90%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .close {
+      color: #4875a0;
+      font-size: 22px;
+      font-weight: 700;
+
+      &:hover {
+        cursor: pointer;
+        color: #658eb4;
+      }
     }
   }
+
+  .body {
+    // padding: 10px;
+    // display: flex;
+    // flex-wrap: wrap;
+    width: 100%;
+
+    .name {
+      width: 30%;
+    }
+
+    .value {
+      width: 70%;
+    }
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
 }
 </style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
new file mode 100644
index 0000000..1f37b5a
--- /dev/null
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 闸井监测-详情数据-全生命周期记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailLifeRecord">
+// 时间查询条件
+const timerang = ref()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '是否误报', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+  { text: '处置时长', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;">
+        搜索
+      </el-button>
+      <el-button type="primary">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="80">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
new file mode 100644
index 0000000..a389d61
--- /dev/null
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -0,0 +1,32 @@
+<!--
+  Description: 闸井监测-详情数据-监控设备维护记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMaintenanceRecord">
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '设备类型', value: '', align: 'center' },
+  { text: '设备型号', value: '', align: 'center' },
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '厂商', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作时间', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+</template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
index f58c925..5341746 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -3,7 +3,7 @@
   Author: 李亚光
   Date: 2023-07-08
  -->
-<script lang="ts" setup name="AlarmMap">
+<script lang="ts" setup name="WellMap">
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
 
@@ -20,7 +20,42 @@
 // 地图实例
 const mapRef = ref()
 const publicPath = window.location.origin
-console.log(publicPath, 'publicPath')
+// console.log(publicPath, 'publicPath')
+// 展示图例数据
+const legendShowData = ref(['1', '2', '3', '0'])
+// 地图图例数据
+const legendData = ref([
+  {
+    name: '正常',
+    url: `${publicPath}/image/well/闸井-正常.png`,
+    value: '1',
+  },
+  {
+    name: '异常',
+    url: `${publicPath}/image/well/闸井-异常.png`,
+    value: '2',
+  },
+  {
+    name: '离线',
+    url: `${publicPath}/image/well/闸井-离线.png`,
+    value: '3',
+  },
+  {
+    name: '未监控',
+    url: `${publicPath}/image/well/闸井-未部署.png`,
+    value: '0',
+  },
+])
+// 控制图例
+const clickLegend = (type: string) => {
+  if (legendShowData.value.includes(type)) {
+    legendShowData.value = legendShowData.value.filter((item: string) => item !== type)
+  }
+  else {
+    legendShowData.value.push(type)
+  }
+  resetDraw()
+}
 // 初次加载标识
 const pageIsFirst = ref(true)
 // 绘制标记点
@@ -58,16 +93,17 @@
     2: 1,
     3: 2,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => item.lngGaode && item.latGaode).map((item: any) => ({
+  const data = $props.data.map((item: any) => ({ ...item, monitorState: item.monitorState || '0' })).filter((item: any) => legendShowData.value.includes(item.monitorState)).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,
+    row: item,
   }))
   mapRef.value.addMassMarks({
     path: data,
     zIndex: 111,
-    zooms: [10.5, 20],
+    zooms: [3, 20],
     style,
   })
   //
@@ -94,7 +130,6 @@
   // 打开信息窗口
   detail.value.open(data.map, data.event.data.lnglat)
   // 初始化信息窗口
-  console.log(data.event.target)
   detailRef.value.initDialog({
     overlay: data.event.target,
     infoWindow: detail.value,
@@ -118,37 +153,31 @@
     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 }
+function resetDraw() {
   mapRef.value.removeMassMarks()
   if (detailRef.value) {
     detailRef.value.close()
   }
-  if (newVal.length) {
+  if ($props.data) {
     // 清空标记点重新绘制
     drawMarker()
   }
-}, {
-  deep: true,
-})
-defineExpose({ openInfoDetail })
+}
+// 地图绘制完毕
+const completeMap = () => {
+  console.log('地图绘制完毕')
+  // 绘制海量点
+  resetDraw()
+}
+defineExpose({ openInfoDetail, drawMarker, resetDraw })
 </script>
 
 <template>
@@ -157,11 +186,46 @@
     <detail-info ref="detailRef" />
     <!-- 地图 -->
     <a-map ref="mapRef" @complete="completeMap" @massMarksClick="massMarksClick" />
+    <!-- 图例 -->
+    <div class="legend">
+      <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
+        <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
+        <span v-show="!legendShowData.includes(item.value)" class="img" />
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .map-container {
   width: 100%;
+  position: relative;
+}
+
+.legend {
+  background: rgb(68 66 66 / 20%);
+  position: absolute;
+  z-index: 1;
+  left: 15px;
+  bottom: 10px;
+  padding: 0 10px;
+  border-radius: 8px;
+
+  .legend-item {
+    margin: 5px 0;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+
+    .img {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }
 </style>
diff --git a/src/views/home/well/components/monitorData.vue b/src/views/home/well/components/monitorData.vue
new file mode 100644
index 0000000..9264abb
--- /dev/null
+++ b/src/views/home/well/components/monitorData.vue
@@ -0,0 +1,27 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorDataList from './monitorDataList.vue'
+const activeName = ref('燃气浓度')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="燃气浓度" name="燃气浓度">
+      <monitor-data-list />
+    </el-tab-pane>
+    <el-tab-pane label="井下水位" name="井下水位">
+      <monitor-data-list />
+    </el-tab-pane>
+    <el-tab-pane label="井盖" name="井盖">
+      <monitor-data-list />
+    </el-tab-pane>
+  </el-tabs>
+</template>

diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index b8bcbbf..3b8d5f7 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -119,6 +119,19 @@
           auth: '/well',
         },
       },
+      {
+        path: '/well/:type',
+        component: () => import('@/views/home/well/components/detail.vue'),
+        name: 'WellMonitorDetail',
+        meta: {
+          title: '闸井详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/well',
+          auth: '/well/detail',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
new file mode 100644
index 0000000..17c4b8d
--- /dev/null
+++ b/src/views/home/well/components/detail.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 闸井监测-详情
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井名称',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '是否直埋',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系电话',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '启用日期',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: '',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    detailInfo.value = {
+
+    }
+  }, 1500)
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <detail-page title="闸井详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+</style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
new file mode 100644
index 0000000..fb87a94
--- /dev/null
+++ b/src/views/home/well/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from './lifeCycleRecord.vue'
+import maintenanceRecord from './maintenanceRecord.vue'
+const activeName = ref('监控数据')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="监控数据" name="监控数据">
+      <monitor-data />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index da6f6b2..1b52d44 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -1,5 +1,5 @@
 <!--
-  Description: 综合大屏-信息窗体
+  Description: 闸井管理-信息窗体
   Author: 李亚光
   Date: 2024-07-18
  -->
@@ -7,20 +7,84 @@
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-// 弹窗展示数据信息
-const info = ref()
-// 弹窗展示的内容
-const flag = ref('')
+// 基本数据
+const baseInfo = ref({
+  ledgerCode: '', // 闸井编号
+  ledgerName: '', // 闸井名称
+  lngGaode: '',
+  latGaode: '',
+})
+// 详细信息
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: '',
+    align: 'center',
+  },
+])
 // 初始化
 const initDialog = (e: any) => {
-  // console.log(e, '信息窗体接收的数据')
+  console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
   infoWindow.value = e.infoWindow
-  info.value = e.info
+  baseInfo.value = e.info.row
   dialogFormVisible.value = true
   if (e.map) {
     e.map.setZoom(15)
   }
+  // 获取详细信息
 }
 
 // 关闭
@@ -32,34 +96,96 @@
 </script>
 
 <template>
-  <div v-show="dialogFormVisible" class="container" @mouseleave="() => {}">
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
-      <span @click="close">x</span>
+      <el-tooltip
+        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        placement="top"
+      >
+        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+      </el-tooltip>
+      <span class="close" @click="close">x</span>
     </div>
-    <div>
-      闸井详情数据
+    <div class="body">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 20%;
+}
+
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+}
+
 .container {
-  width: 360px;
-  padding: 0 10px;
+  width: 500px;
+  // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
-  border: 2px solid #79b5e6;
+  border: 1.5px solid #79b5e6;
   position: relative;
 
   .header {
     float: right;
-    color: #4875a0;
-    font-size: 18px;
-    font-weight: 700;
+    background-color: #ccc;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 10px;
+    align-items: center;
 
-    &:hover {
-      cursor: pointer;
-      color: #658eb4;
+    .title {
+      font-weight: 700;
+      display: inline-block;
+      width: 90%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .close {
+      color: #4875a0;
+      font-size: 22px;
+      font-weight: 700;
+
+      &:hover {
+        cursor: pointer;
+        color: #658eb4;
+      }
     }
   }
+
+  .body {
+    // padding: 10px;
+    // display: flex;
+    // flex-wrap: wrap;
+    width: 100%;
+
+    .name {
+      width: 30%;
+    }
+
+    .value {
+      width: 70%;
+    }
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
 }
 </style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
new file mode 100644
index 0000000..1f37b5a
--- /dev/null
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 闸井监测-详情数据-全生命周期记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailLifeRecord">
+// 时间查询条件
+const timerang = ref()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '是否误报', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+  { text: '处置时长', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;">
+        搜索
+      </el-button>
+      <el-button type="primary">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="80">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
new file mode 100644
index 0000000..a389d61
--- /dev/null
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -0,0 +1,32 @@
+<!--
+  Description: 闸井监测-详情数据-监控设备维护记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMaintenanceRecord">
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '设备类型', value: '', align: 'center' },
+  { text: '设备型号', value: '', align: 'center' },
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '厂商', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作时间', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+</template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
index f58c925..5341746 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -3,7 +3,7 @@
   Author: 李亚光
   Date: 2023-07-08
  -->
-<script lang="ts" setup name="AlarmMap">
+<script lang="ts" setup name="WellMap">
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
 
@@ -20,7 +20,42 @@
 // 地图实例
 const mapRef = ref()
 const publicPath = window.location.origin
-console.log(publicPath, 'publicPath')
+// console.log(publicPath, 'publicPath')
+// 展示图例数据
+const legendShowData = ref(['1', '2', '3', '0'])
+// 地图图例数据
+const legendData = ref([
+  {
+    name: '正常',
+    url: `${publicPath}/image/well/闸井-正常.png`,
+    value: '1',
+  },
+  {
+    name: '异常',
+    url: `${publicPath}/image/well/闸井-异常.png`,
+    value: '2',
+  },
+  {
+    name: '离线',
+    url: `${publicPath}/image/well/闸井-离线.png`,
+    value: '3',
+  },
+  {
+    name: '未监控',
+    url: `${publicPath}/image/well/闸井-未部署.png`,
+    value: '0',
+  },
+])
+// 控制图例
+const clickLegend = (type: string) => {
+  if (legendShowData.value.includes(type)) {
+    legendShowData.value = legendShowData.value.filter((item: string) => item !== type)
+  }
+  else {
+    legendShowData.value.push(type)
+  }
+  resetDraw()
+}
 // 初次加载标识
 const pageIsFirst = ref(true)
 // 绘制标记点
@@ -58,16 +93,17 @@
     2: 1,
     3: 2,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => item.lngGaode && item.latGaode).map((item: any) => ({
+  const data = $props.data.map((item: any) => ({ ...item, monitorState: item.monitorState || '0' })).filter((item: any) => legendShowData.value.includes(item.monitorState)).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,
+    row: item,
   }))
   mapRef.value.addMassMarks({
     path: data,
     zIndex: 111,
-    zooms: [10.5, 20],
+    zooms: [3, 20],
     style,
   })
   //
@@ -94,7 +130,6 @@
   // 打开信息窗口
   detail.value.open(data.map, data.event.data.lnglat)
   // 初始化信息窗口
-  console.log(data.event.target)
   detailRef.value.initDialog({
     overlay: data.event.target,
     infoWindow: detail.value,
@@ -118,37 +153,31 @@
     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 }
+function resetDraw() {
   mapRef.value.removeMassMarks()
   if (detailRef.value) {
     detailRef.value.close()
   }
-  if (newVal.length) {
+  if ($props.data) {
     // 清空标记点重新绘制
     drawMarker()
   }
-}, {
-  deep: true,
-})
-defineExpose({ openInfoDetail })
+}
+// 地图绘制完毕
+const completeMap = () => {
+  console.log('地图绘制完毕')
+  // 绘制海量点
+  resetDraw()
+}
+defineExpose({ openInfoDetail, drawMarker, resetDraw })
 </script>
 
 <template>
@@ -157,11 +186,46 @@
     <detail-info ref="detailRef" />
     <!-- 地图 -->
     <a-map ref="mapRef" @complete="completeMap" @massMarksClick="massMarksClick" />
+    <!-- 图例 -->
+    <div class="legend">
+      <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
+        <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
+        <span v-show="!legendShowData.includes(item.value)" class="img" />
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .map-container {
   width: 100%;
+  position: relative;
+}
+
+.legend {
+  background: rgb(68 66 66 / 20%);
+  position: absolute;
+  z-index: 1;
+  left: 15px;
+  bottom: 10px;
+  padding: 0 10px;
+  border-radius: 8px;
+
+  .legend-item {
+    margin: 5px 0;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+
+    .img {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }
 </style>
diff --git a/src/views/home/well/components/monitorData.vue b/src/views/home/well/components/monitorData.vue
new file mode 100644
index 0000000..9264abb
--- /dev/null
+++ b/src/views/home/well/components/monitorData.vue
@@ -0,0 +1,27 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorDataList from './monitorDataList.vue'
+const activeName = ref('燃气浓度')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="燃气浓度" name="燃气浓度">
+      <monitor-data-list />
+    </el-tab-pane>
+    <el-tab-pane label="井下水位" name="井下水位">
+      <monitor-data-list />
+    </el-tab-pane>
+    <el-tab-pane label="井盖" name="井盖">
+      <monitor-data-list />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/well/components/monitorDataList.vue b/src/views/home/well/components/monitorDataList.vue
new file mode 100644
index 0000000..d6118ad
--- /dev/null
+++ b/src/views/home/well/components/monitorDataList.vue
@@ -0,0 +1,52 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataList">
+// 时间查询条件
+const timerang = ref()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="上传开始时间"
+        end-placeholder="上传结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;">
+        搜索
+      </el-button>
+      <el-button>切换视图</el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
+      :pagination="false"
+    />
+  </table-container>
+</template>

diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index b8bcbbf..3b8d5f7 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -119,6 +119,19 @@
           auth: '/well',
         },
       },
+      {
+        path: '/well/:type',
+        component: () => import('@/views/home/well/components/detail.vue'),
+        name: 'WellMonitorDetail',
+        meta: {
+          title: '闸井详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/well',
+          auth: '/well/detail',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
new file mode 100644
index 0000000..17c4b8d
--- /dev/null
+++ b/src/views/home/well/components/detail.vue
@@ -0,0 +1,155 @@
+<!--
+  Description: 闸井监测-详情
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetail">
+import detailData from './detailData.vue'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井编号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '闸井名称',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '是否直埋',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位联系电话',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '启用日期',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: '',
+    align: 'center',
+  },
+])
+
+// 页面loading
+const loading = ref(true)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    detailInfo.value = {
+
+    }
+  }, 1500)
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <detail-page title="闸井详情">
+      <template #btns>
+        <el-button type="info" @click="$router.back()">
+          关闭
+        </el-button>
+      </template>
+    </detail-page>
+    <detail-block-com>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </detail-block-com>
+    <detail-block-com>
+      <detail-data />
+    </detail-block-com>
+  </app-container>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 15%;
+}
+</style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
new file mode 100644
index 0000000..fb87a94
--- /dev/null
+++ b/src/views/home/well/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 闸井监测-详情数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from './lifeCycleRecord.vue'
+import maintenanceRecord from './maintenanceRecord.vue'
+const activeName = ref('监控数据')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="监控数据" name="监控数据">
+      <monitor-data />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index da6f6b2..1b52d44 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -1,5 +1,5 @@
 <!--
-  Description: 综合大屏-信息窗体
+  Description: 闸井管理-信息窗体
   Author: 李亚光
   Date: 2024-07-18
  -->
@@ -7,20 +7,84 @@
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
-// 弹窗展示数据信息
-const info = ref()
-// 弹窗展示的内容
-const flag = ref('')
+// 基本数据
+const baseInfo = ref({
+  ledgerCode: '', // 闸井编号
+  ledgerName: '', // 闸井名称
+  lngGaode: '',
+  latGaode: '',
+})
+// 详细信息
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '闸井位号',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '产权单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '负责人',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '联系方式',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: '',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: '',
+    align: 'center',
+  },
+])
 // 初始化
 const initDialog = (e: any) => {
-  // console.log(e, '信息窗体接收的数据')
+  console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
   infoWindow.value = e.infoWindow
-  info.value = e.info
+  baseInfo.value = e.info.row
   dialogFormVisible.value = true
   if (e.map) {
     e.map.setZoom(15)
   }
+  // 获取详细信息
 }
 
 // 关闭
@@ -32,34 +96,96 @@
 </script>
 
 <template>
-  <div v-show="dialogFormVisible" class="container" @mouseleave="() => {}">
+  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
-      <span @click="close">x</span>
+      <el-tooltip
+        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        placement="top"
+      >
+        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+      </el-tooltip>
+      <span class="close" @click="close">x</span>
     </div>
-    <div>
-      闸井详情数据
+    <div class="body">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
+          <template #label>
+            <span class="label">
+              {{ item.text }}
+            </span>
+          </template>
+          {{ detailInfo[item.value] || '' }}
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+::v-deep(.el-descriptions__label) {
+  width: 20%;
+}
+
+::v-deep(.el-descriptions__cell) {
+  padding: 0 !important;
+}
+
 .container {
-  width: 360px;
-  padding: 0 10px;
+  width: 500px;
+  // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
-  border: 2px solid #79b5e6;
+  border: 1.5px solid #79b5e6;
   position: relative;
 
   .header {
     float: right;
-    color: #4875a0;
-    font-size: 18px;
-    font-weight: 700;
+    background-color: #ccc;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 10px;
+    align-items: center;
 
-    &:hover {
-      cursor: pointer;
-      color: #658eb4;
+    .title {
+      font-weight: 700;
+      display: inline-block;
+      width: 90%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .close {
+      color: #4875a0;
+      font-size: 22px;
+      font-weight: 700;
+
+      &:hover {
+        cursor: pointer;
+        color: #658eb4;
+      }
     }
   }
+
+  .body {
+    // padding: 10px;
+    // display: flex;
+    // flex-wrap: wrap;
+    width: 100%;
+
+    .name {
+      width: 30%;
+    }
+
+    .value {
+      width: 70%;
+    }
+  }
+}
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
 }
 </style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
new file mode 100644
index 0000000..1f37b5a
--- /dev/null
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 闸井监测-详情数据-全生命周期记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailLifeRecord">
+// 时间查询条件
+const timerang = ref()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '报警类型', value: '', align: 'center' },
+  { text: '报警等级', value: '', align: 'center' },
+  { text: '报警原因', value: '', align: 'center' },
+  { text: '是否误报', value: '', align: 'center' },
+  { text: '报警解除时间', value: '', align: 'center' },
+  { text: '处置时长', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        end-placeholder="报警结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-button type="primary" style="margin-left: 10px;">
+        搜索
+      </el-button>
+      <el-button type="primary">
+        导出
+      </el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
+      :pagination="false"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="80">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </table-container>
+</template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
new file mode 100644
index 0000000..a389d61
--- /dev/null
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -0,0 +1,32 @@
+<!--
+  Description: 闸井监测-详情数据-监控设备维护记录
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMaintenanceRecord">
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '报警时间', value: '', align: 'center' },
+  { text: '设备类型', value: '', align: 'center' },
+  { text: '设备型号', value: '', align: 'center' },
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '厂商', value: '', align: 'center' },
+  { text: '操作人', value: '', align: 'center' },
+  { text: '操作时间', value: '', align: 'center' },
+  { text: '备注', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+</template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
index f58c925..5341746 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -3,7 +3,7 @@
   Author: 李亚光
   Date: 2023-07-08
  -->
-<script lang="ts" setup name="AlarmMap">
+<script lang="ts" setup name="WellMap">
 import detailInfo from './detailInfoDialog.vue'
 import AMap from '@/components/map/index.vue'
 
@@ -20,7 +20,42 @@
 // 地图实例
 const mapRef = ref()
 const publicPath = window.location.origin
-console.log(publicPath, 'publicPath')
+// console.log(publicPath, 'publicPath')
+// 展示图例数据
+const legendShowData = ref(['1', '2', '3', '0'])
+// 地图图例数据
+const legendData = ref([
+  {
+    name: '正常',
+    url: `${publicPath}/image/well/闸井-正常.png`,
+    value: '1',
+  },
+  {
+    name: '异常',
+    url: `${publicPath}/image/well/闸井-异常.png`,
+    value: '2',
+  },
+  {
+    name: '离线',
+    url: `${publicPath}/image/well/闸井-离线.png`,
+    value: '3',
+  },
+  {
+    name: '未监控',
+    url: `${publicPath}/image/well/闸井-未部署.png`,
+    value: '0',
+  },
+])
+// 控制图例
+const clickLegend = (type: string) => {
+  if (legendShowData.value.includes(type)) {
+    legendShowData.value = legendShowData.value.filter((item: string) => item !== type)
+  }
+  else {
+    legendShowData.value.push(type)
+  }
+  resetDraw()
+}
 // 初次加载标识
 const pageIsFirst = ref(true)
 // 绘制标记点
@@ -58,16 +93,17 @@
     2: 1,
     3: 2,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => item.lngGaode && item.latGaode).map((item: any) => ({
+  const data = $props.data.map((item: any) => ({ ...item, monitorState: item.monitorState || '0' })).filter((item: any) => legendShowData.value.includes(item.monitorState)).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,
+    row: item,
   }))
   mapRef.value.addMassMarks({
     path: data,
     zIndex: 111,
-    zooms: [10.5, 20],
+    zooms: [3, 20],
     style,
   })
   //
@@ -94,7 +130,6 @@
   // 打开信息窗口
   detail.value.open(data.map, data.event.data.lnglat)
   // 初始化信息窗口
-  console.log(data.event.target)
   detailRef.value.initDialog({
     overlay: data.event.target,
     infoWindow: detail.value,
@@ -118,37 +153,31 @@
     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 }
+function resetDraw() {
   mapRef.value.removeMassMarks()
   if (detailRef.value) {
     detailRef.value.close()
   }
-  if (newVal.length) {
+  if ($props.data) {
     // 清空标记点重新绘制
     drawMarker()
   }
-}, {
-  deep: true,
-})
-defineExpose({ openInfoDetail })
+}
+// 地图绘制完毕
+const completeMap = () => {
+  console.log('地图绘制完毕')
+  // 绘制海量点
+  resetDraw()
+}
+defineExpose({ openInfoDetail, drawMarker, resetDraw })
 </script>
 
 <template>
@@ -157,11 +186,46 @@
     <detail-info ref="detailRef" />
     <!-- 地图 -->
     <a-map ref="mapRef" @complete="completeMap" @massMarksClick="massMarksClick" />
+    <!-- 图例 -->
+    <div class="legend">
+      <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
+        <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
+        <span v-show="!legendShowData.includes(item.value)" class="img" />
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .map-container {
   width: 100%;
+  position: relative;
+}
+
+.legend {
+  background: rgb(68 66 66 / 20%);
+  position: absolute;
+  z-index: 1;
+  left: 15px;
+  bottom: 10px;
+  padding: 0 10px;
+  border-radius: 8px;
+
+  .legend-item {
+    margin: 5px 0;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+
+    .img {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }
 </style>
diff --git a/src/views/home/well/components/monitorData.vue b/src/views/home/well/components/monitorData.vue
new file mode 100644
index 0000000..9264abb
--- /dev/null
+++ b/src/views/home/well/components/monitorData.vue
@@ -0,0 +1,27 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorDataList from './monitorDataList.vue'
+const activeName = ref('燃气浓度')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="燃气浓度" name="燃气浓度">
+      <monitor-data-list />
+    </el-tab-pane>
+    <el-tab-pane label="井下水位" name="井下水位">
+      <monitor-data-list />
+    </el-tab-pane>
+    <el-tab-pane label="井盖" name="井盖">
+      <monitor-data-list />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/well/components/monitorDataList.vue b/src/views/home/well/components/monitorDataList.vue
new file mode 100644
index 0000000..d6118ad
--- /dev/null
+++ b/src/views/home/well/components/monitorDataList.vue
@@ -0,0 +1,52 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataList">
+// 时间查询条件
+const timerang = ref()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: '', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: '', align: 'center' },
+  { text: '电量(%)', value: '', align: 'center' },
+  { text: '信号强度', value: '', align: 'center' },
+  { text: '采集时间', value: '', align: 'center' },
+  { text: '上传时间', value: '', align: 'center' },
+])
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingTable.value = false
+  }, 1000)
+})
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="采集开始时间"
+        end-placeholder="采集结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="上传开始时间"
+        end-placeholder="上传结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 10px;"
+      />
+      <el-button type="primary" style="margin-left: 10px;">
+        搜索
+      </el-button>
+      <el-button>切换视图</el-button>
+    </template>
+    <normal-table
+      :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
+      :pagination="false"
+    />
+  </table-container>
+</template>
diff --git a/src/views/home/well/index.vue b/src/views/home/well/index.vue
index e6cd0a5..09d32ca 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -9,6 +9,10 @@
 import MapCom from './components/map.vue'
 import { getWellList, getWellListPage } from '@/api/home/well/well'
 import { getDictByCode } from '@/api/system/dict'
+// 表格标识  地图或普通
+const mapRef = ref()
+const tableFlag = ref('normal')
+const mapLoading = ref(true)
 // 表格数据
 const list = ref([])
 const total = ref(0)
@@ -17,16 +21,16 @@
 
 // 初始展示列
 const columns = ref<any>([
-  { text: '闸井位号', value: 'tagNumber', align: 'center' },
+  { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { 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: 'manageTypeName', align: 'center', width: '90' },
+  { text: '使用状态', value: 'onStateName', align: 'center', width: '90' },
+  { text: '布防状态', value: 'bfztName', align: 'center', width: '90' },
+  { text: '状态', value: 'monitorStateName', align: 'center', width: '90' },
+  { text: '感知设备', value: 'device', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
 ])
 // 最终展示列
@@ -50,19 +54,49 @@
   bfzt: '', // 布防状态
   monitorState: '', // 监控状态
   marker: '',
-})
+} as { [key: string]: string | number })
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
+  mapLoading.value = true
+  // 判断是否有查询条件(是地图展示20条  否地图展示所有)
+  const queryList = [] as Boolean[] // 长度大于2 即为是
+  for (const i in listQuery.value) {
+    if (listQuery.value[i]) {
+      queryList.push(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
+    if (queryList.length > 2) {
+      mapList.value = list.value
+      setTimeout(() => {
+        if (tableFlag.value === 'map') {
+          mapRef.value.resetDraw()
+        }
+        mapLoading.value = false
+      }, 500)
+    }
   }).catch(() => {
     loadingTable.value = false
+    if (queryList.length <= 2) {
+      mapLoading.value = false
+    }
   })
+  if (queryList.length > 2) { return }
+  // 获取地图全部数据
   getWellList(listQuery.value).then((res) => {
     mapList.value = res.data
+    setTimeout(() => {
+      if (tableFlag.value === 'map') {
+        mapRef.value.resetDraw()
+      }
+      mapLoading.value = false
+    }, 500)
+  }).catch(() => {
+    mapLoading.value = false
   })
 }
 // 重置查询条件f
@@ -122,14 +156,12 @@
   fetchData()
 })
 
-// 表格标识  地图或普通
-const mapRef = ref()
-const tableFlag = ref('normal')
+// 切换地图标识
 const switchMode = (type: string) => {
-  if (!mapList.value.length) {
-    ElMessage.warning('暂无数据')
-    return
-  }
+  // if (!mapList.value.length) {
+  //   ElMessage.warning('数据正在获取中或无数据')
+  //   return
+  // }
   tableFlag.value = type
 }
 // 点击数据行
@@ -139,10 +171,12 @@
     ElMessage.warning('该数据缺少坐标信息')
     return
   }
+  // 打开地图弹窗
   mapRef.value.openInfoDetail({
     lnglat: [data.lngGaode, data.latGaode],
     id: data.id,
     name: data.ledgerName,
+    row: data,
   })
 }
 // 布防/撤防
@@ -159,8 +193,14 @@
   })
 }
 // 查看/编辑
+const $router = useRouter()
 const editRow = (type: string, row: any) => {
-
+  $router.push({
+    path: `/well/${type}`,
+    query: {
+      id: row.id,
+    },
+  })
 }
 </script>
 
@@ -168,14 +208,17 @@
   <!-- 布局 -->
   <app-container class="container">
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <!-- 占位-地图 -->
+    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
         <arrow-up-bold />
       </el-icon>
     </div>
     <!-- 筛选条件 -->
-    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+    <search-area :class="`${tableFlag === 'map' ? 'search-area' : ''}`" :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
         <el-input v-model.trim="listQuery.tagNumber" placeholder="闸井位号" clearable />
       </search-item>
@@ -215,6 +258,8 @@
         <el-input v-model.trim="listQuery.marker" placeholder="标签" clearable class="select" />
       </search-item>
     </search-area>
+    <!-- 筛选条件-地图 -->
+    <div v-if="tableFlag === 'map'" style="height: 114px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="well-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -223,7 +268,7 @@
       <template #btns-left>
         <!-- 操作 -->
         <div v-if="tableFlag === 'normal'" style="margin-left: 15px;">
-          <el-button type="primary" plain @click="switchMode('map')">
+          <el-button type="primary" plain :disabled="loadingTable" @click="switchMode('map')">
             切换地图模式
           </el-button>
         </div>
@@ -249,7 +294,7 @@
   </el-table-column> -->
           <el-table-column label="序号" width="75" align="center">
             <template #default="scope">
-              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+              {{ (listQuery.offset as number - 1) * (listQuery.limit as number) + scope.$index + 1 }}
             </template>
           </el-table-column>
         </template>
@@ -278,23 +323,31 @@
 </template>
 
 <style lang="scss" scoped>
-.icon {
-  position: absolute;
-  top: 344px;
-  left: 50%;
-  transform: translateX(-50%);
+.container {
+  position: relative;
 
-  &:hover {
-    cursor: pointer;
+  .map {
+    position: fixed;
+    z-index: 99;
+  }
+
+  .icon {
+    position: fixed;
+    top: 450px;
+    left: 50%;
+    // transform: translateX(-50%);
+    z-index: 901;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .search-area {
+    position: fixed;
+    z-index: 99;
   }
 }
-
-// .container{
-//   position: relative;
-//   .map{
-//     position: fixed;
-//   }
-// }
 </style>
 
 <style>