diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </el-tab-pane>
   </el-tabs>
 </template>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </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 1b52d44..da0c022 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -4,9 +4,11 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
+
 // 基本数据
 const baseInfo = ref({
   ledgerCode: '', // 闸井编号
@@ -19,62 +21,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '闸井名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +98,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    baseInfo.value = res.data
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,14 +128,16 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :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] || '' }}
+          <span class="nowrap">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -122,16 +145,41 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.el-descriptions__label) {
-  width: 20%;
-}
-
 ::v-deep(.el-descriptions__cell) {
   padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </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 1b52d44..da0c022 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -4,9 +4,11 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
+
 // 基本数据
 const baseInfo = ref({
   ledgerCode: '', // 闸井编号
@@ -19,62 +21,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '闸井名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +98,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    baseInfo.value = res.data
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,14 +128,16 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :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] || '' }}
+          <span class="nowrap">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -122,16 +145,41 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.el-descriptions__label) {
-  width: 20%;
-}
-
 ::v-deep(.el-descriptions__cell) {
   padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/well/components/editDialog-bak.vue b/src/views/home/well/components/editDialog-bak.vue
new file mode 100644
index 0000000..924d7f0
--- /dev/null
+++ b/src/views/home/well/components/editDialog-bak.vue
@@ -0,0 +1,241 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  tagNumber: '', // 位号
+  ledgerCode: '', // 编号
+  ledgerName: '', // 名称
+  propertyOwner: '', // 产权单位
+  responsibleDept: '', // 管理单位
+  manageType: '', // 管理方式
+  monitorState: '', // 监控状态
+  onState: '', // 使用状态
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+  ledgerCode: [{ required: true, message: '闸井编号不能为空', trigger: ['blur', 'change'] }],
+  ledgerName: [{ required: true, message: '闸井名称不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权单位不能为空', trigger: ['blur', 'change'] }],
+  responsibleDept: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
+  monitorState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+  onState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    tagNumber: '', // 位号
+    ledgerCode: '', // 编号
+    ledgerName: '', // 名称
+    propertyOwner: '', // 产权单位
+    responsibleDept: '', // 管理单位
+    manageType: '', // 管理方式
+    monitorState: '', // 监控状态
+    onState: '', // 使用状态
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        bfzt: '', // 布防状态
+        deptid: '',
+        gridCode: '',
+        id: '',
+        ledgerCode: '', // 编号
+        ledgerName: '', // 名称
+        locationState: '', // 位置状态
+        manageType: '', // 管理方式
+        marker: '', // 标签
+        monitorState: '', // 监控状态
+        onState: '', // 使用状态
+        propertyOwner: '', // 产权单位
+        responsibleDept: '', // 管理单位
+        tagNumber: '', // 位号
+        wellType: '', // 类型
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
+const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
+const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
+// 获取字典
+const fetchDict = async () => {
+  // 管理方式
+  getDictByCode('manageType').then((res) => {
+    manageTypeList.value = res.data
+  })
+  // 监控状态
+  getDictByCode('monitorState').then((res) => {
+    monitorStateList.value = res.data
+  })
+  // 使用状态
+  getDictByCode('onState').then((res) => {
+    onStateList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井位号" prop="tagNumber">
+            <el-input v-model.trim="dataForm.tagNumber" type="text" placeholder="闸井位号" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="闸井编号" prop="ledgerCode">
+            <el-input
+              v-model.trim="dataForm.ledgerCode" type="text" placeholder="闸井编号" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井名称" prop="ledgerName">
+            <el-input
+              v-model.trim="dataForm.ledgerName" type="text" placeholder="闸井名称" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
+            <el-input
+              v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="管理单位" prop="responsibleDept">
+            <dept-select v-model="dataForm.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="管理方式" prop="manageType">
+            <el-select v-model="dataForm.manageType" placeholder="管理方式" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="监控状态" prop="monitorState">
+            <el-select v-model="dataForm.monitorState" placeholder="监控状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in monitorStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="onState">
+            <el-select v-model="dataForm.onState" placeholder="使用状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in onStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="标签" prop="marker">
+            <el-input v-model.trim="dataForm.marker" type="text" placeholder="标签" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </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 1b52d44..da0c022 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -4,9 +4,11 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
+
 // 基本数据
 const baseInfo = ref({
   ledgerCode: '', // 闸井编号
@@ -19,62 +21,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '闸井名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +98,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    baseInfo.value = res.data
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,14 +128,16 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :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] || '' }}
+          <span class="nowrap">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -122,16 +145,41 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.el-descriptions__label) {
-  width: 20%;
-}
-
 ::v-deep(.el-descriptions__cell) {
   padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/well/components/editDialog-bak.vue b/src/views/home/well/components/editDialog-bak.vue
new file mode 100644
index 0000000..924d7f0
--- /dev/null
+++ b/src/views/home/well/components/editDialog-bak.vue
@@ -0,0 +1,241 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  tagNumber: '', // 位号
+  ledgerCode: '', // 编号
+  ledgerName: '', // 名称
+  propertyOwner: '', // 产权单位
+  responsibleDept: '', // 管理单位
+  manageType: '', // 管理方式
+  monitorState: '', // 监控状态
+  onState: '', // 使用状态
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+  ledgerCode: [{ required: true, message: '闸井编号不能为空', trigger: ['blur', 'change'] }],
+  ledgerName: [{ required: true, message: '闸井名称不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权单位不能为空', trigger: ['blur', 'change'] }],
+  responsibleDept: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
+  monitorState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+  onState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    tagNumber: '', // 位号
+    ledgerCode: '', // 编号
+    ledgerName: '', // 名称
+    propertyOwner: '', // 产权单位
+    responsibleDept: '', // 管理单位
+    manageType: '', // 管理方式
+    monitorState: '', // 监控状态
+    onState: '', // 使用状态
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        bfzt: '', // 布防状态
+        deptid: '',
+        gridCode: '',
+        id: '',
+        ledgerCode: '', // 编号
+        ledgerName: '', // 名称
+        locationState: '', // 位置状态
+        manageType: '', // 管理方式
+        marker: '', // 标签
+        monitorState: '', // 监控状态
+        onState: '', // 使用状态
+        propertyOwner: '', // 产权单位
+        responsibleDept: '', // 管理单位
+        tagNumber: '', // 位号
+        wellType: '', // 类型
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
+const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
+const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
+// 获取字典
+const fetchDict = async () => {
+  // 管理方式
+  getDictByCode('manageType').then((res) => {
+    manageTypeList.value = res.data
+  })
+  // 监控状态
+  getDictByCode('monitorState').then((res) => {
+    monitorStateList.value = res.data
+  })
+  // 使用状态
+  getDictByCode('onState').then((res) => {
+    onStateList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井位号" prop="tagNumber">
+            <el-input v-model.trim="dataForm.tagNumber" type="text" placeholder="闸井位号" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="闸井编号" prop="ledgerCode">
+            <el-input
+              v-model.trim="dataForm.ledgerCode" type="text" placeholder="闸井编号" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井名称" prop="ledgerName">
+            <el-input
+              v-model.trim="dataForm.ledgerName" type="text" placeholder="闸井名称" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
+            <el-input
+              v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="管理单位" prop="responsibleDept">
+            <dept-select v-model="dataForm.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="管理方式" prop="manageType">
+            <el-select v-model="dataForm.manageType" placeholder="管理方式" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="监控状态" prop="monitorState">
+            <el-select v-model="dataForm.monitorState" placeholder="监控状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in monitorStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="onState">
+            <el-select v-model="dataForm.onState" placeholder="使用状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in onStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="标签" prop="marker">
+            <el-input v-model.trim="dataForm.marker" type="text" placeholder="标签" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/editDialog.vue b/src/views/home/well/components/editDialog.vue
new file mode 100644
index 0000000..cc810fc
--- /dev/null
+++ b/src/views/home/well/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </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 1b52d44..da0c022 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -4,9 +4,11 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
+
 // 基本数据
 const baseInfo = ref({
   ledgerCode: '', // 闸井编号
@@ -19,62 +21,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '闸井名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +98,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    baseInfo.value = res.data
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,14 +128,16 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :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] || '' }}
+          <span class="nowrap">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -122,16 +145,41 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.el-descriptions__label) {
-  width: 20%;
-}
-
 ::v-deep(.el-descriptions__cell) {
   padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/well/components/editDialog-bak.vue b/src/views/home/well/components/editDialog-bak.vue
new file mode 100644
index 0000000..924d7f0
--- /dev/null
+++ b/src/views/home/well/components/editDialog-bak.vue
@@ -0,0 +1,241 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  tagNumber: '', // 位号
+  ledgerCode: '', // 编号
+  ledgerName: '', // 名称
+  propertyOwner: '', // 产权单位
+  responsibleDept: '', // 管理单位
+  manageType: '', // 管理方式
+  monitorState: '', // 监控状态
+  onState: '', // 使用状态
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+  ledgerCode: [{ required: true, message: '闸井编号不能为空', trigger: ['blur', 'change'] }],
+  ledgerName: [{ required: true, message: '闸井名称不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权单位不能为空', trigger: ['blur', 'change'] }],
+  responsibleDept: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
+  monitorState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+  onState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    tagNumber: '', // 位号
+    ledgerCode: '', // 编号
+    ledgerName: '', // 名称
+    propertyOwner: '', // 产权单位
+    responsibleDept: '', // 管理单位
+    manageType: '', // 管理方式
+    monitorState: '', // 监控状态
+    onState: '', // 使用状态
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        bfzt: '', // 布防状态
+        deptid: '',
+        gridCode: '',
+        id: '',
+        ledgerCode: '', // 编号
+        ledgerName: '', // 名称
+        locationState: '', // 位置状态
+        manageType: '', // 管理方式
+        marker: '', // 标签
+        monitorState: '', // 监控状态
+        onState: '', // 使用状态
+        propertyOwner: '', // 产权单位
+        responsibleDept: '', // 管理单位
+        tagNumber: '', // 位号
+        wellType: '', // 类型
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
+const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
+const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
+// 获取字典
+const fetchDict = async () => {
+  // 管理方式
+  getDictByCode('manageType').then((res) => {
+    manageTypeList.value = res.data
+  })
+  // 监控状态
+  getDictByCode('monitorState').then((res) => {
+    monitorStateList.value = res.data
+  })
+  // 使用状态
+  getDictByCode('onState').then((res) => {
+    onStateList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井位号" prop="tagNumber">
+            <el-input v-model.trim="dataForm.tagNumber" type="text" placeholder="闸井位号" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="闸井编号" prop="ledgerCode">
+            <el-input
+              v-model.trim="dataForm.ledgerCode" type="text" placeholder="闸井编号" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井名称" prop="ledgerName">
+            <el-input
+              v-model.trim="dataForm.ledgerName" type="text" placeholder="闸井名称" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
+            <el-input
+              v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="管理单位" prop="responsibleDept">
+            <dept-select v-model="dataForm.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="管理方式" prop="manageType">
+            <el-select v-model="dataForm.manageType" placeholder="管理方式" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="监控状态" prop="monitorState">
+            <el-select v-model="dataForm.monitorState" placeholder="监控状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in monitorStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="onState">
+            <el-select v-model="dataForm.onState" placeholder="使用状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in onStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="标签" prop="marker">
+            <el-input v-model.trim="dataForm.marker" type="text" placeholder="标签" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/editDialog.vue b/src/views/home/well/components/editDialog.vue
new file mode 100644
index 0000000..cc810fc
--- /dev/null
+++ b/src/views/home/well/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
index 1f37b5a..c56141d 100644
--- a/src/views/home/well/components/lifeCycleRecord.vue
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -4,28 +4,64 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailLifeRecord">
-// 时间查询条件
-const timerang = ref()
+import dayjs from 'dayjs'
+import { getLifecycleRecord } from '@/api/home/well/well'
+const $route = useRoute()
 // 列表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: 'alarmTime', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警原因', value: 'alarmContent', align: 'center' },
+  { text: '是否误报', value: 'realAlarm', align: 'center' },
+  { text: '报警解除时间', value: 'cancelTime', align: 'center' },
+  { text: '处置时长', value: 'processDuration', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
-    loadingTable.value = false
-  }, 1000)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
 })
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  getLifecycleRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+
+// 查看详情
+const detailRow = (row: any) => {
+  console.log(row.id)
+}
 </script>
 
 <template>
@@ -33,10 +69,10 @@
     <template #btns-left>
       <!-- 查询条件 -->
       <el-date-picker
-        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        v-model="datetimerange" 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 type="primary" style="margin-left: 10px;" @click="fetchData">
         搜索
       </el-button>
       <el-button type="primary">
@@ -50,7 +86,7 @@
       <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 type="primary" link size="small" @click="detailRow(scope.row)">
               查看
             </el-button>
           </template>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </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 1b52d44..da0c022 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -4,9 +4,11 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
+
 // 基本数据
 const baseInfo = ref({
   ledgerCode: '', // 闸井编号
@@ -19,62 +21,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '闸井名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +98,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    baseInfo.value = res.data
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,14 +128,16 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :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] || '' }}
+          <span class="nowrap">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -122,16 +145,41 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.el-descriptions__label) {
-  width: 20%;
-}
-
 ::v-deep(.el-descriptions__cell) {
   padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/well/components/editDialog-bak.vue b/src/views/home/well/components/editDialog-bak.vue
new file mode 100644
index 0000000..924d7f0
--- /dev/null
+++ b/src/views/home/well/components/editDialog-bak.vue
@@ -0,0 +1,241 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  tagNumber: '', // 位号
+  ledgerCode: '', // 编号
+  ledgerName: '', // 名称
+  propertyOwner: '', // 产权单位
+  responsibleDept: '', // 管理单位
+  manageType: '', // 管理方式
+  monitorState: '', // 监控状态
+  onState: '', // 使用状态
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+  ledgerCode: [{ required: true, message: '闸井编号不能为空', trigger: ['blur', 'change'] }],
+  ledgerName: [{ required: true, message: '闸井名称不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权单位不能为空', trigger: ['blur', 'change'] }],
+  responsibleDept: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
+  monitorState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+  onState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    tagNumber: '', // 位号
+    ledgerCode: '', // 编号
+    ledgerName: '', // 名称
+    propertyOwner: '', // 产权单位
+    responsibleDept: '', // 管理单位
+    manageType: '', // 管理方式
+    monitorState: '', // 监控状态
+    onState: '', // 使用状态
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        bfzt: '', // 布防状态
+        deptid: '',
+        gridCode: '',
+        id: '',
+        ledgerCode: '', // 编号
+        ledgerName: '', // 名称
+        locationState: '', // 位置状态
+        manageType: '', // 管理方式
+        marker: '', // 标签
+        monitorState: '', // 监控状态
+        onState: '', // 使用状态
+        propertyOwner: '', // 产权单位
+        responsibleDept: '', // 管理单位
+        tagNumber: '', // 位号
+        wellType: '', // 类型
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
+const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
+const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
+// 获取字典
+const fetchDict = async () => {
+  // 管理方式
+  getDictByCode('manageType').then((res) => {
+    manageTypeList.value = res.data
+  })
+  // 监控状态
+  getDictByCode('monitorState').then((res) => {
+    monitorStateList.value = res.data
+  })
+  // 使用状态
+  getDictByCode('onState').then((res) => {
+    onStateList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井位号" prop="tagNumber">
+            <el-input v-model.trim="dataForm.tagNumber" type="text" placeholder="闸井位号" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="闸井编号" prop="ledgerCode">
+            <el-input
+              v-model.trim="dataForm.ledgerCode" type="text" placeholder="闸井编号" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井名称" prop="ledgerName">
+            <el-input
+              v-model.trim="dataForm.ledgerName" type="text" placeholder="闸井名称" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
+            <el-input
+              v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="管理单位" prop="responsibleDept">
+            <dept-select v-model="dataForm.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="管理方式" prop="manageType">
+            <el-select v-model="dataForm.manageType" placeholder="管理方式" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="监控状态" prop="monitorState">
+            <el-select v-model="dataForm.monitorState" placeholder="监控状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in monitorStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="onState">
+            <el-select v-model="dataForm.onState" placeholder="使用状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in onStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="标签" prop="marker">
+            <el-input v-model.trim="dataForm.marker" type="text" placeholder="标签" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/editDialog.vue b/src/views/home/well/components/editDialog.vue
new file mode 100644
index 0000000..cc810fc
--- /dev/null
+++ b/src/views/home/well/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
index 1f37b5a..c56141d 100644
--- a/src/views/home/well/components/lifeCycleRecord.vue
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -4,28 +4,64 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailLifeRecord">
-// 时间查询条件
-const timerang = ref()
+import dayjs from 'dayjs'
+import { getLifecycleRecord } from '@/api/home/well/well'
+const $route = useRoute()
 // 列表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: 'alarmTime', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警原因', value: 'alarmContent', align: 'center' },
+  { text: '是否误报', value: 'realAlarm', align: 'center' },
+  { text: '报警解除时间', value: 'cancelTime', align: 'center' },
+  { text: '处置时长', value: 'processDuration', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
-    loadingTable.value = false
-  }, 1000)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
 })
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  getLifecycleRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+
+// 查看详情
+const detailRow = (row: any) => {
+  console.log(row.id)
+}
 </script>
 
 <template>
@@ -33,10 +69,10 @@
     <template #btns-left>
       <!-- 查询条件 -->
       <el-date-picker
-        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        v-model="datetimerange" 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 type="primary" style="margin-left: 10px;" @click="fetchData">
         搜索
       </el-button>
       <el-button type="primary">
@@ -50,7 +86,7 @@
       <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 type="primary" link size="small" @click="detailRow(scope.row)">
               查看
             </el-button>
           </template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
index a389d61..efceca3 100644
--- a/src/views/home/well/components/maintenanceRecord.vue
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -4,29 +4,55 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailMaintenanceRecord">
+import { getRepairLog } from '@/api/home/well/well'
+import { getDictByCode } from '@/api/system/dict'
+import { getUserList } from '@/api/system/user'
+const $route = useRoute()
 // 列表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' },
+  { text: '记录类型', value: 'logTypeName', align: 'center' },
+  { text: '设备类型', value: 'typeName', align: 'center' },
+  { text: '设备型号', value: 'deviceModel', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '厂商', value: 'manufactureName', align: 'center' },
+  { text: '操作人', value: 'operatePersonName', align: 'center' },
+  { text: '操作时间', value: 'operateTime', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
+const repairTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 运维类型
+const userList = ref<{ id: string; name: string; value: string }[]>([]) // 人员
+// 获取字典
+const fetchDict = async () => {
+  // 运维类型
+  const res1 = await getDictByCode('repairType')
+  repairTypeList.value = res1.data
+  // 用户
+  const res2 = await getUserList({ offset: 1, limit: 9999 })
+  userList.value = res2.data.rows.map((item: any) => ({ name: item.name, value: item.id, id: item.id }))
+}
+onMounted(async () => {
+  await fetchDict()
+  loadingTable.value = true
+  getRepairLog($route.query.id as string).then((res) => {
+    list.value = res.data.map((item: any) => ({
+      ...item,
+      logTypeName: repairTypeList.value.filter((citem: any) => citem.value === item.logType)[0].name,
+      operatePersonName: userList.value.filter((citem: any) => citem.value === item.operatePerson)[0].name,
+    }))
     loadingTable.value = false
-  }, 1000)
+  }).catch(() => {
+    loadingTable.value = false
+  })
 })
 </script>
 
 <template>
-  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+  <normal-table
+    :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
+    :pagination="false"
+  />
 </template>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </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 1b52d44..da0c022 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -4,9 +4,11 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
+
 // 基本数据
 const baseInfo = ref({
   ledgerCode: '', // 闸井编号
@@ -19,62 +21,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '闸井名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +98,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    baseInfo.value = res.data
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,14 +128,16 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :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] || '' }}
+          <span class="nowrap">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -122,16 +145,41 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.el-descriptions__label) {
-  width: 20%;
-}
-
 ::v-deep(.el-descriptions__cell) {
   padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/well/components/editDialog-bak.vue b/src/views/home/well/components/editDialog-bak.vue
new file mode 100644
index 0000000..924d7f0
--- /dev/null
+++ b/src/views/home/well/components/editDialog-bak.vue
@@ -0,0 +1,241 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  tagNumber: '', // 位号
+  ledgerCode: '', // 编号
+  ledgerName: '', // 名称
+  propertyOwner: '', // 产权单位
+  responsibleDept: '', // 管理单位
+  manageType: '', // 管理方式
+  monitorState: '', // 监控状态
+  onState: '', // 使用状态
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+  ledgerCode: [{ required: true, message: '闸井编号不能为空', trigger: ['blur', 'change'] }],
+  ledgerName: [{ required: true, message: '闸井名称不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权单位不能为空', trigger: ['blur', 'change'] }],
+  responsibleDept: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
+  monitorState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+  onState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    tagNumber: '', // 位号
+    ledgerCode: '', // 编号
+    ledgerName: '', // 名称
+    propertyOwner: '', // 产权单位
+    responsibleDept: '', // 管理单位
+    manageType: '', // 管理方式
+    monitorState: '', // 监控状态
+    onState: '', // 使用状态
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        bfzt: '', // 布防状态
+        deptid: '',
+        gridCode: '',
+        id: '',
+        ledgerCode: '', // 编号
+        ledgerName: '', // 名称
+        locationState: '', // 位置状态
+        manageType: '', // 管理方式
+        marker: '', // 标签
+        monitorState: '', // 监控状态
+        onState: '', // 使用状态
+        propertyOwner: '', // 产权单位
+        responsibleDept: '', // 管理单位
+        tagNumber: '', // 位号
+        wellType: '', // 类型
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
+const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
+const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
+// 获取字典
+const fetchDict = async () => {
+  // 管理方式
+  getDictByCode('manageType').then((res) => {
+    manageTypeList.value = res.data
+  })
+  // 监控状态
+  getDictByCode('monitorState').then((res) => {
+    monitorStateList.value = res.data
+  })
+  // 使用状态
+  getDictByCode('onState').then((res) => {
+    onStateList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井位号" prop="tagNumber">
+            <el-input v-model.trim="dataForm.tagNumber" type="text" placeholder="闸井位号" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="闸井编号" prop="ledgerCode">
+            <el-input
+              v-model.trim="dataForm.ledgerCode" type="text" placeholder="闸井编号" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井名称" prop="ledgerName">
+            <el-input
+              v-model.trim="dataForm.ledgerName" type="text" placeholder="闸井名称" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
+            <el-input
+              v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="管理单位" prop="responsibleDept">
+            <dept-select v-model="dataForm.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="管理方式" prop="manageType">
+            <el-select v-model="dataForm.manageType" placeholder="管理方式" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="监控状态" prop="monitorState">
+            <el-select v-model="dataForm.monitorState" placeholder="监控状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in monitorStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="onState">
+            <el-select v-model="dataForm.onState" placeholder="使用状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in onStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="标签" prop="marker">
+            <el-input v-model.trim="dataForm.marker" type="text" placeholder="标签" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/editDialog.vue b/src/views/home/well/components/editDialog.vue
new file mode 100644
index 0000000..cc810fc
--- /dev/null
+++ b/src/views/home/well/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
index 1f37b5a..c56141d 100644
--- a/src/views/home/well/components/lifeCycleRecord.vue
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -4,28 +4,64 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailLifeRecord">
-// 时间查询条件
-const timerang = ref()
+import dayjs from 'dayjs'
+import { getLifecycleRecord } from '@/api/home/well/well'
+const $route = useRoute()
 // 列表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: 'alarmTime', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警原因', value: 'alarmContent', align: 'center' },
+  { text: '是否误报', value: 'realAlarm', align: 'center' },
+  { text: '报警解除时间', value: 'cancelTime', align: 'center' },
+  { text: '处置时长', value: 'processDuration', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
-    loadingTable.value = false
-  }, 1000)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
 })
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  getLifecycleRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+
+// 查看详情
+const detailRow = (row: any) => {
+  console.log(row.id)
+}
 </script>
 
 <template>
@@ -33,10 +69,10 @@
     <template #btns-left>
       <!-- 查询条件 -->
       <el-date-picker
-        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        v-model="datetimerange" 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 type="primary" style="margin-left: 10px;" @click="fetchData">
         搜索
       </el-button>
       <el-button type="primary">
@@ -50,7 +86,7 @@
       <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 type="primary" link size="small" @click="detailRow(scope.row)">
               查看
             </el-button>
           </template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
index a389d61..efceca3 100644
--- a/src/views/home/well/components/maintenanceRecord.vue
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -4,29 +4,55 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailMaintenanceRecord">
+import { getRepairLog } from '@/api/home/well/well'
+import { getDictByCode } from '@/api/system/dict'
+import { getUserList } from '@/api/system/user'
+const $route = useRoute()
 // 列表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' },
+  { text: '记录类型', value: 'logTypeName', align: 'center' },
+  { text: '设备类型', value: 'typeName', align: 'center' },
+  { text: '设备型号', value: 'deviceModel', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '厂商', value: 'manufactureName', align: 'center' },
+  { text: '操作人', value: 'operatePersonName', align: 'center' },
+  { text: '操作时间', value: 'operateTime', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
+const repairTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 运维类型
+const userList = ref<{ id: string; name: string; value: string }[]>([]) // 人员
+// 获取字典
+const fetchDict = async () => {
+  // 运维类型
+  const res1 = await getDictByCode('repairType')
+  repairTypeList.value = res1.data
+  // 用户
+  const res2 = await getUserList({ offset: 1, limit: 9999 })
+  userList.value = res2.data.rows.map((item: any) => ({ name: item.name, value: item.id, id: item.id }))
+}
+onMounted(async () => {
+  await fetchDict()
+  loadingTable.value = true
+  getRepairLog($route.query.id as string).then((res) => {
+    list.value = res.data.map((item: any) => ({
+      ...item,
+      logTypeName: repairTypeList.value.filter((citem: any) => citem.value === item.logType)[0].name,
+      operatePersonName: userList.value.filter((citem: any) => citem.value === item.operatePerson)[0].name,
+    }))
     loadingTable.value = false
-  }, 1000)
+  }).catch(() => {
+    loadingTable.value = false
+  })
 })
 </script>
 
 <template>
-  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+  <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 2955e68..f74230f 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </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 1b52d44..da0c022 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -4,9 +4,11 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
+
 // 基本数据
 const baseInfo = ref({
   ledgerCode: '', // 闸井编号
@@ -19,62 +21,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '闸井名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +98,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    baseInfo.value = res.data
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,14 +128,16 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :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] || '' }}
+          <span class="nowrap">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -122,16 +145,41 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.el-descriptions__label) {
-  width: 20%;
-}
-
 ::v-deep(.el-descriptions__cell) {
   padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/well/components/editDialog-bak.vue b/src/views/home/well/components/editDialog-bak.vue
new file mode 100644
index 0000000..924d7f0
--- /dev/null
+++ b/src/views/home/well/components/editDialog-bak.vue
@@ -0,0 +1,241 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  tagNumber: '', // 位号
+  ledgerCode: '', // 编号
+  ledgerName: '', // 名称
+  propertyOwner: '', // 产权单位
+  responsibleDept: '', // 管理单位
+  manageType: '', // 管理方式
+  monitorState: '', // 监控状态
+  onState: '', // 使用状态
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+  ledgerCode: [{ required: true, message: '闸井编号不能为空', trigger: ['blur', 'change'] }],
+  ledgerName: [{ required: true, message: '闸井名称不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权单位不能为空', trigger: ['blur', 'change'] }],
+  responsibleDept: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
+  monitorState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+  onState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    tagNumber: '', // 位号
+    ledgerCode: '', // 编号
+    ledgerName: '', // 名称
+    propertyOwner: '', // 产权单位
+    responsibleDept: '', // 管理单位
+    manageType: '', // 管理方式
+    monitorState: '', // 监控状态
+    onState: '', // 使用状态
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        bfzt: '', // 布防状态
+        deptid: '',
+        gridCode: '',
+        id: '',
+        ledgerCode: '', // 编号
+        ledgerName: '', // 名称
+        locationState: '', // 位置状态
+        manageType: '', // 管理方式
+        marker: '', // 标签
+        monitorState: '', // 监控状态
+        onState: '', // 使用状态
+        propertyOwner: '', // 产权单位
+        responsibleDept: '', // 管理单位
+        tagNumber: '', // 位号
+        wellType: '', // 类型
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
+const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
+const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
+// 获取字典
+const fetchDict = async () => {
+  // 管理方式
+  getDictByCode('manageType').then((res) => {
+    manageTypeList.value = res.data
+  })
+  // 监控状态
+  getDictByCode('monitorState').then((res) => {
+    monitorStateList.value = res.data
+  })
+  // 使用状态
+  getDictByCode('onState').then((res) => {
+    onStateList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井位号" prop="tagNumber">
+            <el-input v-model.trim="dataForm.tagNumber" type="text" placeholder="闸井位号" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="闸井编号" prop="ledgerCode">
+            <el-input
+              v-model.trim="dataForm.ledgerCode" type="text" placeholder="闸井编号" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井名称" prop="ledgerName">
+            <el-input
+              v-model.trim="dataForm.ledgerName" type="text" placeholder="闸井名称" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
+            <el-input
+              v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="管理单位" prop="responsibleDept">
+            <dept-select v-model="dataForm.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="管理方式" prop="manageType">
+            <el-select v-model="dataForm.manageType" placeholder="管理方式" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="监控状态" prop="monitorState">
+            <el-select v-model="dataForm.monitorState" placeholder="监控状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in monitorStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="onState">
+            <el-select v-model="dataForm.onState" placeholder="使用状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in onStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="标签" prop="marker">
+            <el-input v-model.trim="dataForm.marker" type="text" placeholder="标签" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/editDialog.vue b/src/views/home/well/components/editDialog.vue
new file mode 100644
index 0000000..cc810fc
--- /dev/null
+++ b/src/views/home/well/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
index 1f37b5a..c56141d 100644
--- a/src/views/home/well/components/lifeCycleRecord.vue
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -4,28 +4,64 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailLifeRecord">
-// 时间查询条件
-const timerang = ref()
+import dayjs from 'dayjs'
+import { getLifecycleRecord } from '@/api/home/well/well'
+const $route = useRoute()
 // 列表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: 'alarmTime', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警原因', value: 'alarmContent', align: 'center' },
+  { text: '是否误报', value: 'realAlarm', align: 'center' },
+  { text: '报警解除时间', value: 'cancelTime', align: 'center' },
+  { text: '处置时长', value: 'processDuration', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
-    loadingTable.value = false
-  }, 1000)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
 })
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  getLifecycleRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+
+// 查看详情
+const detailRow = (row: any) => {
+  console.log(row.id)
+}
 </script>
 
 <template>
@@ -33,10 +69,10 @@
     <template #btns-left>
       <!-- 查询条件 -->
       <el-date-picker
-        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        v-model="datetimerange" 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 type="primary" style="margin-left: 10px;" @click="fetchData">
         搜索
       </el-button>
       <el-button type="primary">
@@ -50,7 +86,7 @@
       <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 type="primary" link size="small" @click="detailRow(scope.row)">
               查看
             </el-button>
           </template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
index a389d61..efceca3 100644
--- a/src/views/home/well/components/maintenanceRecord.vue
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -4,29 +4,55 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailMaintenanceRecord">
+import { getRepairLog } from '@/api/home/well/well'
+import { getDictByCode } from '@/api/system/dict'
+import { getUserList } from '@/api/system/user'
+const $route = useRoute()
 // 列表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' },
+  { text: '记录类型', value: 'logTypeName', align: 'center' },
+  { text: '设备类型', value: 'typeName', align: 'center' },
+  { text: '设备型号', value: 'deviceModel', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '厂商', value: 'manufactureName', align: 'center' },
+  { text: '操作人', value: 'operatePersonName', align: 'center' },
+  { text: '操作时间', value: 'operateTime', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
+const repairTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 运维类型
+const userList = ref<{ id: string; name: string; value: string }[]>([]) // 人员
+// 获取字典
+const fetchDict = async () => {
+  // 运维类型
+  const res1 = await getDictByCode('repairType')
+  repairTypeList.value = res1.data
+  // 用户
+  const res2 = await getUserList({ offset: 1, limit: 9999 })
+  userList.value = res2.data.rows.map((item: any) => ({ name: item.name, value: item.id, id: item.id }))
+}
+onMounted(async () => {
+  await fetchDict()
+  loadingTable.value = true
+  getRepairLog($route.query.id as string).then((res) => {
+    list.value = res.data.map((item: any) => ({
+      ...item,
+      logTypeName: repairTypeList.value.filter((citem: any) => citem.value === item.logType)[0].name,
+      operatePersonName: userList.value.filter((citem: any) => citem.value === item.operatePerson)[0].name,
+    }))
     loadingTable.value = false
-  }, 1000)
+  }).catch(() => {
+    loadingTable.value = false
+  })
 })
 </script>
 
 <template>
-  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+  <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 2955e68..f74230f 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/well/components/monitorData.vue b/src/views/home/well/components/monitorData.vue
index 9264abb..14ca0f0 100644
--- a/src/views/home/well/components/monitorData.vue
+++ b/src/views/home/well/components/monitorData.vue
@@ -5,23 +5,49 @@
  -->
 <script lang="ts" setup name="WellDetailMonitorData">
 import type { TabsPaneContext } from 'element-plus'
-import monitorDataList from './monitorDataList.vue'
+import monitorDataGasList from './monitorDataGasList.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
 const activeName = ref('燃气浓度')
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
 }
+const showGas = ref(false) // 是否展示燃气浓度
+const showLiquid = ref(false) // 是否展示井下水位
+const showWell = ref(false) // 是否展示井盖
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log()
+  if (res.data['燃气智能监测终端']) {
+    showGas.value = true
+    activeName.value = '燃气浓度'
+  }
+  if (res.data['液位检测仪']) {
+    showLiquid.value = true
+    activeName.value = '井下水位'
+  }
+  if (res.data['井盖监测仪']) {
+    showWell.value = true
+    activeName.value = '井盖'
+  }
+  if (!showGas.value && !showLiquid.value && !showWell.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
 </script>
 
 <template>
-  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-    <el-tab-pane label="燃气浓度" name="燃气浓度">
-      <monitor-data-list />
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showGas" label="燃气浓度" name="燃气浓度">
+      <monitor-data-gas-list v-if="activeName === '燃气浓度'" />
     </el-tab-pane>
-    <el-tab-pane label="井下水位" name="井下水位">
-      <monitor-data-list />
+    <el-tab-pane v-if="showLiquid" label="井下水位" name="井下水位">
+      <!-- <monitor-data-list v-if="activeName === '井下水位'" /> -->
     </el-tab-pane>
-    <el-tab-pane label="井盖" name="井盖">
-      <monitor-data-list />
+    <el-tab-pane v-if="showWell" label="井盖" name="井盖">
+      <!-- <monitor-data-list v-if="activeName === '井盖'" /> -->
     </el-tab-pane>
   </el-tabs>
+  <monitor-data-gas-list v-if="NoAllData" />
 </template>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </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 1b52d44..da0c022 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -4,9 +4,11 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
+
 // 基本数据
 const baseInfo = ref({
   ledgerCode: '', // 闸井编号
@@ -19,62 +21,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '闸井名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +98,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    baseInfo.value = res.data
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,14 +128,16 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :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] || '' }}
+          <span class="nowrap">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -122,16 +145,41 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.el-descriptions__label) {
-  width: 20%;
-}
-
 ::v-deep(.el-descriptions__cell) {
   padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/well/components/editDialog-bak.vue b/src/views/home/well/components/editDialog-bak.vue
new file mode 100644
index 0000000..924d7f0
--- /dev/null
+++ b/src/views/home/well/components/editDialog-bak.vue
@@ -0,0 +1,241 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  tagNumber: '', // 位号
+  ledgerCode: '', // 编号
+  ledgerName: '', // 名称
+  propertyOwner: '', // 产权单位
+  responsibleDept: '', // 管理单位
+  manageType: '', // 管理方式
+  monitorState: '', // 监控状态
+  onState: '', // 使用状态
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+  ledgerCode: [{ required: true, message: '闸井编号不能为空', trigger: ['blur', 'change'] }],
+  ledgerName: [{ required: true, message: '闸井名称不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权单位不能为空', trigger: ['blur', 'change'] }],
+  responsibleDept: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
+  monitorState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+  onState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    tagNumber: '', // 位号
+    ledgerCode: '', // 编号
+    ledgerName: '', // 名称
+    propertyOwner: '', // 产权单位
+    responsibleDept: '', // 管理单位
+    manageType: '', // 管理方式
+    monitorState: '', // 监控状态
+    onState: '', // 使用状态
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        bfzt: '', // 布防状态
+        deptid: '',
+        gridCode: '',
+        id: '',
+        ledgerCode: '', // 编号
+        ledgerName: '', // 名称
+        locationState: '', // 位置状态
+        manageType: '', // 管理方式
+        marker: '', // 标签
+        monitorState: '', // 监控状态
+        onState: '', // 使用状态
+        propertyOwner: '', // 产权单位
+        responsibleDept: '', // 管理单位
+        tagNumber: '', // 位号
+        wellType: '', // 类型
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
+const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
+const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
+// 获取字典
+const fetchDict = async () => {
+  // 管理方式
+  getDictByCode('manageType').then((res) => {
+    manageTypeList.value = res.data
+  })
+  // 监控状态
+  getDictByCode('monitorState').then((res) => {
+    monitorStateList.value = res.data
+  })
+  // 使用状态
+  getDictByCode('onState').then((res) => {
+    onStateList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井位号" prop="tagNumber">
+            <el-input v-model.trim="dataForm.tagNumber" type="text" placeholder="闸井位号" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="闸井编号" prop="ledgerCode">
+            <el-input
+              v-model.trim="dataForm.ledgerCode" type="text" placeholder="闸井编号" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井名称" prop="ledgerName">
+            <el-input
+              v-model.trim="dataForm.ledgerName" type="text" placeholder="闸井名称" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
+            <el-input
+              v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="管理单位" prop="responsibleDept">
+            <dept-select v-model="dataForm.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="管理方式" prop="manageType">
+            <el-select v-model="dataForm.manageType" placeholder="管理方式" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="监控状态" prop="monitorState">
+            <el-select v-model="dataForm.monitorState" placeholder="监控状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in monitorStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="onState">
+            <el-select v-model="dataForm.onState" placeholder="使用状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in onStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="标签" prop="marker">
+            <el-input v-model.trim="dataForm.marker" type="text" placeholder="标签" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/editDialog.vue b/src/views/home/well/components/editDialog.vue
new file mode 100644
index 0000000..cc810fc
--- /dev/null
+++ b/src/views/home/well/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
index 1f37b5a..c56141d 100644
--- a/src/views/home/well/components/lifeCycleRecord.vue
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -4,28 +4,64 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailLifeRecord">
-// 时间查询条件
-const timerang = ref()
+import dayjs from 'dayjs'
+import { getLifecycleRecord } from '@/api/home/well/well'
+const $route = useRoute()
 // 列表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: 'alarmTime', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警原因', value: 'alarmContent', align: 'center' },
+  { text: '是否误报', value: 'realAlarm', align: 'center' },
+  { text: '报警解除时间', value: 'cancelTime', align: 'center' },
+  { text: '处置时长', value: 'processDuration', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
-    loadingTable.value = false
-  }, 1000)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
 })
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  getLifecycleRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+
+// 查看详情
+const detailRow = (row: any) => {
+  console.log(row.id)
+}
 </script>
 
 <template>
@@ -33,10 +69,10 @@
     <template #btns-left>
       <!-- 查询条件 -->
       <el-date-picker
-        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        v-model="datetimerange" 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 type="primary" style="margin-left: 10px;" @click="fetchData">
         搜索
       </el-button>
       <el-button type="primary">
@@ -50,7 +86,7 @@
       <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 type="primary" link size="small" @click="detailRow(scope.row)">
               查看
             </el-button>
           </template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
index a389d61..efceca3 100644
--- a/src/views/home/well/components/maintenanceRecord.vue
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -4,29 +4,55 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailMaintenanceRecord">
+import { getRepairLog } from '@/api/home/well/well'
+import { getDictByCode } from '@/api/system/dict'
+import { getUserList } from '@/api/system/user'
+const $route = useRoute()
 // 列表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' },
+  { text: '记录类型', value: 'logTypeName', align: 'center' },
+  { text: '设备类型', value: 'typeName', align: 'center' },
+  { text: '设备型号', value: 'deviceModel', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '厂商', value: 'manufactureName', align: 'center' },
+  { text: '操作人', value: 'operatePersonName', align: 'center' },
+  { text: '操作时间', value: 'operateTime', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
+const repairTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 运维类型
+const userList = ref<{ id: string; name: string; value: string }[]>([]) // 人员
+// 获取字典
+const fetchDict = async () => {
+  // 运维类型
+  const res1 = await getDictByCode('repairType')
+  repairTypeList.value = res1.data
+  // 用户
+  const res2 = await getUserList({ offset: 1, limit: 9999 })
+  userList.value = res2.data.rows.map((item: any) => ({ name: item.name, value: item.id, id: item.id }))
+}
+onMounted(async () => {
+  await fetchDict()
+  loadingTable.value = true
+  getRepairLog($route.query.id as string).then((res) => {
+    list.value = res.data.map((item: any) => ({
+      ...item,
+      logTypeName: repairTypeList.value.filter((citem: any) => citem.value === item.logType)[0].name,
+      operatePersonName: userList.value.filter((citem: any) => citem.value === item.operatePerson)[0].name,
+    }))
     loadingTable.value = false
-  }, 1000)
+  }).catch(() => {
+    loadingTable.value = false
+  })
 })
 </script>
 
 <template>
-  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+  <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 2955e68..f74230f 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/well/components/monitorData.vue b/src/views/home/well/components/monitorData.vue
index 9264abb..14ca0f0 100644
--- a/src/views/home/well/components/monitorData.vue
+++ b/src/views/home/well/components/monitorData.vue
@@ -5,23 +5,49 @@
  -->
 <script lang="ts" setup name="WellDetailMonitorData">
 import type { TabsPaneContext } from 'element-plus'
-import monitorDataList from './monitorDataList.vue'
+import monitorDataGasList from './monitorDataGasList.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
 const activeName = ref('燃气浓度')
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
 }
+const showGas = ref(false) // 是否展示燃气浓度
+const showLiquid = ref(false) // 是否展示井下水位
+const showWell = ref(false) // 是否展示井盖
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log()
+  if (res.data['燃气智能监测终端']) {
+    showGas.value = true
+    activeName.value = '燃气浓度'
+  }
+  if (res.data['液位检测仪']) {
+    showLiquid.value = true
+    activeName.value = '井下水位'
+  }
+  if (res.data['井盖监测仪']) {
+    showWell.value = true
+    activeName.value = '井盖'
+  }
+  if (!showGas.value && !showLiquid.value && !showWell.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
 </script>
 
 <template>
-  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-    <el-tab-pane label="燃气浓度" name="燃气浓度">
-      <monitor-data-list />
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showGas" label="燃气浓度" name="燃气浓度">
+      <monitor-data-gas-list v-if="activeName === '燃气浓度'" />
     </el-tab-pane>
-    <el-tab-pane label="井下水位" name="井下水位">
-      <monitor-data-list />
+    <el-tab-pane v-if="showLiquid" label="井下水位" name="井下水位">
+      <!-- <monitor-data-list v-if="activeName === '井下水位'" /> -->
     </el-tab-pane>
-    <el-tab-pane label="井盖" name="井盖">
-      <monitor-data-list />
+    <el-tab-pane v-if="showWell" label="井盖" name="井盖">
+      <!-- <monitor-data-list v-if="activeName === '井盖'" /> -->
     </el-tab-pane>
   </el-tabs>
+  <monitor-data-gas-list v-if="NoAllData" />
 </template>
diff --git a/src/views/home/well/components/monitorDataGasList.vue b/src/views/home/well/components/monitorDataGasList.vue
new file mode 100644
index 0000000..426ac5a
--- /dev/null
+++ b/src/views/home/well/components/monitorDataGasList.vue
@@ -0,0 +1,117 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: 'strength', align: 'center' },
+  { text: '电量(%)', value: 'cell', align: 'center' },
+  { text: '信号强度', value: 'pci', align: 'center' },
+  { text: '采集时间', value: 'logtime', align: 'center' },
+  { text: '上传时间', value: 'uptime', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  getMonitorData(listQuery.value).then((res) => {
+    list.value = res.data['燃气智能监测终端'] || []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="datetimerange" 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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
+      :list-loading="loadingTable" :pagination="false"
+    />
+    <div v-show="!isShowTable" style="width: 100%;height: 240px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>

diff --git a/src/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </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 1b52d44..da0c022 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -4,9 +4,11 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
+
 // 基本数据
 const baseInfo = ref({
   ledgerCode: '', // 闸井编号
@@ -19,62 +21,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '闸井名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +98,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    baseInfo.value = res.data
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,14 +128,16 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :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] || '' }}
+          <span class="nowrap">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -122,16 +145,41 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.el-descriptions__label) {
-  width: 20%;
-}
-
 ::v-deep(.el-descriptions__cell) {
   padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/well/components/editDialog-bak.vue b/src/views/home/well/components/editDialog-bak.vue
new file mode 100644
index 0000000..924d7f0
--- /dev/null
+++ b/src/views/home/well/components/editDialog-bak.vue
@@ -0,0 +1,241 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  tagNumber: '', // 位号
+  ledgerCode: '', // 编号
+  ledgerName: '', // 名称
+  propertyOwner: '', // 产权单位
+  responsibleDept: '', // 管理单位
+  manageType: '', // 管理方式
+  monitorState: '', // 监控状态
+  onState: '', // 使用状态
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+  ledgerCode: [{ required: true, message: '闸井编号不能为空', trigger: ['blur', 'change'] }],
+  ledgerName: [{ required: true, message: '闸井名称不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权单位不能为空', trigger: ['blur', 'change'] }],
+  responsibleDept: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
+  monitorState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+  onState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    tagNumber: '', // 位号
+    ledgerCode: '', // 编号
+    ledgerName: '', // 名称
+    propertyOwner: '', // 产权单位
+    responsibleDept: '', // 管理单位
+    manageType: '', // 管理方式
+    monitorState: '', // 监控状态
+    onState: '', // 使用状态
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        bfzt: '', // 布防状态
+        deptid: '',
+        gridCode: '',
+        id: '',
+        ledgerCode: '', // 编号
+        ledgerName: '', // 名称
+        locationState: '', // 位置状态
+        manageType: '', // 管理方式
+        marker: '', // 标签
+        monitorState: '', // 监控状态
+        onState: '', // 使用状态
+        propertyOwner: '', // 产权单位
+        responsibleDept: '', // 管理单位
+        tagNumber: '', // 位号
+        wellType: '', // 类型
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
+const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
+const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
+// 获取字典
+const fetchDict = async () => {
+  // 管理方式
+  getDictByCode('manageType').then((res) => {
+    manageTypeList.value = res.data
+  })
+  // 监控状态
+  getDictByCode('monitorState').then((res) => {
+    monitorStateList.value = res.data
+  })
+  // 使用状态
+  getDictByCode('onState').then((res) => {
+    onStateList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井位号" prop="tagNumber">
+            <el-input v-model.trim="dataForm.tagNumber" type="text" placeholder="闸井位号" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="闸井编号" prop="ledgerCode">
+            <el-input
+              v-model.trim="dataForm.ledgerCode" type="text" placeholder="闸井编号" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井名称" prop="ledgerName">
+            <el-input
+              v-model.trim="dataForm.ledgerName" type="text" placeholder="闸井名称" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
+            <el-input
+              v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="管理单位" prop="responsibleDept">
+            <dept-select v-model="dataForm.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="管理方式" prop="manageType">
+            <el-select v-model="dataForm.manageType" placeholder="管理方式" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="监控状态" prop="monitorState">
+            <el-select v-model="dataForm.monitorState" placeholder="监控状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in monitorStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="onState">
+            <el-select v-model="dataForm.onState" placeholder="使用状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in onStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="标签" prop="marker">
+            <el-input v-model.trim="dataForm.marker" type="text" placeholder="标签" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/editDialog.vue b/src/views/home/well/components/editDialog.vue
new file mode 100644
index 0000000..cc810fc
--- /dev/null
+++ b/src/views/home/well/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
index 1f37b5a..c56141d 100644
--- a/src/views/home/well/components/lifeCycleRecord.vue
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -4,28 +4,64 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailLifeRecord">
-// 时间查询条件
-const timerang = ref()
+import dayjs from 'dayjs'
+import { getLifecycleRecord } from '@/api/home/well/well'
+const $route = useRoute()
 // 列表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: 'alarmTime', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警原因', value: 'alarmContent', align: 'center' },
+  { text: '是否误报', value: 'realAlarm', align: 'center' },
+  { text: '报警解除时间', value: 'cancelTime', align: 'center' },
+  { text: '处置时长', value: 'processDuration', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
-    loadingTable.value = false
-  }, 1000)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
 })
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  getLifecycleRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+
+// 查看详情
+const detailRow = (row: any) => {
+  console.log(row.id)
+}
 </script>
 
 <template>
@@ -33,10 +69,10 @@
     <template #btns-left>
       <!-- 查询条件 -->
       <el-date-picker
-        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        v-model="datetimerange" 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 type="primary" style="margin-left: 10px;" @click="fetchData">
         搜索
       </el-button>
       <el-button type="primary">
@@ -50,7 +86,7 @@
       <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 type="primary" link size="small" @click="detailRow(scope.row)">
               查看
             </el-button>
           </template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
index a389d61..efceca3 100644
--- a/src/views/home/well/components/maintenanceRecord.vue
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -4,29 +4,55 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailMaintenanceRecord">
+import { getRepairLog } from '@/api/home/well/well'
+import { getDictByCode } from '@/api/system/dict'
+import { getUserList } from '@/api/system/user'
+const $route = useRoute()
 // 列表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' },
+  { text: '记录类型', value: 'logTypeName', align: 'center' },
+  { text: '设备类型', value: 'typeName', align: 'center' },
+  { text: '设备型号', value: 'deviceModel', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '厂商', value: 'manufactureName', align: 'center' },
+  { text: '操作人', value: 'operatePersonName', align: 'center' },
+  { text: '操作时间', value: 'operateTime', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
+const repairTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 运维类型
+const userList = ref<{ id: string; name: string; value: string }[]>([]) // 人员
+// 获取字典
+const fetchDict = async () => {
+  // 运维类型
+  const res1 = await getDictByCode('repairType')
+  repairTypeList.value = res1.data
+  // 用户
+  const res2 = await getUserList({ offset: 1, limit: 9999 })
+  userList.value = res2.data.rows.map((item: any) => ({ name: item.name, value: item.id, id: item.id }))
+}
+onMounted(async () => {
+  await fetchDict()
+  loadingTable.value = true
+  getRepairLog($route.query.id as string).then((res) => {
+    list.value = res.data.map((item: any) => ({
+      ...item,
+      logTypeName: repairTypeList.value.filter((citem: any) => citem.value === item.logType)[0].name,
+      operatePersonName: userList.value.filter((citem: any) => citem.value === item.operatePerson)[0].name,
+    }))
     loadingTable.value = false
-  }, 1000)
+  }).catch(() => {
+    loadingTable.value = false
+  })
 })
 </script>
 
 <template>
-  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+  <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 2955e68..f74230f 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/well/components/monitorData.vue b/src/views/home/well/components/monitorData.vue
index 9264abb..14ca0f0 100644
--- a/src/views/home/well/components/monitorData.vue
+++ b/src/views/home/well/components/monitorData.vue
@@ -5,23 +5,49 @@
  -->
 <script lang="ts" setup name="WellDetailMonitorData">
 import type { TabsPaneContext } from 'element-plus'
-import monitorDataList from './monitorDataList.vue'
+import monitorDataGasList from './monitorDataGasList.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
 const activeName = ref('燃气浓度')
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
 }
+const showGas = ref(false) // 是否展示燃气浓度
+const showLiquid = ref(false) // 是否展示井下水位
+const showWell = ref(false) // 是否展示井盖
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log()
+  if (res.data['燃气智能监测终端']) {
+    showGas.value = true
+    activeName.value = '燃气浓度'
+  }
+  if (res.data['液位检测仪']) {
+    showLiquid.value = true
+    activeName.value = '井下水位'
+  }
+  if (res.data['井盖监测仪']) {
+    showWell.value = true
+    activeName.value = '井盖'
+  }
+  if (!showGas.value && !showLiquid.value && !showWell.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
 </script>
 
 <template>
-  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-    <el-tab-pane label="燃气浓度" name="燃气浓度">
-      <monitor-data-list />
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showGas" label="燃气浓度" name="燃气浓度">
+      <monitor-data-gas-list v-if="activeName === '燃气浓度'" />
     </el-tab-pane>
-    <el-tab-pane label="井下水位" name="井下水位">
-      <monitor-data-list />
+    <el-tab-pane v-if="showLiquid" label="井下水位" name="井下水位">
+      <!-- <monitor-data-list v-if="activeName === '井下水位'" /> -->
     </el-tab-pane>
-    <el-tab-pane label="井盖" name="井盖">
-      <monitor-data-list />
+    <el-tab-pane v-if="showWell" label="井盖" name="井盖">
+      <!-- <monitor-data-list v-if="activeName === '井盖'" /> -->
     </el-tab-pane>
   </el-tabs>
+  <monitor-data-gas-list v-if="NoAllData" />
 </template>
diff --git a/src/views/home/well/components/monitorDataGasList.vue b/src/views/home/well/components/monitorDataGasList.vue
new file mode 100644
index 0000000..426ac5a
--- /dev/null
+++ b/src/views/home/well/components/monitorDataGasList.vue
@@ -0,0 +1,117 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: 'strength', align: 'center' },
+  { text: '电量(%)', value: 'cell', align: 'center' },
+  { text: '信号强度', value: 'pci', align: 'center' },
+  { text: '采集时间', value: 'logtime', align: 'center' },
+  { text: '上传时间', value: 'uptime', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  getMonitorData(listQuery.value).then((res) => {
+    list.value = res.data['燃气智能监测终端'] || []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="datetimerange" 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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
+      :list-loading="loadingTable" :pagination="false"
+    />
+    <div v-show="!isShowTable" style="width: 100%;height: 240px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/well/components/monitorDataList.vue b/src/views/home/well/components/monitorDataList.vue
deleted file mode 100644
index d6118ad..0000000
--- a/src/views/home/well/components/monitorDataList.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<!--
-  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/api/home/station/station.ts b/src/api/home/station/station.ts
index 887fefc..ce798e9 100644
--- a/src/api/home/station/station.ts
+++ b/src/api/home/station/station.ts
@@ -19,3 +19,14 @@
     data,
   })
 }
+// 编辑
+export function editStation(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '2',
+    },
+  })
+}
diff --git a/src/api/home/well/well.ts b/src/api/home/well/well.ts
index 0367821..f558e64 100644
--- a/src/api/home/well/well.ts
+++ b/src/api/home/well/well.ts
@@ -19,3 +19,54 @@
     data,
   })
 }
+
+// 查询监控数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/well/watchDataByWell',
+    method: 'post',
+    data,
+  })
+}
+
+// 全生命周期记录
+export function getLifecycleRecord(data: any) {
+  return request({
+    url: '/monitor/well/lifecycleRecord',
+    method: 'post',
+    data,
+  })
+}
+
+// 监控设备维护记录
+export function getRepairLog(id: string) {
+  return request({
+    url: '/monitor/well/repairLog',
+    method: 'post',
+    data: {
+      wellId: id,
+    },
+  })
+}
+// 编辑闸井
+export function editWell(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '1',
+    },
+  })
+}
+// 详情
+export function getWellDetail(id: string) {
+  return request({
+    url: '/system/busLedger/detail',
+    method: 'post',
+    data: {
+      id,
+    },
+  })
+}
+
diff --git a/src/assets/fullscren/banner-bg.png b/src/assets/fullscren/banner-bg.png
new file mode 100644
index 0000000..789664f
--- /dev/null
+++ b/src/assets/fullscren/banner-bg.png
Binary files differ
diff --git a/src/assets/fullscren/banner.png b/src/assets/fullscren/banner.png
new file mode 100644
index 0000000..a995bda
--- /dev/null
+++ b/src/assets/fullscren/banner.png
Binary files differ
diff --git a/src/assets/fullscren/bg.png b/src/assets/fullscren/bg.png
new file mode 100644
index 0000000..f4a462c
--- /dev/null
+++ b/src/assets/fullscren/bg.png
Binary files differ
diff --git a/src/assets/fullscren/data-bg.png b/src/assets/fullscren/data-bg.png
new file mode 100644
index 0000000..a28b51b
--- /dev/null
+++ b/src/assets/fullscren/data-bg.png
Binary files differ
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index d9d0923..45a1846 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -159,6 +159,19 @@
         },
       },
       {
+        path: '/station/:type',
+        component: () => import('@/views/home/station/station/components/detail.vue'),
+        name: 'StationMonitorDetail',
+        meta: {
+          title: '场站监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/station/monitor',
+          auth: '/station/monitor',
+        },
+      },
+      {
         path: 'video',
         component: () => import('@/views/home/station/video/index.vue'),
         name: 'StationVideo',
diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue
new file mode 100644
index 0000000..91a16fa
--- /dev/null
+++ b/src/views/home/dashboard/components/controlMap.vue
@@ -0,0 +1,358 @@
+<!--
+  Description: 综合大屏-布控地图
+  Author: 李亚光
+  Date: 2024-07-18
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import detailInfo from './detailInfoDialog.vue'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+const zoomStatus = ref('') // 当前缩放状态
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: 'transparent',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 2,
+    strokeStyle: 'solid',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+    zIndex: 1,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+  })
+}
+// 图例展示
+const legend = ref(['点', '线'])
+// 双击多边形(行政区或九五示范区)掉起弹窗
+const detail = ref()
+const detailRef = ref()
+const polygonClick = (data: any) => {
+  if (zoomStatus.value === 'hidden') { return }
+  console.log(data, '双击行政区')
+  data.map.setCenter(data.style.dbclickCenter)
+  data.map.setZoom(9.6)
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  // 打开信息窗口
+  detail.value.open(data.map, data.event.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.style,
+    flag: 'district', // 行政区或95示范区
+  })
+}
+
+// 绘制管线
+const drawLine = () => {
+  // 模拟海量点数据
+  const data = [
+    [115.918546, 39.812809],
+    [115.929436, 39.814813],
+    [115.932418, 39.815577],
+    [115.934778, 39.816881],
+    [115.939913, 39.817421],
+    [115.942935, 39.817867],
+    [115.946041, 39.818535],
+    [115.946609, 39.819261],
+    [115.947517, 39.820288],
+    [115.948852, 39.820757],
+    [115.949681, 39.821012],
+    [115.949213, 39.821635],
+    [115.949137, 39.821666],
+    [115.948514, 39.821778],
+    [115.94831, 39.82186],
+  ]
+  mapRef.value.addPolyline({
+    path: data,
+    style: {
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+      strokeStyle: 'solid',
+      zIndex: 95,
+      zoomLevels: [10.5, 18],
+    },
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('线')) {
+    mapRef.value.lineAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 点击管线(选中管线高亮)
+const lineClick = (data: any) => {
+  console.log(data, '点击管线(选中管线高亮)')
+  if (data.polyline.getOptions().strokeWeight === 4.5) {
+    // 取消高亮
+    data.polyline.setOptions({
+      strokeColor: '#BAAF04',
+      strokeWeight: 4,
+    })
+  }
+  else {
+    // 高亮
+    data.polyline.setOptions({
+      strokeColor: '#EAFA03',
+      strokeWeight: 4.5,
+    })
+  }
+}
+// 绘制阀门，调压站等点标记
+const drawMarker = () => {
+  const style = [
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
+      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
+      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+      anchor: new mapRef.value.AMap.Pixel(4, 4),
+      size: new mapRef.value.AMap.Size(11, 11),
+      zIndex: 99,
+    },
+  ]
+  const data = [
+    {
+      lnglat: [115.94831, 39.82186], // 经纬度
+      name: '天安门',
+      style: 1, // 该数据的取值为样式数组对应的对象索引
+    },
+    {
+      lnglat: [115.932418, 39.815577],
+      name: '南锣鼓巷',
+      style: 2,
+    },
+  ]
+  mapRef.value.addMassMarks({
+    path: data,
+    zIndex: 111,
+    zooms: [10.5, 20],
+    style,
+  })
+  // 判断图例设置(没有显示的直接就隐藏)
+  if (!legend.value.includes('点')) {
+    mapRef.value.massMarksAllList.forEach((line: any) => {
+      line.hide()
+    })
+  }
+}
+// 阀门，调压站等点标记点击
+const massMarksClick = (data: any) => {
+  console.log(data, '阀门，调压站等点标记点击')
+  // 定义弹窗
+  detail.value = new mapRef.value.AMap.InfoWindow({
+    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
+    autoMove: true, // 是否自动调整窗体到视野内
+    isCustom: true, // 自定义信息窗体
+    content: detailRef.value.$el, // 窗体内容(vue组件)
+    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
+  })
+  console.log(detail.value, 'detail.value 点')
+  // 打开信息窗口
+  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
+  detail.value.open(data.map, data.event.data.lnglat)
+  // 初始化信息窗口
+  detailRef.value.initDialog({
+    overlay: data.event.target,
+    infoWindow: detail.value,
+    info: data.event.data,
+    // flag: 'valve', // 阀门
+    flag: 'district', // 阀门
+  })
+}
+
+// 监听地图缩放
+watch(() => mapRef.value?.zoom, (newVal) => {
+  if (!newVal) { return }
+  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
+  if (newVal >= 10.5) {
+    if (zoomStatus.value === 'hidden') { return }
+    // 隐藏行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.setOptions({
+        fillOpacity: 0.3,
+        fillColor: 'transparent',
+      })
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.3,
+          fillColor: 'transparent',
+        })
+      })
+    })
+    // 绘制管线
+    drawLine()
+    // 绘制阀门，调压站等点标记
+    drawMarker()
+    zoomStatus.value = 'hidden'
+  }
+  else {
+    if (zoomStatus.value === 'show') { return }
+    // 显示行政区hover
+    mapRef.value.polygonAllList.forEach((polygon: any) => {
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#3CA4D2',
+        })
+      })
+    })
+    // 移除管线
+    mapRef.value.removePolyline()
+    // 移除标记点
+    mapRef.value.removePolyline()
+    zoomStatus.value = 'show'
+  }
+})
+
+// 点击图例，显示隐藏对应的点或线
+const clickLegend = (data: { name: string; type: string }) => {
+  if (legend.value.includes(data.name)) {
+    //  隐藏
+    legend.value = legend.value.filter((citem: string) => citem !== data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        line.hide()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.hide()
+      })
+    }
+  }
+  else {
+    // 显示
+    legend.value.push(data.name)
+    if (data.type === 'line') {
+      mapRef.value.lineAllList.forEach((line: any) => {
+        console.log(line, 'line')
+        line.show()
+      })
+    }
+    else {
+      mapRef.value.massMarksAllList.forEach((marker: any) => {
+        marker.show()
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- 设备信息窗体 -->
+    <detail-info ref="detailRef" />
+    <!-- 地图 -->
+    <a-map
+      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
+      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
+    />
+    <!-- 图例 -->
+    <div class="amap-legend">
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
+          点
+        </div>
+      </div>
+      <div class="legend-item">
+        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
+          图标
+        </div>
+        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
+          线
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.none {
+  opacity: 0;
+}
+
+.amap-legend {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(68 66 66 / 60%);
+  color: #fff;
+  padding: 10px;
+
+  .legend-item {
+    display: flex;
+
+    .value {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.close {
+  width: 150px;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+
+  /* background-color: antiquewhite; */
+  &:hover {
+    .icon {
+      display: block;
+    }
+  }
+
+  .icon {
+    display: none;
+    width: 50px;
+    height: 50px;
+    background: rgb(145 144 144 / 60%);
+    border-radius: 50%;
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #ccc;
+    margin: 10px auto;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/dashboard/components/fullScreen-bak.vue b/src/views/home/dashboard/components/fullScreen-bak.vue
new file mode 100644
index 0000000..cfa64e9
--- /dev/null
+++ b/src/views/home/dashboard/components/fullScreen-bak.vue
@@ -0,0 +1,61 @@
+<!--
+  Description: 综合大屏 -- 废弃
+  Author: 李亚光
+  Date: 2024-06-27
+ -->
+<script lang="ts" setup>
+import { mapData } from './mapData'
+import AMap from '@/components/map/index.vue'
+
+// 地图实例
+const mapRef = ref()
+// 地图挂载完毕执行
+const drawBj = () => {
+  const style = {
+    fillColor: '#A1D2FF',
+    strokeOpacity: 1,
+    fillOpacity: 0.3,
+    strokeColor: '#2b8cbe',
+    strokeWeight: 1,
+    strokeStyle: 'dashed',
+    strokeDasharray: [5, 5],
+    activeFillColor: '#3CA4D2',
+    dbclickSetCenter: true,
+  }
+
+  mapData.forEach((item: any) => {
+    // 绘制北京各个区边界
+    mapRef.value.addPolygon(item.data, {
+      ...style,
+      name: item.name,
+      dbclickCenter: item.center,
+    })
+    // 添加各个区的名称
+    mapRef.value.addText({ text: item.name, position: item.center }, {
+      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
+      'color': 'white',
+      'background-color': 'transparent',
+      'border-color': 'transparent',
+    })
+  })
+}
+// const remove = () => {
+//   mapRef.value.removePolygon()
+//   mapRef.value.removeText()
+// }
+</script>
+
+<template>
+  <div class="full-container">
+    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
+    <!-- 地图 -->
+    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
+  </div>
+</template>
+
+<style>
+.full-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/home/dashboard/fullScreen-bak.vue b/src/views/home/dashboard/fullScreen-bak.vue
deleted file mode 100644
index a706cc8..0000000
--- a/src/views/home/dashboard/fullScreen-bak.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  Description: 综合大屏 -- 废弃
-  Author: 李亚光
-  Date: 2024-06-27
- -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: '#A1D2FF',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 1,
-    strokeStyle: 'dashed',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-    // 添加各个区的名称
-    mapRef.value.addText({ text: item.name, position: item.center }, {
-      'font-size': ['东城区', '西城区', '石景山区'].includes(item.name) ? '13px' : '18px',
-      'color': 'white',
-      'background-color': 'transparent',
-      'border-color': 'transparent',
-    })
-  })
-}
-// const remove = () => {
-//   mapRef.value.removePolygon()
-//   mapRef.value.removeText()
-// }
-</script>
-
-<template>
-  <div class="full-container">
-    <!-- <el-button style="position: absolute;right: 0;z-index: 99;" @click="remove">清除</el-button> -->
-    <!-- 地图 -->
-    <a-map ref="mapRef" layer="satellite" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj" />
-  </div>
-</template>
-
-<style>
-.full-container {
-  width: 100%;
-  height: 100vh;
-}
-</style>
diff --git a/src/views/home/dashboard/fullScreen.vue b/src/views/home/dashboard/fullScreen.vue
index bba597c..54bafd0 100644
--- a/src/views/home/dashboard/fullScreen.vue
+++ b/src/views/home/dashboard/fullScreen.vue
@@ -1,368 +1,132 @@
 <!--
-  Description: 综合大屏-布控地图
+  Description: 综合大屏
   Author: 李亚光
-  Date: 2024-07-18
+  Date: 2024-09-05
  -->
-<script lang="ts" setup>
-import { mapData } from './components/mapData'
-import detailInfo from './components/detailInfoDialog.vue'
-import AMap from '@/components/map/index.vue'
-
-// 地图实例
-const mapRef = ref()
-const zoomStatus = ref('') // 当前缩放状态
-// 地图挂载完毕执行
-const drawBj = () => {
-  const style = {
-    fillColor: 'transparent',
-    strokeOpacity: 1,
-    fillOpacity: 0.3,
-    strokeColor: '#2b8cbe',
-    strokeWeight: 2,
-    strokeStyle: 'solid',
-    strokeDasharray: [5, 5],
-    activeFillColor: '#3CA4D2',
-    dbclickSetCenter: true,
-    zIndex: 1,
-  }
-
-  mapData.forEach((item: any) => {
-    // 绘制北京各个区边界
-    mapRef.value.addPolygon(item.data, {
-      ...style,
-      name: item.name,
-      dbclickCenter: item.center,
-    })
-  })
+<script lang="ts" setup name="FullScreen">
+import controlMap from './components/controlMap.vue'
+// 当前展示地图
+const active = ref('control')
+// 切换地图
+const switchMap = (type: 'control' | 'event') => {
+  active.value = type
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'font-size: 17px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'font-size: 16px')
+  }, 50)
 }
-// 图例展示
-const legend = ref(['点', '线'])
-// 双击多边形(行政区或九五示范区)掉起弹窗
-const detail = ref()
-const detailRef = ref()
-const polygonClick = (data: any) => {
-  if (zoomStatus.value === 'hidden') { return }
-  console.log(data, '双击行政区')
-  data.map.setCenter(data.style.dbclickCenter)
-  data.map.setZoom(9.6)
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  // 打开信息窗口
-  detail.value.open(data.map, data.event.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.style,
-    flag: 'district', // 行政区或95示范区
-  })
-}
-
-// 绘制管线
-const drawLine = () => {
-  // 模拟海量点数据
-  const data = [
-    [115.918546, 39.812809],
-    [115.929436, 39.814813],
-    [115.932418, 39.815577],
-    [115.934778, 39.816881],
-    [115.939913, 39.817421],
-    [115.942935, 39.817867],
-    [115.946041, 39.818535],
-    [115.946609, 39.819261],
-    [115.947517, 39.820288],
-    [115.948852, 39.820757],
-    [115.949681, 39.821012],
-    [115.949213, 39.821635],
-    [115.949137, 39.821666],
-    [115.948514, 39.821778],
-    [115.94831, 39.82186],
-  ]
-  mapRef.value.addPolyline({
-    path: data,
-    style: {
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-      strokeStyle: 'solid',
-      zIndex: 95,
-      zoomLevels: [10.5, 18],
-    },
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('线')) {
-    mapRef.value.lineAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 点击管线(选中管线高亮)
-const lineClick = (data: any) => {
-  console.log(data, '点击管线(选中管线高亮)')
-  if (data.polyline.getOptions().strokeWeight === 4.5) {
-    // 取消高亮
-    data.polyline.setOptions({
-      strokeColor: '#BAAF04',
-      strokeWeight: 4,
-    })
-  }
-  else {
-    // 高亮
-    data.polyline.setOptions({
-      strokeColor: '#EAFA03',
-      strokeWeight: 4.5,
-    })
-  }
-}
-// 绘制阀门，调压站等点标记
-const drawMarker = () => {
-  const style = [
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
-      anchor: new mapRef.value.AMap.Pixel(4, 4),
-      size: new mapRef.value.AMap.Size(11, 11),
-      zIndex: 99,
-    },
-  ]
-  const data = [
-    {
-      lnglat: [115.94831, 39.82186], // 经纬度
-      name: '天安门',
-      style: 1, // 该数据的取值为样式数组对应的对象索引
-    },
-    {
-      lnglat: [115.932418, 39.815577],
-      name: '南锣鼓巷',
-      style: 2,
-    },
-  ]
-  mapRef.value.addMassMarks({
-    path: data,
-    zIndex: 111,
-    zooms: [10.5, 20],
-    style,
-  })
-  // 判断图例设置(没有显示的直接就隐藏)
-  if (!legend.value.includes('点')) {
-    mapRef.value.massMarksAllList.forEach((line: any) => {
-      line.hide()
-    })
-  }
-}
-// 阀门，调压站等点标记点击
-const massMarksClick = (data: any) => {
-  console.log(data, '阀门，调压站等点标记点击')
-  // 定义弹窗
-  detail.value = new mapRef.value.AMap.InfoWindow({
-    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
-    autoMove: true, // 是否自动调整窗体到视野内
-    isCustom: true, // 自定义信息窗体
-    content: detailRef.value.$el, // 窗体内容(vue组件)
-    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
-  })
-  console.log(detail.value, 'detail.value 点')
-  // 打开信息窗口
-  console.log(data.event.data.lnglat, 'data.event.data.lnglat')
-  detail.value.open(data.map, data.event.data.lnglat)
-  // 初始化信息窗口
-  detailRef.value.initDialog({
-    overlay: data.event.target,
-    infoWindow: detail.value,
-    info: data.event.data,
-    // flag: 'valve', // 阀门
-    flag: 'district', // 阀门
-  })
-}
-
-// 监听地图缩放
-watch(() => mapRef.value?.zoom, (newVal) => {
-  if (!newVal) { return }
-  // 10.5作为临界点 隐藏行政区hover  显示设备以及管线
-  if (newVal >= 10.5) {
-    if (zoomStatus.value === 'hidden') { return }
-    // 隐藏行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.setOptions({
-        fillOpacity: 0.3,
-        fillColor: 'transparent',
-      })
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.3,
-          fillColor: 'transparent',
-        })
-      })
-    })
-    // 绘制管线
-    drawLine()
-    // 绘制阀门，调压站等点标记
-    drawMarker()
-    zoomStatus.value = 'hidden'
-  }
-  else {
-    if (zoomStatus.value === 'show') { return }
-    // 显示行政区hover
-    mapRef.value.polygonAllList.forEach((polygon: any) => {
-      polygon.on('mouseover', () => {
-        polygon.setOptions({
-          fillOpacity: 0.5,
-          fillColor: '#3CA4D2',
-        })
-      })
-    })
-    // 移除管线
-    mapRef.value.removePolyline()
-    // 移除标记点
-    mapRef.value.removePolyline()
-    zoomStatus.value = 'show'
-  }
-})
-
 // 关闭页面
 const $router = useRouter()
 const closePage = () => {
   $router.back()
 }
-// 点击图例，显示隐藏对应的点或线
-const clickLegend = (data: { name: string; type: string }) => {
-  if (legend.value.includes(data.name)) {
-    //  隐藏
-    legend.value = legend.value.filter((citem: string) => citem !== data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        line.hide()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.hide()
-      })
-    }
-  }
-  else {
-    // 显示
-    legend.value.push(data.name)
-    if (data.type === 'line') {
-      mapRef.value.lineAllList.forEach((line: any) => {
-        console.log(line, 'line')
-        line.show()
-      })
-    }
-    else {
-      mapRef.value.massMarksAllList.forEach((marker: any) => {
-        marker.show()
-      })
-    }
-  }
-}
 </script>
 
 <template>
-  <div class="full-container">
-    <!-- 设备信息窗体 -->
-    <detail-info ref="detailRef" />
-    <!-- 地图 -->
-    <a-map
-      ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
-      @polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
-    />
-    <!-- 图例 -->
-    <div class="amap-legend">
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('点') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '点', type: 'marker' })">
-          点
-        </div>
-      </div>
-      <div class="legend-item">
-        <div class="icon" :class="legend.includes('线') ? '' : 'none'">
-          图标
-        </div>
-        <div class="value" @click="clickLegend({ name: '线', type: 'line' })">
-          线
-        </div>
-      </div>
-    </div>
+  <div class="container-full">
+    <!-- banner区域 -->
+    <div class="banner" />
     <!-- 关闭按钮 -->
     <div class="close">
       <div class="icon" @click="closePage">
         X
       </div>
     </div>
+    <!-- 地图切换 -->
+    <div class="switch">
+      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`" @click="switchMap('control')">
+        布控地图
+      </div>
+      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
+        事件地图
+      </div>
+    </div>
+    <!-- 布控地图 -->
+    <control-map v-if="active === 'control'" />
   </div>
 </template>
 
-<style>
-.full-container {
+<style lang="scss" scoped>
+.container-full {
   width: 100%;
   height: 100vh;
-}
+  overflow: hidden;
+  // background-color: #010102;
+  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
 
-.none {
-  opacity: 0;
-}
+  .banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 98;
+    height: 100px;
+    width: 100%;
+    background: url("@/assets/fullscren/banner.png") no-repeat;
+  }
 
-.amap-legend {
-  position: fixed;
-  bottom: 10px;
-  left: 10px;
-  background: rgb(68 66 66 / 60%);
-  color: #fff;
-  padding: 10px;
+  .close {
+    width: 150px;
+    height: 70px;
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    right: 0;
 
-  .legend-item {
-    display: flex;
+    /* background-color: antiquewhite; */
+    &:hover {
+      .icon {
+        display: block;
+      }
+    }
 
-    .value {
+    .icon {
+      display: none;
+      width: 50px;
+      height: 50px;
+      background: rgb(145 144 144 / 60%);
+      border-radius: 50%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 700;
+      color: #ccc;
+      margin: 10px auto;
+
       &:hover {
         cursor: pointer;
       }
     }
   }
-}
 
-.close {
-  width: 150px;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  /* background-color: antiquewhite; */
-  &:hover {
-    .icon {
-      display: block;
-    }
-  }
-
-  .icon {
-    display: none;
-    width: 50px;
-    height: 50px;
-    background: rgb(145 144 144 / 60%);
-    border-radius: 50%;
-    line-height: 50px;
-    text-align: center;
-    font-size: 18px;
+  .switch {
+    color: #fff;
     font-weight: 700;
-    color: #ccc;
-    margin: 10px auto;
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    z-index: 98;
+    transform: translateX(-50%);
+    display: flex;
 
-    &:hover {
-      cursor: pointer;
+    .control,
+    .event {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      padding-left: 5px;
+      padding-right: 5px;
+      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
+      border: 1px solid #249eff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .active {
+      color: #249eff;
     }
   }
 }
diff --git a/src/views/home/device/device/components/addDialog.vue b/src/views/home/device/device/components/addDialog.vue
index 35dc4a9..c54230d 100644
--- a/src/views/home/device/device/components/addDialog.vue
+++ b/src/views/home/device/device/components/addDialog.vue
@@ -196,7 +196,7 @@
 
     // 燃气监测桩 指示带长度字段为必填
     const deviceTypeName = deviceTypeList.value.filter((item: any) => item.id === dataForm.value.deviceType)[0].typeName
-    if (deviceTypeName === '燃气监测桩') {
+    if (deviceTypeName === '燃气监测桩' || deviceTypeName === '智能警示桩') {
       isGaspile.value = true
     }
   }
@@ -321,7 +321,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="!isGaspile" :gutter="24">
+      <el-row v-if="!isGaspile && dataForm.watchObject === '3'" :gutter="24">
         <el-col :span="12">
           <el-form-item label="左侧指示带长度" prop="">
             <el-input
diff --git a/src/views/home/device/device/components/detail.vue b/src/views/home/device/device/components/detail.vue
index 354da6b..3776281 100644
--- a/src/views/home/device/device/components/detail.vue
+++ b/src/views/home/device/device/components/detail.vue
@@ -4,6 +4,7 @@
   Date: 2023-09-03
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
 import showPosition from './showPosition.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
@@ -93,6 +94,10 @@
   if (data.text !== '经纬度' || !detailInfo.value[data.value]) {
     return
   }
+  if (!detailInfo.value.lng || !detailInfo.value.lat) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
   mapRef.value.initDialog([detailInfo.value.lng, detailInfo.value.lat])
 }
 onMounted(() => {
diff --git a/src/views/home/device/device/index.vue b/src/views/home/device/device/index.vue
index 4734ba7..55f12a9 100644
--- a/src/views/home/device/device/index.vue
+++ b/src/views/home/device/device/index.vue
@@ -12,8 +12,9 @@
 import { getManufacturerListPage } from '@/api/home/device/product'
 import { exportFile } from '@/utils/exportUtils'
 const $router = useRouter()
+const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
 // 表格数据
-const list = ref([])
+const list = ref<any[]>([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
@@ -26,8 +27,8 @@
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true },
   { text: '详细位置', value: 'position', align: 'center', isRequired: true },
   { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
-  { text: '在用情况', value: 'valid', align: 'center', isRequired: true },
-  { text: '布防状态', value: '', align: 'center', isRequired: true },
+  { text: '在用情况', value: 'validName', align: 'center', isRequired: true },
+  // { text: '布防状态', value: '', align: 'center', isRequired: true },
   { text: '电量', value: 'cell', align: 'center', isRequired: true },
   { text: '最新上报时间', value: 'logtime', align: 'center', isRequired: true },
   { text: '安装日期', value: 'installDate', align: 'center', isRequired: true },
@@ -71,7 +72,10 @@
   loadingTable.value = true
   getDeviceListPage(listQuery.value).then((res) => {
     console.log(res.data, '数据列表')
-    list.value = res.data.rows
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+    }))
     total.value = res.data.total
     loadingTable.value = false
   }).catch(() => {
@@ -162,7 +166,7 @@
     lock: true,
     background: 'rgba(255, 255, 255, 0.8)',
   })
-  exportDevice({}).then((res) => {
+  exportDevice(listQuery.value).then((res) => {
     exportFile(res.data, '设备列表.xlsx')
     loading.close()
   }).catch(() => {
@@ -177,7 +181,7 @@
 const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
 const manufacturerList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
 const cellList = ref<{ id: string; name: string; value: string }[]>([]) // 厂商列表
-const useStatusList = ref<{ id: string; name: string; value: string }[]>([]) // 设备在用情况
+
 const onlineStateList = ref<{ id: string; name: string; value: string }[]>([
   {
     name: '在线',
@@ -203,6 +207,12 @@
   // 设备在用情况
   getDictByCode('useStatus').then((res) => {
     useStatusList.value = res.data
+    if (list.value.length) {
+      list.value = list.value.map((item: any) => ({
+        ...item,
+        validName: useStatusList.value.length ? useStatusList.value[useStatusList.value.findIndex(citem => item.valid === citem.value)].name : '',
+      }))
+    }
   })
   // 设备类型
   getDeviceTypeListPage({ limit: 9999, offset: 1 }).then((res) => {
diff --git a/src/views/home/ledger/pipeline/components/editDialog.vue b/src/views/home/ledger/pipeline/components/editDialog.vue
index b047f65..ac58d24 100644
--- a/src/views/home/ledger/pipeline/components/editDialog.vue
+++ b/src/views/home/ledger/pipeline/components/editDialog.vue
@@ -21,6 +21,7 @@
   pipeDiameter: '', // 管径（mm）
   constructEra: '', // 建设年代
   deptid: '', // 单位
+  propertyOwner: '', // 单位
   manageType: '', // 管理方式
   startLat: '',
   startLng: '',
@@ -38,6 +39,7 @@
   position: [{ required: true, message: '管线位置不能为空', trigger: ['blur', 'change'] }],
   pressType: [{ required: true, message: '压力级制不能为空', trigger: ['blur', 'change'] }],
   deptid: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权不能为空', trigger: ['blur', 'change'] }],
   manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
   startLatLng: [{ required: true, message: '起始位置不能为空', trigger: ['blur', 'change'] }],
   endLatLng: [{ required: true, message: '终止位置不能为空', trigger: ['blur', 'change'] }],
@@ -53,6 +55,7 @@
     pipeDiameter: '', // 管径（mm）
     constructEra: '', // 建设年代
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     startLat: '',
     startLng: '',
@@ -275,8 +278,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="产权单位" prop="deptid">
-            <el-input v-model.trim="dataForm.deptid" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <el-input v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;" clearable />
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/home/ledger/pipeline/index.vue b/src/views/home/ledger/pipeline/index.vue
index ab9bcc9..0b1dc59 100644
--- a/src/views/home/ledger/pipeline/index.vue
+++ b/src/views/home/ledger/pipeline/index.vue
@@ -20,8 +20,8 @@
   { text: '材质', value: 'material', align: 'center' },
   { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
   { text: '建设年代', value: 'constructEra', align: 'center' },
-  { text: '管理单位', value: 'deptid', align: 'center', isRequired: true },
-  { text: '产权单位', value: 'deptid', align: 'center', isRequired: true },
+  { text: '管理单位', value: 'deptName', align: 'center', isRequired: true },
+  { text: '产权单位', value: 'propertyOwner', align: 'center', isRequired: true },
   { text: '管理方式', value: 'manageTypeName', align: 'center', isRequired: true },
 ])
 // 最终展示列
@@ -39,8 +39,9 @@
   position: '', // 管线位置
   pressType: '', // 压力级制
   material: '', // 材质
-  deptid: '', // 单位
   manageType: '', // 管理方式
+  deptid: '', // 单位
+  propertyOwner: '', // 单位
   constructEra1: '', // 最小建设年代
   constructEra2: '', // 最大建设年代
   pipeDiameter1: '', // 最小管径
@@ -67,6 +68,7 @@
     pressType: '', // 压力级制
     material: '', // 材质
     deptid: '', // 单位
+    propertyOwner: '', // 单位
     manageType: '', // 管理方式
     constructEra1: '', // 最小建设年代
     constructEra2: '', // 最大建设年代
@@ -88,7 +90,7 @@
 // 删除
 const removeRow = (row: any) => {
   ElMessageBox.confirm(
-    `确定要删除${row.name}吗？`,
+    `确定要删除${row.pipeCode}吗？`,
     '确认操作',
     {
       confirmButtonText: '确定',
@@ -170,7 +172,8 @@
         <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.deptid" placeholder="产权单位" :clearable="true" style="width: 192px;" />
+        <!-- <dept-select v-model="listQuery.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 192px;" /> -->
+        <el-input v-model="listQuery.propertyOwner" placeholder="产权单位" clearable />
       </search-item>
       <search-item>
         <el-select v-model="listQuery.manageType" placeholder="管理方式" clearable class="select" style="width: 192px;">
diff --git a/src/views/home/station/control/components/control.vue b/src/views/home/station/control/components/control.vue
index 973339e..8d1f867 100644
--- a/src/views/home/station/control/components/control.vue
+++ b/src/views/home/station/control/components/control.vue
@@ -48,7 +48,7 @@
     img: img.you,
   },
   {
-    name: '坐下',
+    name: '左下',
     img: img.zuoxia,
   },
   {
@@ -87,6 +87,14 @@
   },
 ])
 const value = ref(50)
+// 控制
+const control = (type: string) => {
+  const ele = document.getElementById(type) as HTMLElement
+  ele.setAttribute('style', 'padding: 5px')
+  setTimeout(() => {
+    ele.setAttribute('style', 'padding: 8px')
+  }, 100)
+}
 </script>
 
 <template>
@@ -96,7 +104,7 @@
         v-for="item in direction" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="right">
@@ -104,7 +112,7 @@
         v-for="item in focus" :key="item.name" class="box-item" effect="dark" :content="item.name"
         placement="top"
       >
-        <img :src="item.img" class="img" :alt="item.name">
+        <img :id="item.name" :src="item.img" class="img" :alt="item.name" @click="control(item.name)">
       </el-tooltip>
     </div>
     <div class="slider">
@@ -137,7 +145,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
@@ -160,7 +168,7 @@
       opacity: 0.6;
 
       &:hover {
-        padding: 8px;
+        // padding: 8px;
         cursor: pointer;
       }
     }
diff --git a/src/views/home/station/station/components/detail.vue b/src/views/home/station/station/components/detail.vue
new file mode 100644
index 0000000..75027cf
--- /dev/null
+++ b/src/views/home/station/station/components/detail.vue
@@ -0,0 +1,193 @@
+<!--
+  Description: 场站详情-详情
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetail">
+import { ElMessage } from 'element-plus'
+import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '场站位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '场站编号',
+    value: 'ledgerCode',
+    align: 'center',
+  },
+  {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
+    text: '场站类型',
+    value: 'wellTypeName',
+    align: 'center',
+  },
+  {
+    text: '使用状态',
+    value: 'onStateName',
+    align: 'center',
+  },
+
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+
+  {
+    text: '联系人',
+    value: 'propertyPerson',
+    align: 'center',
+  },
+  {
+    text: '联系电话',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '运行状态',
+    value: 'validName',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
+    align: 'center',
+  },
+  // {
+  //   text: '管理方式',
+  //   value: 'manageTypeName',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+
+  // {
+  //   text: '启用日期',
+  //   value: 'openDate',
+  //   align: 'center',
+  // },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  // {
+  //   text: '经度',
+  //   value: 'lngGaode',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '纬度',
+  //   value: 'latGaode',
+  //   align: 'center',
+  // },
+
+])
+
+// 页面loading
+const loading = ref(false)
+// 获取闸井详情数据
+const fetchWellDetail = () => {
+  loading.value = true
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
+    loading.value = false
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
+}
+onMounted(() => {
+  fetchWellDetail()
+})
+</script>
+
+<template>
+  <!-- 布局 -->
+  <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
+    <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>
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
+        </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%;
+}
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/home/station/station/components/detailData.vue b/src/views/home/station/station/components/detailData.vue
new file mode 100644
index 0000000..237b22a
--- /dev/null
+++ b/src/views/home/station/station/components/detailData.vue
@@ -0,0 +1,29 @@
+<!--
+  Description: 场站监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorData.vue'
+import lifeCycleRecord from '@/views/home/well/components/lifeCycleRecord.vue'
+import maintenanceRecord from '@/views/home/well/components/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 v-if="activeName === '监控数据'" />
+    </el-tab-pane>
+    <el-tab-pane label="全生命周期记录" name="全生命周期记录">
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
+    </el-tab-pane>
+    <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 20fb0cc..54fd294 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -19,62 +20,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '场站名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '场站位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +97,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    console.log(res.data, '123')
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,7 +127,7 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :column="2" border>
         <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
           <template #label>
             <span class="label">
@@ -131,7 +151,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/station/station/components/editDialog.vue b/src/views/home/station/station/components/editDialog.vue
new file mode 100644
index 0000000..86811e5
--- /dev/null
+++ b/src/views/home/station/station/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editStation } from '@/api/home/station/station'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editStation(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}场站标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 54e4031..21437bf 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/station/station/components/monitorData.vue b/src/views/home/station/station/components/monitorData.vue
new file mode 100644
index 0000000..c1cdbc9
--- /dev/null
+++ b/src/views/home/station/station/components/monitorData.vue
@@ -0,0 +1,45 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorData">
+import type { TabsPaneContext } from 'element-plus'
+import videoControl from './videoControl.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+const activeName = ref('1号云台')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+const showVideo1 = ref(false) // 是否展示1号云台
+const showVideo2 = ref(false) // 是否展示2号云台
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log(res.data)
+  if (res.data['1号云台']) {
+    showVideo1.value = true
+    activeName.value = '1号云台'
+  }
+  if (res.data['2号云台']) {
+    showVideo2.value = true
+    activeName.value = '2号云台'
+  }
+  if (!showVideo1.value && !showVideo2.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
+</script>
+
+<template>
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showVideo1" label="1号云台" name="1号云台">
+      <video-control v-if="activeName === '1号云台'" />
+    </el-tab-pane>
+    <el-tab-pane v-if="showVideo2" label="2号云台" name="2号云台">
+      <video-control v-if="activeName === '2号云台'" />
+    </el-tab-pane>
+  </el-tabs>
+  <video-control v-if="NoAllData" />
+</template>
diff --git a/src/views/home/station/station/components/monitorDataGasList.vue b/src/views/home/station/station/components/monitorDataGasList.vue
new file mode 100644
index 0000000..3a81e1e
--- /dev/null
+++ b/src/views/home/station/station/components/monitorDataGasList.vue
@@ -0,0 +1,139 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '时间', value: '', align: 'center' },
+  { text: '浓度值（%LEL)', value: '', align: 'center' },
+  { text: '状态', value: '', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  // getMonitorData(listQuery.value).then((res) => {
+  setTimeout(() => {
+    list.value = []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }, 1000)
+  // }).catch(() => {
+  //   loadingTable.value = false
+  // })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+// 查看
+const detail = (row: any) => {
+
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <span style="display: flex; flex-direction: column;">
+        <span>
+          当前浓度:0.00ppm.m
+        </span>
+        <span>
+          报警阈值:50%LEL
+        </span>
+      </span>
+      <el-date-picker
+        v-model="datetimerange" 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: 15px;"
+      />
+      <!-- <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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}" :height="370"
+      :list-loading="loadingTable"
+    >
+      <template #columns>
+        <el-table-column label="操作" align="center" width="120">
+          <template #default="scope">
+            <el-button type="primary" link size="small" @click="detail(scope.row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <div v-show="!isShowTable" style="width: 100%;height: 370px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/station/station/components/videoControl.vue b/src/views/home/station/station/components/videoControl.vue
new file mode 100644
index 0000000..7b9be2d
--- /dev/null
+++ b/src/views/home/station/station/components/videoControl.vue
@@ -0,0 +1,78 @@
+<!--
+  Description: 场站详情-云台控制
+  Author: 李亚光
+  Date: 2023-09-06
+ -->
+<script lang="ts" setup name="StationDetailControlVideo">
+import monitorDataGasList from './monitorDataGasList.vue'
+import controlBtn from '@/views/home/station/control/components/control.vue'
+</script>
+
+<template>
+  <div class="container-station">
+    <!-- 视频区域 -->
+    <div class="left-video">
+      <!-- 回放，预览按钮 -->
+      <div class="header">
+        <div>
+          <el-button type="primary" round>
+            预览
+          </el-button>
+          <el-button style="margin-left: 100px;" round>
+            回放
+          </el-button>
+        </div>
+      </div>
+      <!-- 视频播放 -->
+      <div class="video">
+        <video class="player" src="" autoplay muted controls />
+      </div>
+      <!-- 云台控制按钮 -->
+      <div>
+        <div class="control-btn">
+          <control-btn />
+        </div>
+      </div>
+    </div>
+    <!-- 浓度数据展示区域 -->
+    <div class="right-gas">
+      <monitor-data-gas-list />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-station {
+  width: 100%;
+  display: flex;
+
+  .left-video {
+    width: 50%;
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .video {
+      height: 400px;
+      width: 100%;
+      background-color: #666;
+      margin-top: 10px;
+
+      .player {
+        height: 400px;
+        width: 100%;
+      }
+    }
+
+    .control-btn {
+      width: 40%;
+      margin: 0 auto;
+      margin-top: 10px;
+      // display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 31afa75..907a91e 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getStationList, getStationListPage } from '@/api/home/station/station'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -27,13 +28,12 @@
   { text: '管理单位', value: 'responsibleDeptName', isRequired: true, align: 'center' },
   { text: '场站类型', value: 'wellTypeName', isRequired: true, align: 'center' },
   { text: '详细位置', value: 'position', align: 'center' },
-  { text: '负责人', value: '', isRequired: true, align: 'center' },
-  { text: '联系电话', value: '', align: 'center' },
+  { text: '负责人', value: 'propertyPerson', isRequired: true, align: 'center' },
+  { text: '联系电话', value: 'propertyPhone', align: 'center' },
   { text: '场站状态', value: 'onStateName', isRequired: true, align: 'center' },
   { text: '监控状态', value: 'monitorStateName', isRequired: true, align: 'center' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
-
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -166,7 +166,12 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
     path: `/station/${type}`,
     query: {
@@ -179,10 +184,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -224,7 +230,7 @@
       </search-item>
     </search-area>
     <!-- 筛选条件-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 114px;" />
+    <div v-if="tableFlag === 'map'" style="height: 56px;" />
     <!-- 表头标题 -->
     <table-container
       :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
@@ -286,7 +292,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;
@@ -299,6 +305,7 @@
   .search-area {
     position: fixed;
     z-index: 99;
+    // width: 100%;
   }
 }
 </style>
diff --git a/src/views/home/well/components/detail.vue b/src/views/home/well/components/detail.vue
index 17c4b8d..6ae2646 100644
--- a/src/views/home/well/components/detail.vue
+++ b/src/views/home/well/components/detail.vue
@@ -4,7 +4,11 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetail">
+import { ElMessage } from 'element-plus'
 import detailData from './detailData.vue'
+import { getDictByCode } from '@/api/system/dict'
+import showPosition from '@/views/home/device/device/components/showPosition.vue'
+import { getWellDetail } from '@/api/home/well/well'
 const $router = useRouter()
 const $route = useRoute()
 // 页面详情数据
@@ -13,107 +17,132 @@
 const descriptionsList = ref([
   {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '闸井编号',
-    value: '',
+    value: 'ledgerCode',
     align: 'center',
   },
   {
     text: '闸井名称',
-    value: '',
+    value: 'ledgerName',
     align: 'center',
   },
   {
     text: '是否直埋',
-    value: '',
+    value: 'buried',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '产权单位联系人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '产权单位联系电话',
-    value: '',
+    value: 'propertyPhone',
     align: 'center',
   },
   {
     text: '管理方式',
-    value: '',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '管理单位',
-    value: '',
+    value: 'deptName',
     align: 'center',
   },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人联系方式',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
   {
     text: '运行状态',
-    value: '',
+    value: 'validName',
     align: 'center',
   },
   {
     text: '启用日期',
-    value: '',
+    value: 'openDate',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
     align: 'center',
   },
   {
     text: '经度',
-    value: '',
+    value: 'lngGaode',
     align: 'center',
   },
   {
     text: '纬度',
-    value: '',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '标签',
+    value: 'marker',
     align: 'center',
   },
 ])
 
 // 页面loading
-const loading = ref(true)
+const loading = ref(false)
 // 获取闸井详情数据
 const fetchWellDetail = () => {
   loading.value = true
-  setTimeout(() => {
+  // 设备在用情况
+  getDictByCode('useStatus').then((res1) => {
+    // const data = JSON.parse($route.query.row as string)
+    // detailInfo.value = data
+    getWellDetail($route.query.id as string).then((res) => {
+      detailInfo.value = res.data
+      detailInfo.value.validName = res1.data[res1.data.findIndex((citem: any) => detailInfo.value.valid === citem.value)].name
+      loading.value = false
+    }).catch(() => {
+      loading.value = false
+    })
+  }).catch(() => {
     loading.value = false
-    detailInfo.value = {
-
-    }
-  }, 1500)
+  })
+}
+// 点击经纬度展示地图
+const mapRef = ref()
+const showMap = (data: any) => {
+  if (data.text !== '详细位置' || !detailInfo.value[data.value]) {
+    return
+  }
+  if (!detailInfo.value.lngGaode || !detailInfo.value.latGaode) {
+    ElMessage.warning('该数据缺少坐标信息')
+    return
+  }
+  mapRef.value.initDialog([detailInfo.value.lngGaode, detailInfo.value.latGaode])
 }
 onMounted(() => {
   fetchWellDetail()
@@ -123,6 +152,7 @@
 <template>
   <!-- 布局 -->
   <app-container v-loading="loading" class="container">
+    <show-position ref="mapRef" />
     <detail-page title="闸井详情">
       <template #btns>
         <el-button type="info" @click="$router.back()">
@@ -138,7 +168,9 @@
               {{ item.text }}
             </span>
           </template>
-          {{ detailInfo[item.value] || '' }}
+          <span :class="`${item.text === '详细位置' ? 'pointer' : ''}`" @click="showMap(item)">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </detail-block-com>
@@ -152,4 +184,10 @@
 ::v-deep(.el-descriptions__label) {
   width: 15%;
 }
+
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/home/well/components/detailData.vue b/src/views/home/well/components/detailData.vue
index fb87a94..7fcfe7b 100644
--- a/src/views/home/well/components/detailData.vue
+++ b/src/views/home/well/components/detailData.vue
@@ -17,13 +17,13 @@
 <template>
   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="监控数据" name="监控数据">
-      <monitor-data />
+      <monitor-data v-if="activeName === '监控数据'" />
     </el-tab-pane>
     <el-tab-pane label="全生命周期记录" name="全生命周期记录">
-      <life-cycle-record />
+      <life-cycle-record v-if="activeName === '全生命周期记录'" />
     </el-tab-pane>
     <el-tab-pane label="监控设备维护记录" name="监控设备维护记录">
-      <maintenance-record />
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
     </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 1b52d44..da0c022 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -4,9 +4,11 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getWellDetail } from '@/api/home/well/well'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
+
 // 基本数据
 const baseInfo = ref({
   ledgerCode: '', // 闸井编号
@@ -19,62 +21,73 @@
 // 描述列表数据
 const descriptionsList = ref([
   {
+    text: '闸井名称',
+    value: 'ledgerName',
+    align: 'center',
+  },
+  {
     text: '闸井位号',
-    value: '',
+    value: 'tagNumber',
     align: 'center',
   },
   {
     text: '使用状态',
-    value: '',
+    value: 'onStateName',
     align: 'center',
   },
   {
     text: '产权单位',
-    value: '',
+    value: 'propertyOwner',
     align: 'center',
   },
   {
     text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
+    value: 'propertyPerson',
     align: 'center',
   },
   {
     text: '联系方式',
-    value: '',
+    value: 'propertyPhone',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageTypeName',
     align: 'center',
   },
   {
     text: '所在区域',
-    value: '',
+    value: 'area',
     align: 'center',
   },
   {
     text: '详细位置',
-    value: '',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
     align: 'center',
   },
   {
     text: '标签',
-    value: '',
+    value: 'marker',
     align: 'center',
   },
 ])
 // 初始化
+const loading = ref(true)
 const initDialog = (e: any) => {
   console.log(e, '信息窗体接收的数据')
   overlay.value = e.overlay
@@ -85,6 +98,14 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  loading.value = true
+  getWellDetail(e.info.id).then((res) => {
+    baseInfo.value = res.data
+    detailInfo.value = res.data
+    loading.value = false
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -107,14 +128,16 @@
       <span class="close" @click="close">x</span>
     </div>
     <div class="body">
-      <el-descriptions :column="2" border>
+      <el-descriptions v-loading="loading" :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] || '' }}
+          <span class="nowrap">
+            {{ detailInfo[item.value] || '' }}
+          </span>
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -122,16 +145,41 @@
 </template>
 
 <style lang="scss" scoped>
-::v-deep(.el-descriptions__label) {
-  width: 20%;
-}
-
 ::v-deep(.el-descriptions__cell) {
   padding: 0 !important;
+
+  ::v-deep(.is-bordered-label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__label) {
+    width: 100px !important;
+  }
+
+  ::v-deep(.el-descriptions__content) {
+    width: 170px !important;
+  }
+
+  ::v-deep(.is-bordered-content) {
+    width: 170px !important;
+  }
+}
+
+.nowrap {
+  width: 170px;
+  white-space: nowrap;
+
+  /* 确保文本在一行内显示 */
+  overflow: hidden;
+
+  /* 超出容器部分隐藏 */
+  text-overflow: ellipsis;
+
+  /* 文字溢出显示省略号 */
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;
diff --git a/src/views/home/well/components/editDialog-bak.vue b/src/views/home/well/components/editDialog-bak.vue
new file mode 100644
index 0000000..924d7f0
--- /dev/null
+++ b/src/views/home/well/components/editDialog-bak.vue
@@ -0,0 +1,241 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  tagNumber: '', // 位号
+  ledgerCode: '', // 编号
+  ledgerName: '', // 名称
+  propertyOwner: '', // 产权单位
+  responsibleDept: '', // 管理单位
+  manageType: '', // 管理方式
+  monitorState: '', // 监控状态
+  onState: '', // 使用状态
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+  ledgerCode: [{ required: true, message: '闸井编号不能为空', trigger: ['blur', 'change'] }],
+  ledgerName: [{ required: true, message: '闸井名称不能为空', trigger: ['blur', 'change'] }],
+  propertyOwner: [{ required: true, message: '产权单位不能为空', trigger: ['blur', 'change'] }],
+  responsibleDept: [{ required: true, message: '管理单位不能为空', trigger: ['blur', 'change'] }],
+  manageType: [{ required: true, message: '管理方式不能为空', trigger: ['blur', 'change'] }],
+  monitorState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+  onState: [{ required: true, message: '监控状态不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    tagNumber: '', // 位号
+    ledgerCode: '', // 编号
+    ledgerName: '', // 名称
+    propertyOwner: '', // 产权单位
+    responsibleDept: '', // 管理单位
+    manageType: '', // 管理方式
+    monitorState: '', // 监控状态
+    onState: '', // 使用状态
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        bfzt: '', // 布防状态
+        deptid: '',
+        gridCode: '',
+        id: '',
+        ledgerCode: '', // 编号
+        ledgerName: '', // 名称
+        locationState: '', // 位置状态
+        manageType: '', // 管理方式
+        marker: '', // 标签
+        monitorState: '', // 监控状态
+        onState: '', // 使用状态
+        propertyOwner: '', // 产权单位
+        responsibleDept: '', // 管理单位
+        tagNumber: '', // 位号
+        wellType: '', // 类型
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+const manageTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 管理方式
+const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
+const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
+// 获取字典
+const fetchDict = async () => {
+  // 管理方式
+  getDictByCode('manageType').then((res) => {
+    manageTypeList.value = res.data
+  })
+  // 监控状态
+  getDictByCode('monitorState').then((res) => {
+    monitorStateList.value = res.data
+  })
+  // 使用状态
+  getDictByCode('onState').then((res) => {
+    onStateList.value = res.data
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井位号" prop="tagNumber">
+            <el-input v-model.trim="dataForm.tagNumber" type="text" placeholder="闸井位号" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="闸井编号" prop="ledgerCode">
+            <el-input
+              v-model.trim="dataForm.ledgerCode" type="text" placeholder="闸井编号" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="闸井名称" prop="ledgerName">
+            <el-input
+              v-model.trim="dataForm.ledgerName" type="text" placeholder="闸井名称" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产权单位" prop="propertyOwner">
+            <!-- <dept-select v-model="dataForm.propertyOwner" placeholder="产权单位" :clearable="true" style="width: 100%;" /> -->
+            <el-input
+              v-model.trim="dataForm.propertyOwner" type="text" placeholder="产权单位" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="管理单位" prop="responsibleDept">
+            <dept-select v-model="dataForm.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 100%;" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="管理方式" prop="manageType">
+            <el-select v-model="dataForm.manageType" placeholder="管理方式" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in manageTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="监控状态" prop="monitorState">
+            <el-select v-model="dataForm.monitorState" placeholder="监控状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in monitorStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="onState">
+            <el-select v-model="dataForm.onState" placeholder="使用状态" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in onStateList" :key="item.value" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="标签" prop="marker">
+            <el-input v-model.trim="dataForm.marker" type="text" placeholder="标签" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/editDialog.vue b/src/views/home/well/components/editDialog.vue
new file mode 100644
index 0000000..cc810fc
--- /dev/null
+++ b/src/views/home/well/components/editDialog.vue
@@ -0,0 +1,127 @@
+<!--
+  Description: 闸井监测-闸井编辑
+  Author: 李亚光
+  Date: 2024-09-05
+ -->
+<script lang="ts" setup name="EditProduct">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { editWell } from '@/api/home/well/well'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref<{ [key: string]: string }>({
+  id: '',
+  marker: '', // 使用状态
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  add: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  // tagNumber: [{ required: true, message: '闸井位号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    id: '',
+    marker: '', // 使用状态
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'add') { // 如果是新增，清除验证
+    resetForm()
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      const data = {
+        id: '',
+        marker: '', // 标签
+      } as { [key: string]: string }
+      for (const i in data) {
+        data[i] = dataForm.value[i]
+      }
+      editWell(data).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}闸井标签`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="标签" prop="marker">
+            <el-input
+              v-model.trim="dataForm.marker" type="textarea" :rows="3" placeholder="标签" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/components/lifeCycleRecord.vue b/src/views/home/well/components/lifeCycleRecord.vue
index 1f37b5a..c56141d 100644
--- a/src/views/home/well/components/lifeCycleRecord.vue
+++ b/src/views/home/well/components/lifeCycleRecord.vue
@@ -4,28 +4,64 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailLifeRecord">
-// 时间查询条件
-const timerang = ref()
+import dayjs from 'dayjs'
+import { getLifecycleRecord } from '@/api/home/well/well'
+const $route = useRoute()
 // 列表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: 'alarmTime', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警原因', value: 'alarmContent', align: 'center' },
+  { text: '是否误报', value: 'realAlarm', align: 'center' },
+  { text: '报警解除时间', value: 'cancelTime', align: 'center' },
+  { text: '处置时长', value: 'processDuration', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
-    loadingTable.value = false
-  }, 1000)
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
 })
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  getLifecycleRecord(listQuery.value).then((res) => {
+    list.value = res.data
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+
+// 查看详情
+const detailRow = (row: any) => {
+  console.log(row.id)
+}
 </script>
 
 <template>
@@ -33,10 +69,10 @@
     <template #btns-left>
       <!-- 查询条件 -->
       <el-date-picker
-        v-model="timerang" type="datetimerange" range-separator="至" start-placeholder="报警开始时间"
+        v-model="datetimerange" 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 type="primary" style="margin-left: 10px;" @click="fetchData">
         搜索
       </el-button>
       <el-button type="primary">
@@ -50,7 +86,7 @@
       <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 type="primary" link size="small" @click="detailRow(scope.row)">
               查看
             </el-button>
           </template>
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
index a389d61..efceca3 100644
--- a/src/views/home/well/components/maintenanceRecord.vue
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -4,29 +4,55 @@
   Date: 2023-08-13
  -->
 <script lang="ts" setup name="WellDetailMaintenanceRecord">
+import { getRepairLog } from '@/api/home/well/well'
+import { getDictByCode } from '@/api/system/dict'
+import { getUserList } from '@/api/system/user'
+const $route = useRoute()
 // 列表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' },
+  { text: '记录类型', value: 'logTypeName', align: 'center' },
+  { text: '设备类型', value: 'typeName', align: 'center' },
+  { text: '设备型号', value: 'deviceModel', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '厂商', value: 'manufactureName', align: 'center' },
+  { text: '操作人', value: 'operatePersonName', align: 'center' },
+  { text: '操作时间', value: 'operateTime', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
 ])
-
-onMounted(() => {
-  setTimeout(() => {
+const repairTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 运维类型
+const userList = ref<{ id: string; name: string; value: string }[]>([]) // 人员
+// 获取字典
+const fetchDict = async () => {
+  // 运维类型
+  const res1 = await getDictByCode('repairType')
+  repairTypeList.value = res1.data
+  // 用户
+  const res2 = await getUserList({ offset: 1, limit: 9999 })
+  userList.value = res2.data.rows.map((item: any) => ({ name: item.name, value: item.id, id: item.id }))
+}
+onMounted(async () => {
+  await fetchDict()
+  loadingTable.value = true
+  getRepairLog($route.query.id as string).then((res) => {
+    list.value = res.data.map((item: any) => ({
+      ...item,
+      logTypeName: repairTypeList.value.filter((citem: any) => citem.value === item.logType)[0].name,
+      operatePersonName: userList.value.filter((citem: any) => citem.value === item.operatePerson)[0].name,
+    }))
     loadingTable.value = false
-  }, 1000)
+  }).catch(() => {
+    loadingTable.value = false
+  })
 })
 </script>
 
 <template>
-  <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable" :pagination="false" />
+  <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 2955e68..f74230f 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -139,6 +139,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
diff --git a/src/views/home/well/components/monitorData.vue b/src/views/home/well/components/monitorData.vue
index 9264abb..14ca0f0 100644
--- a/src/views/home/well/components/monitorData.vue
+++ b/src/views/home/well/components/monitorData.vue
@@ -5,23 +5,49 @@
  -->
 <script lang="ts" setup name="WellDetailMonitorData">
 import type { TabsPaneContext } from 'element-plus'
-import monitorDataList from './monitorDataList.vue'
+import monitorDataGasList from './monitorDataGasList.vue'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
 const activeName = ref('燃气浓度')
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
 }
+const showGas = ref(false) // 是否展示燃气浓度
+const showLiquid = ref(false) // 是否展示井下水位
+const showWell = ref(false) // 是否展示井盖
+const NoAllData = ref(false)
+getMonitorData({ wellId: $route.query.id as string }).then((res) => {
+  console.log()
+  if (res.data['燃气智能监测终端']) {
+    showGas.value = true
+    activeName.value = '燃气浓度'
+  }
+  if (res.data['液位检测仪']) {
+    showLiquid.value = true
+    activeName.value = '井下水位'
+  }
+  if (res.data['井盖监测仪']) {
+    showWell.value = true
+    activeName.value = '井盖'
+  }
+  if (!showGas.value && !showLiquid.value && !showWell.value) {
+    // 三者都为空
+    NoAllData.value = true
+  }
+})
 </script>
 
 <template>
-  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-    <el-tab-pane label="燃气浓度" name="燃气浓度">
-      <monitor-data-list />
+  <el-tabs v-if="!NoAllData" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane v-if="showGas" label="燃气浓度" name="燃气浓度">
+      <monitor-data-gas-list v-if="activeName === '燃气浓度'" />
     </el-tab-pane>
-    <el-tab-pane label="井下水位" name="井下水位">
-      <monitor-data-list />
+    <el-tab-pane v-if="showLiquid" label="井下水位" name="井下水位">
+      <!-- <monitor-data-list v-if="activeName === '井下水位'" /> -->
     </el-tab-pane>
-    <el-tab-pane label="井盖" name="井盖">
-      <monitor-data-list />
+    <el-tab-pane v-if="showWell" label="井盖" name="井盖">
+      <!-- <monitor-data-list v-if="activeName === '井盖'" /> -->
     </el-tab-pane>
   </el-tabs>
+  <monitor-data-gas-list v-if="NoAllData" />
 </template>
diff --git a/src/views/home/well/components/monitorDataGasList.vue b/src/views/home/well/components/monitorDataGasList.vue
new file mode 100644
index 0000000..426ac5a
--- /dev/null
+++ b/src/views/home/well/components/monitorDataGasList.vue
@@ -0,0 +1,117 @@
+<!--
+  Description: 闸井监测-详情数据-监控数据-燃气列表
+  Author: 李亚光
+  Date: 2023-08-13
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/well/well'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+// 图表数据
+const xAxisData = ref<any[]>([])
+const data = ref<any[]>([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '燃气浓度（%LEL)', value: 'strength', align: 'center' },
+  { text: '电量(%)', value: 'cell', align: 'center' },
+  { text: '信号强度', value: 'pci', align: 'center' },
+  { text: '采集时间', value: 'logtime', align: 'center' },
+  { text: '上传时间', value: 'uptime', align: 'center' },
+])
+const listQuery = ref({
+  begTime: '',
+  endTime: '',
+  wellId: '',
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  listQuery.value.begTime = ''
+  listQuery.value.endTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.begTime = `${newVal[0]}`
+      listQuery.value.endTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const resizePage = () => {
+  setTimeout(() => {
+    const resize = new Event('resize')
+    window.dispatchEvent(resize)
+  }, 500)
+}
+const fetchData = () => {
+  loadingTable.value = true
+  listQuery.value.wellId = $route.query.id as string
+  getMonitorData(listQuery.value).then((res) => {
+    list.value = res.data['燃气智能监测终端'] || []
+    loadingTable.value = false
+    xAxisData.value = list.value.map((item: any) => item.logtime)
+    data.value = [
+      {
+        name: '燃气浓度',
+        data: list.value.map((item: any) => item.strength),
+      },
+    ]
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  setTimeout(() => {
+    fetchData()
+  })
+})
+// 是否展示表格
+const isShowTable = ref(true)
+// 切换视图
+const switchView = () => {
+  isShowTable.value = !isShowTable.value
+  if (!isShowTable.value) {
+    resizePage()
+  }
+}
+</script>
+
+<template>
+  <table-container title="">
+    <template #btns-left>
+      <!-- 查询条件 -->
+      <el-date-picker
+        v-model="datetimerange" 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;" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button @click="switchView">
+        切换视图
+      </el-button>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
+      :list-loading="loadingTable" :pagination="false"
+    />
+    <div v-show="!isShowTable" style="width: 100%;height: 240px;">
+      <line-chart
+        :loading="loadingTable" :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false"
+        unit="%LEL"
+        :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
+      />
+    </div>
+  </table-container>
+</template>
diff --git a/src/views/home/well/components/monitorDataList.vue b/src/views/home/well/components/monitorDataList.vue
deleted file mode 100644
index d6118ad..0000000
--- a/src/views/home/well/components/monitorDataList.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<!--
-  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 85094e1..3ad46fc 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -7,6 +7,7 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
+import editDialog from './components/editDialog.vue'
 import { getWellList, getWellListPage } from '@/api/home/well/well'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
@@ -24,13 +25,13 @@
   { text: '闸井位号', value: 'tagNumber', align: 'center', width: '110' },
   { text: '闸井编号', value: 'ledgerCode', align: 'center' },
   { text: '闸井名称', value: 'ledgerName', align: 'center' },
-  { text: '管理单位', value: 'responsibleDeptName', align: 'center' },
+  { text: '管理单位', value: 'deptName', align: 'center' },
   { text: '产权单位', value: 'propertyOwner', 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: 'bfztName', align: 'center', width: '90' },
   { text: '状态', value: 'monitorStateName', align: 'center', width: '90' },
-  { text: '感知设备', value: 'device', align: 'center', width: '90' },
+  { text: '感知设备', value: 'deviceCount', align: 'center', width: '90' },
   { text: '标签', value: 'marker', align: 'center' },
 ])
 // 最终展示列
@@ -47,7 +48,7 @@
   tagNumber: '', // 闸井位号
   ledgerName: '', // 闸井名称
   ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
+  deptid: '', // 管理单位
   propertyOwner: '', // 产权单位
   manageType: '', // 管理方式
   onState: '', // 使用状态
@@ -107,7 +108,7 @@
     tagNumber: '', // 闸井位号
     ledgerName: '', // 闸井名称
     ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
+    deptid: '', // 管理单位
     propertyOwner: '', // 产权单位
     manageType: '', // 管理方式
     onState: '', // 使用状态
@@ -171,6 +172,7 @@
     ElMessage.warning('该数据缺少坐标信息')
     return
   }
+  // mapRef.value.map.setZoom(15)
   // 打开地图弹窗
   mapRef.value.openInfoDetail({
     lnglat: [data.lngGaode, data.latGaode],
@@ -194,11 +196,17 @@
 }
 // 查看/编辑
 const $router = useRouter()
+const editRef = ref()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, JSON.parse(JSON.stringify(row)))
+    return
+  }
   $router.push({
     path: `/well/${type}`,
     query: {
       id: row.id,
+      row: JSON.stringify(row),
     },
   })
 }
@@ -207,10 +215,11 @@
 <template>
   <!-- 布局 -->
   <app-container class="container">
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="350" :data="mapList" />
+    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" />
     <!-- 占位-地图 -->
-    <div v-if="tableFlag === 'map'" style="height: 350px;" />
+    <div v-if="tableFlag === 'map'" style="height: 450px;" />
     <!-- 收起地图-图标 -->
     <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
       <el-icon :size="25">
@@ -218,7 +227,10 @@
       </el-icon>
     </div>
     <!-- 筛选条件 -->
-    <search-area :class="`${tableFlag === 'map' ? '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>
@@ -229,7 +241,7 @@
         <el-input v-model.trim="listQuery.ledgerName" placeholder="闸井名称" clearable />
       </search-item>
       <search-item>
-        <dept-select v-model="listQuery.responsibleDept" placeholder="管理单位" :clearable="true" style="width: 192px;" />
+        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 192px;" />
       </search-item>
       <search-item>
         <el-input v-model.trim="listQuery.propertyOwner" placeholder="产权单位" clearable />
@@ -299,13 +311,13 @@
           </el-table-column>
         </template>
         <template #columns>
-          <el-table-column label="布/撤防" align="center" width="80">
+          <!-- <el-table-column label="布/撤防" align="center" width="80">
             <template #default="scope">
               <el-button type="primary" link size="small" @click="changeDefense(scope.row)">
                 {{ scope.row.bfzt === '1' ? '撤防' : '布防' }}
               </el-button>
             </template>
-          </el-table-column>
+  </el-table-column> -->
           <el-table-column label="操作" align="center" width="120">
             <template #default="scope">
               <el-button type="primary" link size="small" @click="editRow('detail', scope.row)">
@@ -333,7 +345,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;