diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_03.png b/src/assets/qiaoliangImg/qljk_03.png
new file mode 100644
index 0000000..3acbba0
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_03.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_03.png b/src/assets/qiaoliangImg/qljk_03.png
new file mode 100644
index 0000000..3acbba0
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_03.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_04.png b/src/assets/qiaoliangImg/qljk_04.png
new file mode 100644
index 0000000..32ac99b
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_04.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_03.png b/src/assets/qiaoliangImg/qljk_03.png
new file mode 100644
index 0000000..3acbba0
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_03.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_04.png b/src/assets/qiaoliangImg/qljk_04.png
new file mode 100644
index 0000000..32ac99b
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_04.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/sxj.png b/src/assets/qiaoliangImg/sxj.png
new file mode 100644
index 0000000..fba004b
--- /dev/null
+++ b/src/assets/qiaoliangImg/sxj.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_03.png b/src/assets/qiaoliangImg/qljk_03.png
new file mode 100644
index 0000000..3acbba0
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_03.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_04.png b/src/assets/qiaoliangImg/qljk_04.png
new file mode 100644
index 0000000..32ac99b
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_04.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/sxj.png b/src/assets/qiaoliangImg/sxj.png
new file mode 100644
index 0000000..fba004b
--- /dev/null
+++ b/src/assets/qiaoliangImg/sxj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/wdj.png b/src/assets/qiaoliangImg/wdj.png
new file mode 100644
index 0000000..70cb80b
--- /dev/null
+++ b/src/assets/qiaoliangImg/wdj.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_03.png b/src/assets/qiaoliangImg/qljk_03.png
new file mode 100644
index 0000000..3acbba0
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_03.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_04.png b/src/assets/qiaoliangImg/qljk_04.png
new file mode 100644
index 0000000..32ac99b
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_04.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/sxj.png b/src/assets/qiaoliangImg/sxj.png
new file mode 100644
index 0000000..fba004b
--- /dev/null
+++ b/src/assets/qiaoliangImg/sxj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/wdj.png b/src/assets/qiaoliangImg/wdj.png
new file mode 100644
index 0000000..70cb80b
--- /dev/null
+++ b/src/assets/qiaoliangImg/wdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/ybj.png b/src/assets/qiaoliangImg/ybj.png
new file mode 100644
index 0000000..84d70ca
--- /dev/null
+++ b/src/assets/qiaoliangImg/ybj.png
Binary files differ

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_03.png b/src/assets/qiaoliangImg/qljk_03.png
new file mode 100644
index 0000000..3acbba0
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_03.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_04.png b/src/assets/qiaoliangImg/qljk_04.png
new file mode 100644
index 0000000..32ac99b
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_04.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/sxj.png b/src/assets/qiaoliangImg/sxj.png
new file mode 100644
index 0000000..fba004b
--- /dev/null
+++ b/src/assets/qiaoliangImg/sxj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/wdj.png b/src/assets/qiaoliangImg/wdj.png
new file mode 100644
index 0000000..70cb80b
--- /dev/null
+++ b/src/assets/qiaoliangImg/wdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/ybj.png b/src/assets/qiaoliangImg/ybj.png
new file mode 100644
index 0000000..84d70ca
--- /dev/null
+++ b/src/assets/qiaoliangImg/ybj.png
Binary files differ
diff --git a/src/views/oneMap/BIM/Tunnel.vue b/src/views/oneMap/BIM/Tunnel.vue
index 273656c..897f9f2 100644
--- a/src/views/oneMap/BIM/Tunnel.vue
+++ b/src/views/oneMap/BIM/Tunnel.vue
@@ -1,24 +1,35 @@
 <template>
-  <div id="Tunnel" ref="threeDom"></div>
+  <div id="Tunnel" ref="threeDom">
+    <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
+      <div class="iconBox" v-show="show == item.id">
+        <img src="@/assets/images/ljx.png" alt="" class="iconImg" />
+        <div class="ydBox">
+          <div class="YuanDianText">{{ item.name }}</div>
+          <div class="ydData" v-for="(val, k) in item.data" :key="k">
+            <div class="leftData">{{ val.name + ':' }}</div>
+            <div class="rightData">{{ val.value + ' ' + val.unit }}</div>
+          </div>
+        </div>
+      </div>
+      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+    </div>
+  </div>
 </template>
 
 <script setup name="Tunnel">
-import { ref, reactive, toRefs, onMounted } from "vue";
-import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
-import { Water } from "three/examples/jsm/objects/Water.js";
+import { ref, reactive, toRefs, onMounted } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { Water } from 'three/examples/jsm/objects/Water.js';
 
-import {
-  CSS3DRenderer,
-  CSS3DObject,
-} from "three/examples/jsm/renderers/CSS3DRenderer.js";
-import gsap from "gsap";
-import { CSSRulePlugin } from "gsap/CSSRulePlugin";
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
 
-const show = ref("");
+const show = ref('');
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -30,192 +41,137 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: "风速风向仪",
+    name: '静力水准仪',
     id: `YuanDian1`,
     position: {
-      x: 0,
-      y: 0,
-      z: 2.5,
+      x: -1390,
+      y: 65,
+      z: -70,
     },
-    icon: "/Three/icon/fsfx_icon.png",
+    icon: '/Three/icon/jlszy_icon.png',
     data: [
       {
-        name: "方向",
-        value: "东北风",
-        unit: "",
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
       },
       {
-        name: "风速",
-        value: "1.3",
-        unit: "m/s",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "静力水准仪",
+    name: '静力水准仪',
     id: `YuanDian2`,
     position: {
-      x: -46,
-      y: 0,
-      z: 2.5,
+      x: -1080,
+      y: 65,
+      z: -80,
     },
-    icon: "/Three/icon/jlszy_icon.png",
+    icon: '/Three/icon/jlszy_icon.png',
     data: [
       {
-        name: "挠度变化值",
-        value: "-0.01",
-        unit: "mm",
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "静力水准仪",
+    name: '激光位移计',
     id: `YuanDian3`,
     position: {
-      x: -46,
-      y: 0,
-      z: -12.6,
-    },
-    icon: "/Three/icon/jlszy_icon.png",
-    data: [
-      {
-        name: "挠度变化值",
-        value: "-0.01",
-        unit: "mm",
-      },
-      {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
-      },
-    ],
-  },
-  {
-    name: "应变计",
-    id: `YuanDian4`,
-    position: {
-      x: 0,
-      y: 7.5,
+      x: -400,
+      y: 80,
       z: 0,
     },
-    icon: "/Three/icon/ybj_icon.png",
+    icon: '/Three/icon/wyj_mx.png',
     data: [
       {
-        name: "应变量",
-        value: "17",
-        unit: "με",
+        name: '应变量',
+        value: '17',
+        unit: 'με',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "应变计",
+    name: '激光位移计',
+    id: `YuanDian4`,
+    position: {
+      x: -400,
+      y: 80,
+      z: -200,
+    },
+    icon: '/Three/icon/wyj_mx.png',
+    data: [
+      {
+        name: '应变量',
+        value: '17',
+        unit: 'με',
+      },
+      {
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
+      },
+    ],
+  },
+  {
+    name: '应变计',
     id: `YuanDian5`,
     position: {
-      x: 0,
-      y: 7.5,
-      z: -10,
+      x: -1380,
+      y: 80,
+      z: 0,
     },
-    icon: "/Three/icon/ybj_icon.png",
+    icon: '/Three/icon/ybj_icon.png',
     data: [
       {
-        name: "应变量",
-        value: "17",
-        unit: "με",
+        name: '应变量',
+        value: '17',
+        unit: 'με',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "加速度计",
+    name: '裂缝计',
     id: `YuanDian6`,
     position: {
-      x: 0,
-      y: 0,
-      z: -5,
+      x: -1350,
+      y: 80,
+      z: 0,
     },
-    icon: "/Three/icon/jsdj_icon.png",
+    icon: '/Three/icon/lfj_mx.png',
     data: [
       {
-        name: "加速度",
-        value: "1.42",
-        unit: "mm/s2",
+        name: '绝对沉降',
+        value: '2.67',
+        unit: 'mm',
       },
       {
-        name: "风速",
-        value: "1.3",
-        unit: "m/s",
+        name: '相对沉降',
+        value: '2.96',
+        unit: 'mm',
       },
     ],
   },
-  // {
-  //   name: '风速风向仪',
-  //   id: `YuanDian1`,
-  //   position: {
-  //     x: 0,
-  //     y: 1,
-  //     z: 2.5,
-  //   },
-  //   OnSrc: '/Three/icon/BJ_On.png',
-  //   OffSrc: '/Three/icon/BJ_Off.png',
-  //   icon: '/Three/icon/fsfx_icon.png',
-  //   status: false,
-  //   boxShow: true,
-  //   value1: '--',
-  //   value2: '--',
-  //   value3: '--',
-  //   deviceCode: '',
-  //   stCode: 'HP0104201130000469',
-  // },
-  // {
-  //   name: "二号泵机",
-  //   id: `YuanDian2`,
-  //   position: {
-  //     x: 3,
-  //     y: 230,
-  //     z: -180,
-  //   },
-  //   OnSrc: "/Three/icon/BJ_On.png",
-  //   OffSrc: "/Three/icon/BJ_Off.png",
-  //   status: false,
-  //   boxShow: true,
-  //   value1: "--",
-  //   value2: "--",
-  //   value3: "--",
-  //   deviceCode: "",
-  //   stCode: "HP0104201130000469",
-  // },
-  // {
-  //   name: "三号泵机",
-  //   id: `YuanDian3`,
-  //   position: {
-  //     x: 195,
-  //     y: 230,
-  //     z: -180,
-  //   },
-  //   OnSrc: "/Three/icon/BJ_On.png",
-  //   OffSrc: "/Three/icon/BJ_Off.png",
-  //   status: false,
-  //   boxShow: true,
-  //   value1: "--",
-  //   value2: "--",
-  //   value3: "--",
-  //   deviceCode: "",
-  //   stCode: "HP0104201130000469",
-  // },
 ]);
 const deviceCode = ref(null);
 const stCode = ref(null);
@@ -251,11 +207,11 @@
   const Gltfloader = new GLTFLoader();
   var dracoLoader = new DRACOLoader();
   // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
-  dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
+  dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
   Gltfloader.setDRACOLoader(dracoLoader);
   Gltfloader.load(
     url,
-    (gltf) => {
+    gltf => {
       gltf.scene.name = name;
       gltf.scene.scale.set(1, 1, 1);
       // gltf.scene.position.x = -70;
@@ -293,7 +249,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -307,7 +263,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
 };
 
@@ -316,8 +272,8 @@
  * 该函数负责创建和配置Three.js的WebGL渲染器，包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
  */
 const initRenderer = () => {
-  width.value = document.getElementById("Tunnel").clientWidth;
-  height.value = document.getElementById("Tunnel").clientHeight;
+  width.value = document.getElementById('Tunnel').clientWidth;
+  height.value = document.getElementById('Tunnel').clientHeight;
   Renderer.value = new THREE.WebGLRenderer({
     antialias: true,
     // alpha: true, //开启alpha
@@ -338,8 +294,8 @@
 const initLabelRenderer = () => {
   LabelRenderer.value = new CSS3DRenderer();
   LabelRenderer.value.setSize(width.value, height.value);
-  LabelRenderer.value.domElement.style.position = "absolute";
-  LabelRenderer.value.domElement.style.top = "0px";
+  LabelRenderer.value.domElement.style.position = 'absolute';
+  LabelRenderer.value.domElement.style.top = '0px';
   threeDom.value.appendChild(LabelRenderer.value.domElement);
   // LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
 };
@@ -349,12 +305,7 @@
  * 创建一个透视摄像机，并设置其位置
  */
 const initCamera = () => {
-  Camera.value = new THREE.PerspectiveCamera(
-    45,
-    window.innerWidth / window.innerHeight,
-    1,
-    4000
-  );
+  Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
   Camera.value.position.set(500, 500, 500);
 };
 
@@ -426,7 +377,7 @@
 const initSky = () => {
   var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
   pmremGenerator.compileEquirectangularShader();
-  new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
+  new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
     const envMap = pmremGenerator.fromEquirectangular(texture).texture;
     envMap.isPmremTexture = true;
     Scene.environment = envMap;
@@ -459,10 +410,11 @@
     let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
     if (labelCSS3D === undefined) {
       let lableDiv = document.getElementById(`YuanDian${index + 1}`);
-      lableDiv.style.display = "block";
+      lableDiv.style.display = 'block';
       labelCSS3D = new CSS3DObject(lableDiv);
       labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
-      labelCSS3D.scale.set(0.1, 0.1, 0.1);
+      // labelCSS3D.scale.set(0.1, 0.1, 0.1);
+      labelCSS3D.scale.set(3, 3, 3);
       labelCSS3D.name = `YuanDian${index + 1}`;
       // labelCSS3D.rotation.y = - Math.PI / 6; // 30度转换为弧度
       Scene.add(labelCSS3D);
@@ -490,12 +442,12 @@
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal("yjlSD", "/Gltf/yjlSD.gltf");
+  initModal('yjlSD', '/Gltf/yjlSD.gltf');
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === "complete") {
-      // createLable();
+    if (document.readyState === 'complete') {
+      createLable();
       // createWaterLevel();
     }
   });
@@ -505,7 +457,7 @@
   initControls();
   initLight();
   initSky();
-  // createLable();
+  createLable();
   // LoadWater();
   Render();
 });
@@ -514,11 +466,11 @@
   // document.removeEventListener('click', meshOnClick);
   // window.removeEventListener("resize", onWindowResize, false);
 
-  Scene.traverse((e) => {
+  Scene.traverse(e => {
     if (e.BufferGeometry) e.BufferGeometry.dispose();
     if (e.material) {
       if (Array.isArray(e.material)) {
-        e.material.forEach((m) => {
+        e.material.forEach(m => {
           m.dispose();
         });
       } else {
@@ -545,5 +497,75 @@
 #Tunnel {
   width: 100%;
   height: 100%;
+
+  .YuanDian {
+    // z-index: 9999;
+    position: relative;
+    // min-height: 20px;
+    .iconBox {
+      position: relative;
+      // border: 1px solid red;
+    }
+    .iconImg {
+      position: absolute;
+      left: 50%;
+      // transform: translateX(-50%);
+      bottom: 5px;
+      width: 19px;
+      height: 12px;
+    }
+    .ydBox {
+      z-index: 999999;
+      // width: 134px;
+      // height: 70px;
+      position: absolute;
+      left: calc(50% + 19px);
+      bottom: 12px;
+      width: 45px;
+      // height: 26px;
+      background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
+      border-radius: 2px;
+      border: 1px solid #04d8ff;
+      .ydData {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 3px;
+        font-size: 3px;
+        height: 7px;
+        line-height: 7px;
+        color: #04d8ff;
+        // .leftData {
+        // }
+        // .rightData {
+        // }
+      }
+    }
+    .YuanDianText {
+      // padding-bottom: 10px;
+      height: 7px;
+      line-height: 7px;
+      color: #fff;
+      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
+      white-space: nowrap;
+      word-break: keep-all;
+      // cursor: pointer;
+      pointer-events: none;
+      font-size: 3px;
+      text-align: center;
+      background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
+    }
+
+    .YuanDianIcon {
+      z-index: 999;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0;
+      pointer-events: auto;
+    }
+  }
 }
 </style>

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_03.png b/src/assets/qiaoliangImg/qljk_03.png
new file mode 100644
index 0000000..3acbba0
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_03.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_04.png b/src/assets/qiaoliangImg/qljk_04.png
new file mode 100644
index 0000000..32ac99b
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_04.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/sxj.png b/src/assets/qiaoliangImg/sxj.png
new file mode 100644
index 0000000..fba004b
--- /dev/null
+++ b/src/assets/qiaoliangImg/sxj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/wdj.png b/src/assets/qiaoliangImg/wdj.png
new file mode 100644
index 0000000..70cb80b
--- /dev/null
+++ b/src/assets/qiaoliangImg/wdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/ybj.png b/src/assets/qiaoliangImg/ybj.png
new file mode 100644
index 0000000..84d70ca
--- /dev/null
+++ b/src/assets/qiaoliangImg/ybj.png
Binary files differ
diff --git a/src/views/oneMap/BIM/Tunnel.vue b/src/views/oneMap/BIM/Tunnel.vue
index 273656c..897f9f2 100644
--- a/src/views/oneMap/BIM/Tunnel.vue
+++ b/src/views/oneMap/BIM/Tunnel.vue
@@ -1,24 +1,35 @@
 <template>
-  <div id="Tunnel" ref="threeDom"></div>
+  <div id="Tunnel" ref="threeDom">
+    <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
+      <div class="iconBox" v-show="show == item.id">
+        <img src="@/assets/images/ljx.png" alt="" class="iconImg" />
+        <div class="ydBox">
+          <div class="YuanDianText">{{ item.name }}</div>
+          <div class="ydData" v-for="(val, k) in item.data" :key="k">
+            <div class="leftData">{{ val.name + ':' }}</div>
+            <div class="rightData">{{ val.value + ' ' + val.unit }}</div>
+          </div>
+        </div>
+      </div>
+      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+    </div>
+  </div>
 </template>
 
 <script setup name="Tunnel">
-import { ref, reactive, toRefs, onMounted } from "vue";
-import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
-import { Water } from "three/examples/jsm/objects/Water.js";
+import { ref, reactive, toRefs, onMounted } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { Water } from 'three/examples/jsm/objects/Water.js';
 
-import {
-  CSS3DRenderer,
-  CSS3DObject,
-} from "three/examples/jsm/renderers/CSS3DRenderer.js";
-import gsap from "gsap";
-import { CSSRulePlugin } from "gsap/CSSRulePlugin";
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
 
-const show = ref("");
+const show = ref('');
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -30,192 +41,137 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: "风速风向仪",
+    name: '静力水准仪',
     id: `YuanDian1`,
     position: {
-      x: 0,
-      y: 0,
-      z: 2.5,
+      x: -1390,
+      y: 65,
+      z: -70,
     },
-    icon: "/Three/icon/fsfx_icon.png",
+    icon: '/Three/icon/jlszy_icon.png',
     data: [
       {
-        name: "方向",
-        value: "东北风",
-        unit: "",
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
       },
       {
-        name: "风速",
-        value: "1.3",
-        unit: "m/s",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "静力水准仪",
+    name: '静力水准仪',
     id: `YuanDian2`,
     position: {
-      x: -46,
-      y: 0,
-      z: 2.5,
+      x: -1080,
+      y: 65,
+      z: -80,
     },
-    icon: "/Three/icon/jlszy_icon.png",
+    icon: '/Three/icon/jlszy_icon.png',
     data: [
       {
-        name: "挠度变化值",
-        value: "-0.01",
-        unit: "mm",
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "静力水准仪",
+    name: '激光位移计',
     id: `YuanDian3`,
     position: {
-      x: -46,
-      y: 0,
-      z: -12.6,
-    },
-    icon: "/Three/icon/jlszy_icon.png",
-    data: [
-      {
-        name: "挠度变化值",
-        value: "-0.01",
-        unit: "mm",
-      },
-      {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
-      },
-    ],
-  },
-  {
-    name: "应变计",
-    id: `YuanDian4`,
-    position: {
-      x: 0,
-      y: 7.5,
+      x: -400,
+      y: 80,
       z: 0,
     },
-    icon: "/Three/icon/ybj_icon.png",
+    icon: '/Three/icon/wyj_mx.png',
     data: [
       {
-        name: "应变量",
-        value: "17",
-        unit: "με",
+        name: '应变量',
+        value: '17',
+        unit: 'με',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "应变计",
+    name: '激光位移计',
+    id: `YuanDian4`,
+    position: {
+      x: -400,
+      y: 80,
+      z: -200,
+    },
+    icon: '/Three/icon/wyj_mx.png',
+    data: [
+      {
+        name: '应变量',
+        value: '17',
+        unit: 'με',
+      },
+      {
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
+      },
+    ],
+  },
+  {
+    name: '应变计',
     id: `YuanDian5`,
     position: {
-      x: 0,
-      y: 7.5,
-      z: -10,
+      x: -1380,
+      y: 80,
+      z: 0,
     },
-    icon: "/Three/icon/ybj_icon.png",
+    icon: '/Three/icon/ybj_icon.png',
     data: [
       {
-        name: "应变量",
-        value: "17",
-        unit: "με",
+        name: '应变量',
+        value: '17',
+        unit: 'με',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "加速度计",
+    name: '裂缝计',
     id: `YuanDian6`,
     position: {
-      x: 0,
-      y: 0,
-      z: -5,
+      x: -1350,
+      y: 80,
+      z: 0,
     },
-    icon: "/Three/icon/jsdj_icon.png",
+    icon: '/Three/icon/lfj_mx.png',
     data: [
       {
-        name: "加速度",
-        value: "1.42",
-        unit: "mm/s2",
+        name: '绝对沉降',
+        value: '2.67',
+        unit: 'mm',
       },
       {
-        name: "风速",
-        value: "1.3",
-        unit: "m/s",
+        name: '相对沉降',
+        value: '2.96',
+        unit: 'mm',
       },
     ],
   },
-  // {
-  //   name: '风速风向仪',
-  //   id: `YuanDian1`,
-  //   position: {
-  //     x: 0,
-  //     y: 1,
-  //     z: 2.5,
-  //   },
-  //   OnSrc: '/Three/icon/BJ_On.png',
-  //   OffSrc: '/Three/icon/BJ_Off.png',
-  //   icon: '/Three/icon/fsfx_icon.png',
-  //   status: false,
-  //   boxShow: true,
-  //   value1: '--',
-  //   value2: '--',
-  //   value3: '--',
-  //   deviceCode: '',
-  //   stCode: 'HP0104201130000469',
-  // },
-  // {
-  //   name: "二号泵机",
-  //   id: `YuanDian2`,
-  //   position: {
-  //     x: 3,
-  //     y: 230,
-  //     z: -180,
-  //   },
-  //   OnSrc: "/Three/icon/BJ_On.png",
-  //   OffSrc: "/Three/icon/BJ_Off.png",
-  //   status: false,
-  //   boxShow: true,
-  //   value1: "--",
-  //   value2: "--",
-  //   value3: "--",
-  //   deviceCode: "",
-  //   stCode: "HP0104201130000469",
-  // },
-  // {
-  //   name: "三号泵机",
-  //   id: `YuanDian3`,
-  //   position: {
-  //     x: 195,
-  //     y: 230,
-  //     z: -180,
-  //   },
-  //   OnSrc: "/Three/icon/BJ_On.png",
-  //   OffSrc: "/Three/icon/BJ_Off.png",
-  //   status: false,
-  //   boxShow: true,
-  //   value1: "--",
-  //   value2: "--",
-  //   value3: "--",
-  //   deviceCode: "",
-  //   stCode: "HP0104201130000469",
-  // },
 ]);
 const deviceCode = ref(null);
 const stCode = ref(null);
@@ -251,11 +207,11 @@
   const Gltfloader = new GLTFLoader();
   var dracoLoader = new DRACOLoader();
   // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
-  dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
+  dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
   Gltfloader.setDRACOLoader(dracoLoader);
   Gltfloader.load(
     url,
-    (gltf) => {
+    gltf => {
       gltf.scene.name = name;
       gltf.scene.scale.set(1, 1, 1);
       // gltf.scene.position.x = -70;
@@ -293,7 +249,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -307,7 +263,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
 };
 
@@ -316,8 +272,8 @@
  * 该函数负责创建和配置Three.js的WebGL渲染器，包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
  */
 const initRenderer = () => {
-  width.value = document.getElementById("Tunnel").clientWidth;
-  height.value = document.getElementById("Tunnel").clientHeight;
+  width.value = document.getElementById('Tunnel').clientWidth;
+  height.value = document.getElementById('Tunnel').clientHeight;
   Renderer.value = new THREE.WebGLRenderer({
     antialias: true,
     // alpha: true, //开启alpha
@@ -338,8 +294,8 @@
 const initLabelRenderer = () => {
   LabelRenderer.value = new CSS3DRenderer();
   LabelRenderer.value.setSize(width.value, height.value);
-  LabelRenderer.value.domElement.style.position = "absolute";
-  LabelRenderer.value.domElement.style.top = "0px";
+  LabelRenderer.value.domElement.style.position = 'absolute';
+  LabelRenderer.value.domElement.style.top = '0px';
   threeDom.value.appendChild(LabelRenderer.value.domElement);
   // LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
 };
@@ -349,12 +305,7 @@
  * 创建一个透视摄像机，并设置其位置
  */
 const initCamera = () => {
-  Camera.value = new THREE.PerspectiveCamera(
-    45,
-    window.innerWidth / window.innerHeight,
-    1,
-    4000
-  );
+  Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
   Camera.value.position.set(500, 500, 500);
 };
 
@@ -426,7 +377,7 @@
 const initSky = () => {
   var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
   pmremGenerator.compileEquirectangularShader();
-  new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
+  new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
     const envMap = pmremGenerator.fromEquirectangular(texture).texture;
     envMap.isPmremTexture = true;
     Scene.environment = envMap;
@@ -459,10 +410,11 @@
     let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
     if (labelCSS3D === undefined) {
       let lableDiv = document.getElementById(`YuanDian${index + 1}`);
-      lableDiv.style.display = "block";
+      lableDiv.style.display = 'block';
       labelCSS3D = new CSS3DObject(lableDiv);
       labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
-      labelCSS3D.scale.set(0.1, 0.1, 0.1);
+      // labelCSS3D.scale.set(0.1, 0.1, 0.1);
+      labelCSS3D.scale.set(3, 3, 3);
       labelCSS3D.name = `YuanDian${index + 1}`;
       // labelCSS3D.rotation.y = - Math.PI / 6; // 30度转换为弧度
       Scene.add(labelCSS3D);
@@ -490,12 +442,12 @@
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal("yjlSD", "/Gltf/yjlSD.gltf");
+  initModal('yjlSD', '/Gltf/yjlSD.gltf');
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === "complete") {
-      // createLable();
+    if (document.readyState === 'complete') {
+      createLable();
       // createWaterLevel();
     }
   });
@@ -505,7 +457,7 @@
   initControls();
   initLight();
   initSky();
-  // createLable();
+  createLable();
   // LoadWater();
   Render();
 });
@@ -514,11 +466,11 @@
   // document.removeEventListener('click', meshOnClick);
   // window.removeEventListener("resize", onWindowResize, false);
 
-  Scene.traverse((e) => {
+  Scene.traverse(e => {
     if (e.BufferGeometry) e.BufferGeometry.dispose();
     if (e.material) {
       if (Array.isArray(e.material)) {
-        e.material.forEach((m) => {
+        e.material.forEach(m => {
           m.dispose();
         });
       } else {
@@ -545,5 +497,75 @@
 #Tunnel {
   width: 100%;
   height: 100%;
+
+  .YuanDian {
+    // z-index: 9999;
+    position: relative;
+    // min-height: 20px;
+    .iconBox {
+      position: relative;
+      // border: 1px solid red;
+    }
+    .iconImg {
+      position: absolute;
+      left: 50%;
+      // transform: translateX(-50%);
+      bottom: 5px;
+      width: 19px;
+      height: 12px;
+    }
+    .ydBox {
+      z-index: 999999;
+      // width: 134px;
+      // height: 70px;
+      position: absolute;
+      left: calc(50% + 19px);
+      bottom: 12px;
+      width: 45px;
+      // height: 26px;
+      background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
+      border-radius: 2px;
+      border: 1px solid #04d8ff;
+      .ydData {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 3px;
+        font-size: 3px;
+        height: 7px;
+        line-height: 7px;
+        color: #04d8ff;
+        // .leftData {
+        // }
+        // .rightData {
+        // }
+      }
+    }
+    .YuanDianText {
+      // padding-bottom: 10px;
+      height: 7px;
+      line-height: 7px;
+      color: #fff;
+      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
+      white-space: nowrap;
+      word-break: keep-all;
+      // cursor: pointer;
+      pointer-events: none;
+      font-size: 3px;
+      text-align: center;
+      background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
+    }
+
+    .YuanDianIcon {
+      z-index: 999;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0;
+      pointer-events: auto;
+    }
+  }
 }
 </style>
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index a9e7203..38243e1 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -1,32 +1,10 @@
 <template>
   <div id="ZHQL">
+    <!-- 左侧盒子 -->
     <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
-      <div class="ComBox LeftBox1_1">
-        <div class="Box_header">桥梁简介</div>
-        <div class="Box_Body">
-          <img src="@/assets/images/Sponge_screen/QiaoLiang/jianjie_img@2x.png" class="JJImg" />
-          <div class="JJFont">
-            延安王家坪大桥（彩虹桥）位于延安市王家坪革命纪念馆前，是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要，由省政府决定、省交通厅负责实施的，是在原桥位置上新建的一座特大桥。该项工程于１９９７年４月２２日开工建设，１９９８年９月２８日竣工通车，工程总投资３６６７万元。
-          </div>
-        </div>
-      </div>
-      <div class="ComBox LeftBox1_2">
-        <div class="Box_header">感知设备</div>
-        <div class="Box_Body GZSB">
-          <div class="GZSBList" v-for="item in AllData.GZSBData">
-            <img :src="item.icon" class="GZSBListImg" alt="" />
-          </div>
-        </div>
-      </div>
-      <div class="ComBox LeftBox1_3">
-        <div class="Box_header">视频监控</div>
-        <div class="Box_Body SPJK">
-          <div class="SPJKList" v-for="item in AllData.SPJKData">
-            <img :src="item.icon" class="SPJKListImg" alt="" />
-          </div>
-        </div>
-      </div>
+      <LeftBox></LeftBox>
     </div>
+    <!-- 右侧盒子 -->
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">运行监测</div>
@@ -143,6 +121,7 @@
 </template>
 
 <script setup name="ZHQL">
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 // 感知设备引入
 import GZSB1 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB1.png';

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_03.png b/src/assets/qiaoliangImg/qljk_03.png
new file mode 100644
index 0000000..3acbba0
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_03.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_04.png b/src/assets/qiaoliangImg/qljk_04.png
new file mode 100644
index 0000000..32ac99b
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_04.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/sxj.png b/src/assets/qiaoliangImg/sxj.png
new file mode 100644
index 0000000..fba004b
--- /dev/null
+++ b/src/assets/qiaoliangImg/sxj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/wdj.png b/src/assets/qiaoliangImg/wdj.png
new file mode 100644
index 0000000..70cb80b
--- /dev/null
+++ b/src/assets/qiaoliangImg/wdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/ybj.png b/src/assets/qiaoliangImg/ybj.png
new file mode 100644
index 0000000..84d70ca
--- /dev/null
+++ b/src/assets/qiaoliangImg/ybj.png
Binary files differ
diff --git a/src/views/oneMap/BIM/Tunnel.vue b/src/views/oneMap/BIM/Tunnel.vue
index 273656c..897f9f2 100644
--- a/src/views/oneMap/BIM/Tunnel.vue
+++ b/src/views/oneMap/BIM/Tunnel.vue
@@ -1,24 +1,35 @@
 <template>
-  <div id="Tunnel" ref="threeDom"></div>
+  <div id="Tunnel" ref="threeDom">
+    <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
+      <div class="iconBox" v-show="show == item.id">
+        <img src="@/assets/images/ljx.png" alt="" class="iconImg" />
+        <div class="ydBox">
+          <div class="YuanDianText">{{ item.name }}</div>
+          <div class="ydData" v-for="(val, k) in item.data" :key="k">
+            <div class="leftData">{{ val.name + ':' }}</div>
+            <div class="rightData">{{ val.value + ' ' + val.unit }}</div>
+          </div>
+        </div>
+      </div>
+      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+    </div>
+  </div>
 </template>
 
 <script setup name="Tunnel">
-import { ref, reactive, toRefs, onMounted } from "vue";
-import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
-import { Water } from "three/examples/jsm/objects/Water.js";
+import { ref, reactive, toRefs, onMounted } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { Water } from 'three/examples/jsm/objects/Water.js';
 
-import {
-  CSS3DRenderer,
-  CSS3DObject,
-} from "three/examples/jsm/renderers/CSS3DRenderer.js";
-import gsap from "gsap";
-import { CSSRulePlugin } from "gsap/CSSRulePlugin";
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
 
-const show = ref("");
+const show = ref('');
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -30,192 +41,137 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: "风速风向仪",
+    name: '静力水准仪',
     id: `YuanDian1`,
     position: {
-      x: 0,
-      y: 0,
-      z: 2.5,
+      x: -1390,
+      y: 65,
+      z: -70,
     },
-    icon: "/Three/icon/fsfx_icon.png",
+    icon: '/Three/icon/jlszy_icon.png',
     data: [
       {
-        name: "方向",
-        value: "东北风",
-        unit: "",
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
       },
       {
-        name: "风速",
-        value: "1.3",
-        unit: "m/s",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "静力水准仪",
+    name: '静力水准仪',
     id: `YuanDian2`,
     position: {
-      x: -46,
-      y: 0,
-      z: 2.5,
+      x: -1080,
+      y: 65,
+      z: -80,
     },
-    icon: "/Three/icon/jlszy_icon.png",
+    icon: '/Three/icon/jlszy_icon.png',
     data: [
       {
-        name: "挠度变化值",
-        value: "-0.01",
-        unit: "mm",
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "静力水准仪",
+    name: '激光位移计',
     id: `YuanDian3`,
     position: {
-      x: -46,
-      y: 0,
-      z: -12.6,
-    },
-    icon: "/Three/icon/jlszy_icon.png",
-    data: [
-      {
-        name: "挠度变化值",
-        value: "-0.01",
-        unit: "mm",
-      },
-      {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
-      },
-    ],
-  },
-  {
-    name: "应变计",
-    id: `YuanDian4`,
-    position: {
-      x: 0,
-      y: 7.5,
+      x: -400,
+      y: 80,
       z: 0,
     },
-    icon: "/Three/icon/ybj_icon.png",
+    icon: '/Three/icon/wyj_mx.png',
     data: [
       {
-        name: "应变量",
-        value: "17",
-        unit: "με",
+        name: '应变量',
+        value: '17',
+        unit: 'με',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "应变计",
+    name: '激光位移计',
+    id: `YuanDian4`,
+    position: {
+      x: -400,
+      y: 80,
+      z: -200,
+    },
+    icon: '/Three/icon/wyj_mx.png',
+    data: [
+      {
+        name: '应变量',
+        value: '17',
+        unit: 'με',
+      },
+      {
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
+      },
+    ],
+  },
+  {
+    name: '应变计',
     id: `YuanDian5`,
     position: {
-      x: 0,
-      y: 7.5,
-      z: -10,
+      x: -1380,
+      y: 80,
+      z: 0,
     },
-    icon: "/Three/icon/ybj_icon.png",
+    icon: '/Three/icon/ybj_icon.png',
     data: [
       {
-        name: "应变量",
-        value: "17",
-        unit: "με",
+        name: '应变量',
+        value: '17',
+        unit: 'με',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "加速度计",
+    name: '裂缝计',
     id: `YuanDian6`,
     position: {
-      x: 0,
-      y: 0,
-      z: -5,
+      x: -1350,
+      y: 80,
+      z: 0,
     },
-    icon: "/Three/icon/jsdj_icon.png",
+    icon: '/Three/icon/lfj_mx.png',
     data: [
       {
-        name: "加速度",
-        value: "1.42",
-        unit: "mm/s2",
+        name: '绝对沉降',
+        value: '2.67',
+        unit: 'mm',
       },
       {
-        name: "风速",
-        value: "1.3",
-        unit: "m/s",
+        name: '相对沉降',
+        value: '2.96',
+        unit: 'mm',
       },
     ],
   },
-  // {
-  //   name: '风速风向仪',
-  //   id: `YuanDian1`,
-  //   position: {
-  //     x: 0,
-  //     y: 1,
-  //     z: 2.5,
-  //   },
-  //   OnSrc: '/Three/icon/BJ_On.png',
-  //   OffSrc: '/Three/icon/BJ_Off.png',
-  //   icon: '/Three/icon/fsfx_icon.png',
-  //   status: false,
-  //   boxShow: true,
-  //   value1: '--',
-  //   value2: '--',
-  //   value3: '--',
-  //   deviceCode: '',
-  //   stCode: 'HP0104201130000469',
-  // },
-  // {
-  //   name: "二号泵机",
-  //   id: `YuanDian2`,
-  //   position: {
-  //     x: 3,
-  //     y: 230,
-  //     z: -180,
-  //   },
-  //   OnSrc: "/Three/icon/BJ_On.png",
-  //   OffSrc: "/Three/icon/BJ_Off.png",
-  //   status: false,
-  //   boxShow: true,
-  //   value1: "--",
-  //   value2: "--",
-  //   value3: "--",
-  //   deviceCode: "",
-  //   stCode: "HP0104201130000469",
-  // },
-  // {
-  //   name: "三号泵机",
-  //   id: `YuanDian3`,
-  //   position: {
-  //     x: 195,
-  //     y: 230,
-  //     z: -180,
-  //   },
-  //   OnSrc: "/Three/icon/BJ_On.png",
-  //   OffSrc: "/Three/icon/BJ_Off.png",
-  //   status: false,
-  //   boxShow: true,
-  //   value1: "--",
-  //   value2: "--",
-  //   value3: "--",
-  //   deviceCode: "",
-  //   stCode: "HP0104201130000469",
-  // },
 ]);
 const deviceCode = ref(null);
 const stCode = ref(null);
@@ -251,11 +207,11 @@
   const Gltfloader = new GLTFLoader();
   var dracoLoader = new DRACOLoader();
   // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
-  dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
+  dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
   Gltfloader.setDRACOLoader(dracoLoader);
   Gltfloader.load(
     url,
-    (gltf) => {
+    gltf => {
       gltf.scene.name = name;
       gltf.scene.scale.set(1, 1, 1);
       // gltf.scene.position.x = -70;
@@ -293,7 +249,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -307,7 +263,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
 };
 
@@ -316,8 +272,8 @@
  * 该函数负责创建和配置Three.js的WebGL渲染器，包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
  */
 const initRenderer = () => {
-  width.value = document.getElementById("Tunnel").clientWidth;
-  height.value = document.getElementById("Tunnel").clientHeight;
+  width.value = document.getElementById('Tunnel').clientWidth;
+  height.value = document.getElementById('Tunnel').clientHeight;
   Renderer.value = new THREE.WebGLRenderer({
     antialias: true,
     // alpha: true, //开启alpha
@@ -338,8 +294,8 @@
 const initLabelRenderer = () => {
   LabelRenderer.value = new CSS3DRenderer();
   LabelRenderer.value.setSize(width.value, height.value);
-  LabelRenderer.value.domElement.style.position = "absolute";
-  LabelRenderer.value.domElement.style.top = "0px";
+  LabelRenderer.value.domElement.style.position = 'absolute';
+  LabelRenderer.value.domElement.style.top = '0px';
   threeDom.value.appendChild(LabelRenderer.value.domElement);
   // LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
 };
@@ -349,12 +305,7 @@
  * 创建一个透视摄像机，并设置其位置
  */
 const initCamera = () => {
-  Camera.value = new THREE.PerspectiveCamera(
-    45,
-    window.innerWidth / window.innerHeight,
-    1,
-    4000
-  );
+  Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
   Camera.value.position.set(500, 500, 500);
 };
 
@@ -426,7 +377,7 @@
 const initSky = () => {
   var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
   pmremGenerator.compileEquirectangularShader();
-  new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
+  new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
     const envMap = pmremGenerator.fromEquirectangular(texture).texture;
     envMap.isPmremTexture = true;
     Scene.environment = envMap;
@@ -459,10 +410,11 @@
     let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
     if (labelCSS3D === undefined) {
       let lableDiv = document.getElementById(`YuanDian${index + 1}`);
-      lableDiv.style.display = "block";
+      lableDiv.style.display = 'block';
       labelCSS3D = new CSS3DObject(lableDiv);
       labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
-      labelCSS3D.scale.set(0.1, 0.1, 0.1);
+      // labelCSS3D.scale.set(0.1, 0.1, 0.1);
+      labelCSS3D.scale.set(3, 3, 3);
       labelCSS3D.name = `YuanDian${index + 1}`;
       // labelCSS3D.rotation.y = - Math.PI / 6; // 30度转换为弧度
       Scene.add(labelCSS3D);
@@ -490,12 +442,12 @@
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal("yjlSD", "/Gltf/yjlSD.gltf");
+  initModal('yjlSD', '/Gltf/yjlSD.gltf');
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === "complete") {
-      // createLable();
+    if (document.readyState === 'complete') {
+      createLable();
       // createWaterLevel();
     }
   });
@@ -505,7 +457,7 @@
   initControls();
   initLight();
   initSky();
-  // createLable();
+  createLable();
   // LoadWater();
   Render();
 });
@@ -514,11 +466,11 @@
   // document.removeEventListener('click', meshOnClick);
   // window.removeEventListener("resize", onWindowResize, false);
 
-  Scene.traverse((e) => {
+  Scene.traverse(e => {
     if (e.BufferGeometry) e.BufferGeometry.dispose();
     if (e.material) {
       if (Array.isArray(e.material)) {
-        e.material.forEach((m) => {
+        e.material.forEach(m => {
           m.dispose();
         });
       } else {
@@ -545,5 +497,75 @@
 #Tunnel {
   width: 100%;
   height: 100%;
+
+  .YuanDian {
+    // z-index: 9999;
+    position: relative;
+    // min-height: 20px;
+    .iconBox {
+      position: relative;
+      // border: 1px solid red;
+    }
+    .iconImg {
+      position: absolute;
+      left: 50%;
+      // transform: translateX(-50%);
+      bottom: 5px;
+      width: 19px;
+      height: 12px;
+    }
+    .ydBox {
+      z-index: 999999;
+      // width: 134px;
+      // height: 70px;
+      position: absolute;
+      left: calc(50% + 19px);
+      bottom: 12px;
+      width: 45px;
+      // height: 26px;
+      background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
+      border-radius: 2px;
+      border: 1px solid #04d8ff;
+      .ydData {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 3px;
+        font-size: 3px;
+        height: 7px;
+        line-height: 7px;
+        color: #04d8ff;
+        // .leftData {
+        // }
+        // .rightData {
+        // }
+      }
+    }
+    .YuanDianText {
+      // padding-bottom: 10px;
+      height: 7px;
+      line-height: 7px;
+      color: #fff;
+      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
+      white-space: nowrap;
+      word-break: keep-all;
+      // cursor: pointer;
+      pointer-events: none;
+      font-size: 3px;
+      text-align: center;
+      background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
+    }
+
+    .YuanDianIcon {
+      z-index: 999;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0;
+      pointer-events: auto;
+    }
+  }
 }
 </style>
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index a9e7203..38243e1 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -1,32 +1,10 @@
 <template>
   <div id="ZHQL">
+    <!-- 左侧盒子 -->
     <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
-      <div class="ComBox LeftBox1_1">
-        <div class="Box_header">桥梁简介</div>
-        <div class="Box_Body">
-          <img src="@/assets/images/Sponge_screen/QiaoLiang/jianjie_img@2x.png" class="JJImg" />
-          <div class="JJFont">
-            延安王家坪大桥（彩虹桥）位于延安市王家坪革命纪念馆前，是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要，由省政府决定、省交通厅负责实施的，是在原桥位置上新建的一座特大桥。该项工程于１９９７年４月２２日开工建设，１９９８年９月２８日竣工通车，工程总投资３６６７万元。
-          </div>
-        </div>
-      </div>
-      <div class="ComBox LeftBox1_2">
-        <div class="Box_header">感知设备</div>
-        <div class="Box_Body GZSB">
-          <div class="GZSBList" v-for="item in AllData.GZSBData">
-            <img :src="item.icon" class="GZSBListImg" alt="" />
-          </div>
-        </div>
-      </div>
-      <div class="ComBox LeftBox1_3">
-        <div class="Box_header">视频监控</div>
-        <div class="Box_Body SPJK">
-          <div class="SPJKList" v-for="item in AllData.SPJKData">
-            <img :src="item.icon" class="SPJKListImg" alt="" />
-          </div>
-        </div>
-      </div>
+      <LeftBox></LeftBox>
     </div>
+    <!-- 右侧盒子 -->
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">运行监测</div>
@@ -143,6 +121,7 @@
 </template>
 
 <script setup name="ZHQL">
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 // 感知设备引入
 import GZSB1 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB1.png';
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
new file mode 100644
index 0000000..7ad51a5
--- /dev/null
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="leftQL">
+    <!-- 隧道简介 -->
+    <div class="topBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">桥梁简介</div>
+      </div>
+      <div class="topContent contentBox">
+        <img :src="jianjie" alt="" class="topImg" />
+        <div class="topWZ">{{ introduce }}</div>
+      </div>
+    </div>
+    <!-- 感知设备 -->
+    <div class="centerBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">感知设备</div>
+      </div>
+      <div class="centerContent contentBox">
+        <div class="shebeiBox" v-for="(item, i) in shebeiList" :key="i">
+          <div class="shebeiBox_left">
+            <div class="shebeiBox_left_font" v-for="(t, k) in item.name" :key="k">{{ t }}</div>
+            <div class="shebeiBox_left_num">
+              <span>{{ item.num }}</span
+              >个
+            </div>
+          </div>
+          <div class="shebeiBox_right">
+            <img :src="item.icon" alt="" class="shebei_img" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 隧道监控 -->
+    <div class="bottomBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">桥梁监控</div>
+      </div>
+      <div class="bottomContent contentBox">
+        <div class="videoBox" v-for="(item, i) in videoList" :key="i">
+          <img :src="item" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="leftQL">
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+
+// import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
+// import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
+// import sd_icon from '@/assets/newImgs/sd.png'; //隧道
+// import ps_icon from '@/assets/newImgs/ps.png'; //排水
+
+import jianjie from '@/assets/qiaoliangImg/jianjie_ql.png';
+import jk_01 from '@/assets/qiaoliangImg/qljk_01.png';
+import jk_02 from '@/assets/qiaoliangImg/qljk_02.png';
+import jk_03 from '@/assets/qiaoliangImg/qljk_03.png';
+import jk_04 from '@/assets/qiaoliangImg/qljk_04.png';
+import lfj_icon from '@/assets/qiaoliangImg/lfj.png';
+import sxj_icon from '@/assets/qiaoliangImg/sxj.png';
+import wdj_icon from '@/assets/qiaoliangImg/wdj.png';
+import jlszy_icon from '@/assets/qiaoliangImg/jlszy.png';
+import jsdj_icon from '@/assets/qiaoliangImg/jsdj.png';
+import ybj_icon from '@/assets/qiaoliangImg/ybj.png';
+
+const introduce =
+  '延安王家坪大桥（彩虹桥）位于延安市王家坪革命纪念馆前，是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要，由省政府决定、省交通厅负责实施的，是在原桥位置上新建的一座特大桥。该项工程于１９９７年４月２２日开工建设，１９９８年９月２８日竣工通车，工程总投资３６６７万元。';
+const videoList = [jk_01, jk_02, jk_03, jk_04];
+const shebeiList = [
+  {
+    name: ['静力水准仪'],
+    icon: jlszy_icon,
+    num: 22,
+  },
+  {
+    name: ['应变计'],
+    icon: ybj_icon,
+    num: 42,
+  },
+  {
+    name: ['加速度计'],
+    icon: jsdj_icon,
+    num: 18,
+  },
+  {
+    name: ['温度计'],
+    icon: wdj_icon,
+    num: 3,
+  },
+  {
+    name: ['裂缝计'],
+    icon: lfj_icon,
+    num: 3,
+  },
+  {
+    name: ['摄像机'],
+    icon: sxj_icon,
+    num: 3,
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+.leftQL {
+  width: 100%;
+  height: 100%;
+  // box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ListBoxHeader {
+  height: 44px;
+  line-height: 50px;
+  width: 98%;
+  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // margin: 7px 0px 0px 8px;
+  .ListBoxHeader_font {
+    font-family: PangMenZhengDao;
+    font-weight: 400;
+    font-size: 23px;
+    color: #ebfeff;
+    padding-left: 34px;
+  }
+}
+
+.topBox {
+  width: 100%;
+  height: calc(100% - 486px);
+  // flex: 1;
+  // border: 1px solid red;
+  // background: red;
+  .topContent {
+    margin: 6px 0 5px;
+    height: calc(100% - 55px);
+    .topImg {
+      display: block;
+      width: 100%;
+      height: calc(100% - 135px);
+    }
+    .topWZ {
+      width: 100%;
+      height: 130px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      text-indent: 2em;
+      overflow-y: auto;
+      padding: 10px;
+      // box-sizing: border-box;
+      background: url('@/assets/tunnelImg/jjwz.png') no-repeat;
+      background-size: 100% 100%;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 14px;
+      line-height: 22px;
+      color: #61cafc;
+    }
+  }
+}
+.centerBox {
+  // background: blue;
+  width: 100%;
+  // height: 33%;
+  .centerContent {
+    padding: 6px 0 6px;
+    height: 174px;
+    box-sizing: border-box;
+    .shebeiBox {
+      position: relative;
+      width: 136px;
+      height: 76px;
+      padding: 6px 5px 6px 8px;
+      // background: linear-gradient(0deg, rgba(17, 102, 139, 0.6) 0%, rgba(0, 65, 103, 0.3) 100%);
+      border-radius: 2px;
+      // border: 1px solid #007aa8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // kpbj_img
+      background: url('@/assets/tunnelImg/kpbj_img.png') no-repeat;
+      background-size: 100% 100%;
+      .shebeiBox_left {
+        z-index: 99;
+        height: 100%;
+        // padding: 10px 0;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .shebeiBox_left_font {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 14px;
+          color: #ffffff;
+          // height: 26px;
+          // line-height: 26px;
+        }
+        .shebeiBox_left_num {
+          font-weight: 500;
+          font-size: 12px;
+          color: #cef6ff;
+          span {
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 22px;
+            color: #15d2fd;
+            margin-right: 10px;
+          }
+        }
+      }
+      .shebeiBox_right {
+        z-index: 99;
+        .shebei_img {
+          width: 50px;
+          height: 50px;
+        }
+      }
+    }
+  }
+}
+.bottomBox {
+  width: 100%;
+  // height: 35%;
+  // flex: 1;
+  .bottomContent {
+    margin-top: 6px;
+    // height: calc(100% - 50px);
+    height: 218px;
+    .videoBox {
+      // border: 1px solid red;
+      width: 200px;
+      height: 104px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+.contentBox {
+  // border: 1px solid yellow;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  align-content: space-between;
+}
+</style>

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_03.png b/src/assets/qiaoliangImg/qljk_03.png
new file mode 100644
index 0000000..3acbba0
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_03.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_04.png b/src/assets/qiaoliangImg/qljk_04.png
new file mode 100644
index 0000000..32ac99b
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_04.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/sxj.png b/src/assets/qiaoliangImg/sxj.png
new file mode 100644
index 0000000..fba004b
--- /dev/null
+++ b/src/assets/qiaoliangImg/sxj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/wdj.png b/src/assets/qiaoliangImg/wdj.png
new file mode 100644
index 0000000..70cb80b
--- /dev/null
+++ b/src/assets/qiaoliangImg/wdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/ybj.png b/src/assets/qiaoliangImg/ybj.png
new file mode 100644
index 0000000..84d70ca
--- /dev/null
+++ b/src/assets/qiaoliangImg/ybj.png
Binary files differ
diff --git a/src/views/oneMap/BIM/Tunnel.vue b/src/views/oneMap/BIM/Tunnel.vue
index 273656c..897f9f2 100644
--- a/src/views/oneMap/BIM/Tunnel.vue
+++ b/src/views/oneMap/BIM/Tunnel.vue
@@ -1,24 +1,35 @@
 <template>
-  <div id="Tunnel" ref="threeDom"></div>
+  <div id="Tunnel" ref="threeDom">
+    <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
+      <div class="iconBox" v-show="show == item.id">
+        <img src="@/assets/images/ljx.png" alt="" class="iconImg" />
+        <div class="ydBox">
+          <div class="YuanDianText">{{ item.name }}</div>
+          <div class="ydData" v-for="(val, k) in item.data" :key="k">
+            <div class="leftData">{{ val.name + ':' }}</div>
+            <div class="rightData">{{ val.value + ' ' + val.unit }}</div>
+          </div>
+        </div>
+      </div>
+      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+    </div>
+  </div>
 </template>
 
 <script setup name="Tunnel">
-import { ref, reactive, toRefs, onMounted } from "vue";
-import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
-import { Water } from "three/examples/jsm/objects/Water.js";
+import { ref, reactive, toRefs, onMounted } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { Water } from 'three/examples/jsm/objects/Water.js';
 
-import {
-  CSS3DRenderer,
-  CSS3DObject,
-} from "three/examples/jsm/renderers/CSS3DRenderer.js";
-import gsap from "gsap";
-import { CSSRulePlugin } from "gsap/CSSRulePlugin";
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
 
-const show = ref("");
+const show = ref('');
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -30,192 +41,137 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: "风速风向仪",
+    name: '静力水准仪',
     id: `YuanDian1`,
     position: {
-      x: 0,
-      y: 0,
-      z: 2.5,
+      x: -1390,
+      y: 65,
+      z: -70,
     },
-    icon: "/Three/icon/fsfx_icon.png",
+    icon: '/Three/icon/jlszy_icon.png',
     data: [
       {
-        name: "方向",
-        value: "东北风",
-        unit: "",
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
       },
       {
-        name: "风速",
-        value: "1.3",
-        unit: "m/s",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "静力水准仪",
+    name: '静力水准仪',
     id: `YuanDian2`,
     position: {
-      x: -46,
-      y: 0,
-      z: 2.5,
+      x: -1080,
+      y: 65,
+      z: -80,
     },
-    icon: "/Three/icon/jlszy_icon.png",
+    icon: '/Three/icon/jlszy_icon.png',
     data: [
       {
-        name: "挠度变化值",
-        value: "-0.01",
-        unit: "mm",
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "静力水准仪",
+    name: '激光位移计',
     id: `YuanDian3`,
     position: {
-      x: -46,
-      y: 0,
-      z: -12.6,
-    },
-    icon: "/Three/icon/jlszy_icon.png",
-    data: [
-      {
-        name: "挠度变化值",
-        value: "-0.01",
-        unit: "mm",
-      },
-      {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
-      },
-    ],
-  },
-  {
-    name: "应变计",
-    id: `YuanDian4`,
-    position: {
-      x: 0,
-      y: 7.5,
+      x: -400,
+      y: 80,
       z: 0,
     },
-    icon: "/Three/icon/ybj_icon.png",
+    icon: '/Three/icon/wyj_mx.png',
     data: [
       {
-        name: "应变量",
-        value: "17",
-        unit: "με",
+        name: '应变量',
+        value: '17',
+        unit: 'με',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "应变计",
+    name: '激光位移计',
+    id: `YuanDian4`,
+    position: {
+      x: -400,
+      y: 80,
+      z: -200,
+    },
+    icon: '/Three/icon/wyj_mx.png',
+    data: [
+      {
+        name: '应变量',
+        value: '17',
+        unit: 'με',
+      },
+      {
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
+      },
+    ],
+  },
+  {
+    name: '应变计',
     id: `YuanDian5`,
     position: {
-      x: 0,
-      y: 7.5,
-      z: -10,
+      x: -1380,
+      y: 80,
+      z: 0,
     },
-    icon: "/Three/icon/ybj_icon.png",
+    icon: '/Three/icon/ybj_icon.png',
     data: [
       {
-        name: "应变量",
-        value: "17",
-        unit: "με",
+        name: '应变量',
+        value: '17',
+        unit: 'με',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "加速度计",
+    name: '裂缝计',
     id: `YuanDian6`,
     position: {
-      x: 0,
-      y: 0,
-      z: -5,
+      x: -1350,
+      y: 80,
+      z: 0,
     },
-    icon: "/Three/icon/jsdj_icon.png",
+    icon: '/Three/icon/lfj_mx.png',
     data: [
       {
-        name: "加速度",
-        value: "1.42",
-        unit: "mm/s2",
+        name: '绝对沉降',
+        value: '2.67',
+        unit: 'mm',
       },
       {
-        name: "风速",
-        value: "1.3",
-        unit: "m/s",
+        name: '相对沉降',
+        value: '2.96',
+        unit: 'mm',
       },
     ],
   },
-  // {
-  //   name: '风速风向仪',
-  //   id: `YuanDian1`,
-  //   position: {
-  //     x: 0,
-  //     y: 1,
-  //     z: 2.5,
-  //   },
-  //   OnSrc: '/Three/icon/BJ_On.png',
-  //   OffSrc: '/Three/icon/BJ_Off.png',
-  //   icon: '/Three/icon/fsfx_icon.png',
-  //   status: false,
-  //   boxShow: true,
-  //   value1: '--',
-  //   value2: '--',
-  //   value3: '--',
-  //   deviceCode: '',
-  //   stCode: 'HP0104201130000469',
-  // },
-  // {
-  //   name: "二号泵机",
-  //   id: `YuanDian2`,
-  //   position: {
-  //     x: 3,
-  //     y: 230,
-  //     z: -180,
-  //   },
-  //   OnSrc: "/Three/icon/BJ_On.png",
-  //   OffSrc: "/Three/icon/BJ_Off.png",
-  //   status: false,
-  //   boxShow: true,
-  //   value1: "--",
-  //   value2: "--",
-  //   value3: "--",
-  //   deviceCode: "",
-  //   stCode: "HP0104201130000469",
-  // },
-  // {
-  //   name: "三号泵机",
-  //   id: `YuanDian3`,
-  //   position: {
-  //     x: 195,
-  //     y: 230,
-  //     z: -180,
-  //   },
-  //   OnSrc: "/Three/icon/BJ_On.png",
-  //   OffSrc: "/Three/icon/BJ_Off.png",
-  //   status: false,
-  //   boxShow: true,
-  //   value1: "--",
-  //   value2: "--",
-  //   value3: "--",
-  //   deviceCode: "",
-  //   stCode: "HP0104201130000469",
-  // },
 ]);
 const deviceCode = ref(null);
 const stCode = ref(null);
@@ -251,11 +207,11 @@
   const Gltfloader = new GLTFLoader();
   var dracoLoader = new DRACOLoader();
   // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
-  dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
+  dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
   Gltfloader.setDRACOLoader(dracoLoader);
   Gltfloader.load(
     url,
-    (gltf) => {
+    gltf => {
       gltf.scene.name = name;
       gltf.scene.scale.set(1, 1, 1);
       // gltf.scene.position.x = -70;
@@ -293,7 +249,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -307,7 +263,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
 };
 
@@ -316,8 +272,8 @@
  * 该函数负责创建和配置Three.js的WebGL渲染器，包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
  */
 const initRenderer = () => {
-  width.value = document.getElementById("Tunnel").clientWidth;
-  height.value = document.getElementById("Tunnel").clientHeight;
+  width.value = document.getElementById('Tunnel').clientWidth;
+  height.value = document.getElementById('Tunnel').clientHeight;
   Renderer.value = new THREE.WebGLRenderer({
     antialias: true,
     // alpha: true, //开启alpha
@@ -338,8 +294,8 @@
 const initLabelRenderer = () => {
   LabelRenderer.value = new CSS3DRenderer();
   LabelRenderer.value.setSize(width.value, height.value);
-  LabelRenderer.value.domElement.style.position = "absolute";
-  LabelRenderer.value.domElement.style.top = "0px";
+  LabelRenderer.value.domElement.style.position = 'absolute';
+  LabelRenderer.value.domElement.style.top = '0px';
   threeDom.value.appendChild(LabelRenderer.value.domElement);
   // LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
 };
@@ -349,12 +305,7 @@
  * 创建一个透视摄像机，并设置其位置
  */
 const initCamera = () => {
-  Camera.value = new THREE.PerspectiveCamera(
-    45,
-    window.innerWidth / window.innerHeight,
-    1,
-    4000
-  );
+  Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
   Camera.value.position.set(500, 500, 500);
 };
 
@@ -426,7 +377,7 @@
 const initSky = () => {
   var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
   pmremGenerator.compileEquirectangularShader();
-  new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
+  new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
     const envMap = pmremGenerator.fromEquirectangular(texture).texture;
     envMap.isPmremTexture = true;
     Scene.environment = envMap;
@@ -459,10 +410,11 @@
     let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
     if (labelCSS3D === undefined) {
       let lableDiv = document.getElementById(`YuanDian${index + 1}`);
-      lableDiv.style.display = "block";
+      lableDiv.style.display = 'block';
       labelCSS3D = new CSS3DObject(lableDiv);
       labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
-      labelCSS3D.scale.set(0.1, 0.1, 0.1);
+      // labelCSS3D.scale.set(0.1, 0.1, 0.1);
+      labelCSS3D.scale.set(3, 3, 3);
       labelCSS3D.name = `YuanDian${index + 1}`;
       // labelCSS3D.rotation.y = - Math.PI / 6; // 30度转换为弧度
       Scene.add(labelCSS3D);
@@ -490,12 +442,12 @@
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal("yjlSD", "/Gltf/yjlSD.gltf");
+  initModal('yjlSD', '/Gltf/yjlSD.gltf');
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === "complete") {
-      // createLable();
+    if (document.readyState === 'complete') {
+      createLable();
       // createWaterLevel();
     }
   });
@@ -505,7 +457,7 @@
   initControls();
   initLight();
   initSky();
-  // createLable();
+  createLable();
   // LoadWater();
   Render();
 });
@@ -514,11 +466,11 @@
   // document.removeEventListener('click', meshOnClick);
   // window.removeEventListener("resize", onWindowResize, false);
 
-  Scene.traverse((e) => {
+  Scene.traverse(e => {
     if (e.BufferGeometry) e.BufferGeometry.dispose();
     if (e.material) {
       if (Array.isArray(e.material)) {
-        e.material.forEach((m) => {
+        e.material.forEach(m => {
           m.dispose();
         });
       } else {
@@ -545,5 +497,75 @@
 #Tunnel {
   width: 100%;
   height: 100%;
+
+  .YuanDian {
+    // z-index: 9999;
+    position: relative;
+    // min-height: 20px;
+    .iconBox {
+      position: relative;
+      // border: 1px solid red;
+    }
+    .iconImg {
+      position: absolute;
+      left: 50%;
+      // transform: translateX(-50%);
+      bottom: 5px;
+      width: 19px;
+      height: 12px;
+    }
+    .ydBox {
+      z-index: 999999;
+      // width: 134px;
+      // height: 70px;
+      position: absolute;
+      left: calc(50% + 19px);
+      bottom: 12px;
+      width: 45px;
+      // height: 26px;
+      background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
+      border-radius: 2px;
+      border: 1px solid #04d8ff;
+      .ydData {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 3px;
+        font-size: 3px;
+        height: 7px;
+        line-height: 7px;
+        color: #04d8ff;
+        // .leftData {
+        // }
+        // .rightData {
+        // }
+      }
+    }
+    .YuanDianText {
+      // padding-bottom: 10px;
+      height: 7px;
+      line-height: 7px;
+      color: #fff;
+      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
+      white-space: nowrap;
+      word-break: keep-all;
+      // cursor: pointer;
+      pointer-events: none;
+      font-size: 3px;
+      text-align: center;
+      background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
+    }
+
+    .YuanDianIcon {
+      z-index: 999;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0;
+      pointer-events: auto;
+    }
+  }
 }
 </style>
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index a9e7203..38243e1 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -1,32 +1,10 @@
 <template>
   <div id="ZHQL">
+    <!-- 左侧盒子 -->
     <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
-      <div class="ComBox LeftBox1_1">
-        <div class="Box_header">桥梁简介</div>
-        <div class="Box_Body">
-          <img src="@/assets/images/Sponge_screen/QiaoLiang/jianjie_img@2x.png" class="JJImg" />
-          <div class="JJFont">
-            延安王家坪大桥（彩虹桥）位于延安市王家坪革命纪念馆前，是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要，由省政府决定、省交通厅负责实施的，是在原桥位置上新建的一座特大桥。该项工程于１９９７年４月２２日开工建设，１９９８年９月２８日竣工通车，工程总投资３６６７万元。
-          </div>
-        </div>
-      </div>
-      <div class="ComBox LeftBox1_2">
-        <div class="Box_header">感知设备</div>
-        <div class="Box_Body GZSB">
-          <div class="GZSBList" v-for="item in AllData.GZSBData">
-            <img :src="item.icon" class="GZSBListImg" alt="" />
-          </div>
-        </div>
-      </div>
-      <div class="ComBox LeftBox1_3">
-        <div class="Box_header">视频监控</div>
-        <div class="Box_Body SPJK">
-          <div class="SPJKList" v-for="item in AllData.SPJKData">
-            <img :src="item.icon" class="SPJKListImg" alt="" />
-          </div>
-        </div>
-      </div>
+      <LeftBox></LeftBox>
     </div>
+    <!-- 右侧盒子 -->
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">运行监测</div>
@@ -143,6 +121,7 @@
 </template>
 
 <script setup name="ZHQL">
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 // 感知设备引入
 import GZSB1 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB1.png';
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
new file mode 100644
index 0000000..7ad51a5
--- /dev/null
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="leftQL">
+    <!-- 隧道简介 -->
+    <div class="topBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">桥梁简介</div>
+      </div>
+      <div class="topContent contentBox">
+        <img :src="jianjie" alt="" class="topImg" />
+        <div class="topWZ">{{ introduce }}</div>
+      </div>
+    </div>
+    <!-- 感知设备 -->
+    <div class="centerBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">感知设备</div>
+      </div>
+      <div class="centerContent contentBox">
+        <div class="shebeiBox" v-for="(item, i) in shebeiList" :key="i">
+          <div class="shebeiBox_left">
+            <div class="shebeiBox_left_font" v-for="(t, k) in item.name" :key="k">{{ t }}</div>
+            <div class="shebeiBox_left_num">
+              <span>{{ item.num }}</span
+              >个
+            </div>
+          </div>
+          <div class="shebeiBox_right">
+            <img :src="item.icon" alt="" class="shebei_img" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 隧道监控 -->
+    <div class="bottomBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">桥梁监控</div>
+      </div>
+      <div class="bottomContent contentBox">
+        <div class="videoBox" v-for="(item, i) in videoList" :key="i">
+          <img :src="item" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="leftQL">
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+
+// import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
+// import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
+// import sd_icon from '@/assets/newImgs/sd.png'; //隧道
+// import ps_icon from '@/assets/newImgs/ps.png'; //排水
+
+import jianjie from '@/assets/qiaoliangImg/jianjie_ql.png';
+import jk_01 from '@/assets/qiaoliangImg/qljk_01.png';
+import jk_02 from '@/assets/qiaoliangImg/qljk_02.png';
+import jk_03 from '@/assets/qiaoliangImg/qljk_03.png';
+import jk_04 from '@/assets/qiaoliangImg/qljk_04.png';
+import lfj_icon from '@/assets/qiaoliangImg/lfj.png';
+import sxj_icon from '@/assets/qiaoliangImg/sxj.png';
+import wdj_icon from '@/assets/qiaoliangImg/wdj.png';
+import jlszy_icon from '@/assets/qiaoliangImg/jlszy.png';
+import jsdj_icon from '@/assets/qiaoliangImg/jsdj.png';
+import ybj_icon from '@/assets/qiaoliangImg/ybj.png';
+
+const introduce =
+  '延安王家坪大桥（彩虹桥）位于延安市王家坪革命纪念馆前，是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要，由省政府决定、省交通厅负责实施的，是在原桥位置上新建的一座特大桥。该项工程于１９９７年４月２２日开工建设，１９９８年９月２８日竣工通车，工程总投资３６６７万元。';
+const videoList = [jk_01, jk_02, jk_03, jk_04];
+const shebeiList = [
+  {
+    name: ['静力水准仪'],
+    icon: jlszy_icon,
+    num: 22,
+  },
+  {
+    name: ['应变计'],
+    icon: ybj_icon,
+    num: 42,
+  },
+  {
+    name: ['加速度计'],
+    icon: jsdj_icon,
+    num: 18,
+  },
+  {
+    name: ['温度计'],
+    icon: wdj_icon,
+    num: 3,
+  },
+  {
+    name: ['裂缝计'],
+    icon: lfj_icon,
+    num: 3,
+  },
+  {
+    name: ['摄像机'],
+    icon: sxj_icon,
+    num: 3,
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+.leftQL {
+  width: 100%;
+  height: 100%;
+  // box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ListBoxHeader {
+  height: 44px;
+  line-height: 50px;
+  width: 98%;
+  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // margin: 7px 0px 0px 8px;
+  .ListBoxHeader_font {
+    font-family: PangMenZhengDao;
+    font-weight: 400;
+    font-size: 23px;
+    color: #ebfeff;
+    padding-left: 34px;
+  }
+}
+
+.topBox {
+  width: 100%;
+  height: calc(100% - 486px);
+  // flex: 1;
+  // border: 1px solid red;
+  // background: red;
+  .topContent {
+    margin: 6px 0 5px;
+    height: calc(100% - 55px);
+    .topImg {
+      display: block;
+      width: 100%;
+      height: calc(100% - 135px);
+    }
+    .topWZ {
+      width: 100%;
+      height: 130px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      text-indent: 2em;
+      overflow-y: auto;
+      padding: 10px;
+      // box-sizing: border-box;
+      background: url('@/assets/tunnelImg/jjwz.png') no-repeat;
+      background-size: 100% 100%;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 14px;
+      line-height: 22px;
+      color: #61cafc;
+    }
+  }
+}
+.centerBox {
+  // background: blue;
+  width: 100%;
+  // height: 33%;
+  .centerContent {
+    padding: 6px 0 6px;
+    height: 174px;
+    box-sizing: border-box;
+    .shebeiBox {
+      position: relative;
+      width: 136px;
+      height: 76px;
+      padding: 6px 5px 6px 8px;
+      // background: linear-gradient(0deg, rgba(17, 102, 139, 0.6) 0%, rgba(0, 65, 103, 0.3) 100%);
+      border-radius: 2px;
+      // border: 1px solid #007aa8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // kpbj_img
+      background: url('@/assets/tunnelImg/kpbj_img.png') no-repeat;
+      background-size: 100% 100%;
+      .shebeiBox_left {
+        z-index: 99;
+        height: 100%;
+        // padding: 10px 0;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .shebeiBox_left_font {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 14px;
+          color: #ffffff;
+          // height: 26px;
+          // line-height: 26px;
+        }
+        .shebeiBox_left_num {
+          font-weight: 500;
+          font-size: 12px;
+          color: #cef6ff;
+          span {
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 22px;
+            color: #15d2fd;
+            margin-right: 10px;
+          }
+        }
+      }
+      .shebeiBox_right {
+        z-index: 99;
+        .shebei_img {
+          width: 50px;
+          height: 50px;
+        }
+      }
+    }
+  }
+}
+.bottomBox {
+  width: 100%;
+  // height: 35%;
+  // flex: 1;
+  .bottomContent {
+    margin-top: 6px;
+    // height: calc(100% - 50px);
+    height: 218px;
+    .videoBox {
+      // border: 1px solid red;
+      width: 200px;
+      height: 104px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+.contentBox {
+  // border: 1px solid yellow;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  align-content: space-between;
+}
+</style>
diff --git a/src/views/oneMap/smartBridge/RightBox.vue b/src/views/oneMap/smartBridge/RightBox.vue
new file mode 100644
index 0000000..974e34e
--- /dev/null
+++ b/src/views/oneMap/smartBridge/RightBox.vue
@@ -0,0 +1,424 @@
+<!-- 总体概览右侧面板 -->
+<template>
+  <div class="rightSD">
+    <!-- 运行监测 -->
+    <div class="topBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">运行监测</div>
+      </div>
+      <div class="topContent">
+        <!-- 结构监测 -->
+        <div class="jcBox">
+          <div class="jcBox_Header">
+            <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
+            <span class="jcBox_HeaderFont">结构监测</span>
+          </div>
+          <div class="jcBox_Content jgBox">
+            <div class="jcInfo" v-for="(item, index) in jgjcTitle" :key="item.code">
+              <div class="jcInfo_title">{{ item.name }}</div>
+              <div class="jcInfo_state" :class="jgjcData[item.code] == '1' ? '' : 'active'">
+                <div class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'active'"></div>
+                {{ jgjcData[item.code] == '1' ? '正常' : '异常' }}
+              </div>
+              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
+            </div>
+          </div>
+        </div>
+        <!-- 通行监测 -->
+        <div class="jcBox txBox">
+          <div class="jcBox_Header">
+            <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
+            <span class="jcBox_HeaderFont">通行监测</span>
+          </div>
+          <div class="lineBox">
+            <twoLine :echartData="lineData" :refresh="chartRefresh" />
+          </div>
+        </div>
+        <!-- 突发事件监测 -->
+        <div class="jcBox">
+          <div class="jcBox_Header">
+            <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
+            <span class="jcBox_HeaderFont">结构监测</span>
+          </div>
+          <div class="jcBox_Content">
+            <div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
+              <img :src="item.icon" alt="" class="tfInfo_icon" />
+              <div class="tfInfo_title">{{ item.name }}</div>
+              <div class="tfInfo_state" :class="tfjcData[item.code] == '0' ? '' : 'active'">
+                {{ tfjcData[item.code] == '1' ? '有' : '无' }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 检测评估 -->
+    <div class="bottomBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">检测评估</div>
+        <img src="@/assets/tunnelImg/bg_img.png" alt="" class="ListBoxHeader_img" />
+      </div>
+      <div class="bottomContent">
+        <div class="contentTop">
+          <div class="pgBox">
+            <div class="pgInfo">
+              <div>{{ assessment.update.slice(0, 4) }}年</div>
+              <div>{{ assessment.update.slice(5, 7) }}月{{ assessment.update.slice(8) }}日</div>
+            </div>
+            <div class="pgTitle">最近一次检测</div>
+          </div>
+          <div class="pgBox">
+            <div class="pgInfo">
+              <div>{{ assessment.state }}</div>
+            </div>
+            <div class="pgTitle">整体工作性能</div>
+          </div>
+          <div class="pgBox">
+            <div class="pgInfo">
+              <div>{{ assessment.level }}</div>
+            </div>
+            <div class="pgTitle">技术状况等级</div>
+          </div>
+        </div>
+        <div class="contentBottom">
+          <div>检测单位</div>
+          <div class="pgCompany">{{ assessment.company }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="rightSD">
+import twoLine from './components/twoLine.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
+import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
+import czsj from '@/assets/newImgs/czsj.png'; //处置数据
+import czl from '@/assets/newImgs/czl.png'; //处置率
+
+import ranqi_icon from '@/assets/newImgs/ranqi_icon.png'; //燃气
+import qiaoliang from '@/assets/newImgs/qiaoliang.png'; //桥梁
+import sd_icon from '@/assets/newImgs/sd_icon.png'; //隧道
+import ps_icon from '@/assets/newImgs/ps_icon.png'; //隧道
+import fxzb from '@/assets/newImgs/fxzb.png'; //风险占比
+
+import hz_icon from '@/assets/tunnelImg/hz_icon.png';
+import jtsg_icon from '@/assets/tunnelImg/jtsg_icon.png';
+import ydqt_icon from '@/assets/tunnelImg/ydqt_icon.png';
+
+let chartRefresh = ref(Math.random());
+
+const assessment = ref({
+  update: '2023-11-20',
+  state: '良好',
+  level: '二类',
+  company: '陕西海嵘工程试验检测股份有限公司',
+});
+const jgjcTitle = [
+  { name: '沉降监测', code: 'cj' },
+  { name: '滑坡监测', code: 'hp' },
+  { name: '收敛监测', code: 'sl' },
+  { name: '裂缝监测', code: 'lf' },
+  { name: '水位监测', code: 'sw' },
+  { name: '应变监测', code: 'yb' },
+];
+const jgjcData = ref({
+  cj: '1',
+  hp: '1',
+  sl: '0',
+  lf: '1',
+  sw: '1',
+  yb: '1',
+});
+const tfjcTitle = [
+  { name: '火灾', code: 'hz', icon: hz_icon },
+  { name: '交通事故', code: 'jt', icon: jtsg_icon },
+  { name: '有毒气体', code: 'dq', icon: ydqt_icon },
+];
+const tfjcData = ref({
+  hz: '0',
+  jt: '0',
+  dq: '0',
+});
+
+const lineData = ref({
+  tabX: ['9/1', '9/2', '9/3', '9/4', '9/5', '9/6', '9/7'],
+  unit: '辆',
+  series: [
+    {
+      name: '南向北',
+      tabY: ['0', '150', '150', '200', '130', '320', '300'],
+    },
+    {
+      name: '北向南',
+      tabY: ['100', '200', '200', '150', '240', '240', '180'],
+    },
+  ],
+});
+
+watch(
+  () => lineData.value,
+  (newVal, oldVal) => {
+    // console.log('change', newVal);
+    // eData.value = ArrayToObject(newVal.slice(0, 10));
+    // eData.value.headerList = headerList.value;
+    nextTick(() => {
+      chartRefresh.value = Math.random();
+    });
+    // console.log('obj', rightData.value);
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.rightSD {
+  width: 100%;
+  height: 100%;
+  // box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+.topBox {
+  width: 100%;
+  flex: 1;
+  // height: 49%;
+  // background: yellowgreen;
+  .topContent {
+    width: 100%;
+    margin: 0px 0 5px;
+    height: calc(100% - 49px);
+    display: flex;
+    flex-direction: column;
+    // border: 1px solid red;
+    .jcBox {
+      width: 100%;
+      margin-top: 5px;
+      .jcBox_Header {
+        height: 24px;
+        width: 100%;
+        .jcBox_HeaderIcon {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+        .jcBox_HeaderFont {
+          display: inline-block;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ebfeff;
+          height: 24px;
+          line-height: 24px;
+          position: relative;
+
+          &::after {
+            content: '';
+            width: 60px;
+            height: 10px;
+            background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+            position: absolute;
+            bottom: 0;
+            left: 0;
+          }
+        }
+      }
+      .jgBox {
+        height: 140px;
+      }
+      .jcBox_Content {
+        margin-top: 5px;
+        // border: 1px solid red;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        align-content: space-between;
+        .jcInfo {
+          position: relative;
+          width: 200px;
+          height: 40px;
+          background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
+          display: flex;
+          align-items: center;
+          // justify-content: space-between;
+          &::before {
+            content: '';
+            width: 4px;
+            height: 40px;
+            position: absolute;
+            left: 0;
+            top: 0;
+            background: #00f2ff;
+          }
+          .jcInfo_title {
+            font-weight: bold;
+            font-size: 16px;
+            color: #ebfeff;
+            margin-left: 15px;
+          }
+          .jcInfo_state {
+            display: flex;
+            align-items: center;
+            color: #00ff9c;
+            margin-left: 16px;
+            &.active {
+              color: #fe667b;
+            }
+            .jcInfo_stateIcon {
+              width: 10px;
+              height: 10px;
+              background: #00ff9c;
+              border-radius: 50%;
+              margin-right: 3px;
+              &.active {
+                background: #fe667b;
+              }
+            }
+          }
+          .jcInfo_btn {
+            width: 38px;
+            height: 21px;
+            margin-left: 18px;
+            background: #0ea3c3;
+            border-radius: 11px;
+            font-weight: 500;
+            font-size: 14px;
+            color: #ebfeff;
+            text-align: center;
+          }
+        }
+        .tfInfo {
+          width: 136px;
+          height: 130px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          background: url('@/assets/tunnelImg/tfjcBg.png') no-repeat;
+          background-size: 100% 100%;
+          .tfInfo_icon {
+            width: 60px;
+            height: 60px;
+          }
+          .tfInfo_title {
+            font-weight: bold;
+            font-size: 14px;
+            color: #09bdf2;
+          }
+          .tfInfo_state {
+            font-weight: bold;
+            font-size: 26px;
+            color: #3effb9;
+            &.active {
+              color: #fe667b;
+            }
+          }
+        }
+      }
+    }
+    .txBox {
+      flex: 1;
+      // border: 1px solid red;
+      display: flex;
+      flex-direction: column;
+      .lineBox {
+        flex: 1;
+        // border: 1px solid red;
+      }
+    }
+  }
+}
+.bottomBox {
+  width: 100%;
+  // height: 49%;
+  // background: red;
+  // border: 1px solid red;
+  .bottomContent {
+    width: 100%;
+    .contentTop {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 8px 0;
+      .pgBox {
+        width: 136px;
+        height: 130px;
+        background: url('@/assets/images/Sponge_screen/QiaoLiang/FBox.png') no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        .pgInfo {
+          width: 100%;
+          height: 89px;
+          display: flex;
+          flex-direction: column;
+          font-weight: bold;
+          font-size: 20px;
+          color: #00f2ff;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .pgTitle {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 14px;
+          color: #ffffff;
+          height: 14px;
+          line-height: 14px;
+          // border: 1px solid red;
+        }
+      }
+    }
+    .contentBottom {
+      width: 100%;
+      height: 39px;
+      box-sizing: border-box;
+      line-height: 39px;
+      background: url('@/assets/images/Sponge_screen/QiaoLiang/CBox.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 16px;
+      color: #ebfeff;
+      .pgCompany {
+        color: #00f2ff;
+        margin-left: 20px;
+      }
+    }
+  }
+}
+.ListBoxHeader {
+  height: 44px;
+  line-height: 50px;
+  width: 98%;
+  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // margin: 7px 0px 0px 8px;
+  .ListBoxHeader_font {
+    font-family: PangMenZhengDao;
+    font-weight: 400;
+    font-size: 23px;
+    color: #ebfeff;
+    padding-left: 34px;
+  }
+  .ListBoxHeader_img {
+    width: 23px;
+    height: 27px;
+    margin-right: 5px;
+  }
+}
+</style>

diff --git a/public/Three/icon/lfj_mx.png b/public/Three/icon/lfj_mx.png
new file mode 100644
index 0000000..92a7cd0
--- /dev/null
+++ b/public/Three/icon/lfj_mx.png
Binary files differ
diff --git a/public/Three/icon/wyj_mx.png b/public/Three/icon/wyj_mx.png
new file mode 100644
index 0000000..bf25e1a
--- /dev/null
+++ b/public/Three/icon/wyj_mx.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jianjie_ql.png b/src/assets/qiaoliangImg/jianjie_ql.png
new file mode 100644
index 0000000..44134bc
--- /dev/null
+++ b/src/assets/qiaoliangImg/jianjie_ql.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jlszy.png b/src/assets/qiaoliangImg/jlszy.png
new file mode 100644
index 0000000..43779f9
--- /dev/null
+++ b/src/assets/qiaoliangImg/jlszy.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/jsdj.png b/src/assets/qiaoliangImg/jsdj.png
new file mode 100644
index 0000000..d0c1387
--- /dev/null
+++ b/src/assets/qiaoliangImg/jsdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/lfj.png b/src/assets/qiaoliangImg/lfj.png
new file mode 100644
index 0000000..74a104e
--- /dev/null
+++ b/src/assets/qiaoliangImg/lfj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_01.png b/src/assets/qiaoliangImg/qljk_01.png
new file mode 100644
index 0000000..623ce03
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_01.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_02.png b/src/assets/qiaoliangImg/qljk_02.png
new file mode 100644
index 0000000..697c960
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_02.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_03.png b/src/assets/qiaoliangImg/qljk_03.png
new file mode 100644
index 0000000..3acbba0
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_03.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/qljk_04.png b/src/assets/qiaoliangImg/qljk_04.png
new file mode 100644
index 0000000..32ac99b
--- /dev/null
+++ b/src/assets/qiaoliangImg/qljk_04.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/sxj.png b/src/assets/qiaoliangImg/sxj.png
new file mode 100644
index 0000000..fba004b
--- /dev/null
+++ b/src/assets/qiaoliangImg/sxj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/wdj.png b/src/assets/qiaoliangImg/wdj.png
new file mode 100644
index 0000000..70cb80b
--- /dev/null
+++ b/src/assets/qiaoliangImg/wdj.png
Binary files differ
diff --git a/src/assets/qiaoliangImg/ybj.png b/src/assets/qiaoliangImg/ybj.png
new file mode 100644
index 0000000..84d70ca
--- /dev/null
+++ b/src/assets/qiaoliangImg/ybj.png
Binary files differ
diff --git a/src/views/oneMap/BIM/Tunnel.vue b/src/views/oneMap/BIM/Tunnel.vue
index 273656c..897f9f2 100644
--- a/src/views/oneMap/BIM/Tunnel.vue
+++ b/src/views/oneMap/BIM/Tunnel.vue
@@ -1,24 +1,35 @@
 <template>
-  <div id="Tunnel" ref="threeDom"></div>
+  <div id="Tunnel" ref="threeDom">
+    <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
+      <div class="iconBox" v-show="show == item.id">
+        <img src="@/assets/images/ljx.png" alt="" class="iconImg" />
+        <div class="ydBox">
+          <div class="YuanDianText">{{ item.name }}</div>
+          <div class="ydData" v-for="(val, k) in item.data" :key="k">
+            <div class="leftData">{{ val.name + ':' }}</div>
+            <div class="rightData">{{ val.value + ' ' + val.unit }}</div>
+          </div>
+        </div>
+      </div>
+      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+    </div>
+  </div>
 </template>
 
 <script setup name="Tunnel">
-import { ref, reactive, toRefs, onMounted } from "vue";
-import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
-import { Water } from "three/examples/jsm/objects/Water.js";
+import { ref, reactive, toRefs, onMounted } from 'vue';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { Water } from 'three/examples/jsm/objects/Water.js';
 
-import {
-  CSS3DRenderer,
-  CSS3DObject,
-} from "three/examples/jsm/renderers/CSS3DRenderer.js";
-import gsap from "gsap";
-import { CSSRulePlugin } from "gsap/CSSRulePlugin";
+import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import gsap from 'gsap';
+import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
 
-const show = ref("");
+const show = ref('');
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -30,192 +41,137 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: "风速风向仪",
+    name: '静力水准仪',
     id: `YuanDian1`,
     position: {
-      x: 0,
-      y: 0,
-      z: 2.5,
+      x: -1390,
+      y: 65,
+      z: -70,
     },
-    icon: "/Three/icon/fsfx_icon.png",
+    icon: '/Three/icon/jlszy_icon.png',
     data: [
       {
-        name: "方向",
-        value: "东北风",
-        unit: "",
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
       },
       {
-        name: "风速",
-        value: "1.3",
-        unit: "m/s",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "静力水准仪",
+    name: '静力水准仪',
     id: `YuanDian2`,
     position: {
-      x: -46,
-      y: 0,
-      z: 2.5,
+      x: -1080,
+      y: 65,
+      z: -80,
     },
-    icon: "/Three/icon/jlszy_icon.png",
+    icon: '/Three/icon/jlszy_icon.png',
     data: [
       {
-        name: "挠度变化值",
-        value: "-0.01",
-        unit: "mm",
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "静力水准仪",
+    name: '激光位移计',
     id: `YuanDian3`,
     position: {
-      x: -46,
-      y: 0,
-      z: -12.6,
-    },
-    icon: "/Three/icon/jlszy_icon.png",
-    data: [
-      {
-        name: "挠度变化值",
-        value: "-0.01",
-        unit: "mm",
-      },
-      {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
-      },
-    ],
-  },
-  {
-    name: "应变计",
-    id: `YuanDian4`,
-    position: {
-      x: 0,
-      y: 7.5,
+      x: -400,
+      y: 80,
       z: 0,
     },
-    icon: "/Three/icon/ybj_icon.png",
+    icon: '/Three/icon/wyj_mx.png',
     data: [
       {
-        name: "应变量",
-        value: "17",
-        unit: "με",
+        name: '应变量',
+        value: '17',
+        unit: 'με',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "应变计",
+    name: '激光位移计',
+    id: `YuanDian4`,
+    position: {
+      x: -400,
+      y: 80,
+      z: -200,
+    },
+    icon: '/Three/icon/wyj_mx.png',
+    data: [
+      {
+        name: '应变量',
+        value: '17',
+        unit: 'με',
+      },
+      {
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
+      },
+    ],
+  },
+  {
+    name: '应变计',
     id: `YuanDian5`,
     position: {
-      x: 0,
-      y: 7.5,
-      z: -10,
+      x: -1380,
+      y: 80,
+      z: 0,
     },
-    icon: "/Three/icon/ybj_icon.png",
+    icon: '/Three/icon/ybj_icon.png',
     data: [
       {
-        name: "应变量",
-        value: "17",
-        unit: "με",
+        name: '应变量',
+        value: '17',
+        unit: 'με',
       },
       {
-        name: "温度",
-        value: "16.3",
-        unit: "℃",
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
       },
     ],
   },
   {
-    name: "加速度计",
+    name: '裂缝计',
     id: `YuanDian6`,
     position: {
-      x: 0,
-      y: 0,
-      z: -5,
+      x: -1350,
+      y: 80,
+      z: 0,
     },
-    icon: "/Three/icon/jsdj_icon.png",
+    icon: '/Three/icon/lfj_mx.png',
     data: [
       {
-        name: "加速度",
-        value: "1.42",
-        unit: "mm/s2",
+        name: '绝对沉降',
+        value: '2.67',
+        unit: 'mm',
       },
       {
-        name: "风速",
-        value: "1.3",
-        unit: "m/s",
+        name: '相对沉降',
+        value: '2.96',
+        unit: 'mm',
       },
     ],
   },
-  // {
-  //   name: '风速风向仪',
-  //   id: `YuanDian1`,
-  //   position: {
-  //     x: 0,
-  //     y: 1,
-  //     z: 2.5,
-  //   },
-  //   OnSrc: '/Three/icon/BJ_On.png',
-  //   OffSrc: '/Three/icon/BJ_Off.png',
-  //   icon: '/Three/icon/fsfx_icon.png',
-  //   status: false,
-  //   boxShow: true,
-  //   value1: '--',
-  //   value2: '--',
-  //   value3: '--',
-  //   deviceCode: '',
-  //   stCode: 'HP0104201130000469',
-  // },
-  // {
-  //   name: "二号泵机",
-  //   id: `YuanDian2`,
-  //   position: {
-  //     x: 3,
-  //     y: 230,
-  //     z: -180,
-  //   },
-  //   OnSrc: "/Three/icon/BJ_On.png",
-  //   OffSrc: "/Three/icon/BJ_Off.png",
-  //   status: false,
-  //   boxShow: true,
-  //   value1: "--",
-  //   value2: "--",
-  //   value3: "--",
-  //   deviceCode: "",
-  //   stCode: "HP0104201130000469",
-  // },
-  // {
-  //   name: "三号泵机",
-  //   id: `YuanDian3`,
-  //   position: {
-  //     x: 195,
-  //     y: 230,
-  //     z: -180,
-  //   },
-  //   OnSrc: "/Three/icon/BJ_On.png",
-  //   OffSrc: "/Three/icon/BJ_Off.png",
-  //   status: false,
-  //   boxShow: true,
-  //   value1: "--",
-  //   value2: "--",
-  //   value3: "--",
-  //   deviceCode: "",
-  //   stCode: "HP0104201130000469",
-  // },
 ]);
 const deviceCode = ref(null);
 const stCode = ref(null);
@@ -251,11 +207,11 @@
   const Gltfloader = new GLTFLoader();
   var dracoLoader = new DRACOLoader();
   // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
-  dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
+  dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
   Gltfloader.setDRACOLoader(dracoLoader);
   Gltfloader.load(
     url,
-    (gltf) => {
+    gltf => {
       gltf.scene.name = name;
       gltf.scene.scale.set(1, 1, 1);
       // gltf.scene.position.x = -70;
@@ -293,7 +249,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -307,7 +263,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
 };
 
@@ -316,8 +272,8 @@
  * 该函数负责创建和配置Three.js的WebGL渲染器，包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
  */
 const initRenderer = () => {
-  width.value = document.getElementById("Tunnel").clientWidth;
-  height.value = document.getElementById("Tunnel").clientHeight;
+  width.value = document.getElementById('Tunnel').clientWidth;
+  height.value = document.getElementById('Tunnel').clientHeight;
   Renderer.value = new THREE.WebGLRenderer({
     antialias: true,
     // alpha: true, //开启alpha
@@ -338,8 +294,8 @@
 const initLabelRenderer = () => {
   LabelRenderer.value = new CSS3DRenderer();
   LabelRenderer.value.setSize(width.value, height.value);
-  LabelRenderer.value.domElement.style.position = "absolute";
-  LabelRenderer.value.domElement.style.top = "0px";
+  LabelRenderer.value.domElement.style.position = 'absolute';
+  LabelRenderer.value.domElement.style.top = '0px';
   threeDom.value.appendChild(LabelRenderer.value.domElement);
   // LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
 };
@@ -349,12 +305,7 @@
  * 创建一个透视摄像机，并设置其位置
  */
 const initCamera = () => {
-  Camera.value = new THREE.PerspectiveCamera(
-    45,
-    window.innerWidth / window.innerHeight,
-    1,
-    4000
-  );
+  Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
   Camera.value.position.set(500, 500, 500);
 };
 
@@ -426,7 +377,7 @@
 const initSky = () => {
   var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
   pmremGenerator.compileEquirectangularShader();
-  new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
+  new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
     const envMap = pmremGenerator.fromEquirectangular(texture).texture;
     envMap.isPmremTexture = true;
     Scene.environment = envMap;
@@ -459,10 +410,11 @@
     let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
     if (labelCSS3D === undefined) {
       let lableDiv = document.getElementById(`YuanDian${index + 1}`);
-      lableDiv.style.display = "block";
+      lableDiv.style.display = 'block';
       labelCSS3D = new CSS3DObject(lableDiv);
       labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
-      labelCSS3D.scale.set(0.1, 0.1, 0.1);
+      // labelCSS3D.scale.set(0.1, 0.1, 0.1);
+      labelCSS3D.scale.set(3, 3, 3);
       labelCSS3D.name = `YuanDian${index + 1}`;
       // labelCSS3D.rotation.y = - Math.PI / 6; // 30度转换为弧度
       Scene.add(labelCSS3D);
@@ -490,12 +442,12 @@
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal("yjlSD", "/Gltf/yjlSD.gltf");
+  initModal('yjlSD', '/Gltf/yjlSD.gltf');
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === "complete") {
-      // createLable();
+    if (document.readyState === 'complete') {
+      createLable();
       // createWaterLevel();
     }
   });
@@ -505,7 +457,7 @@
   initControls();
   initLight();
   initSky();
-  // createLable();
+  createLable();
   // LoadWater();
   Render();
 });
@@ -514,11 +466,11 @@
   // document.removeEventListener('click', meshOnClick);
   // window.removeEventListener("resize", onWindowResize, false);
 
-  Scene.traverse((e) => {
+  Scene.traverse(e => {
     if (e.BufferGeometry) e.BufferGeometry.dispose();
     if (e.material) {
       if (Array.isArray(e.material)) {
-        e.material.forEach((m) => {
+        e.material.forEach(m => {
           m.dispose();
         });
       } else {
@@ -545,5 +497,75 @@
 #Tunnel {
   width: 100%;
   height: 100%;
+
+  .YuanDian {
+    // z-index: 9999;
+    position: relative;
+    // min-height: 20px;
+    .iconBox {
+      position: relative;
+      // border: 1px solid red;
+    }
+    .iconImg {
+      position: absolute;
+      left: 50%;
+      // transform: translateX(-50%);
+      bottom: 5px;
+      width: 19px;
+      height: 12px;
+    }
+    .ydBox {
+      z-index: 999999;
+      // width: 134px;
+      // height: 70px;
+      position: absolute;
+      left: calc(50% + 19px);
+      bottom: 12px;
+      width: 45px;
+      // height: 26px;
+      background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
+      border-radius: 2px;
+      border: 1px solid #04d8ff;
+      .ydData {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 3px;
+        font-size: 3px;
+        height: 7px;
+        line-height: 7px;
+        color: #04d8ff;
+        // .leftData {
+        // }
+        // .rightData {
+        // }
+      }
+    }
+    .YuanDianText {
+      // padding-bottom: 10px;
+      height: 7px;
+      line-height: 7px;
+      color: #fff;
+      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
+      white-space: nowrap;
+      word-break: keep-all;
+      // cursor: pointer;
+      pointer-events: none;
+      font-size: 3px;
+      text-align: center;
+      background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
+    }
+
+    .YuanDianIcon {
+      z-index: 999;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0;
+      pointer-events: auto;
+    }
+  }
 }
 </style>
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index a9e7203..38243e1 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -1,32 +1,10 @@
 <template>
   <div id="ZHQL">
+    <!-- 左侧盒子 -->
     <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
-      <div class="ComBox LeftBox1_1">
-        <div class="Box_header">桥梁简介</div>
-        <div class="Box_Body">
-          <img src="@/assets/images/Sponge_screen/QiaoLiang/jianjie_img@2x.png" class="JJImg" />
-          <div class="JJFont">
-            延安王家坪大桥（彩虹桥）位于延安市王家坪革命纪念馆前，是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要，由省政府决定、省交通厅负责实施的，是在原桥位置上新建的一座特大桥。该项工程于１９９７年４月２２日开工建设，１９９８年９月２８日竣工通车，工程总投资３６６７万元。
-          </div>
-        </div>
-      </div>
-      <div class="ComBox LeftBox1_2">
-        <div class="Box_header">感知设备</div>
-        <div class="Box_Body GZSB">
-          <div class="GZSBList" v-for="item in AllData.GZSBData">
-            <img :src="item.icon" class="GZSBListImg" alt="" />
-          </div>
-        </div>
-      </div>
-      <div class="ComBox LeftBox1_3">
-        <div class="Box_header">视频监控</div>
-        <div class="Box_Body SPJK">
-          <div class="SPJKList" v-for="item in AllData.SPJKData">
-            <img :src="item.icon" class="SPJKListImg" alt="" />
-          </div>
-        </div>
-      </div>
+      <LeftBox></LeftBox>
     </div>
+    <!-- 右侧盒子 -->
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox RightBox1_1">
         <div class="Box_header">运行监测</div>
@@ -143,6 +121,7 @@
 </template>
 
 <script setup name="ZHQL">
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 // 感知设备引入
 import GZSB1 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB1.png';
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
new file mode 100644
index 0000000..7ad51a5
--- /dev/null
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="leftQL">
+    <!-- 隧道简介 -->
+    <div class="topBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">桥梁简介</div>
+      </div>
+      <div class="topContent contentBox">
+        <img :src="jianjie" alt="" class="topImg" />
+        <div class="topWZ">{{ introduce }}</div>
+      </div>
+    </div>
+    <!-- 感知设备 -->
+    <div class="centerBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">感知设备</div>
+      </div>
+      <div class="centerContent contentBox">
+        <div class="shebeiBox" v-for="(item, i) in shebeiList" :key="i">
+          <div class="shebeiBox_left">
+            <div class="shebeiBox_left_font" v-for="(t, k) in item.name" :key="k">{{ t }}</div>
+            <div class="shebeiBox_left_num">
+              <span>{{ item.num }}</span
+              >个
+            </div>
+          </div>
+          <div class="shebeiBox_right">
+            <img :src="item.icon" alt="" class="shebei_img" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 隧道监控 -->
+    <div class="bottomBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">桥梁监控</div>
+      </div>
+      <div class="bottomContent contentBox">
+        <div class="videoBox" v-for="(item, i) in videoList" :key="i">
+          <img :src="item" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="leftQL">
+import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
+
+// import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
+// import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
+// import sd_icon from '@/assets/newImgs/sd.png'; //隧道
+// import ps_icon from '@/assets/newImgs/ps.png'; //排水
+
+import jianjie from '@/assets/qiaoliangImg/jianjie_ql.png';
+import jk_01 from '@/assets/qiaoliangImg/qljk_01.png';
+import jk_02 from '@/assets/qiaoliangImg/qljk_02.png';
+import jk_03 from '@/assets/qiaoliangImg/qljk_03.png';
+import jk_04 from '@/assets/qiaoliangImg/qljk_04.png';
+import lfj_icon from '@/assets/qiaoliangImg/lfj.png';
+import sxj_icon from '@/assets/qiaoliangImg/sxj.png';
+import wdj_icon from '@/assets/qiaoliangImg/wdj.png';
+import jlszy_icon from '@/assets/qiaoliangImg/jlszy.png';
+import jsdj_icon from '@/assets/qiaoliangImg/jsdj.png';
+import ybj_icon from '@/assets/qiaoliangImg/ybj.png';
+
+const introduce =
+  '延安王家坪大桥（彩虹桥）位于延安市王家坪革命纪念馆前，是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要，由省政府决定、省交通厅负责实施的，是在原桥位置上新建的一座特大桥。该项工程于１９９７年４月２２日开工建设，１９９８年９月２８日竣工通车，工程总投资３６６７万元。';
+const videoList = [jk_01, jk_02, jk_03, jk_04];
+const shebeiList = [
+  {
+    name: ['静力水准仪'],
+    icon: jlszy_icon,
+    num: 22,
+  },
+  {
+    name: ['应变计'],
+    icon: ybj_icon,
+    num: 42,
+  },
+  {
+    name: ['加速度计'],
+    icon: jsdj_icon,
+    num: 18,
+  },
+  {
+    name: ['温度计'],
+    icon: wdj_icon,
+    num: 3,
+  },
+  {
+    name: ['裂缝计'],
+    icon: lfj_icon,
+    num: 3,
+  },
+  {
+    name: ['摄像机'],
+    icon: sxj_icon,
+    num: 3,
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+.leftQL {
+  width: 100%;
+  height: 100%;
+  // box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ListBoxHeader {
+  height: 44px;
+  line-height: 50px;
+  width: 98%;
+  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // margin: 7px 0px 0px 8px;
+  .ListBoxHeader_font {
+    font-family: PangMenZhengDao;
+    font-weight: 400;
+    font-size: 23px;
+    color: #ebfeff;
+    padding-left: 34px;
+  }
+}
+
+.topBox {
+  width: 100%;
+  height: calc(100% - 486px);
+  // flex: 1;
+  // border: 1px solid red;
+  // background: red;
+  .topContent {
+    margin: 6px 0 5px;
+    height: calc(100% - 55px);
+    .topImg {
+      display: block;
+      width: 100%;
+      height: calc(100% - 135px);
+    }
+    .topWZ {
+      width: 100%;
+      height: 130px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      text-indent: 2em;
+      overflow-y: auto;
+      padding: 10px;
+      // box-sizing: border-box;
+      background: url('@/assets/tunnelImg/jjwz.png') no-repeat;
+      background-size: 100% 100%;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 14px;
+      line-height: 22px;
+      color: #61cafc;
+    }
+  }
+}
+.centerBox {
+  // background: blue;
+  width: 100%;
+  // height: 33%;
+  .centerContent {
+    padding: 6px 0 6px;
+    height: 174px;
+    box-sizing: border-box;
+    .shebeiBox {
+      position: relative;
+      width: 136px;
+      height: 76px;
+      padding: 6px 5px 6px 8px;
+      // background: linear-gradient(0deg, rgba(17, 102, 139, 0.6) 0%, rgba(0, 65, 103, 0.3) 100%);
+      border-radius: 2px;
+      // border: 1px solid #007aa8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // kpbj_img
+      background: url('@/assets/tunnelImg/kpbj_img.png') no-repeat;
+      background-size: 100% 100%;
+      .shebeiBox_left {
+        z-index: 99;
+        height: 100%;
+        // padding: 10px 0;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .shebeiBox_left_font {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 14px;
+          color: #ffffff;
+          // height: 26px;
+          // line-height: 26px;
+        }
+        .shebeiBox_left_num {
+          font-weight: 500;
+          font-size: 12px;
+          color: #cef6ff;
+          span {
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 22px;
+            color: #15d2fd;
+            margin-right: 10px;
+          }
+        }
+      }
+      .shebeiBox_right {
+        z-index: 99;
+        .shebei_img {
+          width: 50px;
+          height: 50px;
+        }
+      }
+    }
+  }
+}
+.bottomBox {
+  width: 100%;
+  // height: 35%;
+  // flex: 1;
+  .bottomContent {
+    margin-top: 6px;
+    // height: calc(100% - 50px);
+    height: 218px;
+    .videoBox {
+      // border: 1px solid red;
+      width: 200px;
+      height: 104px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+.contentBox {
+  // border: 1px solid yellow;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  align-content: space-between;
+}
+</style>
diff --git a/src/views/oneMap/smartBridge/RightBox.vue b/src/views/oneMap/smartBridge/RightBox.vue
new file mode 100644
index 0000000..974e34e
--- /dev/null
+++ b/src/views/oneMap/smartBridge/RightBox.vue
@@ -0,0 +1,424 @@
+<!-- 总体概览右侧面板 -->
+<template>
+  <div class="rightSD">
+    <!-- 运行监测 -->
+    <div class="topBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">运行监测</div>
+      </div>
+      <div class="topContent">
+        <!-- 结构监测 -->
+        <div class="jcBox">
+          <div class="jcBox_Header">
+            <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
+            <span class="jcBox_HeaderFont">结构监测</span>
+          </div>
+          <div class="jcBox_Content jgBox">
+            <div class="jcInfo" v-for="(item, index) in jgjcTitle" :key="item.code">
+              <div class="jcInfo_title">{{ item.name }}</div>
+              <div class="jcInfo_state" :class="jgjcData[item.code] == '1' ? '' : 'active'">
+                <div class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'active'"></div>
+                {{ jgjcData[item.code] == '1' ? '正常' : '异常' }}
+              </div>
+              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
+            </div>
+          </div>
+        </div>
+        <!-- 通行监测 -->
+        <div class="jcBox txBox">
+          <div class="jcBox_Header">
+            <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
+            <span class="jcBox_HeaderFont">通行监测</span>
+          </div>
+          <div class="lineBox">
+            <twoLine :echartData="lineData" :refresh="chartRefresh" />
+          </div>
+        </div>
+        <!-- 突发事件监测 -->
+        <div class="jcBox">
+          <div class="jcBox_Header">
+            <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
+            <span class="jcBox_HeaderFont">结构监测</span>
+          </div>
+          <div class="jcBox_Content">
+            <div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
+              <img :src="item.icon" alt="" class="tfInfo_icon" />
+              <div class="tfInfo_title">{{ item.name }}</div>
+              <div class="tfInfo_state" :class="tfjcData[item.code] == '0' ? '' : 'active'">
+                {{ tfjcData[item.code] == '1' ? '有' : '无' }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 检测评估 -->
+    <div class="bottomBox">
+      <div class="ListBoxHeader">
+        <div class="ListBoxHeader_font">检测评估</div>
+        <img src="@/assets/tunnelImg/bg_img.png" alt="" class="ListBoxHeader_img" />
+      </div>
+      <div class="bottomContent">
+        <div class="contentTop">
+          <div class="pgBox">
+            <div class="pgInfo">
+              <div>{{ assessment.update.slice(0, 4) }}年</div>
+              <div>{{ assessment.update.slice(5, 7) }}月{{ assessment.update.slice(8) }}日</div>
+            </div>
+            <div class="pgTitle">最近一次检测</div>
+          </div>
+          <div class="pgBox">
+            <div class="pgInfo">
+              <div>{{ assessment.state }}</div>
+            </div>
+            <div class="pgTitle">整体工作性能</div>
+          </div>
+          <div class="pgBox">
+            <div class="pgInfo">
+              <div>{{ assessment.level }}</div>
+            </div>
+            <div class="pgTitle">技术状况等级</div>
+          </div>
+        </div>
+        <div class="contentBottom">
+          <div>检测单位</div>
+          <div class="pgCompany">{{ assessment.company }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="rightSD">
+import twoLine from './components/twoLine.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
+import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
+import czsj from '@/assets/newImgs/czsj.png'; //处置数据
+import czl from '@/assets/newImgs/czl.png'; //处置率
+
+import ranqi_icon from '@/assets/newImgs/ranqi_icon.png'; //燃气
+import qiaoliang from '@/assets/newImgs/qiaoliang.png'; //桥梁
+import sd_icon from '@/assets/newImgs/sd_icon.png'; //隧道
+import ps_icon from '@/assets/newImgs/ps_icon.png'; //隧道
+import fxzb from '@/assets/newImgs/fxzb.png'; //风险占比
+
+import hz_icon from '@/assets/tunnelImg/hz_icon.png';
+import jtsg_icon from '@/assets/tunnelImg/jtsg_icon.png';
+import ydqt_icon from '@/assets/tunnelImg/ydqt_icon.png';
+
+let chartRefresh = ref(Math.random());
+
+const assessment = ref({
+  update: '2023-11-20',
+  state: '良好',
+  level: '二类',
+  company: '陕西海嵘工程试验检测股份有限公司',
+});
+const jgjcTitle = [
+  { name: '沉降监测', code: 'cj' },
+  { name: '滑坡监测', code: 'hp' },
+  { name: '收敛监测', code: 'sl' },
+  { name: '裂缝监测', code: 'lf' },
+  { name: '水位监测', code: 'sw' },
+  { name: '应变监测', code: 'yb' },
+];
+const jgjcData = ref({
+  cj: '1',
+  hp: '1',
+  sl: '0',
+  lf: '1',
+  sw: '1',
+  yb: '1',
+});
+const tfjcTitle = [
+  { name: '火灾', code: 'hz', icon: hz_icon },
+  { name: '交通事故', code: 'jt', icon: jtsg_icon },
+  { name: '有毒气体', code: 'dq', icon: ydqt_icon },
+];
+const tfjcData = ref({
+  hz: '0',
+  jt: '0',
+  dq: '0',
+});
+
+const lineData = ref({
+  tabX: ['9/1', '9/2', '9/3', '9/4', '9/5', '9/6', '9/7'],
+  unit: '辆',
+  series: [
+    {
+      name: '南向北',
+      tabY: ['0', '150', '150', '200', '130', '320', '300'],
+    },
+    {
+      name: '北向南',
+      tabY: ['100', '200', '200', '150', '240', '240', '180'],
+    },
+  ],
+});
+
+watch(
+  () => lineData.value,
+  (newVal, oldVal) => {
+    // console.log('change', newVal);
+    // eData.value = ArrayToObject(newVal.slice(0, 10));
+    // eData.value.headerList = headerList.value;
+    nextTick(() => {
+      chartRefresh.value = Math.random();
+    });
+    // console.log('obj', rightData.value);
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.rightSD {
+  width: 100%;
+  height: 100%;
+  // box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+.topBox {
+  width: 100%;
+  flex: 1;
+  // height: 49%;
+  // background: yellowgreen;
+  .topContent {
+    width: 100%;
+    margin: 0px 0 5px;
+    height: calc(100% - 49px);
+    display: flex;
+    flex-direction: column;
+    // border: 1px solid red;
+    .jcBox {
+      width: 100%;
+      margin-top: 5px;
+      .jcBox_Header {
+        height: 24px;
+        width: 100%;
+        .jcBox_HeaderIcon {
+          width: 24px;
+          height: 24px;
+          vertical-align: middle;
+        }
+        .jcBox_HeaderFont {
+          display: inline-block;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ebfeff;
+          height: 24px;
+          line-height: 24px;
+          position: relative;
+
+          &::after {
+            content: '';
+            width: 60px;
+            height: 10px;
+            background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+            position: absolute;
+            bottom: 0;
+            left: 0;
+          }
+        }
+      }
+      .jgBox {
+        height: 140px;
+      }
+      .jcBox_Content {
+        margin-top: 5px;
+        // border: 1px solid red;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        align-content: space-between;
+        .jcInfo {
+          position: relative;
+          width: 200px;
+          height: 40px;
+          background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
+          display: flex;
+          align-items: center;
+          // justify-content: space-between;
+          &::before {
+            content: '';
+            width: 4px;
+            height: 40px;
+            position: absolute;
+            left: 0;
+            top: 0;
+            background: #00f2ff;
+          }
+          .jcInfo_title {
+            font-weight: bold;
+            font-size: 16px;
+            color: #ebfeff;
+            margin-left: 15px;
+          }
+          .jcInfo_state {
+            display: flex;
+            align-items: center;
+            color: #00ff9c;
+            margin-left: 16px;
+            &.active {
+              color: #fe667b;
+            }
+            .jcInfo_stateIcon {
+              width: 10px;
+              height: 10px;
+              background: #00ff9c;
+              border-radius: 50%;
+              margin-right: 3px;
+              &.active {
+                background: #fe667b;
+              }
+            }
+          }
+          .jcInfo_btn {
+            width: 38px;
+            height: 21px;
+            margin-left: 18px;
+            background: #0ea3c3;
+            border-radius: 11px;
+            font-weight: 500;
+            font-size: 14px;
+            color: #ebfeff;
+            text-align: center;
+          }
+        }
+        .tfInfo {
+          width: 136px;
+          height: 130px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          background: url('@/assets/tunnelImg/tfjcBg.png') no-repeat;
+          background-size: 100% 100%;
+          .tfInfo_icon {
+            width: 60px;
+            height: 60px;
+          }
+          .tfInfo_title {
+            font-weight: bold;
+            font-size: 14px;
+            color: #09bdf2;
+          }
+          .tfInfo_state {
+            font-weight: bold;
+            font-size: 26px;
+            color: #3effb9;
+            &.active {
+              color: #fe667b;
+            }
+          }
+        }
+      }
+    }
+    .txBox {
+      flex: 1;
+      // border: 1px solid red;
+      display: flex;
+      flex-direction: column;
+      .lineBox {
+        flex: 1;
+        // border: 1px solid red;
+      }
+    }
+  }
+}
+.bottomBox {
+  width: 100%;
+  // height: 49%;
+  // background: red;
+  // border: 1px solid red;
+  .bottomContent {
+    width: 100%;
+    .contentTop {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 8px 0;
+      .pgBox {
+        width: 136px;
+        height: 130px;
+        background: url('@/assets/images/Sponge_screen/QiaoLiang/FBox.png') no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        .pgInfo {
+          width: 100%;
+          height: 89px;
+          display: flex;
+          flex-direction: column;
+          font-weight: bold;
+          font-size: 20px;
+          color: #00f2ff;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .pgTitle {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 14px;
+          color: #ffffff;
+          height: 14px;
+          line-height: 14px;
+          // border: 1px solid red;
+        }
+      }
+    }
+    .contentBottom {
+      width: 100%;
+      height: 39px;
+      box-sizing: border-box;
+      line-height: 39px;
+      background: url('@/assets/images/Sponge_screen/QiaoLiang/CBox.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 16px;
+      color: #ebfeff;
+      .pgCompany {
+        color: #00f2ff;
+        margin-left: 20px;
+      }
+    }
+  }
+}
+.ListBoxHeader {
+  height: 44px;
+  line-height: 50px;
+  width: 98%;
+  background: url('@/assets/newImgs/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // margin: 7px 0px 0px 8px;
+  .ListBoxHeader_font {
+    font-family: PangMenZhengDao;
+    font-weight: 400;
+    font-size: 23px;
+    color: #ebfeff;
+    padding-left: 34px;
+  }
+  .ListBoxHeader_img {
+    width: 23px;
+    height: 27px;
+    margin-right: 5px;
+  }
+}
+</style>
diff --git a/src/views/oneMap/smartTunnel/RightBox.vue b/src/views/oneMap/smartTunnel/RightBox.vue
index 974e34e..9f092a3 100644
--- a/src/views/oneMap/smartTunnel/RightBox.vue
+++ b/src/views/oneMap/smartTunnel/RightBox.vue
@@ -38,7 +38,7 @@
         <div class="jcBox">
           <div class="jcBox_Header">
             <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
-            <span class="jcBox_HeaderFont">结构监测</span>
+            <span class="jcBox_HeaderFont">突发事件监测</span>
           </div>
           <div class="jcBox_Content">
             <div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
@@ -222,7 +222,8 @@
 
           &::after {
             content: '';
-            width: 60px;
+            // width: 60px;
+            width: 100%;
             height: 10px;
             background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
             position: absolute;