diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..6a43216
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..6a43216
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..a6b2946
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..6a43216
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..a6b2946
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..7588c47
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
Binary files differ

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..6a43216
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..a6b2946
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..7588c47
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
Binary files differ
diff --git a/src/api/home/pipeline/pipeline.ts b/src/api/home/pipeline/pipeline.ts
new file mode 100644
index 0000000..e9c7b38
--- /dev/null
+++ b/src/api/home/pipeline/pipeline.ts
@@ -0,0 +1,61 @@
+/**
+ * 管线监测
+ */
+import request from '@/api/index'
+
+// 基础列表 -分页
+export function getPipelineListPage(data: any) {
+  return request({
+    url: `/monitor/pipe/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 基础列表 -不分页
+export function getPipelineList(data: any) {
+  return request({
+    url: '/monitor/pipe/pipeList',
+    method: 'post',
+    data,
+  })
+}
+
+// 设备列表 -不分页
+export function getPipelineDeviceList(data: any) {
+  return request({
+    url: '/monitor/pipe/deviceList',
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function getPipelineDetail(data: any) {
+  return request({
+    url: '/monitor/pipe/detail',
+    method: 'post',
+    data,
+  })
+}
+
+// 监测数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/pipe/watchDataByPipe',
+    method: 'post',
+    data,
+  })
+}
+
+// 编辑
+export function editPipeline(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '3',
+    },
+  })
+}

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..6a43216
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..a6b2946
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..7588c47
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
Binary files differ
diff --git a/src/api/home/pipeline/pipeline.ts b/src/api/home/pipeline/pipeline.ts
new file mode 100644
index 0000000..e9c7b38
--- /dev/null
+++ b/src/api/home/pipeline/pipeline.ts
@@ -0,0 +1,61 @@
+/**
+ * 管线监测
+ */
+import request from '@/api/index'
+
+// 基础列表 -分页
+export function getPipelineListPage(data: any) {
+  return request({
+    url: `/monitor/pipe/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 基础列表 -不分页
+export function getPipelineList(data: any) {
+  return request({
+    url: '/monitor/pipe/pipeList',
+    method: 'post',
+    data,
+  })
+}
+
+// 设备列表 -不分页
+export function getPipelineDeviceList(data: any) {
+  return request({
+    url: '/monitor/pipe/deviceList',
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function getPipelineDetail(data: any) {
+  return request({
+    url: '/monitor/pipe/detail',
+    method: 'post',
+    data,
+  })
+}
+
+// 监测数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/pipe/watchDataByPipe',
+    method: 'post',
+    data,
+  })
+}
+
+// 编辑
+export function editPipeline(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '3',
+    },
+  })
+}
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 20fb0cc..41a546b 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -9,70 +9,68 @@
 const infoWindow = ref()
 // 基本数据
 const baseInfo = ref({
-  ledgerCode: '', // 场站编号
-  ledgerName: '', // 场站名称
-  lngGaode: '',
-  latGaode: '',
+  deviceTypeName: '', // 场站编号
+  deviceCode: '', // 场站名称
 })
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '场站位号',
-    value: '',
+    text: '安装位号',
+    value: 'tagNumber',
     align: 'center',
   },
   {
-    text: '使用状态',
-    value: '',
+    text: '管线编号',
+    value: 'pipeCode',
     align: 'center',
   },
-  {
-    text: '产权单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '联系方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '所在区域',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '详细位置',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '标签',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '产权单位',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '联系人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '管理单位',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '管理方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '所在区域',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '详细位置',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '标签',
+  //   value: '',
+  //   align: 'center',
+  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -85,6 +83,7 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  detailInfo.value = e.info.row
 }
 
 // 关闭
@@ -99,10 +98,10 @@
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
       <el-tooltip
-        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        class="box-item" effect="dark" :content="`${baseInfo.deviceTypeName} | ${baseInfo.deviceCode}`"
         placement="top"
       >
-        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+        <span class="title">{{ baseInfo.deviceTypeName }} | {{ baseInfo.deviceCode }}</span>
       </el-tooltip>
       <span class="close" @click="close">x</span>
     </div>
@@ -131,7 +130,7 @@
 }
 
 .container {
-  width: 500px;
+  // width: 500px;
   // padding: 0 10px;
   background: rgba($color: #feffff, $alpha: 95%);
   border: 1.5px solid #79b5e6;

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..6a43216
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..a6b2946
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..7588c47
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
Binary files differ
diff --git a/src/api/home/pipeline/pipeline.ts b/src/api/home/pipeline/pipeline.ts
new file mode 100644
index 0000000..e9c7b38
--- /dev/null
+++ b/src/api/home/pipeline/pipeline.ts
@@ -0,0 +1,61 @@
+/**
+ * 管线监测
+ */
+import request from '@/api/index'
+
+// 基础列表 -分页
+export function getPipelineListPage(data: any) {
+  return request({
+    url: `/monitor/pipe/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 基础列表 -不分页
+export function getPipelineList(data: any) {
+  return request({
+    url: '/monitor/pipe/pipeList',
+    method: 'post',
+    data,
+  })
+}
+
+// 设备列表 -不分页
+export function getPipelineDeviceList(data: any) {
+  return request({
+    url: '/monitor/pipe/deviceList',
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function getPipelineDetail(data: any) {
+  return request({
+    url: '/monitor/pipe/detail',
+    method: 'post',
+    data,
+  })
+}
+
+// 监测数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/pipe/watchDataByPipe',
+    method: 'post',
+    data,
+  })
+}
+
+// 编辑
+export function editPipeline(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '3',
+    },
+  })
+}
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 20fb0cc..41a546b 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -9,70 +9,68 @@
 const infoWindow = ref()
 // 基本数据
 const baseInfo = ref({
-  ledgerCode: '', // 场站编号
-  ledgerName: '', // 场站名称
-  lngGaode: '',
-  latGaode: '',
+  deviceTypeName: '', // 场站编号
+  deviceCode: '', // 场站名称
 })
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '场站位号',
-    value: '',
+    text: '安装位号',
+    value: 'tagNumber',
     align: 'center',
   },
   {
-    text: '使用状态',
-    value: '',
+    text: '管线编号',
+    value: 'pipeCode',
     align: 'center',
   },
-  {
-    text: '产权单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '联系方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '所在区域',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '详细位置',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '标签',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '产权单位',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '联系人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '管理单位',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '管理方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '所在区域',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '详细位置',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '标签',
+  //   value: '',
+  //   align: 'center',
+  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -85,6 +83,7 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  detailInfo.value = e.info.row
 }
 
 // 关闭
@@ -99,10 +98,10 @@
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
       <el-tooltip
-        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        class="box-item" effect="dark" :content="`${baseInfo.deviceTypeName} | ${baseInfo.deviceCode}`"
         placement="top"
       >
-        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+        <span class="title">{{ baseInfo.deviceTypeName }} | {{ baseInfo.deviceCode }}</span>
       </el-tooltip>
       <span class="close" @click="close">x</span>
     </div>
@@ -131,7 +130,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/pipeline/components/editDialog.vue b/src/views/home/pipeline/components/editDialog.vue
new file mode 100644
index 0000000..d7af0c4
--- /dev/null
+++ b/src/views/home/pipeline/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 { editPipeline } from '@/api/home/pipeline/pipeline'
+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]
+      }
+      editPipeline(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/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..6a43216
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..a6b2946
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..7588c47
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
Binary files differ
diff --git a/src/api/home/pipeline/pipeline.ts b/src/api/home/pipeline/pipeline.ts
new file mode 100644
index 0000000..e9c7b38
--- /dev/null
+++ b/src/api/home/pipeline/pipeline.ts
@@ -0,0 +1,61 @@
+/**
+ * 管线监测
+ */
+import request from '@/api/index'
+
+// 基础列表 -分页
+export function getPipelineListPage(data: any) {
+  return request({
+    url: `/monitor/pipe/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 基础列表 -不分页
+export function getPipelineList(data: any) {
+  return request({
+    url: '/monitor/pipe/pipeList',
+    method: 'post',
+    data,
+  })
+}
+
+// 设备列表 -不分页
+export function getPipelineDeviceList(data: any) {
+  return request({
+    url: '/monitor/pipe/deviceList',
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function getPipelineDetail(data: any) {
+  return request({
+    url: '/monitor/pipe/detail',
+    method: 'post',
+    data,
+  })
+}
+
+// 监测数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/pipe/watchDataByPipe',
+    method: 'post',
+    data,
+  })
+}
+
+// 编辑
+export function editPipeline(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '3',
+    },
+  })
+}
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 20fb0cc..41a546b 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -9,70 +9,68 @@
 const infoWindow = ref()
 // 基本数据
 const baseInfo = ref({
-  ledgerCode: '', // 场站编号
-  ledgerName: '', // 场站名称
-  lngGaode: '',
-  latGaode: '',
+  deviceTypeName: '', // 场站编号
+  deviceCode: '', // 场站名称
 })
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '场站位号',
-    value: '',
+    text: '安装位号',
+    value: 'tagNumber',
     align: 'center',
   },
   {
-    text: '使用状态',
-    value: '',
+    text: '管线编号',
+    value: 'pipeCode',
     align: 'center',
   },
-  {
-    text: '产权单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '联系方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '所在区域',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '详细位置',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '标签',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '产权单位',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '联系人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '管理单位',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '管理方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '所在区域',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '详细位置',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '标签',
+  //   value: '',
+  //   align: 'center',
+  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -85,6 +83,7 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  detailInfo.value = e.info.row
 }
 
 // 关闭
@@ -99,10 +98,10 @@
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
       <el-tooltip
-        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        class="box-item" effect="dark" :content="`${baseInfo.deviceTypeName} | ${baseInfo.deviceCode}`"
         placement="top"
       >
-        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+        <span class="title">{{ baseInfo.deviceTypeName }} | {{ baseInfo.deviceCode }}</span>
       </el-tooltip>
       <span class="close" @click="close">x</span>
     </div>
@@ -131,7 +130,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/pipeline/components/editDialog.vue b/src/views/home/pipeline/components/editDialog.vue
new file mode 100644
index 0000000..d7af0c4
--- /dev/null
+++ b/src/views/home/pipeline/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 { editPipeline } from '@/api/home/pipeline/pipeline'
+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]
+      }
+      editPipeline(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/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index f11d959..5c72f95 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -12,39 +12,40 @@
     type: Number,
     default: 0,
   },
+  // 点位数据
   data: {
     type: Array,
     default: () => ([]),
   },
+  // 管线数据
+  pipe: {
+    type: Array,
+    default: () => ([]),
+  },
 })
 // 地图实例
 const mapRef = ref()
 const publicPath = window.location.origin
 // console.log(publicPath, 'publicPath')
 // 展示图例数据
-const legendShowData = ref(['1', '2', '3', '0'])
+const legendShowData = ref(['管网哨兵', '智能警示桩'])
 // 地图图例数据
 const legendData = ref([
   {
-    name: '正常',
-    url: `${publicPath}/image/station/场站-正常.png`,
-    value: '1',
+    name: '管网哨兵',
+    url: `${publicPath}/image/pipeline/地埋式哨兵-正常.png`,
+    value: '管网哨兵',
   },
   {
-    name: '异常',
-    url: `${publicPath}/image/station/场站-异常.png`,
-    value: '2',
+    name: '智能警示桩',
+    url: `${publicPath}/image/pipeline/警示桩-正常.png`,
+    value: '智能警示桩',
   },
-  {
-    name: '离线',
-    url: `${publicPath}/image/station/场站-离线.png`,
-    value: '3',
-  },
-  {
-    name: '未监控',
-    url: `${publicPath}/image/station/场站-未部署.png`,
-    value: '0',
-  },
+  // {
+  //   name: '离线',
+  //   url: `${publicPath}/image/station/场站-离线.png`,
+  //   value: '3',
+  // },
 ])
 // 控制图例
 const clickLegend = (type: string) => {
@@ -62,51 +63,43 @@
 const drawMarker = () => {
   const style = [
     {
-      url: `${publicPath}/image/station/场站-正常.png`, // 图标地址
+      url: `${publicPath}/image/pipeline/地埋式哨兵-正常.png`, // 图标地址
       anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
       size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
       zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     },
     {
-      url: `${publicPath}/image/station/场站-异常.png`, // 图标地址
+      url: `${publicPath}/image/pipeline/警示桩-正常.png`, // 图标地址
       anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
       size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
       zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     },
-    {
-      url: `${publicPath}/image/station/场站-离线.png`, // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: `${publicPath}/image/station/场站-未部署.png`, // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
+    // {
+    //   url: `${publicPath}/image/pipeline/场站-离线.png`, // 图标地址
+    //   anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+    //   size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
+    //   zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    // },
   ]
   // （0：未监控，1：正常，2：异常，3：离线）
   const styleDict = {
-    0: 3,
-    1: 0,
-    2: 1,
-    3: 2,
+    管网哨兵: 0,
+    智能警示桩: 1,
   } as { [key: string]: number }
-  const data = $props.data.map((item: any) => ({ ...item, monitorState: item.monitorState || '0' })).filter((item: any) => legendShowData.value.includes(item.monitorState)).filter((item: any) => item.lngGaode && item.latGaode).map((item: any) => ({
-    lnglat: [item.lngGaode, item.latGaode],
-    name: item.ledgerName,
-    style: item.monitorState ? styleDict[item.monitorState] : 3,
-    id: item.id,
+  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName).map((item: any) => ({
+    lnglat: [item.lng, item.lat],
+    name: item.deviceTypeName,
+    style: styleDict[item.deviceTypeName] || 0,
+    id: item.deviceCode,
     row: item,
   }))
+  console.log(data, '绘制标记点')
   mapRef.value.addMassMarks({
     path: data,
     zIndex: 111,
     zooms: [3, 20],
     style,
   })
-  //
   if (pageIsFirst.value) {
     mapRef.value.map.setCenter([116.397428, 39.90923])
   }
@@ -115,6 +108,22 @@
   }
   mapRef.value.map.setZoom(10.5)
 }
+// 绘制线
+const drawLine = () => {
+  const data = $props.pipe.filter((item: any) => item.endLat && item.endLng && item.startLng && item.startLat && item.pipeCode)
+  console.log(data, '准备绘制线')
+  data.forEach((item: any) => {
+    mapRef.value.addPolyline({
+      path: [[item.startLng, item.startLat], [item.endLng, item.endLat]],
+      style: {
+        strokeColor: '#BAAF04',
+        strokeWeight: 4,
+        strokeStyle: 'solid',
+        zIndex: 95,
+      },
+    })
+  })
+}
 // 点标记弹窗
 const detail = ref()
 const detailRef = ref()
@@ -139,6 +148,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    // mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
@@ -166,7 +176,7 @@
     mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+// 重置标记点
 function resetDraw() {
   mapRef.value.removeMassMarks()
   if (detailRef.value) {
@@ -177,13 +187,31 @@
     drawMarker()
   }
 }
+// 重置线
+function resetDrawLine() {
+  mapRef.value.removePolyline()
+  if (detailRef.value) {
+    detailRef.value.close()
+  }
+  if ($props.pipe) {
+    // 清空闲重新绘制
+    drawLine()
+  }
+}
+
 // 地图绘制完毕
 const completeMap = () => {
   console.log('地图绘制完毕')
   // 绘制海量点
   resetDraw()
+  clickLegend('智能警示桩')
+  setTimeout(() => {
+    clickLegend('智能警示桩')
+  })
+  // 绘制线
+  resetDrawLine()
 }
-defineExpose({ openInfoDetail, drawMarker, resetDraw })
+defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine })
 </script>
 
 <template>
@@ -193,13 +221,13 @@
     <!-- 地图 -->
     <a-map ref="mapRef" @complete="completeMap" @massMarksClick="massMarksClick" />
     <!-- 图例 -->
-    <!-- <div class="legend">
+    <div class="legend">
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
         <span>{{ item.name }}</span>
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..6a43216
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..a6b2946
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\346\255\243\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
new file mode 100644
index 0000000..7588c47
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\346\255\243\345\270\270.png"
Binary files differ
diff --git a/src/api/home/pipeline/pipeline.ts b/src/api/home/pipeline/pipeline.ts
new file mode 100644
index 0000000..e9c7b38
--- /dev/null
+++ b/src/api/home/pipeline/pipeline.ts
@@ -0,0 +1,61 @@
+/**
+ * 管线监测
+ */
+import request from '@/api/index'
+
+// 基础列表 -分页
+export function getPipelineListPage(data: any) {
+  return request({
+    url: `/monitor/pipe/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 基础列表 -不分页
+export function getPipelineList(data: any) {
+  return request({
+    url: '/monitor/pipe/pipeList',
+    method: 'post',
+    data,
+  })
+}
+
+// 设备列表 -不分页
+export function getPipelineDeviceList(data: any) {
+  return request({
+    url: '/monitor/pipe/deviceList',
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function getPipelineDetail(data: any) {
+  return request({
+    url: '/monitor/pipe/detail',
+    method: 'post',
+    data,
+  })
+}
+
+// 监测数据
+export function getMonitorData(data: any) {
+  return request({
+    url: '/monitor/pipe/watchDataByPipe',
+    method: 'post',
+    data,
+  })
+}
+
+// 编辑
+export function editPipeline(data: any) {
+  return request({
+    url: '/system/busLedger/addRemark',
+    method: 'post',
+    data: {
+      ...data,
+      type: '3',
+    },
+  })
+}
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 20fb0cc..41a546b 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -9,70 +9,68 @@
 const infoWindow = ref()
 // 基本数据
 const baseInfo = ref({
-  ledgerCode: '', // 场站编号
-  ledgerName: '', // 场站名称
-  lngGaode: '',
-  latGaode: '',
+  deviceTypeName: '', // 场站编号
+  deviceCode: '', // 场站名称
 })
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
 const descriptionsList = ref([
   {
-    text: '场站位号',
-    value: '',
+    text: '安装位号',
+    value: 'tagNumber',
     align: 'center',
   },
   {
-    text: '使用状态',
-    value: '',
+    text: '管线编号',
+    value: 'pipeCode',
     align: 'center',
   },
-  {
-    text: '产权单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '联系人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理单位',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '管理方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '负责人',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '联系方式',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '所在区域',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '详细位置',
-    value: '',
-    align: 'center',
-  },
-  {
-    text: '标签',
-    value: '',
-    align: 'center',
-  },
+  // {
+  //   text: '产权单位',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '联系人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '管理单位',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '管理方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '联系方式',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '所在区域',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '详细位置',
+  //   value: '',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '标签',
+  //   value: '',
+  //   align: 'center',
+  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -85,6 +83,7 @@
     e.map.setZoom(15)
   }
   // 获取详细信息
+  detailInfo.value = e.info.row
 }
 
 // 关闭
@@ -99,10 +98,10 @@
   <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
     <div class="header">
       <el-tooltip
-        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
+        class="box-item" effect="dark" :content="`${baseInfo.deviceTypeName} | ${baseInfo.deviceCode}`"
         placement="top"
       >
-        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
+        <span class="title">{{ baseInfo.deviceTypeName }} | {{ baseInfo.deviceCode }}</span>
       </el-tooltip>
       <span class="close" @click="close">x</span>
     </div>
@@ -131,7 +130,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/pipeline/components/editDialog.vue b/src/views/home/pipeline/components/editDialog.vue
new file mode 100644
index 0000000..d7af0c4
--- /dev/null
+++ b/src/views/home/pipeline/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 { editPipeline } from '@/api/home/pipeline/pipeline'
+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]
+      }
+      editPipeline(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/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index f11d959..5c72f95 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -12,39 +12,40 @@
     type: Number,
     default: 0,
   },
+  // 点位数据
   data: {
     type: Array,
     default: () => ([]),
   },
+  // 管线数据
+  pipe: {
+    type: Array,
+    default: () => ([]),
+  },
 })
 // 地图实例
 const mapRef = ref()
 const publicPath = window.location.origin
 // console.log(publicPath, 'publicPath')
 // 展示图例数据
-const legendShowData = ref(['1', '2', '3', '0'])
+const legendShowData = ref(['管网哨兵', '智能警示桩'])
 // 地图图例数据
 const legendData = ref([
   {
-    name: '正常',
-    url: `${publicPath}/image/station/场站-正常.png`,
-    value: '1',
+    name: '管网哨兵',
+    url: `${publicPath}/image/pipeline/地埋式哨兵-正常.png`,
+    value: '管网哨兵',
   },
   {
-    name: '异常',
-    url: `${publicPath}/image/station/场站-异常.png`,
-    value: '2',
+    name: '智能警示桩',
+    url: `${publicPath}/image/pipeline/警示桩-正常.png`,
+    value: '智能警示桩',
   },
-  {
-    name: '离线',
-    url: `${publicPath}/image/station/场站-离线.png`,
-    value: '3',
-  },
-  {
-    name: '未监控',
-    url: `${publicPath}/image/station/场站-未部署.png`,
-    value: '0',
-  },
+  // {
+  //   name: '离线',
+  //   url: `${publicPath}/image/station/场站-离线.png`,
+  //   value: '3',
+  // },
 ])
 // 控制图例
 const clickLegend = (type: string) => {
@@ -62,51 +63,43 @@
 const drawMarker = () => {
   const style = [
     {
-      url: `${publicPath}/image/station/场站-正常.png`, // 图标地址
+      url: `${publicPath}/image/pipeline/地埋式哨兵-正常.png`, // 图标地址
       anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
       size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
       zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     },
     {
-      url: `${publicPath}/image/station/场站-异常.png`, // 图标地址
+      url: `${publicPath}/image/pipeline/警示桩-正常.png`, // 图标地址
       anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
       size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
       zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     },
-    {
-      url: `${publicPath}/image/station/场站-离线.png`, // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
-    {
-      url: `${publicPath}/image/station/场站-未部署.png`, // 图标地址
-      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
-      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
-      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
-    },
+    // {
+    //   url: `${publicPath}/image/pipeline/场站-离线.png`, // 图标地址
+    //   anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
+    //   size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
+    //   zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
+    // },
   ]
   // （0：未监控，1：正常，2：异常，3：离线）
   const styleDict = {
-    0: 3,
-    1: 0,
-    2: 1,
-    3: 2,
+    管网哨兵: 0,
+    智能警示桩: 1,
   } as { [key: string]: number }
-  const data = $props.data.map((item: any) => ({ ...item, monitorState: item.monitorState || '0' })).filter((item: any) => legendShowData.value.includes(item.monitorState)).filter((item: any) => item.lngGaode && item.latGaode).map((item: any) => ({
-    lnglat: [item.lngGaode, item.latGaode],
-    name: item.ledgerName,
-    style: item.monitorState ? styleDict[item.monitorState] : 3,
-    id: item.id,
+  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName).map((item: any) => ({
+    lnglat: [item.lng, item.lat],
+    name: item.deviceTypeName,
+    style: styleDict[item.deviceTypeName] || 0,
+    id: item.deviceCode,
     row: item,
   }))
+  console.log(data, '绘制标记点')
   mapRef.value.addMassMarks({
     path: data,
     zIndex: 111,
     zooms: [3, 20],
     style,
   })
-  //
   if (pageIsFirst.value) {
     mapRef.value.map.setCenter([116.397428, 39.90923])
   }
@@ -115,6 +108,22 @@
   }
   mapRef.value.map.setZoom(10.5)
 }
+// 绘制线
+const drawLine = () => {
+  const data = $props.pipe.filter((item: any) => item.endLat && item.endLng && item.startLng && item.startLat && item.pipeCode)
+  console.log(data, '准备绘制线')
+  data.forEach((item: any) => {
+    mapRef.value.addPolyline({
+      path: [[item.startLng, item.startLat], [item.endLng, item.endLat]],
+      style: {
+        strokeColor: '#BAAF04',
+        strokeWeight: 4,
+        strokeStyle: 'solid',
+        zIndex: 95,
+      },
+    })
+  })
+}
 // 点标记弹窗
 const detail = ref()
 const detailRef = ref()
@@ -139,6 +148,7 @@
   })
   setTimeout(() => {
     // mapRef.value.map.setZoom(14)
+    // mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
 }
@@ -166,7 +176,7 @@
     mapRef.value.map.setCenter(data.lnglat)
   })
 }
-
+// 重置标记点
 function resetDraw() {
   mapRef.value.removeMassMarks()
   if (detailRef.value) {
@@ -177,13 +187,31 @@
     drawMarker()
   }
 }
+// 重置线
+function resetDrawLine() {
+  mapRef.value.removePolyline()
+  if (detailRef.value) {
+    detailRef.value.close()
+  }
+  if ($props.pipe) {
+    // 清空闲重新绘制
+    drawLine()
+  }
+}
+
 // 地图绘制完毕
 const completeMap = () => {
   console.log('地图绘制完毕')
   // 绘制海量点
   resetDraw()
+  clickLegend('智能警示桩')
+  setTimeout(() => {
+    clickLegend('智能警示桩')
+  })
+  // 绘制线
+  resetDrawLine()
 }
-defineExpose({ openInfoDetail, drawMarker, resetDraw })
+defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine })
 </script>
 
 <template>
@@ -193,13 +221,13 @@
     <!-- 地图 -->
     <a-map ref="mapRef" @complete="completeMap" @massMarksClick="massMarksClick" />
     <!-- 图例 -->
-    <!-- <div class="legend">
+    <div class="legend">
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
         <span>{{ item.name }}</span>
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index 9d57f42..87da946 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -7,7 +7,8 @@
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ArrowUpBold } from '@element-plus/icons-vue'
 import MapCom from './components/map.vue'
-// import { getStationList, getStationListPage } from '@/api/home/station/station'
+import editDialog from './components/editDialog.vue'
+import { getPipelineDeviceList, getPipelineList, getPipelineListPage } from '@/api/home/pipeline/pipeline'
 import { getDictByCode } from '@/api/system/dict'
 // 表格标识  地图或普通
 const mapRef = ref()
@@ -18,21 +19,21 @@
 const total = ref(0)
 // 地图数据
 const mapList = ref([])
-
+const pipeData = ref([])
 // 初始展示列
 const columns = ref<any>([
   { text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
-  { text: '设备编号', value: 'ledgerCode', isRequired: true, align: 'center' },
-  { text: '设备类型', value: 'ledgerName', isRequired: true, align: 'center' },
-  { text: '关联管线', value: 'responsibleDeptName', isRequired: true, align: 'center' },
-  { text: '压力级制', value: 'wellTypeName', isRequired: true, align: 'center' },
-  { text: '管径(mm)', value: 'position', align: 'center' },
-  { text: '管材', value: '', isRequired: true, align: 'center' },
-  { text: '建设年代', value: '', 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: 'marker', align: 'center' },
+  { text: '设备编号', value: 'devcode', isRequired: true, align: 'center' },
+  { text: '设备类型', value: 'typeName', isRequired: true, align: 'center' },
+  { text: '关联管线', value: 'pipeCode', isRequired: true, align: 'center' },
+  { text: '压力级制', value: 'pressType', isRequired: true, align: 'center' },
+  { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
+  { text: '管材', value: 'material', isRequired: true, align: 'center' },
+  { text: '建设年代', value: 'constructEra', align: 'center' },
+  { text: '详细位置', value: 'position', isRequired: true, align: 'center' },
+  { text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
+  { text: '使用状态', value: 'onState', align: 'center', width: '90' },
+  { text: '监控状态', value: 'monitorState', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -45,12 +46,14 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
-  tagNumber: '', // 闸井位号
-  ledgerName: '', // 闸井名称
-  ledgerCode: '', // 闸井编号
-  responsibleDept: '', // 管理单位
-  onState: '', // 使用状态
+  deptId: '', // 管理单位
+  devCode: '', // 设备编号
+  devName: '', // 设备名称
   monitorState: '', // 监控状态
+  onState: '', // 使用状态
+  pipeCode: '', // 管线编号
+  position: '', // 详细位置
+  tagNumber: '', // 安装位号
 } as { [key: string]: string | number })
 // 查询数据
 const fetchData = () => {
@@ -63,50 +66,76 @@
       queryList.push(true)
     }
   }
-  // getStationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows
-  //   total.value = res.data.total
-  loadingTable.value = false
-  //   if (queryList.length > 2) {
-  //     mapList.value = list.value
-  //     setTimeout(() => {
-  //       if (tableFlag.value === 'map') {
-  //         mapRef.value.resetDraw()
-  //       }
-  mapLoading.value = false
-  //     }, 500)
-  //   }
-  // }).catch(() => {
-  //   loadingTable.value = false
-  //   if (queryList.length <= 2) {
-  //     mapLoading.value = false
-  //   }
-  // })
-  // if (queryList.length > 2) { return }
-  // // 获取地图全部数据
-  // getStationList(listQuery.value).then((res) => {
-  //   mapList.value = res.data
-  //   setTimeout(() => {
-  //     if (tableFlag.value === 'map') {
-  //       mapRef.value.resetDraw()
-  //     }
-  //     mapLoading.value = false
-  //   }, 500)
-  // }).catch(() => {
-  //   mapLoading.value = false
-  // })
+  getPipelineListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+    if (queryList.length > 2) {
+      mapList.value = list.value
+      setTimeout(() => {
+        if (tableFlag.value === 'map') {
+          mapRef.value.resetDraw()
+          mapRef.value.resetDrawLine()
+        }
+        mapLoading.value = false
+      }, 500)
+    }
+  }).catch(() => {
+    loadingTable.value = false
+    if (queryList.length <= 2) {
+      mapLoading.value = false
+    }
+  })
+  if (queryList.length > 2) { return }
+  // 获取地图全部数据
+  getPipelineList(listQuery.value).then((res) => {
+    //  管线
+    pipeData.value = res.data.map((item: any) => ({
+      pipeCode: item.PIPE_CODE,
+      startLat: item.START_LAT,
+      startLng: item.START_LNG,
+      endLat: item.END_LAT,
+      endLng: item.END_LNG,
+
+    }))
+    setTimeout(() => {
+      if (tableFlag.value === 'map') {
+        mapRef.value.resetDrawLine()
+      }
+    }, 500)
+  })
+  getPipelineDeviceList(listQuery.value).then((res) => {
+    mapList.value = res.data.map((item: { [key: string]: string }) => ({
+      deviceTypeName: item.TYPE_NAME,
+      tagNumber: item.TAG_NUMBER,
+      deviceCode: item.DEVCODE,
+      pipeCode: item.PIPE_CODE,
+      lat: item.LAT_GAODE,
+      lng: item.LNG_GAODE,
+    }))
+    setTimeout(() => {
+      if (tableFlag.value === 'map') {
+        mapRef.value.resetDraw()
+      }
+      mapLoading.value = false
+    }, 500)
+  }).catch(() => {
+    mapLoading.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
-    tagNumber: '', // 闸井位号
-    ledgerName: '', // 闸井名称
-    ledgerCode: '', // 闸井编号
-    responsibleDept: '', // 管理单位
-    onState: '', // 使用状态态
+    deptId: '', // 管理单位
+    devCode: '', // 设备编号
+    devName: '', // 设备名称
     monitorState: '', // 监控状态
+    onState: '', // 使用状态
+    pipeCode: '', // 管线编号
+    position: '', // 详细位置
+    tagNumber: '', // 安装位号
   }
   fetchData()
 }
@@ -122,14 +151,9 @@
 }
 
 // 获取字典
-const wellTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 场站类型
 const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
 const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
 const fetchDict = () => {
-  // 场站类型
-  getDictByCode('wellType').then((res) => {
-    wellTypeList.value = res.data
-  })
   // 使用状态
   getDictByCode('onState').then((res) => {
     onStateList.value = res.data
@@ -150,24 +174,29 @@
 }
 // 点击数据行
 const rowClick = (data: any) => {
-  if (tableFlag.value === 'normal') { return }
-  if (!data.lngGaode || !data.latGaode) {
-    ElMessage.warning('该数据缺少坐标信息')
-    return
-  }
-  // 打开地图弹窗
-  mapRef.value.openInfoDetail({
-    lnglat: [data.lngGaode, data.latGaode],
-    id: data.id,
-    name: data.ledgerName,
-    row: data,
-  })
+  // if (tableFlag.value === 'normal') { return }
+  // if (!data.lngGaode || !data.latGaode) {
+  //   ElMessage.warning('该数据缺少坐标信息')
+  //   return
+  // }
+  // // 打开地图弹窗
+  // mapRef.value.openInfoDetail({
+  //   lnglat: [data.lngGaode, data.latGaode],
+  //   id: data.id,
+  //   name: data.ledgerName,
+  //   row: data,
+  // })
 }
 // 查看/编辑
+const editRef = ref()
 const $router = useRouter()
 const editRow = (type: string, row: any) => {
+  if (type === 'edit') {
+    editRef.value.initDialog(type, row)
+    return
+  }
   $router.push({
-    path: `/station/${type}`,
+    path: `/pipeline/${type}`,
     query: {
       id: row.id,
     },
@@ -178,10 +207,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" :pipe="pipeData" />
     <!-- 占位-地图 -->
-    <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">
@@ -197,21 +227,21 @@
         <el-input v-model.trim="listQuery.tagNumber" placeholder="安装位号" clearable />
       </search-item>
       <search-item>
-        <el-input v-model.trim="listQuery.ledgerCode" placeholder="设备编号" clearable />
+        <el-input v-model.trim="listQuery.devCode" placeholder="设备编号" clearable />
       </search-item>
       <search-item>
-        <el-input v-model.trim="listQuery.ledgerName" placeholder="设备名称" clearable />
+        <el-input v-model.trim="listQuery.devName" 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.ledgerName" placeholder="关联管线" clearable />
+        <el-input v-model.trim="listQuery.pipeCode" placeholder="关联管线" clearable />
       </search-item>
       <search-item>
-        <el-input v-model.trim="listQuery.ledgerName" placeholder="详细位置" clearable />
+        <el-input v-model.trim="listQuery.position" placeholder="详细位置" clearable />
       </search-item>
-      <search-item>
+      <!-- <search-item>
         <el-select v-model="listQuery.pressType" placeholder="压力级制" clearable class="select" style="width: 192px;">
           <el-option v-for="item in pressTypeList" :key="item.id" :label="item.name" :value="item.value" />
         </el-select>
@@ -222,15 +252,11 @@
         </el-select>
       </search-item>
       <search-item>
-        <el-input
-          v-model="listQuery.pipeDiameter1" placeholder="管径范围(mm)" clearable type="number"
-          style="width: 135px;"
-        />
+        <el-input v-model="listQuery.pipeDiameter1" placeholder="管径范围(mm)" clearable type="number"
+          style="width: 135px;" />
         ~
-        <el-input
-          v-model="listQuery.pipeDiameter2" placeholder="管径范围(mm)" clearable type="number"
-          style="width: 135px;"
-        />
+        <el-input v-model="listQuery.pipeDiameter2" placeholder="管径范围(mm)" clearable type="number"
+          style="width: 135px;" />
       </search-item>
       <search-item>
         <el-input v-model="listQuery.constructEra1" placeholder="建设年代" clearable type="number" style="width: 135px;" />
@@ -241,15 +267,15 @@
         <el-select v-model="listQuery.pressType" placeholder="安装方式" clearable class="select" style="width: 192px;">
           <el-option v-for="item in pressTypeList" :key="item.id" :label="item.name" :value="item.value" />
         </el-select>
-      </search-item>
+      </search-item> -->
       <search-item>
-        <el-select v-model="listQuery.pressType" placeholder="使用状态" clearable class="select" style="width: 192px;">
-          <el-option v-for="item in pressTypeList" :key="item.id" :label="item.name" :value="item.value" />
+        <el-select v-model="listQuery.onState" placeholder="使用状态" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in onStateList" :key="item.id" :label="item.name" :value="item.value" />
         </el-select>
       </search-item>
       <search-item>
-        <el-select v-model="listQuery.pressType" placeholder="监控状态" clearable class="select" style="width: 192px;">
-          <el-option v-for="item in pressTypeList" :key="item.id" :label="item.name" :value="item.value" />
+        <el-select v-model="listQuery.monitorState" placeholder="监控状态" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in monitorStateList" :key="item.id" :label="item.name" :value="item.value" />
         </el-select>
       </search-item>
     </search-area>
@@ -257,8 +283,8 @@
     <div v-if="tableFlag === 'map'" style="height: 114px;" />
     <!-- 表头标题 -->
     <table-container
-      :is-config="true" config-title="station-monitor" :columns="columns" :config-columns="columnsConfig"
-      :edit="editColumns"
+      :is-config="true" config-title="pipeline-monitor" :columns="columns"
+      :config-columns="columnsConfig" :edit="editColumns"
     >
       <template #btns-left>
         <!-- 操作 -->
@@ -316,7 +342,7 @@
 
   .icon {
     position: fixed;
-    top: 450px;
+    top: 550px;
     left: 50%;
     // transform: translateX(-50%);
     z-index: 901;