diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.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-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.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-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.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-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\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-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.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-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/pipeline/components/detailData.vue b/src/views/home/pipeline/components/detailData.vue
new file mode 100644
index 0000000..80b6886
--- /dev/null
+++ b/src/views/home/pipeline/components/detailData.vue
@@ -0,0 +1,25 @@
+<!--
+  Description: 管线监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorDataList.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="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/pipeline/components/detailData.vue b/src/views/home/pipeline/components/detailData.vue
new file mode 100644
index 0000000..80b6886
--- /dev/null
+++ b/src/views/home/pipeline/components/detailData.vue
@@ -0,0 +1,25 @@
+<!--
+  Description: 管线监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorDataList.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="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 41a546b..31f5635 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getPipelineDetail } from '@/api/home/pipeline/pipeline'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -12,6 +13,7 @@
   deviceTypeName: '', // 场站编号
   deviceCode: '', // 场站名称
 })
+const loading = ref(true)
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
@@ -22,55 +24,60 @@
     align: 'center',
   },
   {
-    text: '管线编号',
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    align: 'center',
+  },
+  {
+    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',
-  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -84,6 +91,16 @@
   }
   // 获取详细信息
   detailInfo.value = e.info.row
+  loading.value = true
+  getPipelineDetail({
+    id: e.info.row.id,
+    devcode: e.info.row.deviceCode,
+  }).then((res) => {
+    loading.value = false
+    detailInfo.value = res.data
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -106,7 +123,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">
@@ -158,6 +175,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/pipeline/components/detailData.vue b/src/views/home/pipeline/components/detailData.vue
new file mode 100644
index 0000000..80b6886
--- /dev/null
+++ b/src/views/home/pipeline/components/detailData.vue
@@ -0,0 +1,25 @@
+<!--
+  Description: 管线监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorDataList.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="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 41a546b..31f5635 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getPipelineDetail } from '@/api/home/pipeline/pipeline'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -12,6 +13,7 @@
   deviceTypeName: '', // 场站编号
   deviceCode: '', // 场站名称
 })
+const loading = ref(true)
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
@@ -22,55 +24,60 @@
     align: 'center',
   },
   {
-    text: '管线编号',
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    align: 'center',
+  },
+  {
+    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',
-  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -84,6 +91,16 @@
   }
   // 获取详细信息
   detailInfo.value = e.info.row
+  loading.value = true
+  getPipelineDetail({
+    id: e.info.row.id,
+    devcode: e.info.row.deviceCode,
+  }).then((res) => {
+    loading.value = false
+    detailInfo.value = res.data
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -106,7 +123,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">
@@ -158,6 +175,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 5c72f95..662d4c7 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -63,17 +63,41 @@
 const drawMarker = () => {
   const style = [
     {
+      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/pipeline/地埋式哨兵-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      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/pipeline/警示桩-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
     // {
     //   url: `${publicPath}/image/pipeline/场站-离线.png`, // 图标地址
     //   anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
@@ -81,15 +105,18 @@
     //   zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     // },
   ]
-  // （0：未监控，1：正常，2：异常，3：离线）
   const styleDict = {
-    管网哨兵: 0,
-    智能警示桩: 1,
+    '管网哨兵-0': 0,
+    '管网哨兵-1': 1,
+    '管网哨兵-2': 2,
+    '智能警示桩-0': 3,
+    '智能警示桩-1': 4,
+    '智能警示桩-2': 5,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName).map((item: any) => ({
+  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName && item.status).map((item: any) => ({
     lnglat: [item.lng, item.lat],
     name: item.deviceTypeName,
-    style: styleDict[item.deviceTypeName] || 0,
+    style: styleDict[`${item.deviceTypeName}-${item.status}`] || 0,
     id: item.deviceCode,
     row: item,
   }))
@@ -116,8 +143,8 @@
     mapRef.value.addPolyline({
       path: [[item.startLng, item.startLat], [item.endLng, item.endLat]],
       style: {
-        strokeColor: '#BAAF04',
-        strokeWeight: 4,
+        strokeColor: '#E80D0D',
+        strokeWeight: 2,
         strokeStyle: 'solid',
         zIndex: 95,
       },
@@ -151,6 +178,24 @@
     // mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
+  // 关联的管线高亮
+  const line = $props.pipe.filter((item: any) => item.pipeCode === data.event.data.row.pipeCode)
+  console.log(line, 'line')
+  if (line.length) {
+    if (!mapRef.value.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    console.log(link, 'link')
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 
 // 打开信息窗体
@@ -211,7 +256,7 @@
   // 绘制线
   resetDrawLine()
 }
-defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine })
+defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
 
 <template>

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/pipeline/components/detailData.vue b/src/views/home/pipeline/components/detailData.vue
new file mode 100644
index 0000000..80b6886
--- /dev/null
+++ b/src/views/home/pipeline/components/detailData.vue
@@ -0,0 +1,25 @@
+<!--
+  Description: 管线监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorDataList.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="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 41a546b..31f5635 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getPipelineDetail } from '@/api/home/pipeline/pipeline'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -12,6 +13,7 @@
   deviceTypeName: '', // 场站编号
   deviceCode: '', // 场站名称
 })
+const loading = ref(true)
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
@@ -22,55 +24,60 @@
     align: 'center',
   },
   {
-    text: '管线编号',
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    align: 'center',
+  },
+  {
+    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',
-  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -84,6 +91,16 @@
   }
   // 获取详细信息
   detailInfo.value = e.info.row
+  loading.value = true
+  getPipelineDetail({
+    id: e.info.row.id,
+    devcode: e.info.row.deviceCode,
+  }).then((res) => {
+    loading.value = false
+    detailInfo.value = res.data
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -106,7 +123,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">
@@ -158,6 +175,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 5c72f95..662d4c7 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -63,17 +63,41 @@
 const drawMarker = () => {
   const style = [
     {
+      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/pipeline/地埋式哨兵-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      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/pipeline/警示桩-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
     // {
     //   url: `${publicPath}/image/pipeline/场站-离线.png`, // 图标地址
     //   anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
@@ -81,15 +105,18 @@
     //   zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     // },
   ]
-  // （0：未监控，1：正常，2：异常，3：离线）
   const styleDict = {
-    管网哨兵: 0,
-    智能警示桩: 1,
+    '管网哨兵-0': 0,
+    '管网哨兵-1': 1,
+    '管网哨兵-2': 2,
+    '智能警示桩-0': 3,
+    '智能警示桩-1': 4,
+    '智能警示桩-2': 5,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName).map((item: any) => ({
+  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName && item.status).map((item: any) => ({
     lnglat: [item.lng, item.lat],
     name: item.deviceTypeName,
-    style: styleDict[item.deviceTypeName] || 0,
+    style: styleDict[`${item.deviceTypeName}-${item.status}`] || 0,
     id: item.deviceCode,
     row: item,
   }))
@@ -116,8 +143,8 @@
     mapRef.value.addPolyline({
       path: [[item.startLng, item.startLat], [item.endLng, item.endLat]],
       style: {
-        strokeColor: '#BAAF04',
-        strokeWeight: 4,
+        strokeColor: '#E80D0D',
+        strokeWeight: 2,
         strokeStyle: 'solid',
         zIndex: 95,
       },
@@ -151,6 +178,24 @@
     // mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
+  // 关联的管线高亮
+  const line = $props.pipe.filter((item: any) => item.pipeCode === data.event.data.row.pipeCode)
+  console.log(line, 'line')
+  if (line.length) {
+    if (!mapRef.value.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    console.log(link, 'link')
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 
 // 打开信息窗体
@@ -211,7 +256,7 @@
   // 绘制线
   resetDrawLine()
 }
-defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine })
+defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
 
 <template>
diff --git a/src/views/home/pipeline/components/monitorDataList.vue b/src/views/home/pipeline/components/monitorDataList.vue
new file mode 100644
index 0000000..3158dd9
--- /dev/null
+++ b/src/views/home/pipeline/components/monitorDataList.vue
@@ -0,0 +1,135 @@
+<!--
+  Description: 管线监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/pipeline/pipeline'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '地层温度(℃)', value: 'TEMPERATURE', align: 'center', width: '110' },
+  { text: '地层湿度(%RH)', value: 'HUMIDITY', align: 'center', width: '140' },
+  { text: '电池电压(V)', value: 'VBAT', align: 'center', width: '110' },
+  { text: '桩倾斜报警', value: 'PIPE_INCLINE_ALARM', align: 'center', width: '110' },
+  { text: '桩拆卸报警', value: 'PIPE_BREAK_ALARM', align: 'center', width: '110' },
+  { text: '左断线报警', value: 'LEFT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '左振动报警', value: 'LEFT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '右断线报警', value: 'RIGHT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '右振动报警', value: 'RIGHT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '报警图像输出', value: 'PICTURE_ALARM', align: 'center' },
+  { text: '采集时间', value: 'LOGTIME', align: 'center' },
+  { text: '上传时间', value: 'UPTIME', align: 'center' },
+])
+const listQuery = ref({
+  devcode: '',
+  logBegTime: '',
+  logEndTime: '',
+  typeName: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+// 开始结束时间
+const datetimerange1 = ref()
+watch(() => datetimerange1.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const datetimerange2 = ref()
+watch(() => datetimerange2.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${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.devcode = $route.query.deviceCode as string
+  listQuery.value.typeName = $route.query.typeName as string
+  getMonitorData(listQuery.value).then((res) => {
+    list.value = res.data.map((item: any) => {
+      for (const i in item) {
+        if (i.includes('ALARM')) {
+          if (i === 'PICTURE_ALARM') {
+            item[i] = item[i] === '0' ? '/' : item[i]
+          }
+          else {
+            item[i] = item[i] === '0' ? '正常' : '报警'
+          }
+        }
+      }
+      return item
+    })
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange1.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  datetimerange2.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="datetimerange1" 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="datetimerange2" 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>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
+      :list-loading="loadingTable" :pagination="false"
+    />
+  </table-container>
+</template>

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/pipeline/components/detailData.vue b/src/views/home/pipeline/components/detailData.vue
new file mode 100644
index 0000000..80b6886
--- /dev/null
+++ b/src/views/home/pipeline/components/detailData.vue
@@ -0,0 +1,25 @@
+<!--
+  Description: 管线监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorDataList.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="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 41a546b..31f5635 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getPipelineDetail } from '@/api/home/pipeline/pipeline'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -12,6 +13,7 @@
   deviceTypeName: '', // 场站编号
   deviceCode: '', // 场站名称
 })
+const loading = ref(true)
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
@@ -22,55 +24,60 @@
     align: 'center',
   },
   {
-    text: '管线编号',
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    align: 'center',
+  },
+  {
+    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',
-  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -84,6 +91,16 @@
   }
   // 获取详细信息
   detailInfo.value = e.info.row
+  loading.value = true
+  getPipelineDetail({
+    id: e.info.row.id,
+    devcode: e.info.row.deviceCode,
+  }).then((res) => {
+    loading.value = false
+    detailInfo.value = res.data
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -106,7 +123,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">
@@ -158,6 +175,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 5c72f95..662d4c7 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -63,17 +63,41 @@
 const drawMarker = () => {
   const style = [
     {
+      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/pipeline/地埋式哨兵-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      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/pipeline/警示桩-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
     // {
     //   url: `${publicPath}/image/pipeline/场站-离线.png`, // 图标地址
     //   anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
@@ -81,15 +105,18 @@
     //   zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     // },
   ]
-  // （0：未监控，1：正常，2：异常，3：离线）
   const styleDict = {
-    管网哨兵: 0,
-    智能警示桩: 1,
+    '管网哨兵-0': 0,
+    '管网哨兵-1': 1,
+    '管网哨兵-2': 2,
+    '智能警示桩-0': 3,
+    '智能警示桩-1': 4,
+    '智能警示桩-2': 5,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName).map((item: any) => ({
+  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName && item.status).map((item: any) => ({
     lnglat: [item.lng, item.lat],
     name: item.deviceTypeName,
-    style: styleDict[item.deviceTypeName] || 0,
+    style: styleDict[`${item.deviceTypeName}-${item.status}`] || 0,
     id: item.deviceCode,
     row: item,
   }))
@@ -116,8 +143,8 @@
     mapRef.value.addPolyline({
       path: [[item.startLng, item.startLat], [item.endLng, item.endLat]],
       style: {
-        strokeColor: '#BAAF04',
-        strokeWeight: 4,
+        strokeColor: '#E80D0D',
+        strokeWeight: 2,
         strokeStyle: 'solid',
         zIndex: 95,
       },
@@ -151,6 +178,24 @@
     // mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
+  // 关联的管线高亮
+  const line = $props.pipe.filter((item: any) => item.pipeCode === data.event.data.row.pipeCode)
+  console.log(line, 'line')
+  if (line.length) {
+    if (!mapRef.value.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    console.log(link, 'link')
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 
 // 打开信息窗体
@@ -211,7 +256,7 @@
   // 绘制线
   resetDrawLine()
 }
-defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine })
+defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
 
 <template>
diff --git a/src/views/home/pipeline/components/monitorDataList.vue b/src/views/home/pipeline/components/monitorDataList.vue
new file mode 100644
index 0000000..3158dd9
--- /dev/null
+++ b/src/views/home/pipeline/components/monitorDataList.vue
@@ -0,0 +1,135 @@
+<!--
+  Description: 管线监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/pipeline/pipeline'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '地层温度(℃)', value: 'TEMPERATURE', align: 'center', width: '110' },
+  { text: '地层湿度(%RH)', value: 'HUMIDITY', align: 'center', width: '140' },
+  { text: '电池电压(V)', value: 'VBAT', align: 'center', width: '110' },
+  { text: '桩倾斜报警', value: 'PIPE_INCLINE_ALARM', align: 'center', width: '110' },
+  { text: '桩拆卸报警', value: 'PIPE_BREAK_ALARM', align: 'center', width: '110' },
+  { text: '左断线报警', value: 'LEFT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '左振动报警', value: 'LEFT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '右断线报警', value: 'RIGHT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '右振动报警', value: 'RIGHT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '报警图像输出', value: 'PICTURE_ALARM', align: 'center' },
+  { text: '采集时间', value: 'LOGTIME', align: 'center' },
+  { text: '上传时间', value: 'UPTIME', align: 'center' },
+])
+const listQuery = ref({
+  devcode: '',
+  logBegTime: '',
+  logEndTime: '',
+  typeName: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+// 开始结束时间
+const datetimerange1 = ref()
+watch(() => datetimerange1.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const datetimerange2 = ref()
+watch(() => datetimerange2.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${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.devcode = $route.query.deviceCode as string
+  listQuery.value.typeName = $route.query.typeName as string
+  getMonitorData(listQuery.value).then((res) => {
+    list.value = res.data.map((item: any) => {
+      for (const i in item) {
+        if (i.includes('ALARM')) {
+          if (i === 'PICTURE_ALARM') {
+            item[i] = item[i] === '0' ? '/' : item[i]
+          }
+          else {
+            item[i] = item[i] === '0' ? '正常' : '报警'
+          }
+        }
+      }
+      return item
+    })
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange1.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  datetimerange2.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="datetimerange1" 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="datetimerange2" 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>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
+      :list-loading="loadingTable" :pagination="false"
+    />
+  </table-container>
+</template>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index 87da946..9ef5426 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -96,7 +96,6 @@
       startLng: item.START_LNG,
       endLat: item.END_LAT,
       endLng: item.END_LNG,
-
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -112,6 +111,8 @@
       pipeCode: item.PIPE_CODE,
       lat: item.LAT_GAODE,
       lng: item.LNG_GAODE,
+      id: item.LEDGER_ID,
+      status: item.ONLINE_STATE,
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -174,18 +175,46 @@
 }
 // 点击数据行
 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: '',
+    row: {
+      deviceTypeName: data.typeName,
+      tagNumber: data.tagNumber,
+      deviceCode: data.devcode,
+      pipeCode: data.pipeCode,
+      lat: data.latGaode,
+      lng: data.lngGaode,
+      id: data.id,
+      status: data.onLineStatus,
+    },
+  })
+  if (!data.pipeCode) {
+    return
+  }
+  // 关联的管线高亮
+  const line = pipeData.value.filter((item: any) => item.pipeCode === data.pipeCode)
+  if (line.length) {
+    if (!mapRef.value.mapRef.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.mapRef.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 // 查看/编辑
 const editRef = ref()
@@ -195,10 +224,18 @@
     editRef.value.initDialog(type, row)
     return
   }
+  console.log(row)
+  if (!row.devcode || !row.id) {
+    ElMessage.warning('暂无详情数据')
+    return
+  }
   $router.push({
-    path: `/pipeline/${type}`,
+    // path: `/monitor/${type}`,
+    name: 'PipelineMonitorDetail',
     query: {
       id: row.id,
+      deviceCode: row.devcode,
+      typeName: row.typeName,
     },
   })
 }
@@ -209,7 +246,10 @@
   <app-container class="container">
     <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" :pipe="pipeData" />
+    <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: 450px;" />
     <!-- 收起地图-图标 -->
@@ -305,7 +345,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
@@ -315,14 +355,14 @@
           </el-table-column>
         </template>
         <template #columns>
-          <el-table-column label="操作" align="center" width="120">
+          <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>
-              <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
+              <!-- <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
                 编辑
-              </el-button>
+              </el-button> -->
             </template>
           </el-table-column>
         </template>

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/pipeline/components/detailData.vue b/src/views/home/pipeline/components/detailData.vue
new file mode 100644
index 0000000..80b6886
--- /dev/null
+++ b/src/views/home/pipeline/components/detailData.vue
@@ -0,0 +1,25 @@
+<!--
+  Description: 管线监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorDataList.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="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 41a546b..31f5635 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getPipelineDetail } from '@/api/home/pipeline/pipeline'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -12,6 +13,7 @@
   deviceTypeName: '', // 场站编号
   deviceCode: '', // 场站名称
 })
+const loading = ref(true)
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
@@ -22,55 +24,60 @@
     align: 'center',
   },
   {
-    text: '管线编号',
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    align: 'center',
+  },
+  {
+    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',
-  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -84,6 +91,16 @@
   }
   // 获取详细信息
   detailInfo.value = e.info.row
+  loading.value = true
+  getPipelineDetail({
+    id: e.info.row.id,
+    devcode: e.info.row.deviceCode,
+  }).then((res) => {
+    loading.value = false
+    detailInfo.value = res.data
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -106,7 +123,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">
@@ -158,6 +175,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 5c72f95..662d4c7 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -63,17 +63,41 @@
 const drawMarker = () => {
   const style = [
     {
+      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/pipeline/地埋式哨兵-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      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/pipeline/警示桩-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
     // {
     //   url: `${publicPath}/image/pipeline/场站-离线.png`, // 图标地址
     //   anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
@@ -81,15 +105,18 @@
     //   zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     // },
   ]
-  // （0：未监控，1：正常，2：异常，3：离线）
   const styleDict = {
-    管网哨兵: 0,
-    智能警示桩: 1,
+    '管网哨兵-0': 0,
+    '管网哨兵-1': 1,
+    '管网哨兵-2': 2,
+    '智能警示桩-0': 3,
+    '智能警示桩-1': 4,
+    '智能警示桩-2': 5,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName).map((item: any) => ({
+  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName && item.status).map((item: any) => ({
     lnglat: [item.lng, item.lat],
     name: item.deviceTypeName,
-    style: styleDict[item.deviceTypeName] || 0,
+    style: styleDict[`${item.deviceTypeName}-${item.status}`] || 0,
     id: item.deviceCode,
     row: item,
   }))
@@ -116,8 +143,8 @@
     mapRef.value.addPolyline({
       path: [[item.startLng, item.startLat], [item.endLng, item.endLat]],
       style: {
-        strokeColor: '#BAAF04',
-        strokeWeight: 4,
+        strokeColor: '#E80D0D',
+        strokeWeight: 2,
         strokeStyle: 'solid',
         zIndex: 95,
       },
@@ -151,6 +178,24 @@
     // mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
+  // 关联的管线高亮
+  const line = $props.pipe.filter((item: any) => item.pipeCode === data.event.data.row.pipeCode)
+  console.log(line, 'line')
+  if (line.length) {
+    if (!mapRef.value.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    console.log(link, 'link')
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 
 // 打开信息窗体
@@ -211,7 +256,7 @@
   // 绘制线
   resetDrawLine()
 }
-defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine })
+defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
 
 <template>
diff --git a/src/views/home/pipeline/components/monitorDataList.vue b/src/views/home/pipeline/components/monitorDataList.vue
new file mode 100644
index 0000000..3158dd9
--- /dev/null
+++ b/src/views/home/pipeline/components/monitorDataList.vue
@@ -0,0 +1,135 @@
+<!--
+  Description: 管线监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/pipeline/pipeline'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '地层温度(℃)', value: 'TEMPERATURE', align: 'center', width: '110' },
+  { text: '地层湿度(%RH)', value: 'HUMIDITY', align: 'center', width: '140' },
+  { text: '电池电压(V)', value: 'VBAT', align: 'center', width: '110' },
+  { text: '桩倾斜报警', value: 'PIPE_INCLINE_ALARM', align: 'center', width: '110' },
+  { text: '桩拆卸报警', value: 'PIPE_BREAK_ALARM', align: 'center', width: '110' },
+  { text: '左断线报警', value: 'LEFT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '左振动报警', value: 'LEFT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '右断线报警', value: 'RIGHT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '右振动报警', value: 'RIGHT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '报警图像输出', value: 'PICTURE_ALARM', align: 'center' },
+  { text: '采集时间', value: 'LOGTIME', align: 'center' },
+  { text: '上传时间', value: 'UPTIME', align: 'center' },
+])
+const listQuery = ref({
+  devcode: '',
+  logBegTime: '',
+  logEndTime: '',
+  typeName: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+// 开始结束时间
+const datetimerange1 = ref()
+watch(() => datetimerange1.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const datetimerange2 = ref()
+watch(() => datetimerange2.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${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.devcode = $route.query.deviceCode as string
+  listQuery.value.typeName = $route.query.typeName as string
+  getMonitorData(listQuery.value).then((res) => {
+    list.value = res.data.map((item: any) => {
+      for (const i in item) {
+        if (i.includes('ALARM')) {
+          if (i === 'PICTURE_ALARM') {
+            item[i] = item[i] === '0' ? '/' : item[i]
+          }
+          else {
+            item[i] = item[i] === '0' ? '正常' : '报警'
+          }
+        }
+      }
+      return item
+    })
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange1.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  datetimerange2.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="datetimerange1" 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="datetimerange2" 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>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
+      :list-loading="loadingTable" :pagination="false"
+    />
+  </table-container>
+</template>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index 87da946..9ef5426 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -96,7 +96,6 @@
       startLng: item.START_LNG,
       endLat: item.END_LAT,
       endLng: item.END_LNG,
-
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -112,6 +111,8 @@
       pipeCode: item.PIPE_CODE,
       lat: item.LAT_GAODE,
       lng: item.LNG_GAODE,
+      id: item.LEDGER_ID,
+      status: item.ONLINE_STATE,
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -174,18 +175,46 @@
 }
 // 点击数据行
 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: '',
+    row: {
+      deviceTypeName: data.typeName,
+      tagNumber: data.tagNumber,
+      deviceCode: data.devcode,
+      pipeCode: data.pipeCode,
+      lat: data.latGaode,
+      lng: data.lngGaode,
+      id: data.id,
+      status: data.onLineStatus,
+    },
+  })
+  if (!data.pipeCode) {
+    return
+  }
+  // 关联的管线高亮
+  const line = pipeData.value.filter((item: any) => item.pipeCode === data.pipeCode)
+  if (line.length) {
+    if (!mapRef.value.mapRef.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.mapRef.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 // 查看/编辑
 const editRef = ref()
@@ -195,10 +224,18 @@
     editRef.value.initDialog(type, row)
     return
   }
+  console.log(row)
+  if (!row.devcode || !row.id) {
+    ElMessage.warning('暂无详情数据')
+    return
+  }
   $router.push({
-    path: `/pipeline/${type}`,
+    // path: `/monitor/${type}`,
+    name: 'PipelineMonitorDetail',
     query: {
       id: row.id,
+      deviceCode: row.devcode,
+      typeName: row.typeName,
     },
   })
 }
@@ -209,7 +246,10 @@
   <app-container class="container">
     <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" :pipe="pipeData" />
+    <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: 450px;" />
     <!-- 收起地图-图标 -->
@@ -305,7 +345,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
@@ -315,14 +355,14 @@
           </el-table-column>
         </template>
         <template #columns>
-          <el-table-column label="操作" align="center" width="120">
+          <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>
-              <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
+              <!-- <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
                 编辑
-              </el-button>
+              </el-button> -->
             </template>
           </el-table-column>
         </template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 54fd294..f44be1a 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -179,6 +179,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/pipeline/components/detailData.vue b/src/views/home/pipeline/components/detailData.vue
new file mode 100644
index 0000000..80b6886
--- /dev/null
+++ b/src/views/home/pipeline/components/detailData.vue
@@ -0,0 +1,25 @@
+<!--
+  Description: 管线监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorDataList.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="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 41a546b..31f5635 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getPipelineDetail } from '@/api/home/pipeline/pipeline'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -12,6 +13,7 @@
   deviceTypeName: '', // 场站编号
   deviceCode: '', // 场站名称
 })
+const loading = ref(true)
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
@@ -22,55 +24,60 @@
     align: 'center',
   },
   {
-    text: '管线编号',
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    align: 'center',
+  },
+  {
+    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',
-  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -84,6 +91,16 @@
   }
   // 获取详细信息
   detailInfo.value = e.info.row
+  loading.value = true
+  getPipelineDetail({
+    id: e.info.row.id,
+    devcode: e.info.row.deviceCode,
+  }).then((res) => {
+    loading.value = false
+    detailInfo.value = res.data
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -106,7 +123,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">
@@ -158,6 +175,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 5c72f95..662d4c7 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -63,17 +63,41 @@
 const drawMarker = () => {
   const style = [
     {
+      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/pipeline/地埋式哨兵-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      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/pipeline/警示桩-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
     // {
     //   url: `${publicPath}/image/pipeline/场站-离线.png`, // 图标地址
     //   anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
@@ -81,15 +105,18 @@
     //   zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     // },
   ]
-  // （0：未监控，1：正常，2：异常，3：离线）
   const styleDict = {
-    管网哨兵: 0,
-    智能警示桩: 1,
+    '管网哨兵-0': 0,
+    '管网哨兵-1': 1,
+    '管网哨兵-2': 2,
+    '智能警示桩-0': 3,
+    '智能警示桩-1': 4,
+    '智能警示桩-2': 5,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName).map((item: any) => ({
+  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName && item.status).map((item: any) => ({
     lnglat: [item.lng, item.lat],
     name: item.deviceTypeName,
-    style: styleDict[item.deviceTypeName] || 0,
+    style: styleDict[`${item.deviceTypeName}-${item.status}`] || 0,
     id: item.deviceCode,
     row: item,
   }))
@@ -116,8 +143,8 @@
     mapRef.value.addPolyline({
       path: [[item.startLng, item.startLat], [item.endLng, item.endLat]],
       style: {
-        strokeColor: '#BAAF04',
-        strokeWeight: 4,
+        strokeColor: '#E80D0D',
+        strokeWeight: 2,
         strokeStyle: 'solid',
         zIndex: 95,
       },
@@ -151,6 +178,24 @@
     // mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
+  // 关联的管线高亮
+  const line = $props.pipe.filter((item: any) => item.pipeCode === data.event.data.row.pipeCode)
+  console.log(line, 'line')
+  if (line.length) {
+    if (!mapRef.value.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    console.log(link, 'link')
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 
 // 打开信息窗体
@@ -211,7 +256,7 @@
   // 绘制线
   resetDrawLine()
 }
-defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine })
+defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
 
 <template>
diff --git a/src/views/home/pipeline/components/monitorDataList.vue b/src/views/home/pipeline/components/monitorDataList.vue
new file mode 100644
index 0000000..3158dd9
--- /dev/null
+++ b/src/views/home/pipeline/components/monitorDataList.vue
@@ -0,0 +1,135 @@
+<!--
+  Description: 管线监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/pipeline/pipeline'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '地层温度(℃)', value: 'TEMPERATURE', align: 'center', width: '110' },
+  { text: '地层湿度(%RH)', value: 'HUMIDITY', align: 'center', width: '140' },
+  { text: '电池电压(V)', value: 'VBAT', align: 'center', width: '110' },
+  { text: '桩倾斜报警', value: 'PIPE_INCLINE_ALARM', align: 'center', width: '110' },
+  { text: '桩拆卸报警', value: 'PIPE_BREAK_ALARM', align: 'center', width: '110' },
+  { text: '左断线报警', value: 'LEFT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '左振动报警', value: 'LEFT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '右断线报警', value: 'RIGHT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '右振动报警', value: 'RIGHT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '报警图像输出', value: 'PICTURE_ALARM', align: 'center' },
+  { text: '采集时间', value: 'LOGTIME', align: 'center' },
+  { text: '上传时间', value: 'UPTIME', align: 'center' },
+])
+const listQuery = ref({
+  devcode: '',
+  logBegTime: '',
+  logEndTime: '',
+  typeName: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+// 开始结束时间
+const datetimerange1 = ref()
+watch(() => datetimerange1.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const datetimerange2 = ref()
+watch(() => datetimerange2.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${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.devcode = $route.query.deviceCode as string
+  listQuery.value.typeName = $route.query.typeName as string
+  getMonitorData(listQuery.value).then((res) => {
+    list.value = res.data.map((item: any) => {
+      for (const i in item) {
+        if (i.includes('ALARM')) {
+          if (i === 'PICTURE_ALARM') {
+            item[i] = item[i] === '0' ? '/' : item[i]
+          }
+          else {
+            item[i] = item[i] === '0' ? '正常' : '报警'
+          }
+        }
+      }
+      return item
+    })
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange1.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  datetimerange2.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="datetimerange1" 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="datetimerange2" 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>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
+      :list-loading="loadingTable" :pagination="false"
+    />
+  </table-container>
+</template>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index 87da946..9ef5426 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -96,7 +96,6 @@
       startLng: item.START_LNG,
       endLat: item.END_LAT,
       endLng: item.END_LNG,
-
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -112,6 +111,8 @@
       pipeCode: item.PIPE_CODE,
       lat: item.LAT_GAODE,
       lng: item.LNG_GAODE,
+      id: item.LEDGER_ID,
+      status: item.ONLINE_STATE,
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -174,18 +175,46 @@
 }
 // 点击数据行
 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: '',
+    row: {
+      deviceTypeName: data.typeName,
+      tagNumber: data.tagNumber,
+      deviceCode: data.devcode,
+      pipeCode: data.pipeCode,
+      lat: data.latGaode,
+      lng: data.lngGaode,
+      id: data.id,
+      status: data.onLineStatus,
+    },
+  })
+  if (!data.pipeCode) {
+    return
+  }
+  // 关联的管线高亮
+  const line = pipeData.value.filter((item: any) => item.pipeCode === data.pipeCode)
+  if (line.length) {
+    if (!mapRef.value.mapRef.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.mapRef.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 // 查看/编辑
 const editRef = ref()
@@ -195,10 +224,18 @@
     editRef.value.initDialog(type, row)
     return
   }
+  console.log(row)
+  if (!row.devcode || !row.id) {
+    ElMessage.warning('暂无详情数据')
+    return
+  }
   $router.push({
-    path: `/pipeline/${type}`,
+    // path: `/monitor/${type}`,
+    name: 'PipelineMonitorDetail',
     query: {
       id: row.id,
+      deviceCode: row.devcode,
+      typeName: row.typeName,
     },
   })
 }
@@ -209,7 +246,10 @@
   <app-container class="container">
     <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" :pipe="pipeData" />
+    <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: 450px;" />
     <!-- 收起地图-图标 -->
@@ -305,7 +345,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
@@ -315,14 +355,14 @@
           </el-table-column>
         </template>
         <template #columns>
-          <el-table-column label="操作" align="center" width="120">
+          <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>
-              <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
+              <!-- <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
                 编辑
-              </el-button>
+              </el-button> -->
             </template>
           </el-table-column>
         </template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 54fd294..f44be1a 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -179,6 +179,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 907a91e..636cbad 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -255,7 +255,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/pipeline/components/detailData.vue b/src/views/home/pipeline/components/detailData.vue
new file mode 100644
index 0000000..80b6886
--- /dev/null
+++ b/src/views/home/pipeline/components/detailData.vue
@@ -0,0 +1,25 @@
+<!--
+  Description: 管线监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorDataList.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="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 41a546b..31f5635 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getPipelineDetail } from '@/api/home/pipeline/pipeline'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -12,6 +13,7 @@
   deviceTypeName: '', // 场站编号
   deviceCode: '', // 场站名称
 })
+const loading = ref(true)
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
@@ -22,55 +24,60 @@
     align: 'center',
   },
   {
-    text: '管线编号',
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    align: 'center',
+  },
+  {
+    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',
-  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -84,6 +91,16 @@
   }
   // 获取详细信息
   detailInfo.value = e.info.row
+  loading.value = true
+  getPipelineDetail({
+    id: e.info.row.id,
+    devcode: e.info.row.deviceCode,
+  }).then((res) => {
+    loading.value = false
+    detailInfo.value = res.data
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -106,7 +123,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">
@@ -158,6 +175,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 5c72f95..662d4c7 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -63,17 +63,41 @@
 const drawMarker = () => {
   const style = [
     {
+      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/pipeline/地埋式哨兵-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      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/pipeline/警示桩-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
     // {
     //   url: `${publicPath}/image/pipeline/场站-离线.png`, // 图标地址
     //   anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
@@ -81,15 +105,18 @@
     //   zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     // },
   ]
-  // （0：未监控，1：正常，2：异常，3：离线）
   const styleDict = {
-    管网哨兵: 0,
-    智能警示桩: 1,
+    '管网哨兵-0': 0,
+    '管网哨兵-1': 1,
+    '管网哨兵-2': 2,
+    '智能警示桩-0': 3,
+    '智能警示桩-1': 4,
+    '智能警示桩-2': 5,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName).map((item: any) => ({
+  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName && item.status).map((item: any) => ({
     lnglat: [item.lng, item.lat],
     name: item.deviceTypeName,
-    style: styleDict[item.deviceTypeName] || 0,
+    style: styleDict[`${item.deviceTypeName}-${item.status}`] || 0,
     id: item.deviceCode,
     row: item,
   }))
@@ -116,8 +143,8 @@
     mapRef.value.addPolyline({
       path: [[item.startLng, item.startLat], [item.endLng, item.endLat]],
       style: {
-        strokeColor: '#BAAF04',
-        strokeWeight: 4,
+        strokeColor: '#E80D0D',
+        strokeWeight: 2,
         strokeStyle: 'solid',
         zIndex: 95,
       },
@@ -151,6 +178,24 @@
     // mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
+  // 关联的管线高亮
+  const line = $props.pipe.filter((item: any) => item.pipeCode === data.event.data.row.pipeCode)
+  console.log(line, 'line')
+  if (line.length) {
+    if (!mapRef.value.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    console.log(link, 'link')
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 
 // 打开信息窗体
@@ -211,7 +256,7 @@
   // 绘制线
   resetDrawLine()
 }
-defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine })
+defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
 
 <template>
diff --git a/src/views/home/pipeline/components/monitorDataList.vue b/src/views/home/pipeline/components/monitorDataList.vue
new file mode 100644
index 0000000..3158dd9
--- /dev/null
+++ b/src/views/home/pipeline/components/monitorDataList.vue
@@ -0,0 +1,135 @@
+<!--
+  Description: 管线监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/pipeline/pipeline'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '地层温度(℃)', value: 'TEMPERATURE', align: 'center', width: '110' },
+  { text: '地层湿度(%RH)', value: 'HUMIDITY', align: 'center', width: '140' },
+  { text: '电池电压(V)', value: 'VBAT', align: 'center', width: '110' },
+  { text: '桩倾斜报警', value: 'PIPE_INCLINE_ALARM', align: 'center', width: '110' },
+  { text: '桩拆卸报警', value: 'PIPE_BREAK_ALARM', align: 'center', width: '110' },
+  { text: '左断线报警', value: 'LEFT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '左振动报警', value: 'LEFT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '右断线报警', value: 'RIGHT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '右振动报警', value: 'RIGHT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '报警图像输出', value: 'PICTURE_ALARM', align: 'center' },
+  { text: '采集时间', value: 'LOGTIME', align: 'center' },
+  { text: '上传时间', value: 'UPTIME', align: 'center' },
+])
+const listQuery = ref({
+  devcode: '',
+  logBegTime: '',
+  logEndTime: '',
+  typeName: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+// 开始结束时间
+const datetimerange1 = ref()
+watch(() => datetimerange1.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const datetimerange2 = ref()
+watch(() => datetimerange2.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${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.devcode = $route.query.deviceCode as string
+  listQuery.value.typeName = $route.query.typeName as string
+  getMonitorData(listQuery.value).then((res) => {
+    list.value = res.data.map((item: any) => {
+      for (const i in item) {
+        if (i.includes('ALARM')) {
+          if (i === 'PICTURE_ALARM') {
+            item[i] = item[i] === '0' ? '/' : item[i]
+          }
+          else {
+            item[i] = item[i] === '0' ? '正常' : '报警'
+          }
+        }
+      }
+      return item
+    })
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange1.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  datetimerange2.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="datetimerange1" 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="datetimerange2" 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>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
+      :list-loading="loadingTable" :pagination="false"
+    />
+  </table-container>
+</template>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index 87da946..9ef5426 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -96,7 +96,6 @@
       startLng: item.START_LNG,
       endLat: item.END_LAT,
       endLng: item.END_LNG,
-
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -112,6 +111,8 @@
       pipeCode: item.PIPE_CODE,
       lat: item.LAT_GAODE,
       lng: item.LNG_GAODE,
+      id: item.LEDGER_ID,
+      status: item.ONLINE_STATE,
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -174,18 +175,46 @@
 }
 // 点击数据行
 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: '',
+    row: {
+      deviceTypeName: data.typeName,
+      tagNumber: data.tagNumber,
+      deviceCode: data.devcode,
+      pipeCode: data.pipeCode,
+      lat: data.latGaode,
+      lng: data.lngGaode,
+      id: data.id,
+      status: data.onLineStatus,
+    },
+  })
+  if (!data.pipeCode) {
+    return
+  }
+  // 关联的管线高亮
+  const line = pipeData.value.filter((item: any) => item.pipeCode === data.pipeCode)
+  if (line.length) {
+    if (!mapRef.value.mapRef.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.mapRef.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 // 查看/编辑
 const editRef = ref()
@@ -195,10 +224,18 @@
     editRef.value.initDialog(type, row)
     return
   }
+  console.log(row)
+  if (!row.devcode || !row.id) {
+    ElMessage.warning('暂无详情数据')
+    return
+  }
   $router.push({
-    path: `/pipeline/${type}`,
+    // path: `/monitor/${type}`,
+    name: 'PipelineMonitorDetail',
     query: {
       id: row.id,
+      deviceCode: row.devcode,
+      typeName: row.typeName,
     },
   })
 }
@@ -209,7 +246,10 @@
   <app-container class="container">
     <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" :pipe="pipeData" />
+    <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: 450px;" />
     <!-- 收起地图-图标 -->
@@ -305,7 +345,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
@@ -315,14 +355,14 @@
           </el-table-column>
         </template>
         <template #columns>
-          <el-table-column label="操作" align="center" width="120">
+          <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>
-              <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
+              <!-- <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
                 编辑
-              </el-button>
+              </el-button> -->
             </template>
           </el-table-column>
         </template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 54fd294..f44be1a 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -179,6 +179,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 907a91e..636cbad 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -255,7 +255,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index da0c022..5d33d05 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -207,6 +207,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/pipeline/components/detailData.vue b/src/views/home/pipeline/components/detailData.vue
new file mode 100644
index 0000000..80b6886
--- /dev/null
+++ b/src/views/home/pipeline/components/detailData.vue
@@ -0,0 +1,25 @@
+<!--
+  Description: 管线监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorDataList.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="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 41a546b..31f5635 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getPipelineDetail } from '@/api/home/pipeline/pipeline'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -12,6 +13,7 @@
   deviceTypeName: '', // 场站编号
   deviceCode: '', // 场站名称
 })
+const loading = ref(true)
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
@@ -22,55 +24,60 @@
     align: 'center',
   },
   {
-    text: '管线编号',
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    align: 'center',
+  },
+  {
+    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',
-  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -84,6 +91,16 @@
   }
   // 获取详细信息
   detailInfo.value = e.info.row
+  loading.value = true
+  getPipelineDetail({
+    id: e.info.row.id,
+    devcode: e.info.row.deviceCode,
+  }).then((res) => {
+    loading.value = false
+    detailInfo.value = res.data
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -106,7 +123,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">
@@ -158,6 +175,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 5c72f95..662d4c7 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -63,17 +63,41 @@
 const drawMarker = () => {
   const style = [
     {
+      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/pipeline/地埋式哨兵-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      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/pipeline/警示桩-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
     // {
     //   url: `${publicPath}/image/pipeline/场站-离线.png`, // 图标地址
     //   anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
@@ -81,15 +105,18 @@
     //   zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     // },
   ]
-  // （0：未监控，1：正常，2：异常，3：离线）
   const styleDict = {
-    管网哨兵: 0,
-    智能警示桩: 1,
+    '管网哨兵-0': 0,
+    '管网哨兵-1': 1,
+    '管网哨兵-2': 2,
+    '智能警示桩-0': 3,
+    '智能警示桩-1': 4,
+    '智能警示桩-2': 5,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName).map((item: any) => ({
+  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName && item.status).map((item: any) => ({
     lnglat: [item.lng, item.lat],
     name: item.deviceTypeName,
-    style: styleDict[item.deviceTypeName] || 0,
+    style: styleDict[`${item.deviceTypeName}-${item.status}`] || 0,
     id: item.deviceCode,
     row: item,
   }))
@@ -116,8 +143,8 @@
     mapRef.value.addPolyline({
       path: [[item.startLng, item.startLat], [item.endLng, item.endLat]],
       style: {
-        strokeColor: '#BAAF04',
-        strokeWeight: 4,
+        strokeColor: '#E80D0D',
+        strokeWeight: 2,
         strokeStyle: 'solid',
         zIndex: 95,
       },
@@ -151,6 +178,24 @@
     // mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
+  // 关联的管线高亮
+  const line = $props.pipe.filter((item: any) => item.pipeCode === data.event.data.row.pipeCode)
+  console.log(line, 'line')
+  if (line.length) {
+    if (!mapRef.value.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    console.log(link, 'link')
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 
 // 打开信息窗体
@@ -211,7 +256,7 @@
   // 绘制线
   resetDrawLine()
 }
-defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine })
+defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
 
 <template>
diff --git a/src/views/home/pipeline/components/monitorDataList.vue b/src/views/home/pipeline/components/monitorDataList.vue
new file mode 100644
index 0000000..3158dd9
--- /dev/null
+++ b/src/views/home/pipeline/components/monitorDataList.vue
@@ -0,0 +1,135 @@
+<!--
+  Description: 管线监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/pipeline/pipeline'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '地层温度(℃)', value: 'TEMPERATURE', align: 'center', width: '110' },
+  { text: '地层湿度(%RH)', value: 'HUMIDITY', align: 'center', width: '140' },
+  { text: '电池电压(V)', value: 'VBAT', align: 'center', width: '110' },
+  { text: '桩倾斜报警', value: 'PIPE_INCLINE_ALARM', align: 'center', width: '110' },
+  { text: '桩拆卸报警', value: 'PIPE_BREAK_ALARM', align: 'center', width: '110' },
+  { text: '左断线报警', value: 'LEFT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '左振动报警', value: 'LEFT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '右断线报警', value: 'RIGHT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '右振动报警', value: 'RIGHT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '报警图像输出', value: 'PICTURE_ALARM', align: 'center' },
+  { text: '采集时间', value: 'LOGTIME', align: 'center' },
+  { text: '上传时间', value: 'UPTIME', align: 'center' },
+])
+const listQuery = ref({
+  devcode: '',
+  logBegTime: '',
+  logEndTime: '',
+  typeName: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+// 开始结束时间
+const datetimerange1 = ref()
+watch(() => datetimerange1.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const datetimerange2 = ref()
+watch(() => datetimerange2.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${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.devcode = $route.query.deviceCode as string
+  listQuery.value.typeName = $route.query.typeName as string
+  getMonitorData(listQuery.value).then((res) => {
+    list.value = res.data.map((item: any) => {
+      for (const i in item) {
+        if (i.includes('ALARM')) {
+          if (i === 'PICTURE_ALARM') {
+            item[i] = item[i] === '0' ? '/' : item[i]
+          }
+          else {
+            item[i] = item[i] === '0' ? '正常' : '报警'
+          }
+        }
+      }
+      return item
+    })
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange1.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  datetimerange2.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="datetimerange1" 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="datetimerange2" 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>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
+      :list-loading="loadingTable" :pagination="false"
+    />
+  </table-container>
+</template>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index 87da946..9ef5426 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -96,7 +96,6 @@
       startLng: item.START_LNG,
       endLat: item.END_LAT,
       endLng: item.END_LNG,
-
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -112,6 +111,8 @@
       pipeCode: item.PIPE_CODE,
       lat: item.LAT_GAODE,
       lng: item.LNG_GAODE,
+      id: item.LEDGER_ID,
+      status: item.ONLINE_STATE,
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -174,18 +175,46 @@
 }
 // 点击数据行
 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: '',
+    row: {
+      deviceTypeName: data.typeName,
+      tagNumber: data.tagNumber,
+      deviceCode: data.devcode,
+      pipeCode: data.pipeCode,
+      lat: data.latGaode,
+      lng: data.lngGaode,
+      id: data.id,
+      status: data.onLineStatus,
+    },
+  })
+  if (!data.pipeCode) {
+    return
+  }
+  // 关联的管线高亮
+  const line = pipeData.value.filter((item: any) => item.pipeCode === data.pipeCode)
+  if (line.length) {
+    if (!mapRef.value.mapRef.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.mapRef.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 // 查看/编辑
 const editRef = ref()
@@ -195,10 +224,18 @@
     editRef.value.initDialog(type, row)
     return
   }
+  console.log(row)
+  if (!row.devcode || !row.id) {
+    ElMessage.warning('暂无详情数据')
+    return
+  }
   $router.push({
-    path: `/pipeline/${type}`,
+    // path: `/monitor/${type}`,
+    name: 'PipelineMonitorDetail',
     query: {
       id: row.id,
+      deviceCode: row.devcode,
+      typeName: row.typeName,
     },
   })
 }
@@ -209,7 +246,10 @@
   <app-container class="container">
     <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" :pipe="pipeData" />
+    <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: 450px;" />
     <!-- 收起地图-图标 -->
@@ -305,7 +345,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
@@ -315,14 +355,14 @@
           </el-table-column>
         </template>
         <template #columns>
-          <el-table-column label="操作" align="center" width="120">
+          <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>
-              <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
+              <!-- <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
                 编辑
-              </el-button>
+              </el-button> -->
             </template>
           </el-table-column>
         </template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 54fd294..f44be1a 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -179,6 +179,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 907a91e..636cbad 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -255,7 +255,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index da0c022..5d33d05 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -207,6 +207,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
index efceca3..75c9130 100644
--- a/src/views/home/well/components/maintenanceRecord.vue
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -40,8 +40,8 @@
   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,
+      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
   }).catch(() => {

diff --git "a/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..0d52603
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.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-\345\274\202\345\270\270.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..2c6d173
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..e4cbca0
--- /dev/null
+++ "b/public/image/pipeline/\345\234\260\345\237\213\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..2fc70cd
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..8509380
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\345\274\202\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-\347\246\273\347\272\277.png" "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..61439e6
--- /dev/null
+++ "b/public/image/pipeline/\346\241\251\345\274\217\345\223\250\345\205\265-\347\246\273\347\272\277.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
new file mode 100644
index 0000000..6e9eabe
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\201\234\347\224\250.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
new file mode 100644
index 0000000..f0e50e5
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\345\274\202\345\270\270.png"
Binary files differ
diff --git "a/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png" "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..119ccdf
--- /dev/null
+++ "b/public/image/pipeline/\350\255\246\347\244\272\346\241\251-\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1402d02..01fedde 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -320,6 +320,7 @@
     console.log('点击了线')
     $emits('lineClick', { event: e, map: map.value, data, polyline })
   })
+  console.log(polyline, 'polyline')
   lineAllList.value.push(polyline)
   map.value.add([polyline])
 }
diff --git a/src/router/modules/pc.ts b/src/router/modules/pc.ts
index 45a1846..b6634ef 100644
--- a/src/router/modules/pc.ts
+++ b/src/router/modules/pc.ts
@@ -236,6 +236,19 @@
           auth: '/pipeline',
         },
       },
+      {
+        path: 'monitor/detail',
+        component: () => import('@/views/home/pipeline/components/detail.vue'),
+        name: 'PipelineMonitorDetail',
+        meta: {
+          title: '管线监测',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: false,
+          activeMenu: '/pipeline',
+          auth: '/pipeline',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/home/pipeline/components/detail.vue b/src/views/home/pipeline/components/detail.vue
new file mode 100644
index 0000000..fb0cc5b
--- /dev/null
+++ b/src/views/home/pipeline/components/detail.vue
@@ -0,0 +1,213 @@
+<!--
+  Description: 管线监测-详情
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<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 { getPipelineDetail } from '@/api/home/pipeline/pipeline'
+const $router = useRouter()
+const $route = useRoute()
+// 页面详情数据
+const detailInfo = ref<{ [key: string]: string }>({})
+// 描述列表数据
+const descriptionsList = ref([
+  {
+    text: '安装位号',
+    value: 'tagNumber',
+    align: 'center',
+  },
+  {
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '厂商',
+    value: 'manufactureName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '所在区域',
+    value: 'area',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '经度',
+    value: 'lngGaode',
+    align: 'center',
+  },
+  {
+    text: '纬度',
+    value: 'latGaode',
+    align: 'center',
+  },
+  {
+    text: '关联管线',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管线材质',
+    value: 'material',
+    align: 'center',
+  },
+  // {
+  //   text: '负责人',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  // {
+  //   text: '负责人联系方式',
+  //   value: 'marker',
+  //   align: 'center',
+  // },
+  {
+    text: '设备使用状态',
+    value: 'onState',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    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
+  getPipelineDetail({
+    id: $route.query.id,
+    devcode: $route.query.deviceCode,
+  }).then((res) => {
+    detailInfo.value = res.data
+    loading.value = false
+    console.log(res.data, '123123123')
+    if (res.data.typeName === '智能警示桩' || res.data.typeName === '燃气监测桩') {
+      descriptionsList.value.push({
+        text: '左侧指示带长度',
+        value: 'leftLength',
+        align: 'center',
+      })
+      descriptionsList.value.push({
+        text: '右侧指示带长度',
+        value: 'rightLength',
+        align: 'center',
+      })
+    }
+  }).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/pipeline/components/detailData.vue b/src/views/home/pipeline/components/detailData.vue
new file mode 100644
index 0000000..80b6886
--- /dev/null
+++ b/src/views/home/pipeline/components/detailData.vue
@@ -0,0 +1,25 @@
+<!--
+  Description: 管线监测-详情数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailData">
+import type { TabsPaneContext } from 'element-plus'
+import monitorData from './monitorDataList.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="监控设备维护记录">
+      <maintenance-record v-if="activeName === '监控设备维护记录'" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
diff --git a/src/views/home/pipeline/components/detailInfoDialog.vue b/src/views/home/pipeline/components/detailInfoDialog.vue
index 41a546b..31f5635 100644
--- a/src/views/home/pipeline/components/detailInfoDialog.vue
+++ b/src/views/home/pipeline/components/detailInfoDialog.vue
@@ -4,6 +4,7 @@
   Date: 2024-07-18
  -->
 <script lang="ts" setup name="infoWindow">
+import { getPipelineDetail } from '@/api/home/pipeline/pipeline'
 const dialogFormVisible = ref(false)
 const overlay = ref()
 const infoWindow = ref()
@@ -12,6 +13,7 @@
   deviceTypeName: '', // 场站编号
   deviceCode: '', // 场站名称
 })
+const loading = ref(true)
 // 详细信息
 const detailInfo = ref<{ [key: string]: string }>({})
 // 描述列表数据
@@ -22,55 +24,60 @@
     align: 'center',
   },
   {
-    text: '管线编号',
+    text: '设备编号',
+    value: 'devcode',
+    align: 'center',
+  },
+  {
+    text: '设备类型',
+    value: 'typeName',
+    align: 'center',
+  },
+  {
+    text: '设备型号',
+    value: 'modelName',
+    align: 'center',
+  },
+  {
+    text: '管理单位',
+    value: 'deptName',
+    align: 'center',
+  },
+  {
+    text: '详细位置',
+    value: 'position',
+    align: 'center',
+  },
+  {
+    text: '管理方式',
+    value: 'manageType',
+    align: 'center',
+  },
+  {
+    text: '压力级制',
+    value: 'pressType',
+    align: 'center',
+  },
+  {
+    text: '建设年代',
+    value: 'constructEra',
+    align: 'center',
+  },
+  {
+    text: '管径(mm)',
+    value: 'pipeDiameter',
+    align: 'center',
+  },
+  {
+    text: '设备运行状态',
+    value: 'status',
+    align: 'center',
+  },
+  {
+    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',
-  // },
 ])
 // 初始化
 const initDialog = (e: any) => {
@@ -84,6 +91,16 @@
   }
   // 获取详细信息
   detailInfo.value = e.info.row
+  loading.value = true
+  getPipelineDetail({
+    id: e.info.row.id,
+    devcode: e.info.row.deviceCode,
+  }).then((res) => {
+    loading.value = false
+    detailInfo.value = res.data
+  }).catch(() => {
+    loading.value = false
+  })
 }
 
 // 关闭
@@ -106,7 +123,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">
@@ -158,6 +175,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 5c72f95..662d4c7 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -63,17 +63,41 @@
 const drawMarker = () => {
   const style = [
     {
+      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/pipeline/地埋式哨兵-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
+    {
+      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/pipeline/警示桩-正常.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, // 每种样式图标的叠加顺序，数字越大越靠前
+    },
     // {
     //   url: `${publicPath}/image/pipeline/场站-离线.png`, // 图标地址
     //   anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
@@ -81,15 +105,18 @@
     //   zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
     // },
   ]
-  // （0：未监控，1：正常，2：异常，3：离线）
   const styleDict = {
-    管网哨兵: 0,
-    智能警示桩: 1,
+    '管网哨兵-0': 0,
+    '管网哨兵-1': 1,
+    '管网哨兵-2': 2,
+    '智能警示桩-0': 3,
+    '智能警示桩-1': 4,
+    '智能警示桩-2': 5,
   } as { [key: string]: number }
-  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName).map((item: any) => ({
+  const data = $props.data.filter((item: any) => legendShowData.value.includes(item.deviceTypeName)).filter((item: any) => item.lng && item.lat && item.deviceTypeName && item.status).map((item: any) => ({
     lnglat: [item.lng, item.lat],
     name: item.deviceTypeName,
-    style: styleDict[item.deviceTypeName] || 0,
+    style: styleDict[`${item.deviceTypeName}-${item.status}`] || 0,
     id: item.deviceCode,
     row: item,
   }))
@@ -116,8 +143,8 @@
     mapRef.value.addPolyline({
       path: [[item.startLng, item.startLat], [item.endLng, item.endLat]],
       style: {
-        strokeColor: '#BAAF04',
-        strokeWeight: 4,
+        strokeColor: '#E80D0D',
+        strokeWeight: 2,
         strokeStyle: 'solid',
         zIndex: 95,
       },
@@ -151,6 +178,24 @@
     // mapRef.value.map.setFitView()
     mapRef.value.map.setCenter(data.event.data.lnglat)
   })
+  // 关联的管线高亮
+  const line = $props.pipe.filter((item: any) => item.pipeCode === data.event.data.row.pipeCode)
+  console.log(line, 'line')
+  if (line.length) {
+    if (!mapRef.value.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    console.log(link, 'link')
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 
 // 打开信息窗体
@@ -211,7 +256,7 @@
   // 绘制线
   resetDrawLine()
 }
-defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine })
+defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
 
 <template>
diff --git a/src/views/home/pipeline/components/monitorDataList.vue b/src/views/home/pipeline/components/monitorDataList.vue
new file mode 100644
index 0000000..3158dd9
--- /dev/null
+++ b/src/views/home/pipeline/components/monitorDataList.vue
@@ -0,0 +1,135 @@
+<!--
+  Description: 管线监测-详情数据-监控数据
+  Author: 李亚光
+  Date: 2023-09-09
+ -->
+<script lang="ts" setup name="WellDetailMonitorDataGasList">
+import dayjs from 'dayjs'
+import { getMonitorData } from '@/api/home/pipeline/pipeline'
+const $route = useRoute()
+// 列表loading
+const loadingTable = ref(true)
+//  列表展示数据
+const list = ref([])
+//  列表展示列
+const columns = ref<any>([
+  { text: '地层温度(℃)', value: 'TEMPERATURE', align: 'center', width: '110' },
+  { text: '地层湿度(%RH)', value: 'HUMIDITY', align: 'center', width: '140' },
+  { text: '电池电压(V)', value: 'VBAT', align: 'center', width: '110' },
+  { text: '桩倾斜报警', value: 'PIPE_INCLINE_ALARM', align: 'center', width: '110' },
+  { text: '桩拆卸报警', value: 'PIPE_BREAK_ALARM', align: 'center', width: '110' },
+  { text: '左断线报警', value: 'LEFT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '左振动报警', value: 'LEFT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '右断线报警', value: 'RIGHT_OFF_LINE_ALARM', align: 'center', width: '110' },
+  { text: '右振动报警', value: 'RIGHT_VIBRATE_ALARM', align: 'center', width: '110' },
+  { text: '报警图像输出', value: 'PICTURE_ALARM', align: 'center' },
+  { text: '采集时间', value: 'LOGTIME', align: 'center' },
+  { text: '上传时间', value: 'UPTIME', align: 'center' },
+])
+const listQuery = ref({
+  devcode: '',
+  logBegTime: '',
+  logEndTime: '',
+  typeName: '',
+  upBegTime: '',
+  upEndTime: '',
+})
+// 开始结束时间
+const datetimerange1 = ref()
+watch(() => datetimerange1.value, (newVal) => {
+  listQuery.value.upBegTime = ''
+  listQuery.value.upEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.upBegTime = `${newVal[0]}`
+      listQuery.value.upEndTime = `${newVal[1]}`
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+const datetimerange2 = ref()
+watch(() => datetimerange2.value, (newVal) => {
+  listQuery.value.logBegTime = ''
+  listQuery.value.logEndTime = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      listQuery.value.logBegTime = `${newVal[0]}`
+      listQuery.value.logEndTime = `${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.devcode = $route.query.deviceCode as string
+  listQuery.value.typeName = $route.query.typeName as string
+  getMonitorData(listQuery.value).then((res) => {
+    list.value = res.data.map((item: any) => {
+      for (const i in item) {
+        if (i.includes('ALARM')) {
+          if (i === 'PICTURE_ALARM') {
+            item[i] = item[i] === '0' ? '/' : item[i]
+          }
+          else {
+            item[i] = item[i] === '0' ? '正常' : '报警'
+          }
+        }
+      }
+      return item
+    })
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+onMounted(() => {
+  datetimerange1.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  datetimerange2.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="datetimerange1" 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="datetimerange2" 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>
+    </template>
+    <normal-table
+      v-show="isShowTable" :data="list" :total="0" :columns="columns" :query="{}"
+      :list-loading="loadingTable" :pagination="false"
+    />
+  </table-container>
+</template>
diff --git a/src/views/home/pipeline/index.vue b/src/views/home/pipeline/index.vue
index 87da946..9ef5426 100644
--- a/src/views/home/pipeline/index.vue
+++ b/src/views/home/pipeline/index.vue
@@ -96,7 +96,6 @@
       startLng: item.START_LNG,
       endLat: item.END_LAT,
       endLng: item.END_LNG,
-
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -112,6 +111,8 @@
       pipeCode: item.PIPE_CODE,
       lat: item.LAT_GAODE,
       lng: item.LNG_GAODE,
+      id: item.LEDGER_ID,
+      status: item.ONLINE_STATE,
     }))
     setTimeout(() => {
       if (tableFlag.value === 'map') {
@@ -174,18 +175,46 @@
 }
 // 点击数据行
 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: '',
+    row: {
+      deviceTypeName: data.typeName,
+      tagNumber: data.tagNumber,
+      deviceCode: data.devcode,
+      pipeCode: data.pipeCode,
+      lat: data.latGaode,
+      lng: data.lngGaode,
+      id: data.id,
+      status: data.onLineStatus,
+    },
+  })
+  if (!data.pipeCode) {
+    return
+  }
+  // 关联的管线高亮
+  const line = pipeData.value.filter((item: any) => item.pipeCode === data.pipeCode)
+  if (line.length) {
+    if (!mapRef.value.mapRef.lineAllList.length) {
+      return
+    }
+    const link = mapRef.value.mapRef.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
+    if (link.length) {
+      link.forEach((element: any) => {
+        element.setOptions({
+          strokeColor: '#34A0E8',
+          strokeWeight: 4,
+        })
+      })
+    }
+  }
 }
 // 查看/编辑
 const editRef = ref()
@@ -195,10 +224,18 @@
     editRef.value.initDialog(type, row)
     return
   }
+  console.log(row)
+  if (!row.devcode || !row.id) {
+    ElMessage.warning('暂无详情数据')
+    return
+  }
   $router.push({
-    path: `/pipeline/${type}`,
+    // path: `/monitor/${type}`,
+    name: 'PipelineMonitorDetail',
     query: {
       id: row.id,
+      deviceCode: row.devcode,
+      typeName: row.typeName,
     },
   })
 }
@@ -209,7 +246,10 @@
   <app-container class="container">
     <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 地图 -->
-    <map-com v-if="tableFlag === 'map'" ref="mapRef" v-loading="mapLoading" class="map" :height="450" :data="mapList" :pipe="pipeData" />
+    <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: 450px;" />
     <!-- 收起地图-图标 -->
@@ -305,7 +345,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
@@ -315,14 +355,14 @@
           </el-table-column>
         </template>
         <template #columns>
-          <el-table-column label="操作" align="center" width="120">
+          <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>
-              <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
+              <!-- <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
                 编辑
-              </el-button>
+              </el-button> -->
             </template>
           </el-table-column>
         </template>
diff --git a/src/views/home/station/station/components/detailInfoDialog.vue b/src/views/home/station/station/components/detailInfoDialog.vue
index 54fd294..f44be1a 100644
--- a/src/views/home/station/station/components/detailInfoDialog.vue
+++ b/src/views/home/station/station/components/detailInfoDialog.vue
@@ -179,6 +179,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/station/station/index.vue b/src/views/home/station/station/index.vue
index 907a91e..636cbad 100644
--- a/src/views/home/station/station/index.vue
+++ b/src/views/home/station/station/index.vue
@@ -255,7 +255,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <el-table-column label="序号" width="75" align="center">
diff --git a/src/views/home/well/components/detailInfoDialog.vue b/src/views/home/well/components/detailInfoDialog.vue
index da0c022..5d33d05 100644
--- a/src/views/home/well/components/detailInfoDialog.vue
+++ b/src/views/home/well/components/detailInfoDialog.vue
@@ -207,6 +207,8 @@
       color: #4875a0;
       font-size: 22px;
       font-weight: 700;
+      text-align: right;
+      padding-right: 10px;
 
       &:hover {
         cursor: pointer;
diff --git a/src/views/home/well/components/maintenanceRecord.vue b/src/views/home/well/components/maintenanceRecord.vue
index efceca3..75c9130 100644
--- a/src/views/home/well/components/maintenanceRecord.vue
+++ b/src/views/home/well/components/maintenanceRecord.vue
@@ -40,8 +40,8 @@
   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,
+      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
   }).catch(() => {
diff --git a/src/views/home/well/index.vue b/src/views/home/well/index.vue
index 3ad46fc..f9294e5 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -296,7 +296,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table
         :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
-        @change="changePage" @rowClick="rowClick"
+        @change="changePage" @rowDbClick="rowClick"
       >
         <template #preColumns>
           <!-- <el-table-column label="选择" width="55" align="center">