diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/components/mapboxPopup.vue b/src/views/oneMap/components/mapboxPopup.vue
index 95ec03f..b5b6e5f 100644
--- a/src/views/oneMap/components/mapboxPopup.vue
+++ b/src/views/oneMap/components/mapboxPopup.vue
@@ -47,11 +47,11 @@
           <div class="contentName">厂站类型：</div>
           <div class="contentValue">
             {{
-              allData.dataList.pumpType == "rain_water"
-                ? "雨水泵站"
-                : allData.dataList.pumpType == "sewage_water"
-                ? "污水泵站"
-                : "雨污合建"
+              allData.dataList.pumpType == 'rain_water'
+                ? '雨水泵站'
+                : allData.dataList.pumpType == 'sewage_water'
+                ? '污水泵站'
+                : '雨污合建'
             }}
           </div>
         </div>
@@ -60,22 +60,14 @@
           <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
           <div class="contentName">设计规模：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.designScaleSecond ||
-              allData.dataList.sweagepump.designScaleSecond ||
-              "--"
-            }}
+            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
             m³/s
           </div>
         </div>
         <div class="contentInfo">
           <div class="contentName">泵机台数：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.deviceCount ||
-              allData.dataList.sweagepump.deviceCount ||
-              "--"
-            }}台
+            {{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
           </div>
           <div class="contentName">建设单位：</div>
           <div class="contentValue" :title="allData.dataList.unitDep">
@@ -168,18 +160,8 @@
           style="width: 200px"
           @change="changeDate"
         />
-        <el-select
-          v-model="selectCode"
-          style="margin: -7px 0px 0px 10px; width: 150px"
-          size="small"
-          @change="changeRainType"
-        >
-          <el-option
-            v-for="item in dataOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
+          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div id="chartPopupRainC"></div>
       </div>
@@ -289,37 +271,38 @@
         <div class="submitControl" @click="submitControl">派发</div>
       </div>
     </div>
+    <!-- 街景图 -->
+    <div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
+      <img :src="allData.dataList.data.base64" />
+    </div>
   </div>
 </template>
 
 <script setup name="CesiumPopup">
-import bus from "@/bus";
+import bus from '@/bus';
 //import chartOption from '@/components/Echarts/pieChart_1.js';
 //import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
 const { proxy } = getCurrentInstance();
 const allData = reactive({
   dataList: {},
   popupShow: false,
-  dateTime: [
-    proxy.moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
-    proxy.moment().format("YYYY-MM-DD"),
-  ],
+  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
 });
 const dataOption = ref([]);
 const selectData = ref([]);
-const selectCode = ref("");
-const seleceName = ref("");
-const unitName = ref("");
+const selectCode = ref('');
+const seleceName = ref('');
+const unitName = ref('');
 const propertyMonitorXList = ref([]);
 const realRiverVal = ref(0);
 
 //
 function closePopupCES() {
   allData.popupShow = false;
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
   // 取消之后回到中心点
   // newfiberMapbox.map.easeTo({
@@ -334,17 +317,17 @@
 function changeDateJSD() {
   setTimeout(() => {
     if (!!chartJSD) chartJSD.dispose();
-    chartJSD = echarts.init(document.getElementById("chartHistoryJSD"));
-    chartOption.popupRainTrend.legend.data = ["水深"];
-    chartOption.popupRainTrend.yAxis.name = "m";
+    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
+    chartOption.popupRainTrend.legend.data = ['水深'];
+    chartOption.popupRainTrend.yAxis.name = 'm';
     chartOption.popupRainTrend.xAxis.data = [
-      "2024-07-12 12:30:20",
-      "2024-07-12 13:30:20",
-      "2024-07-12 14:30:20",
-      "2024-07-12 15:30:20",
+      '2024-07-12 12:30:20',
+      '2024-07-12 13:30:20',
+      '2024-07-12 14:30:20',
+      '2024-07-12 15:30:20',
     ];
     chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = "水深";
+    chartOption.popupRainTrend.series.name = '水深';
     chartOption.popupRainTrend.series.barWidth = 10;
     chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
     // 设置鼠标滚轮放大缩小展示数据区间
@@ -412,7 +395,7 @@
 let chartPopupRain = null;
 const initEchartsPopup = () => {
   if (!!chartPopupRain) chartPopupRain.dispose();
-  chartPopupRain = echarts.init(document.getElementById("chartPopupRainC"));
+  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
   chartOption.popupRainTrend.legend.data = [seleceName.value];
   chartOption.popupRainTrend.yAxis.name = unitName.value;
   chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
@@ -421,7 +404,7 @@
   // 设置鼠标滚轮放大缩小展示数据区间
   chartOption.popupRainTrend.dataZoom = [
     {
-      type: "inside",
+      type: 'inside',
       startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
     },
   ];
@@ -434,9 +417,9 @@
   chartPopupRain.setOption(chartOption.popupRainTrend);
 };
 // 切换因子点击
-const changeRainType = (val) => {
+const changeRainType = val => {
   selectCode.value = val;
-  let obj = dataOption.value.filter((item) => item.value == val)[0];
+  let obj = dataOption.value.filter(item => item.value == val)[0];
   selectCode.value = obj.value;
   seleceName.value = obj.label;
   unitName.value = obj.propertyUnit;
@@ -480,28 +463,30 @@
 //巡查反馈派发
 const submitControl = () => {
   let data = {
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
+};
+//街景弹框点击事件
+const showStreetLayer = () => {
+  console.log('少爷在这里加~~~~~~~~~');
 };
 onMounted(() => {
-  bus.on("closeCesiumPopup", () => {
+  bus.on('closeCesiumPopup', () => {
     allData.popupShow = false;
-    if (!!newfiberMapbox.getLayerByName("rqLine")) {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (!!newfiberMapbox.getLayerByName('rqLine')) {
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
     }
   });
-  bus.on("popupcontent", (params) => {
-    console.log("popup接收地图标注点值---111", params);
+  bus.on('popupcontent', params => {
+    console.log('popup接收地图标注点值---111', params);
     allData.dataList = params.popupInfo;
-    let pipePopupDiv = document.getElementById("cesiumPopupID");
+    let pipePopupDiv = document.getElementById('cesiumPopupID');
 
     let popupCenter, center, offsets;
     if (allData.dataList.geometry) {
-      if (allData.dataList.geometry.includes("LINESTRING")) {
-        popupCenter = turf.center(
-          turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))
-        ).geometry.coordinates;
+      if (allData.dataList.geometry.includes('LINESTRING')) {
+        popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
       } else {
         popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
       }
@@ -516,10 +501,10 @@
     window.window.pipePopup = new mapboxL7.Popup({
       html: pipePopupDiv,
       lngLat: {
-        lng: popupCenter[0],
-        lat: popupCenter[1],
+        lng: popupCenter ? popupCenter[0] : params.point[0],
+        lat: popupCenter ? popupCenter[1] : params.point[1],
       },
-      anchor: "center",
+      anchor: 'center',
       offsets: [-90, 130],
       autoClose: false,
     });
@@ -530,25 +515,25 @@
     });
     allData.popupShow = true;
     // 建筑社区弹框
-    if (params.popupInfo.type == "HMJZYSQ") {
+    if (params.popupInfo.type == 'HMJZYSQ') {
       allData.popupShow = false;
       let data = {
         title: params.popupInfo.name,
-        comIDs: ["xxinformation"],
+        comIDs: ['xxinformation'],
       };
-      bus.emit("publicDialog", data);
+      bus.emit('publicDialog', data);
       setTimeout(() => {
-        bus.emit("xxinformationList", params);
+        bus.emit('xxinformationList', params);
       }, 100);
     }
-    if (allData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
-    if (allData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
-    if (allData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
+    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
+    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
   });
 });
 onBeforeUnmount(() => {
-  bus.off("popupcontent");
-  bus.off("closeCesiumPopup");
+  bus.off('popupcontent');
+  bus.off('closeCesiumPopup');
 });
 </script>
 <style lang="scss">
@@ -574,8 +559,7 @@
     margin-top: 10px;
   }
   .title {
-    background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-      center;
+    background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
     background-size: cover;
     display: flex;
     align-items: center;

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/components/mapboxPopup.vue b/src/views/oneMap/components/mapboxPopup.vue
index 95ec03f..b5b6e5f 100644
--- a/src/views/oneMap/components/mapboxPopup.vue
+++ b/src/views/oneMap/components/mapboxPopup.vue
@@ -47,11 +47,11 @@
           <div class="contentName">厂站类型：</div>
           <div class="contentValue">
             {{
-              allData.dataList.pumpType == "rain_water"
-                ? "雨水泵站"
-                : allData.dataList.pumpType == "sewage_water"
-                ? "污水泵站"
-                : "雨污合建"
+              allData.dataList.pumpType == 'rain_water'
+                ? '雨水泵站'
+                : allData.dataList.pumpType == 'sewage_water'
+                ? '污水泵站'
+                : '雨污合建'
             }}
           </div>
         </div>
@@ -60,22 +60,14 @@
           <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
           <div class="contentName">设计规模：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.designScaleSecond ||
-              allData.dataList.sweagepump.designScaleSecond ||
-              "--"
-            }}
+            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
             m³/s
           </div>
         </div>
         <div class="contentInfo">
           <div class="contentName">泵机台数：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.deviceCount ||
-              allData.dataList.sweagepump.deviceCount ||
-              "--"
-            }}台
+            {{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
           </div>
           <div class="contentName">建设单位：</div>
           <div class="contentValue" :title="allData.dataList.unitDep">
@@ -168,18 +160,8 @@
           style="width: 200px"
           @change="changeDate"
         />
-        <el-select
-          v-model="selectCode"
-          style="margin: -7px 0px 0px 10px; width: 150px"
-          size="small"
-          @change="changeRainType"
-        >
-          <el-option
-            v-for="item in dataOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
+          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div id="chartPopupRainC"></div>
       </div>
@@ -289,37 +271,38 @@
         <div class="submitControl" @click="submitControl">派发</div>
       </div>
     </div>
+    <!-- 街景图 -->
+    <div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
+      <img :src="allData.dataList.data.base64" />
+    </div>
   </div>
 </template>
 
 <script setup name="CesiumPopup">
-import bus from "@/bus";
+import bus from '@/bus';
 //import chartOption from '@/components/Echarts/pieChart_1.js';
 //import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
 const { proxy } = getCurrentInstance();
 const allData = reactive({
   dataList: {},
   popupShow: false,
-  dateTime: [
-    proxy.moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
-    proxy.moment().format("YYYY-MM-DD"),
-  ],
+  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
 });
 const dataOption = ref([]);
 const selectData = ref([]);
-const selectCode = ref("");
-const seleceName = ref("");
-const unitName = ref("");
+const selectCode = ref('');
+const seleceName = ref('');
+const unitName = ref('');
 const propertyMonitorXList = ref([]);
 const realRiverVal = ref(0);
 
 //
 function closePopupCES() {
   allData.popupShow = false;
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
   // 取消之后回到中心点
   // newfiberMapbox.map.easeTo({
@@ -334,17 +317,17 @@
 function changeDateJSD() {
   setTimeout(() => {
     if (!!chartJSD) chartJSD.dispose();
-    chartJSD = echarts.init(document.getElementById("chartHistoryJSD"));
-    chartOption.popupRainTrend.legend.data = ["水深"];
-    chartOption.popupRainTrend.yAxis.name = "m";
+    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
+    chartOption.popupRainTrend.legend.data = ['水深'];
+    chartOption.popupRainTrend.yAxis.name = 'm';
     chartOption.popupRainTrend.xAxis.data = [
-      "2024-07-12 12:30:20",
-      "2024-07-12 13:30:20",
-      "2024-07-12 14:30:20",
-      "2024-07-12 15:30:20",
+      '2024-07-12 12:30:20',
+      '2024-07-12 13:30:20',
+      '2024-07-12 14:30:20',
+      '2024-07-12 15:30:20',
     ];
     chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = "水深";
+    chartOption.popupRainTrend.series.name = '水深';
     chartOption.popupRainTrend.series.barWidth = 10;
     chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
     // 设置鼠标滚轮放大缩小展示数据区间
@@ -412,7 +395,7 @@
 let chartPopupRain = null;
 const initEchartsPopup = () => {
   if (!!chartPopupRain) chartPopupRain.dispose();
-  chartPopupRain = echarts.init(document.getElementById("chartPopupRainC"));
+  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
   chartOption.popupRainTrend.legend.data = [seleceName.value];
   chartOption.popupRainTrend.yAxis.name = unitName.value;
   chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
@@ -421,7 +404,7 @@
   // 设置鼠标滚轮放大缩小展示数据区间
   chartOption.popupRainTrend.dataZoom = [
     {
-      type: "inside",
+      type: 'inside',
       startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
     },
   ];
@@ -434,9 +417,9 @@
   chartPopupRain.setOption(chartOption.popupRainTrend);
 };
 // 切换因子点击
-const changeRainType = (val) => {
+const changeRainType = val => {
   selectCode.value = val;
-  let obj = dataOption.value.filter((item) => item.value == val)[0];
+  let obj = dataOption.value.filter(item => item.value == val)[0];
   selectCode.value = obj.value;
   seleceName.value = obj.label;
   unitName.value = obj.propertyUnit;
@@ -480,28 +463,30 @@
 //巡查反馈派发
 const submitControl = () => {
   let data = {
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
+};
+//街景弹框点击事件
+const showStreetLayer = () => {
+  console.log('少爷在这里加~~~~~~~~~');
 };
 onMounted(() => {
-  bus.on("closeCesiumPopup", () => {
+  bus.on('closeCesiumPopup', () => {
     allData.popupShow = false;
-    if (!!newfiberMapbox.getLayerByName("rqLine")) {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (!!newfiberMapbox.getLayerByName('rqLine')) {
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
     }
   });
-  bus.on("popupcontent", (params) => {
-    console.log("popup接收地图标注点值---111", params);
+  bus.on('popupcontent', params => {
+    console.log('popup接收地图标注点值---111', params);
     allData.dataList = params.popupInfo;
-    let pipePopupDiv = document.getElementById("cesiumPopupID");
+    let pipePopupDiv = document.getElementById('cesiumPopupID');
 
     let popupCenter, center, offsets;
     if (allData.dataList.geometry) {
-      if (allData.dataList.geometry.includes("LINESTRING")) {
-        popupCenter = turf.center(
-          turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))
-        ).geometry.coordinates;
+      if (allData.dataList.geometry.includes('LINESTRING')) {
+        popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
       } else {
         popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
       }
@@ -516,10 +501,10 @@
     window.window.pipePopup = new mapboxL7.Popup({
       html: pipePopupDiv,
       lngLat: {
-        lng: popupCenter[0],
-        lat: popupCenter[1],
+        lng: popupCenter ? popupCenter[0] : params.point[0],
+        lat: popupCenter ? popupCenter[1] : params.point[1],
       },
-      anchor: "center",
+      anchor: 'center',
       offsets: [-90, 130],
       autoClose: false,
     });
@@ -530,25 +515,25 @@
     });
     allData.popupShow = true;
     // 建筑社区弹框
-    if (params.popupInfo.type == "HMJZYSQ") {
+    if (params.popupInfo.type == 'HMJZYSQ') {
       allData.popupShow = false;
       let data = {
         title: params.popupInfo.name,
-        comIDs: ["xxinformation"],
+        comIDs: ['xxinformation'],
       };
-      bus.emit("publicDialog", data);
+      bus.emit('publicDialog', data);
       setTimeout(() => {
-        bus.emit("xxinformationList", params);
+        bus.emit('xxinformationList', params);
       }, 100);
     }
-    if (allData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
-    if (allData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
-    if (allData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
+    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
+    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
   });
 });
 onBeforeUnmount(() => {
-  bus.off("popupcontent");
-  bus.off("closeCesiumPopup");
+  bus.off('popupcontent');
+  bus.off('closeCesiumPopup');
 });
 </script>
 <style lang="scss">
@@ -574,8 +559,7 @@
     margin-top: 10px;
   }
   .title {
-    background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-      center;
+    background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
     background-size: cover;
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 4dbe10c..c1cf2bb 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,20 +5,14 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="[
-          'oneMapHeader',
-          'animate__animated',
-          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-        ]"
+        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
-            ><LocationFilled
-          /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -39,9 +33,7 @@
       <!-- 地图组件 -->
       <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM
-        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
-      ></WangJiaPingBIM>
+      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -68,42 +60,17 @@
       />
       <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng"></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL
-        v-if="AllData.ComShowID == 1"
-        :isActive="AllData.ComShowID == 1 ? true : false"
-        :showPanel="showPanel"
-      ></ComZTGL>
+      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ
-        v-if="AllData.ComShowID == 2"
-        :isActive="AllData.ComShowID == 2 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHRQ>
+      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS
-        v-if="AllData.ComShowID == 3"
-        :isActive="AllData.ComShowID == 3 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHPS>
+      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL
-        v-if="AllData.ComShowID == 4"
-        :isActive="AllData.ComShowID == 4 ? true : false"
-        :showPanel="showPanel"
-      >
-      </ComZHQL>
+      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD
-        v-if="AllData.ComShowID == 5"
-        :isActive="AllData.ComShowID == 5 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHSD>
+      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM
-        v-if="AllData.ComShowID == 6"
-        :isActive="AllData.ComShowID == 6 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHHM>
+      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -117,11 +84,7 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL
-        v-if="AllData.ComShowID == 7"
-        :isActive="AllData.ComShowID == 7 ? true : false"
-        :showPanel="showPanel"
-      ></ComFHPL>
+      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -131,11 +94,7 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="[
-          'MenuList' + index,
-          'animate__animated',
-          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
-        ]"
+        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -149,10 +108,7 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div
-            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
-            class="ErJiMenuBox"
-          >
+          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -171,11 +127,7 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun
-    :RYdialogShow="AllData.RYDialog"
-    :ZhuDongBoHao="AllData.ZhuDongBoHao"
-    @OneDialogHide="dialogHide"
-  ></ModelRongYun>
+  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -197,57 +149,60 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from "@/bus";
-import { fullscreenToggel } from "@/utils/util";
-import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from '@/bus';
+import request from '@/utils/request';
+import { fullscreenToggel } from '@/utils/util';
+import { ref, reactive, toRefs, onMounted } from 'vue';
 
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
-import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
-import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
-import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
-import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
-import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
-import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
-import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
-import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
-import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
-import FXPL from "@/assets/images/Sponge_screen/menu/FXPL.png";
-import AC_FXPL from "@/assets/images/Sponge_screen/menu/AC_FXPL.png";
-import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
-import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
+import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
+import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
+import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
+import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
+import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
+import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
+import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
+import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
+import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
+import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
+import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
+import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
+import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
+import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
 // 引用地图
-import OneMap from "./map/newfiberMapBox.vue";
+import OneMap from './map/newfiberMapBox.vue';
+// 引用街景地图
+import PanoramaMap from '@/views/oneMap/map/PanoramaMap.vue';
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
+import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
 // 引用隧道BIm
-import Tunnel from "./BIM/Tunnel.vue";
+import Tunnel from './BIM/Tunnel.vue';
 // 引用语音识别
-import Voice from "./../voice/recordPage/index.vue";
+import Voice from './../voice/recordPage/index.vue';
 // 引入融云通讯录
-import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
+import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
 // 子系统引入
-import ComZTGL from "./components/ZTGL.vue"; //总体概览
-import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
-import ComZHPS from "./components/ZHPS.vue"; //智慧排水
-import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
-import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
-import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
-import ComFHPL from "./components/FHPL.vue"; //防洪排涝
-import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
-import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
-import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
+import ComZTGL from './components/ZTGL.vue'; //总体概览
+import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
+import ComZHPS from './components/ZHPS.vue'; //智慧排水
+import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
+import ComZHSD from './components/ZHSD.vue'; //智慧隧道
+import ComZHHM from './components/ZHHM.vue'; //智慧海绵
+import ComFHPL from './components/FHPL.vue'; //防洪排涝
+import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
+import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
+import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
+import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
 // 图层控制面板
-import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
+import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
+import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
 // 左右滑动
-import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
-import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
+import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
+import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -255,8 +210,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: "",
-  text: "",
+  imgNum: '',
+  text: '',
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -344,61 +299,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: "",
-  SiteNo: "",
+  getSiteId: '',
+  SiteNo: '',
   data: {},
-  comIDs: ["spjk"],
+  comIDs: ['spjk'],
   customData: [],
-  RefName: "",
-  title: "详情",
+  RefName: '',
+  title: '详情',
 });
 onBeforeMount(() => {
-  console.log("ZhuanTiType", userStore.ZhuanTiType);
+  console.log('ZhuanTiType', userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: "总体概览",
+        name: '总体概览',
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ["路网", "河流水系"],
+        Layers: ['路网', '河流水系'],
       },
       {
-        name: "燃气安全",
+        name: '燃气安全',
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ["干管", "主管", "干管流向", "主管流向"],
+        Layers: ['干管', '主管', '干管流向', '主管流向'],
       },
       {
-        name: "排水安全",
+        name: '排水安全',
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ["雨水管网", "污水管网"],
+        Layers: ['雨水管网', '污水管网'],
         children: [
           {
-            name: "排水安全",
+            name: '排水安全',
             id: 3,
             Layers: [],
           },
           {
-            name: "防汛排涝",
+            name: '防汛排涝',
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: "桥梁安全",
+        name: '桥梁安全',
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: "隧道安全",
+        name: '隧道安全',
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -409,19 +364,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: "城市概览",
+        name: '城市概览',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: "监测分析",
+        name: '监测分析',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 61,
       },
       {
-        name: "建设评估",
+        name: '建设评估',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 62,
@@ -435,10 +390,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
-  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
+  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on("checkRainL", (params) => {
+  bus.on('checkRainL', params => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -446,7 +401,7 @@
     }
   });
   // 底部隐藏
-  bus.on("checkBottom", (params) => {
+  bus.on('checkBottom', params => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -454,15 +409,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog", (params) => {
+  bus.on('publicDialog', params => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? "详情";
+    dialogConfig.title = params.title ?? '详情';
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog_Close", (params) => {
+  bus.on('publicDialog_Close', params => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -472,14 +427,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on("OpenRY", (params) => {
+  bus.on('OpenRY', params => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit("showRy");
+    bus.emit('showRy');
   });
 
   // 切换专题图
-  bus.on("ChangeZhuanTiTu", (params) => {
+  bus.on('ChangeZhuanTiTu', params => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -489,18 +444,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on("changeShowPanel", (params) => {
+  bus.on('changeShowPanel', params => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off("BottomHidden");
-  bus.off("publicDialog");
-  bus.off("publicDialog_Close");
-  bus.off("OpenRY");
-  bus.off("ChangeZhuanTiTu");
-  bus.off("checkRainL");
-  bus.off("changeShowPanel");
+  bus.off('BottomHidden');
+  bus.off('publicDialog');
+  bus.off('publicDialog_Close');
+  bus.off('OpenRY');
+  bus.off('ChangeZhuanTiTu');
+  bus.off('checkRainL');
+  bus.off('changeShowPanel');
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -519,9 +474,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit("clearAllLayer");
+    bus.emit('clearAllLayer');
     // 打开默认的菜单
-    bus.emit("SetLayerShow", item.Layers);
+    bus.emit('SetLayerShow', item.Layers);
   }
 };
 // 二级菜单点击
@@ -540,10 +495,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit("showRy");
+  bus.emit('showRy');
 };
 // 关闭融云通讯录弹窗
-const dialogHide = (val) => {
+const dialogHide = val => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -551,25 +506,52 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log("point", point);
-  console.log("properties", properties);
-  console.log("feature---", feature);
-  if (properties) {
-    if (feature == "rq_pipeline_info") {
-      if (!!newfiberMapbox.getLayerByName("rqLine")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  console.log('point', point);
+  console.log('properties', properties);
+  console.log('feature---', feature);
+  if (!feature) {
+    let currentZoom = newfiberMapbox.map.getZoom();
+    console.log('currentZoom--', currentZoom);
+    if (currentZoom >= 17) {
+      let clickPoint = turf.point(point);
+      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
+      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
+      let data = await request({
+        url: `/bdApi//baiduservice/panorama`,
+        method: 'GET',
+        params: {
+          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
+          fov: 180,
+          height: 256,
+          width: 512,
+        },
+      });
+      if (data && data.data) {
+        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
       }
-      let rqLine = turf.featureCollection([
-        turf.feature(Terraformer.WKT.parse(properties.geometry)),
-      ]);
+      console.log('data----', data);
+      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
+      bus.emit('popupcontent', {
+        popupShow: true,
+        point: point,
+        popupInfo: data,
+      });
+    }
+  }
+  if (properties) {
+    if (feature == 'rq_pipeline_info') {
+      if (!!newfiberMapbox.getLayerByName('rqLine')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
+      }
+      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
       let layer = new mapboxL7.LineLayer({
-        name: "rqLine",
+        name: 'rqLine',
       })
         .source(rqLine)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("rgb(241, 159, 27)")
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(241, 159, 27)')
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -580,11 +562,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit("popupcontent", {
+    bus.emit('popupcontent', {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -599,20 +581,12 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array(
-    "星期日",
-    "星期一",
-    "星期二",
-    "星期三",
-    "星期四",
-    "星期五",
-    "星期六"
-  );
+  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -635,11 +609,11 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = (item) => {
+const handleMouseEnter = item => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = (item) => {
+const handleMouseLeave = item => {
   AllData.ErJiMenuShowID = null;
 };
 
@@ -770,7 +744,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -854,17 +828,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -911,7 +885,7 @@
       bottom: 0;
       width: 952px;
       height: 62px;
-      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -1045,7 +1019,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/components/mapboxPopup.vue b/src/views/oneMap/components/mapboxPopup.vue
index 95ec03f..b5b6e5f 100644
--- a/src/views/oneMap/components/mapboxPopup.vue
+++ b/src/views/oneMap/components/mapboxPopup.vue
@@ -47,11 +47,11 @@
           <div class="contentName">厂站类型：</div>
           <div class="contentValue">
             {{
-              allData.dataList.pumpType == "rain_water"
-                ? "雨水泵站"
-                : allData.dataList.pumpType == "sewage_water"
-                ? "污水泵站"
-                : "雨污合建"
+              allData.dataList.pumpType == 'rain_water'
+                ? '雨水泵站'
+                : allData.dataList.pumpType == 'sewage_water'
+                ? '污水泵站'
+                : '雨污合建'
             }}
           </div>
         </div>
@@ -60,22 +60,14 @@
           <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
           <div class="contentName">设计规模：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.designScaleSecond ||
-              allData.dataList.sweagepump.designScaleSecond ||
-              "--"
-            }}
+            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
             m³/s
           </div>
         </div>
         <div class="contentInfo">
           <div class="contentName">泵机台数：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.deviceCount ||
-              allData.dataList.sweagepump.deviceCount ||
-              "--"
-            }}台
+            {{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
           </div>
           <div class="contentName">建设单位：</div>
           <div class="contentValue" :title="allData.dataList.unitDep">
@@ -168,18 +160,8 @@
           style="width: 200px"
           @change="changeDate"
         />
-        <el-select
-          v-model="selectCode"
-          style="margin: -7px 0px 0px 10px; width: 150px"
-          size="small"
-          @change="changeRainType"
-        >
-          <el-option
-            v-for="item in dataOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
+          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div id="chartPopupRainC"></div>
       </div>
@@ -289,37 +271,38 @@
         <div class="submitControl" @click="submitControl">派发</div>
       </div>
     </div>
+    <!-- 街景图 -->
+    <div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
+      <img :src="allData.dataList.data.base64" />
+    </div>
   </div>
 </template>
 
 <script setup name="CesiumPopup">
-import bus from "@/bus";
+import bus from '@/bus';
 //import chartOption from '@/components/Echarts/pieChart_1.js';
 //import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
 const { proxy } = getCurrentInstance();
 const allData = reactive({
   dataList: {},
   popupShow: false,
-  dateTime: [
-    proxy.moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
-    proxy.moment().format("YYYY-MM-DD"),
-  ],
+  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
 });
 const dataOption = ref([]);
 const selectData = ref([]);
-const selectCode = ref("");
-const seleceName = ref("");
-const unitName = ref("");
+const selectCode = ref('');
+const seleceName = ref('');
+const unitName = ref('');
 const propertyMonitorXList = ref([]);
 const realRiverVal = ref(0);
 
 //
 function closePopupCES() {
   allData.popupShow = false;
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
   // 取消之后回到中心点
   // newfiberMapbox.map.easeTo({
@@ -334,17 +317,17 @@
 function changeDateJSD() {
   setTimeout(() => {
     if (!!chartJSD) chartJSD.dispose();
-    chartJSD = echarts.init(document.getElementById("chartHistoryJSD"));
-    chartOption.popupRainTrend.legend.data = ["水深"];
-    chartOption.popupRainTrend.yAxis.name = "m";
+    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
+    chartOption.popupRainTrend.legend.data = ['水深'];
+    chartOption.popupRainTrend.yAxis.name = 'm';
     chartOption.popupRainTrend.xAxis.data = [
-      "2024-07-12 12:30:20",
-      "2024-07-12 13:30:20",
-      "2024-07-12 14:30:20",
-      "2024-07-12 15:30:20",
+      '2024-07-12 12:30:20',
+      '2024-07-12 13:30:20',
+      '2024-07-12 14:30:20',
+      '2024-07-12 15:30:20',
     ];
     chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = "水深";
+    chartOption.popupRainTrend.series.name = '水深';
     chartOption.popupRainTrend.series.barWidth = 10;
     chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
     // 设置鼠标滚轮放大缩小展示数据区间
@@ -412,7 +395,7 @@
 let chartPopupRain = null;
 const initEchartsPopup = () => {
   if (!!chartPopupRain) chartPopupRain.dispose();
-  chartPopupRain = echarts.init(document.getElementById("chartPopupRainC"));
+  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
   chartOption.popupRainTrend.legend.data = [seleceName.value];
   chartOption.popupRainTrend.yAxis.name = unitName.value;
   chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
@@ -421,7 +404,7 @@
   // 设置鼠标滚轮放大缩小展示数据区间
   chartOption.popupRainTrend.dataZoom = [
     {
-      type: "inside",
+      type: 'inside',
       startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
     },
   ];
@@ -434,9 +417,9 @@
   chartPopupRain.setOption(chartOption.popupRainTrend);
 };
 // 切换因子点击
-const changeRainType = (val) => {
+const changeRainType = val => {
   selectCode.value = val;
-  let obj = dataOption.value.filter((item) => item.value == val)[0];
+  let obj = dataOption.value.filter(item => item.value == val)[0];
   selectCode.value = obj.value;
   seleceName.value = obj.label;
   unitName.value = obj.propertyUnit;
@@ -480,28 +463,30 @@
 //巡查反馈派发
 const submitControl = () => {
   let data = {
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
+};
+//街景弹框点击事件
+const showStreetLayer = () => {
+  console.log('少爷在这里加~~~~~~~~~');
 };
 onMounted(() => {
-  bus.on("closeCesiumPopup", () => {
+  bus.on('closeCesiumPopup', () => {
     allData.popupShow = false;
-    if (!!newfiberMapbox.getLayerByName("rqLine")) {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (!!newfiberMapbox.getLayerByName('rqLine')) {
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
     }
   });
-  bus.on("popupcontent", (params) => {
-    console.log("popup接收地图标注点值---111", params);
+  bus.on('popupcontent', params => {
+    console.log('popup接收地图标注点值---111', params);
     allData.dataList = params.popupInfo;
-    let pipePopupDiv = document.getElementById("cesiumPopupID");
+    let pipePopupDiv = document.getElementById('cesiumPopupID');
 
     let popupCenter, center, offsets;
     if (allData.dataList.geometry) {
-      if (allData.dataList.geometry.includes("LINESTRING")) {
-        popupCenter = turf.center(
-          turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))
-        ).geometry.coordinates;
+      if (allData.dataList.geometry.includes('LINESTRING')) {
+        popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
       } else {
         popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
       }
@@ -516,10 +501,10 @@
     window.window.pipePopup = new mapboxL7.Popup({
       html: pipePopupDiv,
       lngLat: {
-        lng: popupCenter[0],
-        lat: popupCenter[1],
+        lng: popupCenter ? popupCenter[0] : params.point[0],
+        lat: popupCenter ? popupCenter[1] : params.point[1],
       },
-      anchor: "center",
+      anchor: 'center',
       offsets: [-90, 130],
       autoClose: false,
     });
@@ -530,25 +515,25 @@
     });
     allData.popupShow = true;
     // 建筑社区弹框
-    if (params.popupInfo.type == "HMJZYSQ") {
+    if (params.popupInfo.type == 'HMJZYSQ') {
       allData.popupShow = false;
       let data = {
         title: params.popupInfo.name,
-        comIDs: ["xxinformation"],
+        comIDs: ['xxinformation'],
       };
-      bus.emit("publicDialog", data);
+      bus.emit('publicDialog', data);
       setTimeout(() => {
-        bus.emit("xxinformationList", params);
+        bus.emit('xxinformationList', params);
       }, 100);
     }
-    if (allData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
-    if (allData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
-    if (allData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
+    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
+    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
   });
 });
 onBeforeUnmount(() => {
-  bus.off("popupcontent");
-  bus.off("closeCesiumPopup");
+  bus.off('popupcontent');
+  bus.off('closeCesiumPopup');
 });
 </script>
 <style lang="scss">
@@ -574,8 +559,7 @@
     margin-top: 10px;
   }
   .title {
-    background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-      center;
+    background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
     background-size: cover;
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 4dbe10c..c1cf2bb 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,20 +5,14 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="[
-          'oneMapHeader',
-          'animate__animated',
-          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-        ]"
+        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
-            ><LocationFilled
-          /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -39,9 +33,7 @@
       <!-- 地图组件 -->
       <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM
-        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
-      ></WangJiaPingBIM>
+      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -68,42 +60,17 @@
       />
       <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng"></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL
-        v-if="AllData.ComShowID == 1"
-        :isActive="AllData.ComShowID == 1 ? true : false"
-        :showPanel="showPanel"
-      ></ComZTGL>
+      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ
-        v-if="AllData.ComShowID == 2"
-        :isActive="AllData.ComShowID == 2 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHRQ>
+      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS
-        v-if="AllData.ComShowID == 3"
-        :isActive="AllData.ComShowID == 3 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHPS>
+      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL
-        v-if="AllData.ComShowID == 4"
-        :isActive="AllData.ComShowID == 4 ? true : false"
-        :showPanel="showPanel"
-      >
-      </ComZHQL>
+      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD
-        v-if="AllData.ComShowID == 5"
-        :isActive="AllData.ComShowID == 5 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHSD>
+      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM
-        v-if="AllData.ComShowID == 6"
-        :isActive="AllData.ComShowID == 6 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHHM>
+      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -117,11 +84,7 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL
-        v-if="AllData.ComShowID == 7"
-        :isActive="AllData.ComShowID == 7 ? true : false"
-        :showPanel="showPanel"
-      ></ComFHPL>
+      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -131,11 +94,7 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="[
-          'MenuList' + index,
-          'animate__animated',
-          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
-        ]"
+        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -149,10 +108,7 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div
-            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
-            class="ErJiMenuBox"
-          >
+          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -171,11 +127,7 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun
-    :RYdialogShow="AllData.RYDialog"
-    :ZhuDongBoHao="AllData.ZhuDongBoHao"
-    @OneDialogHide="dialogHide"
-  ></ModelRongYun>
+  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -197,57 +149,60 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from "@/bus";
-import { fullscreenToggel } from "@/utils/util";
-import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from '@/bus';
+import request from '@/utils/request';
+import { fullscreenToggel } from '@/utils/util';
+import { ref, reactive, toRefs, onMounted } from 'vue';
 
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
-import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
-import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
-import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
-import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
-import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
-import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
-import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
-import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
-import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
-import FXPL from "@/assets/images/Sponge_screen/menu/FXPL.png";
-import AC_FXPL from "@/assets/images/Sponge_screen/menu/AC_FXPL.png";
-import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
-import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
+import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
+import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
+import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
+import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
+import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
+import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
+import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
+import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
+import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
+import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
+import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
+import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
+import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
+import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
 // 引用地图
-import OneMap from "./map/newfiberMapBox.vue";
+import OneMap from './map/newfiberMapBox.vue';
+// 引用街景地图
+import PanoramaMap from '@/views/oneMap/map/PanoramaMap.vue';
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
+import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
 // 引用隧道BIm
-import Tunnel from "./BIM/Tunnel.vue";
+import Tunnel from './BIM/Tunnel.vue';
 // 引用语音识别
-import Voice from "./../voice/recordPage/index.vue";
+import Voice from './../voice/recordPage/index.vue';
 // 引入融云通讯录
-import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
+import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
 // 子系统引入
-import ComZTGL from "./components/ZTGL.vue"; //总体概览
-import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
-import ComZHPS from "./components/ZHPS.vue"; //智慧排水
-import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
-import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
-import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
-import ComFHPL from "./components/FHPL.vue"; //防洪排涝
-import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
-import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
-import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
+import ComZTGL from './components/ZTGL.vue'; //总体概览
+import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
+import ComZHPS from './components/ZHPS.vue'; //智慧排水
+import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
+import ComZHSD from './components/ZHSD.vue'; //智慧隧道
+import ComZHHM from './components/ZHHM.vue'; //智慧海绵
+import ComFHPL from './components/FHPL.vue'; //防洪排涝
+import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
+import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
+import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
+import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
 // 图层控制面板
-import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
+import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
+import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
 // 左右滑动
-import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
-import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
+import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
+import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -255,8 +210,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: "",
-  text: "",
+  imgNum: '',
+  text: '',
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -344,61 +299,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: "",
-  SiteNo: "",
+  getSiteId: '',
+  SiteNo: '',
   data: {},
-  comIDs: ["spjk"],
+  comIDs: ['spjk'],
   customData: [],
-  RefName: "",
-  title: "详情",
+  RefName: '',
+  title: '详情',
 });
 onBeforeMount(() => {
-  console.log("ZhuanTiType", userStore.ZhuanTiType);
+  console.log('ZhuanTiType', userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: "总体概览",
+        name: '总体概览',
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ["路网", "河流水系"],
+        Layers: ['路网', '河流水系'],
       },
       {
-        name: "燃气安全",
+        name: '燃气安全',
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ["干管", "主管", "干管流向", "主管流向"],
+        Layers: ['干管', '主管', '干管流向', '主管流向'],
       },
       {
-        name: "排水安全",
+        name: '排水安全',
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ["雨水管网", "污水管网"],
+        Layers: ['雨水管网', '污水管网'],
         children: [
           {
-            name: "排水安全",
+            name: '排水安全',
             id: 3,
             Layers: [],
           },
           {
-            name: "防汛排涝",
+            name: '防汛排涝',
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: "桥梁安全",
+        name: '桥梁安全',
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: "隧道安全",
+        name: '隧道安全',
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -409,19 +364,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: "城市概览",
+        name: '城市概览',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: "监测分析",
+        name: '监测分析',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 61,
       },
       {
-        name: "建设评估",
+        name: '建设评估',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 62,
@@ -435,10 +390,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
-  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
+  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on("checkRainL", (params) => {
+  bus.on('checkRainL', params => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -446,7 +401,7 @@
     }
   });
   // 底部隐藏
-  bus.on("checkBottom", (params) => {
+  bus.on('checkBottom', params => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -454,15 +409,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog", (params) => {
+  bus.on('publicDialog', params => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? "详情";
+    dialogConfig.title = params.title ?? '详情';
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog_Close", (params) => {
+  bus.on('publicDialog_Close', params => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -472,14 +427,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on("OpenRY", (params) => {
+  bus.on('OpenRY', params => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit("showRy");
+    bus.emit('showRy');
   });
 
   // 切换专题图
-  bus.on("ChangeZhuanTiTu", (params) => {
+  bus.on('ChangeZhuanTiTu', params => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -489,18 +444,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on("changeShowPanel", (params) => {
+  bus.on('changeShowPanel', params => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off("BottomHidden");
-  bus.off("publicDialog");
-  bus.off("publicDialog_Close");
-  bus.off("OpenRY");
-  bus.off("ChangeZhuanTiTu");
-  bus.off("checkRainL");
-  bus.off("changeShowPanel");
+  bus.off('BottomHidden');
+  bus.off('publicDialog');
+  bus.off('publicDialog_Close');
+  bus.off('OpenRY');
+  bus.off('ChangeZhuanTiTu');
+  bus.off('checkRainL');
+  bus.off('changeShowPanel');
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -519,9 +474,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit("clearAllLayer");
+    bus.emit('clearAllLayer');
     // 打开默认的菜单
-    bus.emit("SetLayerShow", item.Layers);
+    bus.emit('SetLayerShow', item.Layers);
   }
 };
 // 二级菜单点击
@@ -540,10 +495,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit("showRy");
+  bus.emit('showRy');
 };
 // 关闭融云通讯录弹窗
-const dialogHide = (val) => {
+const dialogHide = val => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -551,25 +506,52 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log("point", point);
-  console.log("properties", properties);
-  console.log("feature---", feature);
-  if (properties) {
-    if (feature == "rq_pipeline_info") {
-      if (!!newfiberMapbox.getLayerByName("rqLine")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  console.log('point', point);
+  console.log('properties', properties);
+  console.log('feature---', feature);
+  if (!feature) {
+    let currentZoom = newfiberMapbox.map.getZoom();
+    console.log('currentZoom--', currentZoom);
+    if (currentZoom >= 17) {
+      let clickPoint = turf.point(point);
+      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
+      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
+      let data = await request({
+        url: `/bdApi//baiduservice/panorama`,
+        method: 'GET',
+        params: {
+          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
+          fov: 180,
+          height: 256,
+          width: 512,
+        },
+      });
+      if (data && data.data) {
+        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
       }
-      let rqLine = turf.featureCollection([
-        turf.feature(Terraformer.WKT.parse(properties.geometry)),
-      ]);
+      console.log('data----', data);
+      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
+      bus.emit('popupcontent', {
+        popupShow: true,
+        point: point,
+        popupInfo: data,
+      });
+    }
+  }
+  if (properties) {
+    if (feature == 'rq_pipeline_info') {
+      if (!!newfiberMapbox.getLayerByName('rqLine')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
+      }
+      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
       let layer = new mapboxL7.LineLayer({
-        name: "rqLine",
+        name: 'rqLine',
       })
         .source(rqLine)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("rgb(241, 159, 27)")
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(241, 159, 27)')
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -580,11 +562,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit("popupcontent", {
+    bus.emit('popupcontent', {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -599,20 +581,12 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array(
-    "星期日",
-    "星期一",
-    "星期二",
-    "星期三",
-    "星期四",
-    "星期五",
-    "星期六"
-  );
+  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -635,11 +609,11 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = (item) => {
+const handleMouseEnter = item => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = (item) => {
+const handleMouseLeave = item => {
   AllData.ErJiMenuShowID = null;
 };
 
@@ -770,7 +744,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -854,17 +828,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -911,7 +885,7 @@
       bottom: 0;
       width: 952px;
       height: 62px;
-      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -1045,7 +1019,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;
diff --git a/src/views/oneMap/map/PanoramaMap.vue b/src/views/oneMap/map/PanoramaMap.vue
new file mode 100644
index 0000000..14edbb0
--- /dev/null
+++ b/src/views/oneMap/map/PanoramaMap.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="mapPage">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script setup name="PanoramaMap">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
+const AllData = reactive({
+  panorama: null,
+});
+// 初始化街景地图
+const initePanoramaMap = () => {
+  AllData.panorama = BMapGL.Panorama('container');
+  AllData.panorama.setPosition(new BMapGL.Point(116.40385, 39.913795));
+  AllData.panorama.setPov({
+    // 修改全景的视角
+    pitch: 10,
+    heading: 140,
+  });
+  AllData.panorama.setOptions({
+    linksControl: true, // 隐藏道路指示控件，默认true
+    navigationControl: true, // 隐藏导航控件，默认true
+  });
+};
+onMounted(() => {
+  initePanoramaMap();
+});
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.mapPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 0;
+  background: lavender;
+}
+
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+</style>

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/components/mapboxPopup.vue b/src/views/oneMap/components/mapboxPopup.vue
index 95ec03f..b5b6e5f 100644
--- a/src/views/oneMap/components/mapboxPopup.vue
+++ b/src/views/oneMap/components/mapboxPopup.vue
@@ -47,11 +47,11 @@
           <div class="contentName">厂站类型：</div>
           <div class="contentValue">
             {{
-              allData.dataList.pumpType == "rain_water"
-                ? "雨水泵站"
-                : allData.dataList.pumpType == "sewage_water"
-                ? "污水泵站"
-                : "雨污合建"
+              allData.dataList.pumpType == 'rain_water'
+                ? '雨水泵站'
+                : allData.dataList.pumpType == 'sewage_water'
+                ? '污水泵站'
+                : '雨污合建'
             }}
           </div>
         </div>
@@ -60,22 +60,14 @@
           <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
           <div class="contentName">设计规模：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.designScaleSecond ||
-              allData.dataList.sweagepump.designScaleSecond ||
-              "--"
-            }}
+            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
             m³/s
           </div>
         </div>
         <div class="contentInfo">
           <div class="contentName">泵机台数：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.deviceCount ||
-              allData.dataList.sweagepump.deviceCount ||
-              "--"
-            }}台
+            {{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
           </div>
           <div class="contentName">建设单位：</div>
           <div class="contentValue" :title="allData.dataList.unitDep">
@@ -168,18 +160,8 @@
           style="width: 200px"
           @change="changeDate"
         />
-        <el-select
-          v-model="selectCode"
-          style="margin: -7px 0px 0px 10px; width: 150px"
-          size="small"
-          @change="changeRainType"
-        >
-          <el-option
-            v-for="item in dataOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
+          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div id="chartPopupRainC"></div>
       </div>
@@ -289,37 +271,38 @@
         <div class="submitControl" @click="submitControl">派发</div>
       </div>
     </div>
+    <!-- 街景图 -->
+    <div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
+      <img :src="allData.dataList.data.base64" />
+    </div>
   </div>
 </template>
 
 <script setup name="CesiumPopup">
-import bus from "@/bus";
+import bus from '@/bus';
 //import chartOption from '@/components/Echarts/pieChart_1.js';
 //import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
 const { proxy } = getCurrentInstance();
 const allData = reactive({
   dataList: {},
   popupShow: false,
-  dateTime: [
-    proxy.moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
-    proxy.moment().format("YYYY-MM-DD"),
-  ],
+  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
 });
 const dataOption = ref([]);
 const selectData = ref([]);
-const selectCode = ref("");
-const seleceName = ref("");
-const unitName = ref("");
+const selectCode = ref('');
+const seleceName = ref('');
+const unitName = ref('');
 const propertyMonitorXList = ref([]);
 const realRiverVal = ref(0);
 
 //
 function closePopupCES() {
   allData.popupShow = false;
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
   // 取消之后回到中心点
   // newfiberMapbox.map.easeTo({
@@ -334,17 +317,17 @@
 function changeDateJSD() {
   setTimeout(() => {
     if (!!chartJSD) chartJSD.dispose();
-    chartJSD = echarts.init(document.getElementById("chartHistoryJSD"));
-    chartOption.popupRainTrend.legend.data = ["水深"];
-    chartOption.popupRainTrend.yAxis.name = "m";
+    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
+    chartOption.popupRainTrend.legend.data = ['水深'];
+    chartOption.popupRainTrend.yAxis.name = 'm';
     chartOption.popupRainTrend.xAxis.data = [
-      "2024-07-12 12:30:20",
-      "2024-07-12 13:30:20",
-      "2024-07-12 14:30:20",
-      "2024-07-12 15:30:20",
+      '2024-07-12 12:30:20',
+      '2024-07-12 13:30:20',
+      '2024-07-12 14:30:20',
+      '2024-07-12 15:30:20',
     ];
     chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = "水深";
+    chartOption.popupRainTrend.series.name = '水深';
     chartOption.popupRainTrend.series.barWidth = 10;
     chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
     // 设置鼠标滚轮放大缩小展示数据区间
@@ -412,7 +395,7 @@
 let chartPopupRain = null;
 const initEchartsPopup = () => {
   if (!!chartPopupRain) chartPopupRain.dispose();
-  chartPopupRain = echarts.init(document.getElementById("chartPopupRainC"));
+  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
   chartOption.popupRainTrend.legend.data = [seleceName.value];
   chartOption.popupRainTrend.yAxis.name = unitName.value;
   chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
@@ -421,7 +404,7 @@
   // 设置鼠标滚轮放大缩小展示数据区间
   chartOption.popupRainTrend.dataZoom = [
     {
-      type: "inside",
+      type: 'inside',
       startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
     },
   ];
@@ -434,9 +417,9 @@
   chartPopupRain.setOption(chartOption.popupRainTrend);
 };
 // 切换因子点击
-const changeRainType = (val) => {
+const changeRainType = val => {
   selectCode.value = val;
-  let obj = dataOption.value.filter((item) => item.value == val)[0];
+  let obj = dataOption.value.filter(item => item.value == val)[0];
   selectCode.value = obj.value;
   seleceName.value = obj.label;
   unitName.value = obj.propertyUnit;
@@ -480,28 +463,30 @@
 //巡查反馈派发
 const submitControl = () => {
   let data = {
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
+};
+//街景弹框点击事件
+const showStreetLayer = () => {
+  console.log('少爷在这里加~~~~~~~~~');
 };
 onMounted(() => {
-  bus.on("closeCesiumPopup", () => {
+  bus.on('closeCesiumPopup', () => {
     allData.popupShow = false;
-    if (!!newfiberMapbox.getLayerByName("rqLine")) {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (!!newfiberMapbox.getLayerByName('rqLine')) {
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
     }
   });
-  bus.on("popupcontent", (params) => {
-    console.log("popup接收地图标注点值---111", params);
+  bus.on('popupcontent', params => {
+    console.log('popup接收地图标注点值---111', params);
     allData.dataList = params.popupInfo;
-    let pipePopupDiv = document.getElementById("cesiumPopupID");
+    let pipePopupDiv = document.getElementById('cesiumPopupID');
 
     let popupCenter, center, offsets;
     if (allData.dataList.geometry) {
-      if (allData.dataList.geometry.includes("LINESTRING")) {
-        popupCenter = turf.center(
-          turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))
-        ).geometry.coordinates;
+      if (allData.dataList.geometry.includes('LINESTRING')) {
+        popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
       } else {
         popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
       }
@@ -516,10 +501,10 @@
     window.window.pipePopup = new mapboxL7.Popup({
       html: pipePopupDiv,
       lngLat: {
-        lng: popupCenter[0],
-        lat: popupCenter[1],
+        lng: popupCenter ? popupCenter[0] : params.point[0],
+        lat: popupCenter ? popupCenter[1] : params.point[1],
       },
-      anchor: "center",
+      anchor: 'center',
       offsets: [-90, 130],
       autoClose: false,
     });
@@ -530,25 +515,25 @@
     });
     allData.popupShow = true;
     // 建筑社区弹框
-    if (params.popupInfo.type == "HMJZYSQ") {
+    if (params.popupInfo.type == 'HMJZYSQ') {
       allData.popupShow = false;
       let data = {
         title: params.popupInfo.name,
-        comIDs: ["xxinformation"],
+        comIDs: ['xxinformation'],
       };
-      bus.emit("publicDialog", data);
+      bus.emit('publicDialog', data);
       setTimeout(() => {
-        bus.emit("xxinformationList", params);
+        bus.emit('xxinformationList', params);
       }, 100);
     }
-    if (allData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
-    if (allData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
-    if (allData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
+    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
+    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
   });
 });
 onBeforeUnmount(() => {
-  bus.off("popupcontent");
-  bus.off("closeCesiumPopup");
+  bus.off('popupcontent');
+  bus.off('closeCesiumPopup');
 });
 </script>
 <style lang="scss">
@@ -574,8 +559,7 @@
     margin-top: 10px;
   }
   .title {
-    background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-      center;
+    background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
     background-size: cover;
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 4dbe10c..c1cf2bb 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,20 +5,14 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="[
-          'oneMapHeader',
-          'animate__animated',
-          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-        ]"
+        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
-            ><LocationFilled
-          /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -39,9 +33,7 @@
       <!-- 地图组件 -->
       <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM
-        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
-      ></WangJiaPingBIM>
+      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -68,42 +60,17 @@
       />
       <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng"></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL
-        v-if="AllData.ComShowID == 1"
-        :isActive="AllData.ComShowID == 1 ? true : false"
-        :showPanel="showPanel"
-      ></ComZTGL>
+      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ
-        v-if="AllData.ComShowID == 2"
-        :isActive="AllData.ComShowID == 2 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHRQ>
+      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS
-        v-if="AllData.ComShowID == 3"
-        :isActive="AllData.ComShowID == 3 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHPS>
+      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL
-        v-if="AllData.ComShowID == 4"
-        :isActive="AllData.ComShowID == 4 ? true : false"
-        :showPanel="showPanel"
-      >
-      </ComZHQL>
+      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD
-        v-if="AllData.ComShowID == 5"
-        :isActive="AllData.ComShowID == 5 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHSD>
+      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM
-        v-if="AllData.ComShowID == 6"
-        :isActive="AllData.ComShowID == 6 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHHM>
+      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -117,11 +84,7 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL
-        v-if="AllData.ComShowID == 7"
-        :isActive="AllData.ComShowID == 7 ? true : false"
-        :showPanel="showPanel"
-      ></ComFHPL>
+      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -131,11 +94,7 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="[
-          'MenuList' + index,
-          'animate__animated',
-          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
-        ]"
+        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -149,10 +108,7 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div
-            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
-            class="ErJiMenuBox"
-          >
+          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -171,11 +127,7 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun
-    :RYdialogShow="AllData.RYDialog"
-    :ZhuDongBoHao="AllData.ZhuDongBoHao"
-    @OneDialogHide="dialogHide"
-  ></ModelRongYun>
+  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -197,57 +149,60 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from "@/bus";
-import { fullscreenToggel } from "@/utils/util";
-import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from '@/bus';
+import request from '@/utils/request';
+import { fullscreenToggel } from '@/utils/util';
+import { ref, reactive, toRefs, onMounted } from 'vue';
 
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
-import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
-import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
-import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
-import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
-import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
-import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
-import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
-import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
-import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
-import FXPL from "@/assets/images/Sponge_screen/menu/FXPL.png";
-import AC_FXPL from "@/assets/images/Sponge_screen/menu/AC_FXPL.png";
-import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
-import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
+import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
+import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
+import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
+import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
+import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
+import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
+import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
+import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
+import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
+import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
+import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
+import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
+import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
+import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
 // 引用地图
-import OneMap from "./map/newfiberMapBox.vue";
+import OneMap from './map/newfiberMapBox.vue';
+// 引用街景地图
+import PanoramaMap from '@/views/oneMap/map/PanoramaMap.vue';
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
+import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
 // 引用隧道BIm
-import Tunnel from "./BIM/Tunnel.vue";
+import Tunnel from './BIM/Tunnel.vue';
 // 引用语音识别
-import Voice from "./../voice/recordPage/index.vue";
+import Voice from './../voice/recordPage/index.vue';
 // 引入融云通讯录
-import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
+import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
 // 子系统引入
-import ComZTGL from "./components/ZTGL.vue"; //总体概览
-import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
-import ComZHPS from "./components/ZHPS.vue"; //智慧排水
-import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
-import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
-import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
-import ComFHPL from "./components/FHPL.vue"; //防洪排涝
-import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
-import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
-import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
+import ComZTGL from './components/ZTGL.vue'; //总体概览
+import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
+import ComZHPS from './components/ZHPS.vue'; //智慧排水
+import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
+import ComZHSD from './components/ZHSD.vue'; //智慧隧道
+import ComZHHM from './components/ZHHM.vue'; //智慧海绵
+import ComFHPL from './components/FHPL.vue'; //防洪排涝
+import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
+import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
+import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
+import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
 // 图层控制面板
-import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
+import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
+import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
 // 左右滑动
-import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
-import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
+import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
+import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -255,8 +210,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: "",
-  text: "",
+  imgNum: '',
+  text: '',
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -344,61 +299,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: "",
-  SiteNo: "",
+  getSiteId: '',
+  SiteNo: '',
   data: {},
-  comIDs: ["spjk"],
+  comIDs: ['spjk'],
   customData: [],
-  RefName: "",
-  title: "详情",
+  RefName: '',
+  title: '详情',
 });
 onBeforeMount(() => {
-  console.log("ZhuanTiType", userStore.ZhuanTiType);
+  console.log('ZhuanTiType', userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: "总体概览",
+        name: '总体概览',
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ["路网", "河流水系"],
+        Layers: ['路网', '河流水系'],
       },
       {
-        name: "燃气安全",
+        name: '燃气安全',
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ["干管", "主管", "干管流向", "主管流向"],
+        Layers: ['干管', '主管', '干管流向', '主管流向'],
       },
       {
-        name: "排水安全",
+        name: '排水安全',
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ["雨水管网", "污水管网"],
+        Layers: ['雨水管网', '污水管网'],
         children: [
           {
-            name: "排水安全",
+            name: '排水安全',
             id: 3,
             Layers: [],
           },
           {
-            name: "防汛排涝",
+            name: '防汛排涝',
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: "桥梁安全",
+        name: '桥梁安全',
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: "隧道安全",
+        name: '隧道安全',
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -409,19 +364,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: "城市概览",
+        name: '城市概览',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: "监测分析",
+        name: '监测分析',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 61,
       },
       {
-        name: "建设评估",
+        name: '建设评估',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 62,
@@ -435,10 +390,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
-  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
+  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on("checkRainL", (params) => {
+  bus.on('checkRainL', params => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -446,7 +401,7 @@
     }
   });
   // 底部隐藏
-  bus.on("checkBottom", (params) => {
+  bus.on('checkBottom', params => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -454,15 +409,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog", (params) => {
+  bus.on('publicDialog', params => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? "详情";
+    dialogConfig.title = params.title ?? '详情';
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog_Close", (params) => {
+  bus.on('publicDialog_Close', params => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -472,14 +427,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on("OpenRY", (params) => {
+  bus.on('OpenRY', params => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit("showRy");
+    bus.emit('showRy');
   });
 
   // 切换专题图
-  bus.on("ChangeZhuanTiTu", (params) => {
+  bus.on('ChangeZhuanTiTu', params => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -489,18 +444,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on("changeShowPanel", (params) => {
+  bus.on('changeShowPanel', params => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off("BottomHidden");
-  bus.off("publicDialog");
-  bus.off("publicDialog_Close");
-  bus.off("OpenRY");
-  bus.off("ChangeZhuanTiTu");
-  bus.off("checkRainL");
-  bus.off("changeShowPanel");
+  bus.off('BottomHidden');
+  bus.off('publicDialog');
+  bus.off('publicDialog_Close');
+  bus.off('OpenRY');
+  bus.off('ChangeZhuanTiTu');
+  bus.off('checkRainL');
+  bus.off('changeShowPanel');
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -519,9 +474,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit("clearAllLayer");
+    bus.emit('clearAllLayer');
     // 打开默认的菜单
-    bus.emit("SetLayerShow", item.Layers);
+    bus.emit('SetLayerShow', item.Layers);
   }
 };
 // 二级菜单点击
@@ -540,10 +495,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit("showRy");
+  bus.emit('showRy');
 };
 // 关闭融云通讯录弹窗
-const dialogHide = (val) => {
+const dialogHide = val => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -551,25 +506,52 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log("point", point);
-  console.log("properties", properties);
-  console.log("feature---", feature);
-  if (properties) {
-    if (feature == "rq_pipeline_info") {
-      if (!!newfiberMapbox.getLayerByName("rqLine")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  console.log('point', point);
+  console.log('properties', properties);
+  console.log('feature---', feature);
+  if (!feature) {
+    let currentZoom = newfiberMapbox.map.getZoom();
+    console.log('currentZoom--', currentZoom);
+    if (currentZoom >= 17) {
+      let clickPoint = turf.point(point);
+      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
+      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
+      let data = await request({
+        url: `/bdApi//baiduservice/panorama`,
+        method: 'GET',
+        params: {
+          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
+          fov: 180,
+          height: 256,
+          width: 512,
+        },
+      });
+      if (data && data.data) {
+        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
       }
-      let rqLine = turf.featureCollection([
-        turf.feature(Terraformer.WKT.parse(properties.geometry)),
-      ]);
+      console.log('data----', data);
+      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
+      bus.emit('popupcontent', {
+        popupShow: true,
+        point: point,
+        popupInfo: data,
+      });
+    }
+  }
+  if (properties) {
+    if (feature == 'rq_pipeline_info') {
+      if (!!newfiberMapbox.getLayerByName('rqLine')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
+      }
+      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
       let layer = new mapboxL7.LineLayer({
-        name: "rqLine",
+        name: 'rqLine',
       })
         .source(rqLine)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("rgb(241, 159, 27)")
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(241, 159, 27)')
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -580,11 +562,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit("popupcontent", {
+    bus.emit('popupcontent', {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -599,20 +581,12 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array(
-    "星期日",
-    "星期一",
-    "星期二",
-    "星期三",
-    "星期四",
-    "星期五",
-    "星期六"
-  );
+  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -635,11 +609,11 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = (item) => {
+const handleMouseEnter = item => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = (item) => {
+const handleMouseLeave = item => {
   AllData.ErJiMenuShowID = null;
 };
 
@@ -770,7 +744,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -854,17 +828,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -911,7 +885,7 @@
       bottom: 0;
       width: 952px;
       height: 62px;
-      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -1045,7 +1019,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;
diff --git a/src/views/oneMap/map/PanoramaMap.vue b/src/views/oneMap/map/PanoramaMap.vue
new file mode 100644
index 0000000..14edbb0
--- /dev/null
+++ b/src/views/oneMap/map/PanoramaMap.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="mapPage">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script setup name="PanoramaMap">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
+const AllData = reactive({
+  panorama: null,
+});
+// 初始化街景地图
+const initePanoramaMap = () => {
+  AllData.panorama = BMapGL.Panorama('container');
+  AllData.panorama.setPosition(new BMapGL.Point(116.40385, 39.913795));
+  AllData.panorama.setPov({
+    // 修改全景的视角
+    pitch: 10,
+    heading: 140,
+  });
+  AllData.panorama.setOptions({
+    linksControl: true, // 隐藏道路指示控件，默认true
+    navigationControl: true, // 隐藏导航控件，默认true
+  });
+};
+onMounted(() => {
+  initePanoramaMap();
+});
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.mapPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 0;
+  background: lavender;
+}
+
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+</style>
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
index f14c679..3343523 100644
--- a/src/views/oneMap/smartBridge/LeftBox.vue
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -144,11 +144,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 160px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 155px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -159,7 +159,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -177,7 +177,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -198,7 +198,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/components/mapboxPopup.vue b/src/views/oneMap/components/mapboxPopup.vue
index 95ec03f..b5b6e5f 100644
--- a/src/views/oneMap/components/mapboxPopup.vue
+++ b/src/views/oneMap/components/mapboxPopup.vue
@@ -47,11 +47,11 @@
           <div class="contentName">厂站类型：</div>
           <div class="contentValue">
             {{
-              allData.dataList.pumpType == "rain_water"
-                ? "雨水泵站"
-                : allData.dataList.pumpType == "sewage_water"
-                ? "污水泵站"
-                : "雨污合建"
+              allData.dataList.pumpType == 'rain_water'
+                ? '雨水泵站'
+                : allData.dataList.pumpType == 'sewage_water'
+                ? '污水泵站'
+                : '雨污合建'
             }}
           </div>
         </div>
@@ -60,22 +60,14 @@
           <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
           <div class="contentName">设计规模：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.designScaleSecond ||
-              allData.dataList.sweagepump.designScaleSecond ||
-              "--"
-            }}
+            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
             m³/s
           </div>
         </div>
         <div class="contentInfo">
           <div class="contentName">泵机台数：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.deviceCount ||
-              allData.dataList.sweagepump.deviceCount ||
-              "--"
-            }}台
+            {{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
           </div>
           <div class="contentName">建设单位：</div>
           <div class="contentValue" :title="allData.dataList.unitDep">
@@ -168,18 +160,8 @@
           style="width: 200px"
           @change="changeDate"
         />
-        <el-select
-          v-model="selectCode"
-          style="margin: -7px 0px 0px 10px; width: 150px"
-          size="small"
-          @change="changeRainType"
-        >
-          <el-option
-            v-for="item in dataOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
+          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div id="chartPopupRainC"></div>
       </div>
@@ -289,37 +271,38 @@
         <div class="submitControl" @click="submitControl">派发</div>
       </div>
     </div>
+    <!-- 街景图 -->
+    <div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
+      <img :src="allData.dataList.data.base64" />
+    </div>
   </div>
 </template>
 
 <script setup name="CesiumPopup">
-import bus from "@/bus";
+import bus from '@/bus';
 //import chartOption from '@/components/Echarts/pieChart_1.js';
 //import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
 const { proxy } = getCurrentInstance();
 const allData = reactive({
   dataList: {},
   popupShow: false,
-  dateTime: [
-    proxy.moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
-    proxy.moment().format("YYYY-MM-DD"),
-  ],
+  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
 });
 const dataOption = ref([]);
 const selectData = ref([]);
-const selectCode = ref("");
-const seleceName = ref("");
-const unitName = ref("");
+const selectCode = ref('');
+const seleceName = ref('');
+const unitName = ref('');
 const propertyMonitorXList = ref([]);
 const realRiverVal = ref(0);
 
 //
 function closePopupCES() {
   allData.popupShow = false;
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
   // 取消之后回到中心点
   // newfiberMapbox.map.easeTo({
@@ -334,17 +317,17 @@
 function changeDateJSD() {
   setTimeout(() => {
     if (!!chartJSD) chartJSD.dispose();
-    chartJSD = echarts.init(document.getElementById("chartHistoryJSD"));
-    chartOption.popupRainTrend.legend.data = ["水深"];
-    chartOption.popupRainTrend.yAxis.name = "m";
+    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
+    chartOption.popupRainTrend.legend.data = ['水深'];
+    chartOption.popupRainTrend.yAxis.name = 'm';
     chartOption.popupRainTrend.xAxis.data = [
-      "2024-07-12 12:30:20",
-      "2024-07-12 13:30:20",
-      "2024-07-12 14:30:20",
-      "2024-07-12 15:30:20",
+      '2024-07-12 12:30:20',
+      '2024-07-12 13:30:20',
+      '2024-07-12 14:30:20',
+      '2024-07-12 15:30:20',
     ];
     chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = "水深";
+    chartOption.popupRainTrend.series.name = '水深';
     chartOption.popupRainTrend.series.barWidth = 10;
     chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
     // 设置鼠标滚轮放大缩小展示数据区间
@@ -412,7 +395,7 @@
 let chartPopupRain = null;
 const initEchartsPopup = () => {
   if (!!chartPopupRain) chartPopupRain.dispose();
-  chartPopupRain = echarts.init(document.getElementById("chartPopupRainC"));
+  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
   chartOption.popupRainTrend.legend.data = [seleceName.value];
   chartOption.popupRainTrend.yAxis.name = unitName.value;
   chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
@@ -421,7 +404,7 @@
   // 设置鼠标滚轮放大缩小展示数据区间
   chartOption.popupRainTrend.dataZoom = [
     {
-      type: "inside",
+      type: 'inside',
       startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
     },
   ];
@@ -434,9 +417,9 @@
   chartPopupRain.setOption(chartOption.popupRainTrend);
 };
 // 切换因子点击
-const changeRainType = (val) => {
+const changeRainType = val => {
   selectCode.value = val;
-  let obj = dataOption.value.filter((item) => item.value == val)[0];
+  let obj = dataOption.value.filter(item => item.value == val)[0];
   selectCode.value = obj.value;
   seleceName.value = obj.label;
   unitName.value = obj.propertyUnit;
@@ -480,28 +463,30 @@
 //巡查反馈派发
 const submitControl = () => {
   let data = {
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
+};
+//街景弹框点击事件
+const showStreetLayer = () => {
+  console.log('少爷在这里加~~~~~~~~~');
 };
 onMounted(() => {
-  bus.on("closeCesiumPopup", () => {
+  bus.on('closeCesiumPopup', () => {
     allData.popupShow = false;
-    if (!!newfiberMapbox.getLayerByName("rqLine")) {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (!!newfiberMapbox.getLayerByName('rqLine')) {
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
     }
   });
-  bus.on("popupcontent", (params) => {
-    console.log("popup接收地图标注点值---111", params);
+  bus.on('popupcontent', params => {
+    console.log('popup接收地图标注点值---111', params);
     allData.dataList = params.popupInfo;
-    let pipePopupDiv = document.getElementById("cesiumPopupID");
+    let pipePopupDiv = document.getElementById('cesiumPopupID');
 
     let popupCenter, center, offsets;
     if (allData.dataList.geometry) {
-      if (allData.dataList.geometry.includes("LINESTRING")) {
-        popupCenter = turf.center(
-          turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))
-        ).geometry.coordinates;
+      if (allData.dataList.geometry.includes('LINESTRING')) {
+        popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
       } else {
         popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
       }
@@ -516,10 +501,10 @@
     window.window.pipePopup = new mapboxL7.Popup({
       html: pipePopupDiv,
       lngLat: {
-        lng: popupCenter[0],
-        lat: popupCenter[1],
+        lng: popupCenter ? popupCenter[0] : params.point[0],
+        lat: popupCenter ? popupCenter[1] : params.point[1],
       },
-      anchor: "center",
+      anchor: 'center',
       offsets: [-90, 130],
       autoClose: false,
     });
@@ -530,25 +515,25 @@
     });
     allData.popupShow = true;
     // 建筑社区弹框
-    if (params.popupInfo.type == "HMJZYSQ") {
+    if (params.popupInfo.type == 'HMJZYSQ') {
       allData.popupShow = false;
       let data = {
         title: params.popupInfo.name,
-        comIDs: ["xxinformation"],
+        comIDs: ['xxinformation'],
       };
-      bus.emit("publicDialog", data);
+      bus.emit('publicDialog', data);
       setTimeout(() => {
-        bus.emit("xxinformationList", params);
+        bus.emit('xxinformationList', params);
       }, 100);
     }
-    if (allData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
-    if (allData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
-    if (allData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
+    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
+    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
   });
 });
 onBeforeUnmount(() => {
-  bus.off("popupcontent");
-  bus.off("closeCesiumPopup");
+  bus.off('popupcontent');
+  bus.off('closeCesiumPopup');
 });
 </script>
 <style lang="scss">
@@ -574,8 +559,7 @@
     margin-top: 10px;
   }
   .title {
-    background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-      center;
+    background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
     background-size: cover;
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 4dbe10c..c1cf2bb 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,20 +5,14 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="[
-          'oneMapHeader',
-          'animate__animated',
-          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-        ]"
+        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
-            ><LocationFilled
-          /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -39,9 +33,7 @@
       <!-- 地图组件 -->
       <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM
-        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
-      ></WangJiaPingBIM>
+      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -68,42 +60,17 @@
       />
       <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng"></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL
-        v-if="AllData.ComShowID == 1"
-        :isActive="AllData.ComShowID == 1 ? true : false"
-        :showPanel="showPanel"
-      ></ComZTGL>
+      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ
-        v-if="AllData.ComShowID == 2"
-        :isActive="AllData.ComShowID == 2 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHRQ>
+      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS
-        v-if="AllData.ComShowID == 3"
-        :isActive="AllData.ComShowID == 3 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHPS>
+      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL
-        v-if="AllData.ComShowID == 4"
-        :isActive="AllData.ComShowID == 4 ? true : false"
-        :showPanel="showPanel"
-      >
-      </ComZHQL>
+      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD
-        v-if="AllData.ComShowID == 5"
-        :isActive="AllData.ComShowID == 5 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHSD>
+      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM
-        v-if="AllData.ComShowID == 6"
-        :isActive="AllData.ComShowID == 6 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHHM>
+      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -117,11 +84,7 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL
-        v-if="AllData.ComShowID == 7"
-        :isActive="AllData.ComShowID == 7 ? true : false"
-        :showPanel="showPanel"
-      ></ComFHPL>
+      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -131,11 +94,7 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="[
-          'MenuList' + index,
-          'animate__animated',
-          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
-        ]"
+        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -149,10 +108,7 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div
-            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
-            class="ErJiMenuBox"
-          >
+          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -171,11 +127,7 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun
-    :RYdialogShow="AllData.RYDialog"
-    :ZhuDongBoHao="AllData.ZhuDongBoHao"
-    @OneDialogHide="dialogHide"
-  ></ModelRongYun>
+  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -197,57 +149,60 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from "@/bus";
-import { fullscreenToggel } from "@/utils/util";
-import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from '@/bus';
+import request from '@/utils/request';
+import { fullscreenToggel } from '@/utils/util';
+import { ref, reactive, toRefs, onMounted } from 'vue';
 
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
-import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
-import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
-import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
-import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
-import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
-import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
-import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
-import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
-import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
-import FXPL from "@/assets/images/Sponge_screen/menu/FXPL.png";
-import AC_FXPL from "@/assets/images/Sponge_screen/menu/AC_FXPL.png";
-import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
-import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
+import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
+import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
+import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
+import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
+import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
+import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
+import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
+import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
+import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
+import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
+import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
+import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
+import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
+import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
 // 引用地图
-import OneMap from "./map/newfiberMapBox.vue";
+import OneMap from './map/newfiberMapBox.vue';
+// 引用街景地图
+import PanoramaMap from '@/views/oneMap/map/PanoramaMap.vue';
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
+import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
 // 引用隧道BIm
-import Tunnel from "./BIM/Tunnel.vue";
+import Tunnel from './BIM/Tunnel.vue';
 // 引用语音识别
-import Voice from "./../voice/recordPage/index.vue";
+import Voice from './../voice/recordPage/index.vue';
 // 引入融云通讯录
-import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
+import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
 // 子系统引入
-import ComZTGL from "./components/ZTGL.vue"; //总体概览
-import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
-import ComZHPS from "./components/ZHPS.vue"; //智慧排水
-import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
-import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
-import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
-import ComFHPL from "./components/FHPL.vue"; //防洪排涝
-import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
-import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
-import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
+import ComZTGL from './components/ZTGL.vue'; //总体概览
+import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
+import ComZHPS from './components/ZHPS.vue'; //智慧排水
+import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
+import ComZHSD from './components/ZHSD.vue'; //智慧隧道
+import ComZHHM from './components/ZHHM.vue'; //智慧海绵
+import ComFHPL from './components/FHPL.vue'; //防洪排涝
+import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
+import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
+import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
+import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
 // 图层控制面板
-import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
+import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
+import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
 // 左右滑动
-import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
-import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
+import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
+import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -255,8 +210,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: "",
-  text: "",
+  imgNum: '',
+  text: '',
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -344,61 +299,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: "",
-  SiteNo: "",
+  getSiteId: '',
+  SiteNo: '',
   data: {},
-  comIDs: ["spjk"],
+  comIDs: ['spjk'],
   customData: [],
-  RefName: "",
-  title: "详情",
+  RefName: '',
+  title: '详情',
 });
 onBeforeMount(() => {
-  console.log("ZhuanTiType", userStore.ZhuanTiType);
+  console.log('ZhuanTiType', userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: "总体概览",
+        name: '总体概览',
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ["路网", "河流水系"],
+        Layers: ['路网', '河流水系'],
       },
       {
-        name: "燃气安全",
+        name: '燃气安全',
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ["干管", "主管", "干管流向", "主管流向"],
+        Layers: ['干管', '主管', '干管流向', '主管流向'],
       },
       {
-        name: "排水安全",
+        name: '排水安全',
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ["雨水管网", "污水管网"],
+        Layers: ['雨水管网', '污水管网'],
         children: [
           {
-            name: "排水安全",
+            name: '排水安全',
             id: 3,
             Layers: [],
           },
           {
-            name: "防汛排涝",
+            name: '防汛排涝',
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: "桥梁安全",
+        name: '桥梁安全',
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: "隧道安全",
+        name: '隧道安全',
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -409,19 +364,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: "城市概览",
+        name: '城市概览',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: "监测分析",
+        name: '监测分析',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 61,
       },
       {
-        name: "建设评估",
+        name: '建设评估',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 62,
@@ -435,10 +390,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
-  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
+  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on("checkRainL", (params) => {
+  bus.on('checkRainL', params => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -446,7 +401,7 @@
     }
   });
   // 底部隐藏
-  bus.on("checkBottom", (params) => {
+  bus.on('checkBottom', params => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -454,15 +409,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog", (params) => {
+  bus.on('publicDialog', params => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? "详情";
+    dialogConfig.title = params.title ?? '详情';
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog_Close", (params) => {
+  bus.on('publicDialog_Close', params => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -472,14 +427,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on("OpenRY", (params) => {
+  bus.on('OpenRY', params => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit("showRy");
+    bus.emit('showRy');
   });
 
   // 切换专题图
-  bus.on("ChangeZhuanTiTu", (params) => {
+  bus.on('ChangeZhuanTiTu', params => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -489,18 +444,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on("changeShowPanel", (params) => {
+  bus.on('changeShowPanel', params => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off("BottomHidden");
-  bus.off("publicDialog");
-  bus.off("publicDialog_Close");
-  bus.off("OpenRY");
-  bus.off("ChangeZhuanTiTu");
-  bus.off("checkRainL");
-  bus.off("changeShowPanel");
+  bus.off('BottomHidden');
+  bus.off('publicDialog');
+  bus.off('publicDialog_Close');
+  bus.off('OpenRY');
+  bus.off('ChangeZhuanTiTu');
+  bus.off('checkRainL');
+  bus.off('changeShowPanel');
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -519,9 +474,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit("clearAllLayer");
+    bus.emit('clearAllLayer');
     // 打开默认的菜单
-    bus.emit("SetLayerShow", item.Layers);
+    bus.emit('SetLayerShow', item.Layers);
   }
 };
 // 二级菜单点击
@@ -540,10 +495,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit("showRy");
+  bus.emit('showRy');
 };
 // 关闭融云通讯录弹窗
-const dialogHide = (val) => {
+const dialogHide = val => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -551,25 +506,52 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log("point", point);
-  console.log("properties", properties);
-  console.log("feature---", feature);
-  if (properties) {
-    if (feature == "rq_pipeline_info") {
-      if (!!newfiberMapbox.getLayerByName("rqLine")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  console.log('point', point);
+  console.log('properties', properties);
+  console.log('feature---', feature);
+  if (!feature) {
+    let currentZoom = newfiberMapbox.map.getZoom();
+    console.log('currentZoom--', currentZoom);
+    if (currentZoom >= 17) {
+      let clickPoint = turf.point(point);
+      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
+      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
+      let data = await request({
+        url: `/bdApi//baiduservice/panorama`,
+        method: 'GET',
+        params: {
+          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
+          fov: 180,
+          height: 256,
+          width: 512,
+        },
+      });
+      if (data && data.data) {
+        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
       }
-      let rqLine = turf.featureCollection([
-        turf.feature(Terraformer.WKT.parse(properties.geometry)),
-      ]);
+      console.log('data----', data);
+      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
+      bus.emit('popupcontent', {
+        popupShow: true,
+        point: point,
+        popupInfo: data,
+      });
+    }
+  }
+  if (properties) {
+    if (feature == 'rq_pipeline_info') {
+      if (!!newfiberMapbox.getLayerByName('rqLine')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
+      }
+      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
       let layer = new mapboxL7.LineLayer({
-        name: "rqLine",
+        name: 'rqLine',
       })
         .source(rqLine)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("rgb(241, 159, 27)")
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(241, 159, 27)')
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -580,11 +562,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit("popupcontent", {
+    bus.emit('popupcontent', {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -599,20 +581,12 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array(
-    "星期日",
-    "星期一",
-    "星期二",
-    "星期三",
-    "星期四",
-    "星期五",
-    "星期六"
-  );
+  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -635,11 +609,11 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = (item) => {
+const handleMouseEnter = item => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = (item) => {
+const handleMouseLeave = item => {
   AllData.ErJiMenuShowID = null;
 };
 
@@ -770,7 +744,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -854,17 +828,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -911,7 +885,7 @@
       bottom: 0;
       width: 952px;
       height: 62px;
-      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -1045,7 +1019,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;
diff --git a/src/views/oneMap/map/PanoramaMap.vue b/src/views/oneMap/map/PanoramaMap.vue
new file mode 100644
index 0000000..14edbb0
--- /dev/null
+++ b/src/views/oneMap/map/PanoramaMap.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="mapPage">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script setup name="PanoramaMap">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
+const AllData = reactive({
+  panorama: null,
+});
+// 初始化街景地图
+const initePanoramaMap = () => {
+  AllData.panorama = BMapGL.Panorama('container');
+  AllData.panorama.setPosition(new BMapGL.Point(116.40385, 39.913795));
+  AllData.panorama.setPov({
+    // 修改全景的视角
+    pitch: 10,
+    heading: 140,
+  });
+  AllData.panorama.setOptions({
+    linksControl: true, // 隐藏道路指示控件，默认true
+    navigationControl: true, // 隐藏导航控件，默认true
+  });
+};
+onMounted(() => {
+  initePanoramaMap();
+});
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.mapPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 0;
+  background: lavender;
+}
+
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+</style>
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
index f14c679..3343523 100644
--- a/src/views/oneMap/smartBridge/LeftBox.vue
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -144,11 +144,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 160px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 155px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -159,7 +159,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -177,7 +177,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -198,7 +198,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;
diff --git a/src/views/oneMap/smartBridge/RightBox.vue b/src/views/oneMap/smartBridge/RightBox.vue
index d3a162c..fcdb83a 100644
--- a/src/views/oneMap/smartBridge/RightBox.vue
+++ b/src/views/oneMap/smartBridge/RightBox.vue
@@ -1,6 +1,6 @@
 <!-- 总体概览右侧面板 -->
 <template>
-  <div class="rightSD">
+  <div class="rightQL">
     <!-- 运行监测 -->
     <div class="topBox">
       <div class="ListBoxHeader">
@@ -16,11 +16,20 @@
           <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 class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'red'"></div>
+            </div>
+            <div class="pieBox">
+              <pieRing :echartData="pieData" :refresh="chartRefresh"></pieRing>
+              <div class="boxCircle">
+                <div class="biaoji1"></div>
+                <div class="biaoji2"></div>
+                <div class="biaoji3"></div>
+                <div class="biaoji4"></div>
+                <div class="outCircle">
+                  <div class="innerCircle"></div>
+                </div>
+                <div class="circleValue">{{ pieData.data }}<span>分</span></div>
               </div>
-              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
             </div>
           </div>
         </div>
@@ -34,18 +43,27 @@
             <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>
+            <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 class="YXJC_Box3_tableHeader">
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
+            </div>
+            <div class="YXJC_Box3_tableBody">
+              <div class="YXJC_Box3_tableList" v-for="item in YXJCTableData">
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
               </div>
             </div>
           </div>
@@ -89,8 +107,9 @@
   </div>
 </template>
 
-<script setup name="rightSD">
+<script setup name="rightQL">
 import twoLine from '../smartTunnel/components/twoLine.vue';
+import pieRing from './components/pieRing.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 
 import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
@@ -116,25 +135,36 @@
   company: '陕西海嵘工程试验检测股份有限公司',
 });
 const jgjcTitle = [
-  { name: '沉降监测', code: 'cj' },
-  { name: '滑坡监测', code: 'hp' },
-  { name: '收敛监测', code: 'sl' },
-  { name: '裂缝监测', code: 'lf' },
-  { name: '水位监测', code: 'sw' },
-  { name: '应变监测', code: 'yb' },
+  { name: '挠度', code: 'nd' },
+  { name: '振动', code: 'zd' },
+  { name: '位移', code: 'wy' },
+  { name: '索力', code: 'sl' },
+  { name: '裂缝', code: 'lf' },
+  { name: '应变', code: 'yb' },
 ];
 const jgjcData = ref({
-  cj: '1',
-  hp: '1',
-  sl: '0',
+  nd: '1',
+  zd: '1',
+  wy: '0',
+  sl: '1',
   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 YXJCTableData = [
+  {
+    fx: '北向南',
+    cp: '陕J-24YU8',
+    sj: '2024-09-30 12:26:00',
+    zz: '54.6',
+    cz: '16.2',
+  },
+  {
+    fx: '南北向',
+    cp: '陕J-24YU8',
+    sj: '2024-09-29 16:32:00',
+    zz: '48',
+    cz: '9.6',
+  },
 ];
 const tfjcData = ref({
   hz: '0',
@@ -157,6 +187,10 @@
   ],
 });
 
+const pieData = ref({
+  data: 80,
+});
+
 watch(
   () => lineData.value,
   (newVal, oldVal) => {
@@ -178,7 +212,7 @@
 </script>
 
 <style lang="scss" scoped>
-.rightSD {
+.rightQL {
   width: 100%;
   height: 100%;
   // box-sizing: border-box;
@@ -214,7 +248,7 @@
           display: inline-block;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 14px;
+          font-size: 16px;
           color: #ebfeff;
           height: 24px;
           line-height: 24px;
@@ -222,7 +256,7 @@
 
           &::after {
             content: '';
-            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;
@@ -232,7 +266,114 @@
         }
       }
       .jgBox {
+        position: relative;
         height: 140px;
+        .pieBox {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 140px;
+          height: 140px;
+          box-sizing: border-box;
+          // border: 1px solid rgba(255, 255, 255, 0.2);
+          .boxCircle {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            .circleValue {
+
+              width: 60px;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              font-weight: bold;
+              font-size: 28px;
+              color: #3efeca;
+              text-align: center;
+              span {
+                font-weight: 500;
+                font-size: 16px;
+                color: #cef6ff;
+              }
+            }
+
+            .biaoji1 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              left: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji2 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              right: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji4 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              bottom: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji3 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              top: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+
+            .outCircle {
+              position: relative;
+              // left: 0;
+              // top: 0;
+              width: 90px;
+              height: 90px;
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              /* border: 1px solid red; */
+              background: conic-gradient(from 0deg at 50% 50%, rgba(62, 255, 203, 0) 0%, #3effcb 100%);
+              animation: rotateGradient 5s linear infinite;
+              overflow: hidden;
+            }
+
+            .innerCircle {
+              position: absolute;
+              top: 10px;
+              left: 10px;
+              width: 70px;
+              height: 70px;
+              border-radius: 50%;
+              background-color: #235b7c;
+            }
+
+            @keyframes rotateGradient {
+              0% {
+                transform: rotate(0deg);
+              }
+              100% {
+                transform: rotate(360deg);
+              }
+            }
+          }
+        }
       }
       .jcBox_Content {
         margin-top: 5px;
@@ -245,55 +386,63 @@
           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;
+          &:nth-child(2n + 1) {
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
+            .jcInfo_title {
+              margin-left: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-left: 10px;
+            }
+            &::before {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              left: 0;
+              top: 0;
+              background: #00f2ff;
+            }
+          }
+          &:nth-child(2n) {
+            flex-direction: row-reverse;
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.05) 0%, rgba(21, 210, 253, 0.2) 100%);
+            .jcInfo_title {
+              margin-right: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-right: 10px;
+            }
+            &::after {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              right: 0;
+              top: 0;
+              background: #00f2ff;
+            }
           }
           .jcInfo_title {
             font-weight: bold;
             font-size: 16px;
             color: #ebfeff;
-            margin-left: 15px;
+            // 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_stateIcon {
+            width: 10px;
+            height: 10px;
+            background: #00ff9c;
+            border-radius: 50%;
+            // margin-right: 3px;
+            &.red {
+              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;
@@ -308,20 +457,57 @@
             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;
+        }
+        .YXJC_Box3_tableHeader {
+          width: 100%;
+          height: 35px;
+          line-height: 35px;
+          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
+          border-radius: 2px;
+        }
+
+        .YXJC_Box3_tableBody {
+          width: 100%;
+          // height: calc(100% - 40px);
+          overflow: auto;
+
+          .YXJC_Box3_tableList {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
+            border-radius: 2px;
+
+            .YXJC_Box3_tableSpan5 {
+              color: #ff3f3f;
             }
           }
         }
+
+        .YXJC_Box3_tableSpan {
+          display: inline-block;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ebfeff;
+          text-align: center;
+        }
+        .YXJC_Box3_tableSpan1 {
+          width: 60px;
+        }
+        .YXJC_Box3_tableSpan2 {
+          width: 100px;
+        }
+        .YXJC_Box3_tableSpan3 {
+          width: 158px;
+        }
+        .YXJC_Box3_tableSpan4 {
+          width: 50px;
+        }
+        .YXJC_Box3_tableSpan5 {
+          width: 50px;
+        }
       }
     }
     .txBox {
@@ -369,10 +555,10 @@
         .pgTitle {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
-          height: 14px;
-          line-height: 14px;
+          height: 16px;
+          line-height: 16px;
           // border: 1px solid red;
         }
       }

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/components/mapboxPopup.vue b/src/views/oneMap/components/mapboxPopup.vue
index 95ec03f..b5b6e5f 100644
--- a/src/views/oneMap/components/mapboxPopup.vue
+++ b/src/views/oneMap/components/mapboxPopup.vue
@@ -47,11 +47,11 @@
           <div class="contentName">厂站类型：</div>
           <div class="contentValue">
             {{
-              allData.dataList.pumpType == "rain_water"
-                ? "雨水泵站"
-                : allData.dataList.pumpType == "sewage_water"
-                ? "污水泵站"
-                : "雨污合建"
+              allData.dataList.pumpType == 'rain_water'
+                ? '雨水泵站'
+                : allData.dataList.pumpType == 'sewage_water'
+                ? '污水泵站'
+                : '雨污合建'
             }}
           </div>
         </div>
@@ -60,22 +60,14 @@
           <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
           <div class="contentName">设计规模：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.designScaleSecond ||
-              allData.dataList.sweagepump.designScaleSecond ||
-              "--"
-            }}
+            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
             m³/s
           </div>
         </div>
         <div class="contentInfo">
           <div class="contentName">泵机台数：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.deviceCount ||
-              allData.dataList.sweagepump.deviceCount ||
-              "--"
-            }}台
+            {{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
           </div>
           <div class="contentName">建设单位：</div>
           <div class="contentValue" :title="allData.dataList.unitDep">
@@ -168,18 +160,8 @@
           style="width: 200px"
           @change="changeDate"
         />
-        <el-select
-          v-model="selectCode"
-          style="margin: -7px 0px 0px 10px; width: 150px"
-          size="small"
-          @change="changeRainType"
-        >
-          <el-option
-            v-for="item in dataOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
+          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div id="chartPopupRainC"></div>
       </div>
@@ -289,37 +271,38 @@
         <div class="submitControl" @click="submitControl">派发</div>
       </div>
     </div>
+    <!-- 街景图 -->
+    <div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
+      <img :src="allData.dataList.data.base64" />
+    </div>
   </div>
 </template>
 
 <script setup name="CesiumPopup">
-import bus from "@/bus";
+import bus from '@/bus';
 //import chartOption from '@/components/Echarts/pieChart_1.js';
 //import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
 const { proxy } = getCurrentInstance();
 const allData = reactive({
   dataList: {},
   popupShow: false,
-  dateTime: [
-    proxy.moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
-    proxy.moment().format("YYYY-MM-DD"),
-  ],
+  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
 });
 const dataOption = ref([]);
 const selectData = ref([]);
-const selectCode = ref("");
-const seleceName = ref("");
-const unitName = ref("");
+const selectCode = ref('');
+const seleceName = ref('');
+const unitName = ref('');
 const propertyMonitorXList = ref([]);
 const realRiverVal = ref(0);
 
 //
 function closePopupCES() {
   allData.popupShow = false;
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
   // 取消之后回到中心点
   // newfiberMapbox.map.easeTo({
@@ -334,17 +317,17 @@
 function changeDateJSD() {
   setTimeout(() => {
     if (!!chartJSD) chartJSD.dispose();
-    chartJSD = echarts.init(document.getElementById("chartHistoryJSD"));
-    chartOption.popupRainTrend.legend.data = ["水深"];
-    chartOption.popupRainTrend.yAxis.name = "m";
+    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
+    chartOption.popupRainTrend.legend.data = ['水深'];
+    chartOption.popupRainTrend.yAxis.name = 'm';
     chartOption.popupRainTrend.xAxis.data = [
-      "2024-07-12 12:30:20",
-      "2024-07-12 13:30:20",
-      "2024-07-12 14:30:20",
-      "2024-07-12 15:30:20",
+      '2024-07-12 12:30:20',
+      '2024-07-12 13:30:20',
+      '2024-07-12 14:30:20',
+      '2024-07-12 15:30:20',
     ];
     chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = "水深";
+    chartOption.popupRainTrend.series.name = '水深';
     chartOption.popupRainTrend.series.barWidth = 10;
     chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
     // 设置鼠标滚轮放大缩小展示数据区间
@@ -412,7 +395,7 @@
 let chartPopupRain = null;
 const initEchartsPopup = () => {
   if (!!chartPopupRain) chartPopupRain.dispose();
-  chartPopupRain = echarts.init(document.getElementById("chartPopupRainC"));
+  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
   chartOption.popupRainTrend.legend.data = [seleceName.value];
   chartOption.popupRainTrend.yAxis.name = unitName.value;
   chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
@@ -421,7 +404,7 @@
   // 设置鼠标滚轮放大缩小展示数据区间
   chartOption.popupRainTrend.dataZoom = [
     {
-      type: "inside",
+      type: 'inside',
       startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
     },
   ];
@@ -434,9 +417,9 @@
   chartPopupRain.setOption(chartOption.popupRainTrend);
 };
 // 切换因子点击
-const changeRainType = (val) => {
+const changeRainType = val => {
   selectCode.value = val;
-  let obj = dataOption.value.filter((item) => item.value == val)[0];
+  let obj = dataOption.value.filter(item => item.value == val)[0];
   selectCode.value = obj.value;
   seleceName.value = obj.label;
   unitName.value = obj.propertyUnit;
@@ -480,28 +463,30 @@
 //巡查反馈派发
 const submitControl = () => {
   let data = {
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
+};
+//街景弹框点击事件
+const showStreetLayer = () => {
+  console.log('少爷在这里加~~~~~~~~~');
 };
 onMounted(() => {
-  bus.on("closeCesiumPopup", () => {
+  bus.on('closeCesiumPopup', () => {
     allData.popupShow = false;
-    if (!!newfiberMapbox.getLayerByName("rqLine")) {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (!!newfiberMapbox.getLayerByName('rqLine')) {
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
     }
   });
-  bus.on("popupcontent", (params) => {
-    console.log("popup接收地图标注点值---111", params);
+  bus.on('popupcontent', params => {
+    console.log('popup接收地图标注点值---111', params);
     allData.dataList = params.popupInfo;
-    let pipePopupDiv = document.getElementById("cesiumPopupID");
+    let pipePopupDiv = document.getElementById('cesiumPopupID');
 
     let popupCenter, center, offsets;
     if (allData.dataList.geometry) {
-      if (allData.dataList.geometry.includes("LINESTRING")) {
-        popupCenter = turf.center(
-          turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))
-        ).geometry.coordinates;
+      if (allData.dataList.geometry.includes('LINESTRING')) {
+        popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
       } else {
         popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
       }
@@ -516,10 +501,10 @@
     window.window.pipePopup = new mapboxL7.Popup({
       html: pipePopupDiv,
       lngLat: {
-        lng: popupCenter[0],
-        lat: popupCenter[1],
+        lng: popupCenter ? popupCenter[0] : params.point[0],
+        lat: popupCenter ? popupCenter[1] : params.point[1],
       },
-      anchor: "center",
+      anchor: 'center',
       offsets: [-90, 130],
       autoClose: false,
     });
@@ -530,25 +515,25 @@
     });
     allData.popupShow = true;
     // 建筑社区弹框
-    if (params.popupInfo.type == "HMJZYSQ") {
+    if (params.popupInfo.type == 'HMJZYSQ') {
       allData.popupShow = false;
       let data = {
         title: params.popupInfo.name,
-        comIDs: ["xxinformation"],
+        comIDs: ['xxinformation'],
       };
-      bus.emit("publicDialog", data);
+      bus.emit('publicDialog', data);
       setTimeout(() => {
-        bus.emit("xxinformationList", params);
+        bus.emit('xxinformationList', params);
       }, 100);
     }
-    if (allData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
-    if (allData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
-    if (allData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
+    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
+    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
   });
 });
 onBeforeUnmount(() => {
-  bus.off("popupcontent");
-  bus.off("closeCesiumPopup");
+  bus.off('popupcontent');
+  bus.off('closeCesiumPopup');
 });
 </script>
 <style lang="scss">
@@ -574,8 +559,7 @@
     margin-top: 10px;
   }
   .title {
-    background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-      center;
+    background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
     background-size: cover;
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 4dbe10c..c1cf2bb 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,20 +5,14 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="[
-          'oneMapHeader',
-          'animate__animated',
-          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-        ]"
+        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
-            ><LocationFilled
-          /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -39,9 +33,7 @@
       <!-- 地图组件 -->
       <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM
-        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
-      ></WangJiaPingBIM>
+      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -68,42 +60,17 @@
       />
       <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng"></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL
-        v-if="AllData.ComShowID == 1"
-        :isActive="AllData.ComShowID == 1 ? true : false"
-        :showPanel="showPanel"
-      ></ComZTGL>
+      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ
-        v-if="AllData.ComShowID == 2"
-        :isActive="AllData.ComShowID == 2 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHRQ>
+      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS
-        v-if="AllData.ComShowID == 3"
-        :isActive="AllData.ComShowID == 3 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHPS>
+      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL
-        v-if="AllData.ComShowID == 4"
-        :isActive="AllData.ComShowID == 4 ? true : false"
-        :showPanel="showPanel"
-      >
-      </ComZHQL>
+      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD
-        v-if="AllData.ComShowID == 5"
-        :isActive="AllData.ComShowID == 5 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHSD>
+      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM
-        v-if="AllData.ComShowID == 6"
-        :isActive="AllData.ComShowID == 6 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHHM>
+      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -117,11 +84,7 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL
-        v-if="AllData.ComShowID == 7"
-        :isActive="AllData.ComShowID == 7 ? true : false"
-        :showPanel="showPanel"
-      ></ComFHPL>
+      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -131,11 +94,7 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="[
-          'MenuList' + index,
-          'animate__animated',
-          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
-        ]"
+        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -149,10 +108,7 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div
-            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
-            class="ErJiMenuBox"
-          >
+          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -171,11 +127,7 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun
-    :RYdialogShow="AllData.RYDialog"
-    :ZhuDongBoHao="AllData.ZhuDongBoHao"
-    @OneDialogHide="dialogHide"
-  ></ModelRongYun>
+  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -197,57 +149,60 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from "@/bus";
-import { fullscreenToggel } from "@/utils/util";
-import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from '@/bus';
+import request from '@/utils/request';
+import { fullscreenToggel } from '@/utils/util';
+import { ref, reactive, toRefs, onMounted } from 'vue';
 
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
-import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
-import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
-import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
-import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
-import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
-import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
-import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
-import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
-import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
-import FXPL from "@/assets/images/Sponge_screen/menu/FXPL.png";
-import AC_FXPL from "@/assets/images/Sponge_screen/menu/AC_FXPL.png";
-import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
-import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
+import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
+import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
+import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
+import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
+import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
+import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
+import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
+import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
+import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
+import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
+import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
+import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
+import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
+import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
 // 引用地图
-import OneMap from "./map/newfiberMapBox.vue";
+import OneMap from './map/newfiberMapBox.vue';
+// 引用街景地图
+import PanoramaMap from '@/views/oneMap/map/PanoramaMap.vue';
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
+import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
 // 引用隧道BIm
-import Tunnel from "./BIM/Tunnel.vue";
+import Tunnel from './BIM/Tunnel.vue';
 // 引用语音识别
-import Voice from "./../voice/recordPage/index.vue";
+import Voice from './../voice/recordPage/index.vue';
 // 引入融云通讯录
-import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
+import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
 // 子系统引入
-import ComZTGL from "./components/ZTGL.vue"; //总体概览
-import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
-import ComZHPS from "./components/ZHPS.vue"; //智慧排水
-import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
-import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
-import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
-import ComFHPL from "./components/FHPL.vue"; //防洪排涝
-import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
-import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
-import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
+import ComZTGL from './components/ZTGL.vue'; //总体概览
+import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
+import ComZHPS from './components/ZHPS.vue'; //智慧排水
+import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
+import ComZHSD from './components/ZHSD.vue'; //智慧隧道
+import ComZHHM from './components/ZHHM.vue'; //智慧海绵
+import ComFHPL from './components/FHPL.vue'; //防洪排涝
+import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
+import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
+import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
+import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
 // 图层控制面板
-import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
+import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
+import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
 // 左右滑动
-import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
-import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
+import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
+import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -255,8 +210,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: "",
-  text: "",
+  imgNum: '',
+  text: '',
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -344,61 +299,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: "",
-  SiteNo: "",
+  getSiteId: '',
+  SiteNo: '',
   data: {},
-  comIDs: ["spjk"],
+  comIDs: ['spjk'],
   customData: [],
-  RefName: "",
-  title: "详情",
+  RefName: '',
+  title: '详情',
 });
 onBeforeMount(() => {
-  console.log("ZhuanTiType", userStore.ZhuanTiType);
+  console.log('ZhuanTiType', userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: "总体概览",
+        name: '总体概览',
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ["路网", "河流水系"],
+        Layers: ['路网', '河流水系'],
       },
       {
-        name: "燃气安全",
+        name: '燃气安全',
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ["干管", "主管", "干管流向", "主管流向"],
+        Layers: ['干管', '主管', '干管流向', '主管流向'],
       },
       {
-        name: "排水安全",
+        name: '排水安全',
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ["雨水管网", "污水管网"],
+        Layers: ['雨水管网', '污水管网'],
         children: [
           {
-            name: "排水安全",
+            name: '排水安全',
             id: 3,
             Layers: [],
           },
           {
-            name: "防汛排涝",
+            name: '防汛排涝',
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: "桥梁安全",
+        name: '桥梁安全',
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: "隧道安全",
+        name: '隧道安全',
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -409,19 +364,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: "城市概览",
+        name: '城市概览',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: "监测分析",
+        name: '监测分析',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 61,
       },
       {
-        name: "建设评估",
+        name: '建设评估',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 62,
@@ -435,10 +390,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
-  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
+  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on("checkRainL", (params) => {
+  bus.on('checkRainL', params => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -446,7 +401,7 @@
     }
   });
   // 底部隐藏
-  bus.on("checkBottom", (params) => {
+  bus.on('checkBottom', params => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -454,15 +409,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog", (params) => {
+  bus.on('publicDialog', params => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? "详情";
+    dialogConfig.title = params.title ?? '详情';
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog_Close", (params) => {
+  bus.on('publicDialog_Close', params => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -472,14 +427,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on("OpenRY", (params) => {
+  bus.on('OpenRY', params => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit("showRy");
+    bus.emit('showRy');
   });
 
   // 切换专题图
-  bus.on("ChangeZhuanTiTu", (params) => {
+  bus.on('ChangeZhuanTiTu', params => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -489,18 +444,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on("changeShowPanel", (params) => {
+  bus.on('changeShowPanel', params => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off("BottomHidden");
-  bus.off("publicDialog");
-  bus.off("publicDialog_Close");
-  bus.off("OpenRY");
-  bus.off("ChangeZhuanTiTu");
-  bus.off("checkRainL");
-  bus.off("changeShowPanel");
+  bus.off('BottomHidden');
+  bus.off('publicDialog');
+  bus.off('publicDialog_Close');
+  bus.off('OpenRY');
+  bus.off('ChangeZhuanTiTu');
+  bus.off('checkRainL');
+  bus.off('changeShowPanel');
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -519,9 +474,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit("clearAllLayer");
+    bus.emit('clearAllLayer');
     // 打开默认的菜单
-    bus.emit("SetLayerShow", item.Layers);
+    bus.emit('SetLayerShow', item.Layers);
   }
 };
 // 二级菜单点击
@@ -540,10 +495,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit("showRy");
+  bus.emit('showRy');
 };
 // 关闭融云通讯录弹窗
-const dialogHide = (val) => {
+const dialogHide = val => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -551,25 +506,52 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log("point", point);
-  console.log("properties", properties);
-  console.log("feature---", feature);
-  if (properties) {
-    if (feature == "rq_pipeline_info") {
-      if (!!newfiberMapbox.getLayerByName("rqLine")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  console.log('point', point);
+  console.log('properties', properties);
+  console.log('feature---', feature);
+  if (!feature) {
+    let currentZoom = newfiberMapbox.map.getZoom();
+    console.log('currentZoom--', currentZoom);
+    if (currentZoom >= 17) {
+      let clickPoint = turf.point(point);
+      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
+      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
+      let data = await request({
+        url: `/bdApi//baiduservice/panorama`,
+        method: 'GET',
+        params: {
+          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
+          fov: 180,
+          height: 256,
+          width: 512,
+        },
+      });
+      if (data && data.data) {
+        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
       }
-      let rqLine = turf.featureCollection([
-        turf.feature(Terraformer.WKT.parse(properties.geometry)),
-      ]);
+      console.log('data----', data);
+      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
+      bus.emit('popupcontent', {
+        popupShow: true,
+        point: point,
+        popupInfo: data,
+      });
+    }
+  }
+  if (properties) {
+    if (feature == 'rq_pipeline_info') {
+      if (!!newfiberMapbox.getLayerByName('rqLine')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
+      }
+      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
       let layer = new mapboxL7.LineLayer({
-        name: "rqLine",
+        name: 'rqLine',
       })
         .source(rqLine)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("rgb(241, 159, 27)")
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(241, 159, 27)')
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -580,11 +562,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit("popupcontent", {
+    bus.emit('popupcontent', {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -599,20 +581,12 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array(
-    "星期日",
-    "星期一",
-    "星期二",
-    "星期三",
-    "星期四",
-    "星期五",
-    "星期六"
-  );
+  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -635,11 +609,11 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = (item) => {
+const handleMouseEnter = item => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = (item) => {
+const handleMouseLeave = item => {
   AllData.ErJiMenuShowID = null;
 };
 
@@ -770,7 +744,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -854,17 +828,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -911,7 +885,7 @@
       bottom: 0;
       width: 952px;
       height: 62px;
-      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -1045,7 +1019,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;
diff --git a/src/views/oneMap/map/PanoramaMap.vue b/src/views/oneMap/map/PanoramaMap.vue
new file mode 100644
index 0000000..14edbb0
--- /dev/null
+++ b/src/views/oneMap/map/PanoramaMap.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="mapPage">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script setup name="PanoramaMap">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
+const AllData = reactive({
+  panorama: null,
+});
+// 初始化街景地图
+const initePanoramaMap = () => {
+  AllData.panorama = BMapGL.Panorama('container');
+  AllData.panorama.setPosition(new BMapGL.Point(116.40385, 39.913795));
+  AllData.panorama.setPov({
+    // 修改全景的视角
+    pitch: 10,
+    heading: 140,
+  });
+  AllData.panorama.setOptions({
+    linksControl: true, // 隐藏道路指示控件，默认true
+    navigationControl: true, // 隐藏导航控件，默认true
+  });
+};
+onMounted(() => {
+  initePanoramaMap();
+});
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.mapPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 0;
+  background: lavender;
+}
+
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+</style>
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
index f14c679..3343523 100644
--- a/src/views/oneMap/smartBridge/LeftBox.vue
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -144,11 +144,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 160px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 155px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -159,7 +159,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -177,7 +177,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -198,7 +198,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;
diff --git a/src/views/oneMap/smartBridge/RightBox.vue b/src/views/oneMap/smartBridge/RightBox.vue
index d3a162c..fcdb83a 100644
--- a/src/views/oneMap/smartBridge/RightBox.vue
+++ b/src/views/oneMap/smartBridge/RightBox.vue
@@ -1,6 +1,6 @@
 <!-- 总体概览右侧面板 -->
 <template>
-  <div class="rightSD">
+  <div class="rightQL">
     <!-- 运行监测 -->
     <div class="topBox">
       <div class="ListBoxHeader">
@@ -16,11 +16,20 @@
           <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 class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'red'"></div>
+            </div>
+            <div class="pieBox">
+              <pieRing :echartData="pieData" :refresh="chartRefresh"></pieRing>
+              <div class="boxCircle">
+                <div class="biaoji1"></div>
+                <div class="biaoji2"></div>
+                <div class="biaoji3"></div>
+                <div class="biaoji4"></div>
+                <div class="outCircle">
+                  <div class="innerCircle"></div>
+                </div>
+                <div class="circleValue">{{ pieData.data }}<span>分</span></div>
               </div>
-              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
             </div>
           </div>
         </div>
@@ -34,18 +43,27 @@
             <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>
+            <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 class="YXJC_Box3_tableHeader">
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
+            </div>
+            <div class="YXJC_Box3_tableBody">
+              <div class="YXJC_Box3_tableList" v-for="item in YXJCTableData">
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
               </div>
             </div>
           </div>
@@ -89,8 +107,9 @@
   </div>
 </template>
 
-<script setup name="rightSD">
+<script setup name="rightQL">
 import twoLine from '../smartTunnel/components/twoLine.vue';
+import pieRing from './components/pieRing.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 
 import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
@@ -116,25 +135,36 @@
   company: '陕西海嵘工程试验检测股份有限公司',
 });
 const jgjcTitle = [
-  { name: '沉降监测', code: 'cj' },
-  { name: '滑坡监测', code: 'hp' },
-  { name: '收敛监测', code: 'sl' },
-  { name: '裂缝监测', code: 'lf' },
-  { name: '水位监测', code: 'sw' },
-  { name: '应变监测', code: 'yb' },
+  { name: '挠度', code: 'nd' },
+  { name: '振动', code: 'zd' },
+  { name: '位移', code: 'wy' },
+  { name: '索力', code: 'sl' },
+  { name: '裂缝', code: 'lf' },
+  { name: '应变', code: 'yb' },
 ];
 const jgjcData = ref({
-  cj: '1',
-  hp: '1',
-  sl: '0',
+  nd: '1',
+  zd: '1',
+  wy: '0',
+  sl: '1',
   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 YXJCTableData = [
+  {
+    fx: '北向南',
+    cp: '陕J-24YU8',
+    sj: '2024-09-30 12:26:00',
+    zz: '54.6',
+    cz: '16.2',
+  },
+  {
+    fx: '南北向',
+    cp: '陕J-24YU8',
+    sj: '2024-09-29 16:32:00',
+    zz: '48',
+    cz: '9.6',
+  },
 ];
 const tfjcData = ref({
   hz: '0',
@@ -157,6 +187,10 @@
   ],
 });
 
+const pieData = ref({
+  data: 80,
+});
+
 watch(
   () => lineData.value,
   (newVal, oldVal) => {
@@ -178,7 +212,7 @@
 </script>
 
 <style lang="scss" scoped>
-.rightSD {
+.rightQL {
   width: 100%;
   height: 100%;
   // box-sizing: border-box;
@@ -214,7 +248,7 @@
           display: inline-block;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 14px;
+          font-size: 16px;
           color: #ebfeff;
           height: 24px;
           line-height: 24px;
@@ -222,7 +256,7 @@
 
           &::after {
             content: '';
-            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;
@@ -232,7 +266,114 @@
         }
       }
       .jgBox {
+        position: relative;
         height: 140px;
+        .pieBox {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 140px;
+          height: 140px;
+          box-sizing: border-box;
+          // border: 1px solid rgba(255, 255, 255, 0.2);
+          .boxCircle {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            .circleValue {
+
+              width: 60px;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              font-weight: bold;
+              font-size: 28px;
+              color: #3efeca;
+              text-align: center;
+              span {
+                font-weight: 500;
+                font-size: 16px;
+                color: #cef6ff;
+              }
+            }
+
+            .biaoji1 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              left: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji2 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              right: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji4 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              bottom: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji3 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              top: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+
+            .outCircle {
+              position: relative;
+              // left: 0;
+              // top: 0;
+              width: 90px;
+              height: 90px;
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              /* border: 1px solid red; */
+              background: conic-gradient(from 0deg at 50% 50%, rgba(62, 255, 203, 0) 0%, #3effcb 100%);
+              animation: rotateGradient 5s linear infinite;
+              overflow: hidden;
+            }
+
+            .innerCircle {
+              position: absolute;
+              top: 10px;
+              left: 10px;
+              width: 70px;
+              height: 70px;
+              border-radius: 50%;
+              background-color: #235b7c;
+            }
+
+            @keyframes rotateGradient {
+              0% {
+                transform: rotate(0deg);
+              }
+              100% {
+                transform: rotate(360deg);
+              }
+            }
+          }
+        }
       }
       .jcBox_Content {
         margin-top: 5px;
@@ -245,55 +386,63 @@
           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;
+          &:nth-child(2n + 1) {
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
+            .jcInfo_title {
+              margin-left: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-left: 10px;
+            }
+            &::before {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              left: 0;
+              top: 0;
+              background: #00f2ff;
+            }
+          }
+          &:nth-child(2n) {
+            flex-direction: row-reverse;
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.05) 0%, rgba(21, 210, 253, 0.2) 100%);
+            .jcInfo_title {
+              margin-right: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-right: 10px;
+            }
+            &::after {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              right: 0;
+              top: 0;
+              background: #00f2ff;
+            }
           }
           .jcInfo_title {
             font-weight: bold;
             font-size: 16px;
             color: #ebfeff;
-            margin-left: 15px;
+            // 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_stateIcon {
+            width: 10px;
+            height: 10px;
+            background: #00ff9c;
+            border-radius: 50%;
+            // margin-right: 3px;
+            &.red {
+              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;
@@ -308,20 +457,57 @@
             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;
+        }
+        .YXJC_Box3_tableHeader {
+          width: 100%;
+          height: 35px;
+          line-height: 35px;
+          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
+          border-radius: 2px;
+        }
+
+        .YXJC_Box3_tableBody {
+          width: 100%;
+          // height: calc(100% - 40px);
+          overflow: auto;
+
+          .YXJC_Box3_tableList {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
+            border-radius: 2px;
+
+            .YXJC_Box3_tableSpan5 {
+              color: #ff3f3f;
             }
           }
         }
+
+        .YXJC_Box3_tableSpan {
+          display: inline-block;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ebfeff;
+          text-align: center;
+        }
+        .YXJC_Box3_tableSpan1 {
+          width: 60px;
+        }
+        .YXJC_Box3_tableSpan2 {
+          width: 100px;
+        }
+        .YXJC_Box3_tableSpan3 {
+          width: 158px;
+        }
+        .YXJC_Box3_tableSpan4 {
+          width: 50px;
+        }
+        .YXJC_Box3_tableSpan5 {
+          width: 50px;
+        }
       }
     }
     .txBox {
@@ -369,10 +555,10 @@
         .pgTitle {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
-          height: 14px;
-          line-height: 14px;
+          height: 16px;
+          line-height: 16px;
           // border: 1px solid red;
         }
       }
diff --git a/src/views/oneMap/smartBridge/components/pieRing.vue b/src/views/oneMap/smartBridge/components/pieRing.vue
new file mode 100644
index 0000000..2755843
--- /dev/null
+++ b/src/views/oneMap/smartBridge/components/pieRing.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieRing">
+import { guid } from '@/utils/ruoyi';
+
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+// console.log('-------------------', props.title);
+
+const id = guid();
+const myChart = shallowRef('');
+
+let angle = 0; //角度，用来做简单的动画效果的
+let pieValue = ref(80);
+let maxvalue = 100;
+let timerId = null;
+let option = ref({});
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
+//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+function getCirlPoint(x0, y0, r, angle) {
+  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+  return {
+    x: x1,
+    y: y1,
+  };
+}
+
+function draw() {
+  angle = angle + 10;
+  myChart.value.setOption(option.value, true);
+  //window.requestAnimationFrame(draw);
+}
+
+//初始化
+function intChart() {
+  pieValue.value = props.echartData?.data || 0;
+  let percent = ((pieValue.value / maxvalue) * 100).toFixed(0);
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  // if (!props.echartData.series.length) return;
+  option.value = {
+    // backgroundColor: '#000E1A',
+    title: {
+      text: '{a|' + percent + '} {c|分}',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 32,
+            color: 'rgba(62, 254, 202, 1)',
+            // fontFamily: 'Din',
+            // lineHeight: 40, // 调整行高以确保对齐
+            verticalAlign: 'bottom', // 底部对齐
+          },
+
+          c: {
+            fontSize: 14,
+            color: 'rgba(206, 246, 255, 1)',
+            // fontFamily: 'SanFrancisco ',
+            // lineHeight: 20, // 调整行高以确保对齐
+            // verticalAlign: 'bottom', // 底部对齐
+          },
+        },
+      },
+    },
+    polar: [
+      {
+        // radius: ['33.5%', '45%'],
+        radius: ['85%', '100%'],
+        // radius: '100%',
+        center: ['50%', '50%'],
+        // startAngle: 180, // 从180度开始
+        // endAngle: 0, // 到0度结束
+      },
+    ],
+
+    angleAxis: {
+      max: maxvalue,
+      show: false,
+      inverse: false,
+      clockwise: false, //角度轴的方向为逆时针方向。
+    },
+    radiusAxis: {
+      type: 'category',
+      show: true,
+      axisLabel: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+
+    series: [
+      // 大弧线
+      {
+        name: 'ring5',
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: function (params, api) {
+          return {
+            type: 'arc',
+            shape: {
+              cx: api.getWidth() / 2,
+              cy: api.getHeight() / 2,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2.1) * 0.9,
+              // r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.6,
+              // startAngle: (0+angle) * Math.PI / 180,
+              // endAngle: (90+angle) * Math.PI / 180
+              startAngle: (0 * Math.PI) / 180,
+              endAngle: (360 * Math.PI) / 180,
+            },
+            style: {
+              // stroke: 'rgb(53,53,53)',
+              stroke: 'rgb(10, 126, 156)',
+              fill: ' transparent',
+              lineWidth: 5,
+            },
+            silent: true,
+          };
+        },
+        data: [0],
+      },
+
+      // {
+      //   name: 'ring5',
+      //   type: 'custom',
+      //   coordinateSystem: 'none',
+      //   renderItem: function (params, api) {
+      //     // 定义线性渐变色
+      //     // let gradient = proxy.echarts.graphic.RadialGradient(
+      //     //   0.5,
+      //     //   0.5, // 圆心位置，相对于容器的百分比
+      //     //   0.5, // 半径，相对于容器的百分比
+      //     //   [
+      //     //     { offset: 0, color: 'rgba(62,255,203,0)' }, // 起始颜色
+      //     //     { offset: 1, color: '#3EFFCB' }, // 结束颜色
+      //     //   ]
+      //     // );
+      //     return {
+      //       type: 'arc',
+      //       shape: {
+      //         cx: api.getWidth() / 2,
+      //         cy: api.getHeight() / 2,
+      //         r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+      //         startAngle: ((0 + angle) * Math.PI) / 180,
+      //         endAngle: ((270 + angle) * Math.PI) / 180,
+      //       },
+      //       style: {
+      //         stroke: '#3EFFCB',
+      //         // stroke: gradient,
+      //         fill: 'transparent',
+      //         lineWidth: 5,
+      //       },
+      //       silent: true,
+      //     };
+      //   },
+      //   data: [0],
+      // },
+
+      //极坐标柱状图
+      {
+        name: '',
+        type: 'bar',
+        roundCap: true,
+        barWidth: 10,
+        showBackground: true,
+        stack: 'a',
+        backgroundStyle: {
+          color: 'rgba(66, 66, 66, 0)',
+          // borderWidth: 5,
+        },
+        data: [pieValue.value, 0],
+        coordinateSystem: 'polar',
+
+        itemStyle: {
+          normal: {
+            color: proxy.echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              {
+                offset: 0,
+                color: 'rgb(255,255,255,0.8)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,255,255,1)',
+              },
+            ]),
+            shadowBlur: 5,
+            shadowColor: 'rgba(62,255,203,0.8)',
+          },
+        },
+      },
+    ],
+  };
+
+  myChart.value.setOption(option.value);
+}
+
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+  // timerId = setInterval(function () {
+  //   //用setInterval做动画感觉有问题
+  //   draw();
+  // }, 100);
+});
+
+onBeforeUnmount(() => {
+  if (timerId) {
+    clearInterval(timerId);
+  }
+  myChart.value && myChart.value.dispose();
+  window.removeEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/components/mapboxPopup.vue b/src/views/oneMap/components/mapboxPopup.vue
index 95ec03f..b5b6e5f 100644
--- a/src/views/oneMap/components/mapboxPopup.vue
+++ b/src/views/oneMap/components/mapboxPopup.vue
@@ -47,11 +47,11 @@
           <div class="contentName">厂站类型：</div>
           <div class="contentValue">
             {{
-              allData.dataList.pumpType == "rain_water"
-                ? "雨水泵站"
-                : allData.dataList.pumpType == "sewage_water"
-                ? "污水泵站"
-                : "雨污合建"
+              allData.dataList.pumpType == 'rain_water'
+                ? '雨水泵站'
+                : allData.dataList.pumpType == 'sewage_water'
+                ? '污水泵站'
+                : '雨污合建'
             }}
           </div>
         </div>
@@ -60,22 +60,14 @@
           <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
           <div class="contentName">设计规模：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.designScaleSecond ||
-              allData.dataList.sweagepump.designScaleSecond ||
-              "--"
-            }}
+            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
             m³/s
           </div>
         </div>
         <div class="contentInfo">
           <div class="contentName">泵机台数：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.deviceCount ||
-              allData.dataList.sweagepump.deviceCount ||
-              "--"
-            }}台
+            {{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
           </div>
           <div class="contentName">建设单位：</div>
           <div class="contentValue" :title="allData.dataList.unitDep">
@@ -168,18 +160,8 @@
           style="width: 200px"
           @change="changeDate"
         />
-        <el-select
-          v-model="selectCode"
-          style="margin: -7px 0px 0px 10px; width: 150px"
-          size="small"
-          @change="changeRainType"
-        >
-          <el-option
-            v-for="item in dataOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
+          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div id="chartPopupRainC"></div>
       </div>
@@ -289,37 +271,38 @@
         <div class="submitControl" @click="submitControl">派发</div>
       </div>
     </div>
+    <!-- 街景图 -->
+    <div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
+      <img :src="allData.dataList.data.base64" />
+    </div>
   </div>
 </template>
 
 <script setup name="CesiumPopup">
-import bus from "@/bus";
+import bus from '@/bus';
 //import chartOption from '@/components/Echarts/pieChart_1.js';
 //import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
 const { proxy } = getCurrentInstance();
 const allData = reactive({
   dataList: {},
   popupShow: false,
-  dateTime: [
-    proxy.moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
-    proxy.moment().format("YYYY-MM-DD"),
-  ],
+  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
 });
 const dataOption = ref([]);
 const selectData = ref([]);
-const selectCode = ref("");
-const seleceName = ref("");
-const unitName = ref("");
+const selectCode = ref('');
+const seleceName = ref('');
+const unitName = ref('');
 const propertyMonitorXList = ref([]);
 const realRiverVal = ref(0);
 
 //
 function closePopupCES() {
   allData.popupShow = false;
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
   // 取消之后回到中心点
   // newfiberMapbox.map.easeTo({
@@ -334,17 +317,17 @@
 function changeDateJSD() {
   setTimeout(() => {
     if (!!chartJSD) chartJSD.dispose();
-    chartJSD = echarts.init(document.getElementById("chartHistoryJSD"));
-    chartOption.popupRainTrend.legend.data = ["水深"];
-    chartOption.popupRainTrend.yAxis.name = "m";
+    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
+    chartOption.popupRainTrend.legend.data = ['水深'];
+    chartOption.popupRainTrend.yAxis.name = 'm';
     chartOption.popupRainTrend.xAxis.data = [
-      "2024-07-12 12:30:20",
-      "2024-07-12 13:30:20",
-      "2024-07-12 14:30:20",
-      "2024-07-12 15:30:20",
+      '2024-07-12 12:30:20',
+      '2024-07-12 13:30:20',
+      '2024-07-12 14:30:20',
+      '2024-07-12 15:30:20',
     ];
     chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = "水深";
+    chartOption.popupRainTrend.series.name = '水深';
     chartOption.popupRainTrend.series.barWidth = 10;
     chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
     // 设置鼠标滚轮放大缩小展示数据区间
@@ -412,7 +395,7 @@
 let chartPopupRain = null;
 const initEchartsPopup = () => {
   if (!!chartPopupRain) chartPopupRain.dispose();
-  chartPopupRain = echarts.init(document.getElementById("chartPopupRainC"));
+  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
   chartOption.popupRainTrend.legend.data = [seleceName.value];
   chartOption.popupRainTrend.yAxis.name = unitName.value;
   chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
@@ -421,7 +404,7 @@
   // 设置鼠标滚轮放大缩小展示数据区间
   chartOption.popupRainTrend.dataZoom = [
     {
-      type: "inside",
+      type: 'inside',
       startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
     },
   ];
@@ -434,9 +417,9 @@
   chartPopupRain.setOption(chartOption.popupRainTrend);
 };
 // 切换因子点击
-const changeRainType = (val) => {
+const changeRainType = val => {
   selectCode.value = val;
-  let obj = dataOption.value.filter((item) => item.value == val)[0];
+  let obj = dataOption.value.filter(item => item.value == val)[0];
   selectCode.value = obj.value;
   seleceName.value = obj.label;
   unitName.value = obj.propertyUnit;
@@ -480,28 +463,30 @@
 //巡查反馈派发
 const submitControl = () => {
   let data = {
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
+};
+//街景弹框点击事件
+const showStreetLayer = () => {
+  console.log('少爷在这里加~~~~~~~~~');
 };
 onMounted(() => {
-  bus.on("closeCesiumPopup", () => {
+  bus.on('closeCesiumPopup', () => {
     allData.popupShow = false;
-    if (!!newfiberMapbox.getLayerByName("rqLine")) {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (!!newfiberMapbox.getLayerByName('rqLine')) {
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
     }
   });
-  bus.on("popupcontent", (params) => {
-    console.log("popup接收地图标注点值---111", params);
+  bus.on('popupcontent', params => {
+    console.log('popup接收地图标注点值---111', params);
     allData.dataList = params.popupInfo;
-    let pipePopupDiv = document.getElementById("cesiumPopupID");
+    let pipePopupDiv = document.getElementById('cesiumPopupID');
 
     let popupCenter, center, offsets;
     if (allData.dataList.geometry) {
-      if (allData.dataList.geometry.includes("LINESTRING")) {
-        popupCenter = turf.center(
-          turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))
-        ).geometry.coordinates;
+      if (allData.dataList.geometry.includes('LINESTRING')) {
+        popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
       } else {
         popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
       }
@@ -516,10 +501,10 @@
     window.window.pipePopup = new mapboxL7.Popup({
       html: pipePopupDiv,
       lngLat: {
-        lng: popupCenter[0],
-        lat: popupCenter[1],
+        lng: popupCenter ? popupCenter[0] : params.point[0],
+        lat: popupCenter ? popupCenter[1] : params.point[1],
       },
-      anchor: "center",
+      anchor: 'center',
       offsets: [-90, 130],
       autoClose: false,
     });
@@ -530,25 +515,25 @@
     });
     allData.popupShow = true;
     // 建筑社区弹框
-    if (params.popupInfo.type == "HMJZYSQ") {
+    if (params.popupInfo.type == 'HMJZYSQ') {
       allData.popupShow = false;
       let data = {
         title: params.popupInfo.name,
-        comIDs: ["xxinformation"],
+        comIDs: ['xxinformation'],
       };
-      bus.emit("publicDialog", data);
+      bus.emit('publicDialog', data);
       setTimeout(() => {
-        bus.emit("xxinformationList", params);
+        bus.emit('xxinformationList', params);
       }, 100);
     }
-    if (allData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
-    if (allData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
-    if (allData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
+    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
+    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
   });
 });
 onBeforeUnmount(() => {
-  bus.off("popupcontent");
-  bus.off("closeCesiumPopup");
+  bus.off('popupcontent');
+  bus.off('closeCesiumPopup');
 });
 </script>
 <style lang="scss">
@@ -574,8 +559,7 @@
     margin-top: 10px;
   }
   .title {
-    background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-      center;
+    background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
     background-size: cover;
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 4dbe10c..c1cf2bb 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,20 +5,14 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="[
-          'oneMapHeader',
-          'animate__animated',
-          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-        ]"
+        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
-            ><LocationFilled
-          /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -39,9 +33,7 @@
       <!-- 地图组件 -->
       <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM
-        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
-      ></WangJiaPingBIM>
+      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -68,42 +60,17 @@
       />
       <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng"></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL
-        v-if="AllData.ComShowID == 1"
-        :isActive="AllData.ComShowID == 1 ? true : false"
-        :showPanel="showPanel"
-      ></ComZTGL>
+      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ
-        v-if="AllData.ComShowID == 2"
-        :isActive="AllData.ComShowID == 2 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHRQ>
+      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS
-        v-if="AllData.ComShowID == 3"
-        :isActive="AllData.ComShowID == 3 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHPS>
+      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL
-        v-if="AllData.ComShowID == 4"
-        :isActive="AllData.ComShowID == 4 ? true : false"
-        :showPanel="showPanel"
-      >
-      </ComZHQL>
+      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD
-        v-if="AllData.ComShowID == 5"
-        :isActive="AllData.ComShowID == 5 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHSD>
+      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM
-        v-if="AllData.ComShowID == 6"
-        :isActive="AllData.ComShowID == 6 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHHM>
+      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -117,11 +84,7 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL
-        v-if="AllData.ComShowID == 7"
-        :isActive="AllData.ComShowID == 7 ? true : false"
-        :showPanel="showPanel"
-      ></ComFHPL>
+      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -131,11 +94,7 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="[
-          'MenuList' + index,
-          'animate__animated',
-          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
-        ]"
+        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -149,10 +108,7 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div
-            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
-            class="ErJiMenuBox"
-          >
+          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -171,11 +127,7 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun
-    :RYdialogShow="AllData.RYDialog"
-    :ZhuDongBoHao="AllData.ZhuDongBoHao"
-    @OneDialogHide="dialogHide"
-  ></ModelRongYun>
+  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -197,57 +149,60 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from "@/bus";
-import { fullscreenToggel } from "@/utils/util";
-import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from '@/bus';
+import request from '@/utils/request';
+import { fullscreenToggel } from '@/utils/util';
+import { ref, reactive, toRefs, onMounted } from 'vue';
 
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
-import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
-import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
-import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
-import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
-import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
-import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
-import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
-import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
-import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
-import FXPL from "@/assets/images/Sponge_screen/menu/FXPL.png";
-import AC_FXPL from "@/assets/images/Sponge_screen/menu/AC_FXPL.png";
-import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
-import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
+import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
+import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
+import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
+import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
+import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
+import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
+import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
+import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
+import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
+import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
+import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
+import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
+import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
+import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
 // 引用地图
-import OneMap from "./map/newfiberMapBox.vue";
+import OneMap from './map/newfiberMapBox.vue';
+// 引用街景地图
+import PanoramaMap from '@/views/oneMap/map/PanoramaMap.vue';
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
+import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
 // 引用隧道BIm
-import Tunnel from "./BIM/Tunnel.vue";
+import Tunnel from './BIM/Tunnel.vue';
 // 引用语音识别
-import Voice from "./../voice/recordPage/index.vue";
+import Voice from './../voice/recordPage/index.vue';
 // 引入融云通讯录
-import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
+import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
 // 子系统引入
-import ComZTGL from "./components/ZTGL.vue"; //总体概览
-import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
-import ComZHPS from "./components/ZHPS.vue"; //智慧排水
-import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
-import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
-import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
-import ComFHPL from "./components/FHPL.vue"; //防洪排涝
-import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
-import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
-import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
+import ComZTGL from './components/ZTGL.vue'; //总体概览
+import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
+import ComZHPS from './components/ZHPS.vue'; //智慧排水
+import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
+import ComZHSD from './components/ZHSD.vue'; //智慧隧道
+import ComZHHM from './components/ZHHM.vue'; //智慧海绵
+import ComFHPL from './components/FHPL.vue'; //防洪排涝
+import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
+import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
+import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
+import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
 // 图层控制面板
-import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
+import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
+import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
 // 左右滑动
-import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
-import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
+import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
+import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -255,8 +210,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: "",
-  text: "",
+  imgNum: '',
+  text: '',
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -344,61 +299,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: "",
-  SiteNo: "",
+  getSiteId: '',
+  SiteNo: '',
   data: {},
-  comIDs: ["spjk"],
+  comIDs: ['spjk'],
   customData: [],
-  RefName: "",
-  title: "详情",
+  RefName: '',
+  title: '详情',
 });
 onBeforeMount(() => {
-  console.log("ZhuanTiType", userStore.ZhuanTiType);
+  console.log('ZhuanTiType', userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: "总体概览",
+        name: '总体概览',
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ["路网", "河流水系"],
+        Layers: ['路网', '河流水系'],
       },
       {
-        name: "燃气安全",
+        name: '燃气安全',
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ["干管", "主管", "干管流向", "主管流向"],
+        Layers: ['干管', '主管', '干管流向', '主管流向'],
       },
       {
-        name: "排水安全",
+        name: '排水安全',
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ["雨水管网", "污水管网"],
+        Layers: ['雨水管网', '污水管网'],
         children: [
           {
-            name: "排水安全",
+            name: '排水安全',
             id: 3,
             Layers: [],
           },
           {
-            name: "防汛排涝",
+            name: '防汛排涝',
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: "桥梁安全",
+        name: '桥梁安全',
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: "隧道安全",
+        name: '隧道安全',
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -409,19 +364,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: "城市概览",
+        name: '城市概览',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: "监测分析",
+        name: '监测分析',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 61,
       },
       {
-        name: "建设评估",
+        name: '建设评估',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 62,
@@ -435,10 +390,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
-  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
+  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on("checkRainL", (params) => {
+  bus.on('checkRainL', params => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -446,7 +401,7 @@
     }
   });
   // 底部隐藏
-  bus.on("checkBottom", (params) => {
+  bus.on('checkBottom', params => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -454,15 +409,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog", (params) => {
+  bus.on('publicDialog', params => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? "详情";
+    dialogConfig.title = params.title ?? '详情';
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog_Close", (params) => {
+  bus.on('publicDialog_Close', params => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -472,14 +427,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on("OpenRY", (params) => {
+  bus.on('OpenRY', params => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit("showRy");
+    bus.emit('showRy');
   });
 
   // 切换专题图
-  bus.on("ChangeZhuanTiTu", (params) => {
+  bus.on('ChangeZhuanTiTu', params => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -489,18 +444,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on("changeShowPanel", (params) => {
+  bus.on('changeShowPanel', params => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off("BottomHidden");
-  bus.off("publicDialog");
-  bus.off("publicDialog_Close");
-  bus.off("OpenRY");
-  bus.off("ChangeZhuanTiTu");
-  bus.off("checkRainL");
-  bus.off("changeShowPanel");
+  bus.off('BottomHidden');
+  bus.off('publicDialog');
+  bus.off('publicDialog_Close');
+  bus.off('OpenRY');
+  bus.off('ChangeZhuanTiTu');
+  bus.off('checkRainL');
+  bus.off('changeShowPanel');
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -519,9 +474,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit("clearAllLayer");
+    bus.emit('clearAllLayer');
     // 打开默认的菜单
-    bus.emit("SetLayerShow", item.Layers);
+    bus.emit('SetLayerShow', item.Layers);
   }
 };
 // 二级菜单点击
@@ -540,10 +495,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit("showRy");
+  bus.emit('showRy');
 };
 // 关闭融云通讯录弹窗
-const dialogHide = (val) => {
+const dialogHide = val => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -551,25 +506,52 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log("point", point);
-  console.log("properties", properties);
-  console.log("feature---", feature);
-  if (properties) {
-    if (feature == "rq_pipeline_info") {
-      if (!!newfiberMapbox.getLayerByName("rqLine")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  console.log('point', point);
+  console.log('properties', properties);
+  console.log('feature---', feature);
+  if (!feature) {
+    let currentZoom = newfiberMapbox.map.getZoom();
+    console.log('currentZoom--', currentZoom);
+    if (currentZoom >= 17) {
+      let clickPoint = turf.point(point);
+      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
+      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
+      let data = await request({
+        url: `/bdApi//baiduservice/panorama`,
+        method: 'GET',
+        params: {
+          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
+          fov: 180,
+          height: 256,
+          width: 512,
+        },
+      });
+      if (data && data.data) {
+        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
       }
-      let rqLine = turf.featureCollection([
-        turf.feature(Terraformer.WKT.parse(properties.geometry)),
-      ]);
+      console.log('data----', data);
+      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
+      bus.emit('popupcontent', {
+        popupShow: true,
+        point: point,
+        popupInfo: data,
+      });
+    }
+  }
+  if (properties) {
+    if (feature == 'rq_pipeline_info') {
+      if (!!newfiberMapbox.getLayerByName('rqLine')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
+      }
+      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
       let layer = new mapboxL7.LineLayer({
-        name: "rqLine",
+        name: 'rqLine',
       })
         .source(rqLine)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("rgb(241, 159, 27)")
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(241, 159, 27)')
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -580,11 +562,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit("popupcontent", {
+    bus.emit('popupcontent', {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -599,20 +581,12 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array(
-    "星期日",
-    "星期一",
-    "星期二",
-    "星期三",
-    "星期四",
-    "星期五",
-    "星期六"
-  );
+  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -635,11 +609,11 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = (item) => {
+const handleMouseEnter = item => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = (item) => {
+const handleMouseLeave = item => {
   AllData.ErJiMenuShowID = null;
 };
 
@@ -770,7 +744,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -854,17 +828,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -911,7 +885,7 @@
       bottom: 0;
       width: 952px;
       height: 62px;
-      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -1045,7 +1019,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;
diff --git a/src/views/oneMap/map/PanoramaMap.vue b/src/views/oneMap/map/PanoramaMap.vue
new file mode 100644
index 0000000..14edbb0
--- /dev/null
+++ b/src/views/oneMap/map/PanoramaMap.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="mapPage">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script setup name="PanoramaMap">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
+const AllData = reactive({
+  panorama: null,
+});
+// 初始化街景地图
+const initePanoramaMap = () => {
+  AllData.panorama = BMapGL.Panorama('container');
+  AllData.panorama.setPosition(new BMapGL.Point(116.40385, 39.913795));
+  AllData.panorama.setPov({
+    // 修改全景的视角
+    pitch: 10,
+    heading: 140,
+  });
+  AllData.panorama.setOptions({
+    linksControl: true, // 隐藏道路指示控件，默认true
+    navigationControl: true, // 隐藏导航控件，默认true
+  });
+};
+onMounted(() => {
+  initePanoramaMap();
+});
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.mapPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 0;
+  background: lavender;
+}
+
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+</style>
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
index f14c679..3343523 100644
--- a/src/views/oneMap/smartBridge/LeftBox.vue
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -144,11 +144,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 160px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 155px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -159,7 +159,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -177,7 +177,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -198,7 +198,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;
diff --git a/src/views/oneMap/smartBridge/RightBox.vue b/src/views/oneMap/smartBridge/RightBox.vue
index d3a162c..fcdb83a 100644
--- a/src/views/oneMap/smartBridge/RightBox.vue
+++ b/src/views/oneMap/smartBridge/RightBox.vue
@@ -1,6 +1,6 @@
 <!-- 总体概览右侧面板 -->
 <template>
-  <div class="rightSD">
+  <div class="rightQL">
     <!-- 运行监测 -->
     <div class="topBox">
       <div class="ListBoxHeader">
@@ -16,11 +16,20 @@
           <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 class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'red'"></div>
+            </div>
+            <div class="pieBox">
+              <pieRing :echartData="pieData" :refresh="chartRefresh"></pieRing>
+              <div class="boxCircle">
+                <div class="biaoji1"></div>
+                <div class="biaoji2"></div>
+                <div class="biaoji3"></div>
+                <div class="biaoji4"></div>
+                <div class="outCircle">
+                  <div class="innerCircle"></div>
+                </div>
+                <div class="circleValue">{{ pieData.data }}<span>分</span></div>
               </div>
-              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
             </div>
           </div>
         </div>
@@ -34,18 +43,27 @@
             <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>
+            <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 class="YXJC_Box3_tableHeader">
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
+            </div>
+            <div class="YXJC_Box3_tableBody">
+              <div class="YXJC_Box3_tableList" v-for="item in YXJCTableData">
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
               </div>
             </div>
           </div>
@@ -89,8 +107,9 @@
   </div>
 </template>
 
-<script setup name="rightSD">
+<script setup name="rightQL">
 import twoLine from '../smartTunnel/components/twoLine.vue';
+import pieRing from './components/pieRing.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 
 import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
@@ -116,25 +135,36 @@
   company: '陕西海嵘工程试验检测股份有限公司',
 });
 const jgjcTitle = [
-  { name: '沉降监测', code: 'cj' },
-  { name: '滑坡监测', code: 'hp' },
-  { name: '收敛监测', code: 'sl' },
-  { name: '裂缝监测', code: 'lf' },
-  { name: '水位监测', code: 'sw' },
-  { name: '应变监测', code: 'yb' },
+  { name: '挠度', code: 'nd' },
+  { name: '振动', code: 'zd' },
+  { name: '位移', code: 'wy' },
+  { name: '索力', code: 'sl' },
+  { name: '裂缝', code: 'lf' },
+  { name: '应变', code: 'yb' },
 ];
 const jgjcData = ref({
-  cj: '1',
-  hp: '1',
-  sl: '0',
+  nd: '1',
+  zd: '1',
+  wy: '0',
+  sl: '1',
   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 YXJCTableData = [
+  {
+    fx: '北向南',
+    cp: '陕J-24YU8',
+    sj: '2024-09-30 12:26:00',
+    zz: '54.6',
+    cz: '16.2',
+  },
+  {
+    fx: '南北向',
+    cp: '陕J-24YU8',
+    sj: '2024-09-29 16:32:00',
+    zz: '48',
+    cz: '9.6',
+  },
 ];
 const tfjcData = ref({
   hz: '0',
@@ -157,6 +187,10 @@
   ],
 });
 
+const pieData = ref({
+  data: 80,
+});
+
 watch(
   () => lineData.value,
   (newVal, oldVal) => {
@@ -178,7 +212,7 @@
 </script>
 
 <style lang="scss" scoped>
-.rightSD {
+.rightQL {
   width: 100%;
   height: 100%;
   // box-sizing: border-box;
@@ -214,7 +248,7 @@
           display: inline-block;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 14px;
+          font-size: 16px;
           color: #ebfeff;
           height: 24px;
           line-height: 24px;
@@ -222,7 +256,7 @@
 
           &::after {
             content: '';
-            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;
@@ -232,7 +266,114 @@
         }
       }
       .jgBox {
+        position: relative;
         height: 140px;
+        .pieBox {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 140px;
+          height: 140px;
+          box-sizing: border-box;
+          // border: 1px solid rgba(255, 255, 255, 0.2);
+          .boxCircle {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            .circleValue {
+
+              width: 60px;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              font-weight: bold;
+              font-size: 28px;
+              color: #3efeca;
+              text-align: center;
+              span {
+                font-weight: 500;
+                font-size: 16px;
+                color: #cef6ff;
+              }
+            }
+
+            .biaoji1 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              left: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji2 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              right: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji4 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              bottom: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji3 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              top: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+
+            .outCircle {
+              position: relative;
+              // left: 0;
+              // top: 0;
+              width: 90px;
+              height: 90px;
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              /* border: 1px solid red; */
+              background: conic-gradient(from 0deg at 50% 50%, rgba(62, 255, 203, 0) 0%, #3effcb 100%);
+              animation: rotateGradient 5s linear infinite;
+              overflow: hidden;
+            }
+
+            .innerCircle {
+              position: absolute;
+              top: 10px;
+              left: 10px;
+              width: 70px;
+              height: 70px;
+              border-radius: 50%;
+              background-color: #235b7c;
+            }
+
+            @keyframes rotateGradient {
+              0% {
+                transform: rotate(0deg);
+              }
+              100% {
+                transform: rotate(360deg);
+              }
+            }
+          }
+        }
       }
       .jcBox_Content {
         margin-top: 5px;
@@ -245,55 +386,63 @@
           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;
+          &:nth-child(2n + 1) {
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
+            .jcInfo_title {
+              margin-left: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-left: 10px;
+            }
+            &::before {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              left: 0;
+              top: 0;
+              background: #00f2ff;
+            }
+          }
+          &:nth-child(2n) {
+            flex-direction: row-reverse;
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.05) 0%, rgba(21, 210, 253, 0.2) 100%);
+            .jcInfo_title {
+              margin-right: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-right: 10px;
+            }
+            &::after {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              right: 0;
+              top: 0;
+              background: #00f2ff;
+            }
           }
           .jcInfo_title {
             font-weight: bold;
             font-size: 16px;
             color: #ebfeff;
-            margin-left: 15px;
+            // 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_stateIcon {
+            width: 10px;
+            height: 10px;
+            background: #00ff9c;
+            border-radius: 50%;
+            // margin-right: 3px;
+            &.red {
+              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;
@@ -308,20 +457,57 @@
             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;
+        }
+        .YXJC_Box3_tableHeader {
+          width: 100%;
+          height: 35px;
+          line-height: 35px;
+          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
+          border-radius: 2px;
+        }
+
+        .YXJC_Box3_tableBody {
+          width: 100%;
+          // height: calc(100% - 40px);
+          overflow: auto;
+
+          .YXJC_Box3_tableList {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
+            border-radius: 2px;
+
+            .YXJC_Box3_tableSpan5 {
+              color: #ff3f3f;
             }
           }
         }
+
+        .YXJC_Box3_tableSpan {
+          display: inline-block;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ebfeff;
+          text-align: center;
+        }
+        .YXJC_Box3_tableSpan1 {
+          width: 60px;
+        }
+        .YXJC_Box3_tableSpan2 {
+          width: 100px;
+        }
+        .YXJC_Box3_tableSpan3 {
+          width: 158px;
+        }
+        .YXJC_Box3_tableSpan4 {
+          width: 50px;
+        }
+        .YXJC_Box3_tableSpan5 {
+          width: 50px;
+        }
       }
     }
     .txBox {
@@ -369,10 +555,10 @@
         .pgTitle {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
-          height: 14px;
-          line-height: 14px;
+          height: 16px;
+          line-height: 16px;
           // border: 1px solid red;
         }
       }
diff --git a/src/views/oneMap/smartBridge/components/pieRing.vue b/src/views/oneMap/smartBridge/components/pieRing.vue
new file mode 100644
index 0000000..2755843
--- /dev/null
+++ b/src/views/oneMap/smartBridge/components/pieRing.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieRing">
+import { guid } from '@/utils/ruoyi';
+
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+// console.log('-------------------', props.title);
+
+const id = guid();
+const myChart = shallowRef('');
+
+let angle = 0; //角度，用来做简单的动画效果的
+let pieValue = ref(80);
+let maxvalue = 100;
+let timerId = null;
+let option = ref({});
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
+//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+function getCirlPoint(x0, y0, r, angle) {
+  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+  return {
+    x: x1,
+    y: y1,
+  };
+}
+
+function draw() {
+  angle = angle + 10;
+  myChart.value.setOption(option.value, true);
+  //window.requestAnimationFrame(draw);
+}
+
+//初始化
+function intChart() {
+  pieValue.value = props.echartData?.data || 0;
+  let percent = ((pieValue.value / maxvalue) * 100).toFixed(0);
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  // if (!props.echartData.series.length) return;
+  option.value = {
+    // backgroundColor: '#000E1A',
+    title: {
+      text: '{a|' + percent + '} {c|分}',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 32,
+            color: 'rgba(62, 254, 202, 1)',
+            // fontFamily: 'Din',
+            // lineHeight: 40, // 调整行高以确保对齐
+            verticalAlign: 'bottom', // 底部对齐
+          },
+
+          c: {
+            fontSize: 14,
+            color: 'rgba(206, 246, 255, 1)',
+            // fontFamily: 'SanFrancisco ',
+            // lineHeight: 20, // 调整行高以确保对齐
+            // verticalAlign: 'bottom', // 底部对齐
+          },
+        },
+      },
+    },
+    polar: [
+      {
+        // radius: ['33.5%', '45%'],
+        radius: ['85%', '100%'],
+        // radius: '100%',
+        center: ['50%', '50%'],
+        // startAngle: 180, // 从180度开始
+        // endAngle: 0, // 到0度结束
+      },
+    ],
+
+    angleAxis: {
+      max: maxvalue,
+      show: false,
+      inverse: false,
+      clockwise: false, //角度轴的方向为逆时针方向。
+    },
+    radiusAxis: {
+      type: 'category',
+      show: true,
+      axisLabel: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+
+    series: [
+      // 大弧线
+      {
+        name: 'ring5',
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: function (params, api) {
+          return {
+            type: 'arc',
+            shape: {
+              cx: api.getWidth() / 2,
+              cy: api.getHeight() / 2,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2.1) * 0.9,
+              // r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.6,
+              // startAngle: (0+angle) * Math.PI / 180,
+              // endAngle: (90+angle) * Math.PI / 180
+              startAngle: (0 * Math.PI) / 180,
+              endAngle: (360 * Math.PI) / 180,
+            },
+            style: {
+              // stroke: 'rgb(53,53,53)',
+              stroke: 'rgb(10, 126, 156)',
+              fill: ' transparent',
+              lineWidth: 5,
+            },
+            silent: true,
+          };
+        },
+        data: [0],
+      },
+
+      // {
+      //   name: 'ring5',
+      //   type: 'custom',
+      //   coordinateSystem: 'none',
+      //   renderItem: function (params, api) {
+      //     // 定义线性渐变色
+      //     // let gradient = proxy.echarts.graphic.RadialGradient(
+      //     //   0.5,
+      //     //   0.5, // 圆心位置，相对于容器的百分比
+      //     //   0.5, // 半径，相对于容器的百分比
+      //     //   [
+      //     //     { offset: 0, color: 'rgba(62,255,203,0)' }, // 起始颜色
+      //     //     { offset: 1, color: '#3EFFCB' }, // 结束颜色
+      //     //   ]
+      //     // );
+      //     return {
+      //       type: 'arc',
+      //       shape: {
+      //         cx: api.getWidth() / 2,
+      //         cy: api.getHeight() / 2,
+      //         r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+      //         startAngle: ((0 + angle) * Math.PI) / 180,
+      //         endAngle: ((270 + angle) * Math.PI) / 180,
+      //       },
+      //       style: {
+      //         stroke: '#3EFFCB',
+      //         // stroke: gradient,
+      //         fill: 'transparent',
+      //         lineWidth: 5,
+      //       },
+      //       silent: true,
+      //     };
+      //   },
+      //   data: [0],
+      // },
+
+      //极坐标柱状图
+      {
+        name: '',
+        type: 'bar',
+        roundCap: true,
+        barWidth: 10,
+        showBackground: true,
+        stack: 'a',
+        backgroundStyle: {
+          color: 'rgba(66, 66, 66, 0)',
+          // borderWidth: 5,
+        },
+        data: [pieValue.value, 0],
+        coordinateSystem: 'polar',
+
+        itemStyle: {
+          normal: {
+            color: proxy.echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              {
+                offset: 0,
+                color: 'rgb(255,255,255,0.8)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,255,255,1)',
+              },
+            ]),
+            shadowBlur: 5,
+            shadowColor: 'rgba(62,255,203,0.8)',
+          },
+        },
+      },
+    ],
+  };
+
+  myChart.value.setOption(option.value);
+}
+
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+  // timerId = setInterval(function () {
+  //   //用setInterval做动画感觉有问题
+  //   draw();
+  // }, 100);
+});
+
+onBeforeUnmount(() => {
+  if (timerId) {
+    clearInterval(timerId);
+  }
+  myChart.value && myChart.value.dispose();
+  window.removeEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/smartTunnel/LeftBox.vue b/src/views/oneMap/smartTunnel/LeftBox.vue
index 20586bb..2278599 100644
--- a/src/views/oneMap/smartTunnel/LeftBox.vue
+++ b/src/views/oneMap/smartTunnel/LeftBox.vue
@@ -142,11 +142,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 145px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 140px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -157,7 +157,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -175,7 +175,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -196,7 +196,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/components/mapboxPopup.vue b/src/views/oneMap/components/mapboxPopup.vue
index 95ec03f..b5b6e5f 100644
--- a/src/views/oneMap/components/mapboxPopup.vue
+++ b/src/views/oneMap/components/mapboxPopup.vue
@@ -47,11 +47,11 @@
           <div class="contentName">厂站类型：</div>
           <div class="contentValue">
             {{
-              allData.dataList.pumpType == "rain_water"
-                ? "雨水泵站"
-                : allData.dataList.pumpType == "sewage_water"
-                ? "污水泵站"
-                : "雨污合建"
+              allData.dataList.pumpType == 'rain_water'
+                ? '雨水泵站'
+                : allData.dataList.pumpType == 'sewage_water'
+                ? '污水泵站'
+                : '雨污合建'
             }}
           </div>
         </div>
@@ -60,22 +60,14 @@
           <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
           <div class="contentName">设计规模：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.designScaleSecond ||
-              allData.dataList.sweagepump.designScaleSecond ||
-              "--"
-            }}
+            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
             m³/s
           </div>
         </div>
         <div class="contentInfo">
           <div class="contentName">泵机台数：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.deviceCount ||
-              allData.dataList.sweagepump.deviceCount ||
-              "--"
-            }}台
+            {{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
           </div>
           <div class="contentName">建设单位：</div>
           <div class="contentValue" :title="allData.dataList.unitDep">
@@ -168,18 +160,8 @@
           style="width: 200px"
           @change="changeDate"
         />
-        <el-select
-          v-model="selectCode"
-          style="margin: -7px 0px 0px 10px; width: 150px"
-          size="small"
-          @change="changeRainType"
-        >
-          <el-option
-            v-for="item in dataOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
+          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div id="chartPopupRainC"></div>
       </div>
@@ -289,37 +271,38 @@
         <div class="submitControl" @click="submitControl">派发</div>
       </div>
     </div>
+    <!-- 街景图 -->
+    <div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
+      <img :src="allData.dataList.data.base64" />
+    </div>
   </div>
 </template>
 
 <script setup name="CesiumPopup">
-import bus from "@/bus";
+import bus from '@/bus';
 //import chartOption from '@/components/Echarts/pieChart_1.js';
 //import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
 const { proxy } = getCurrentInstance();
 const allData = reactive({
   dataList: {},
   popupShow: false,
-  dateTime: [
-    proxy.moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
-    proxy.moment().format("YYYY-MM-DD"),
-  ],
+  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
 });
 const dataOption = ref([]);
 const selectData = ref([]);
-const selectCode = ref("");
-const seleceName = ref("");
-const unitName = ref("");
+const selectCode = ref('');
+const seleceName = ref('');
+const unitName = ref('');
 const propertyMonitorXList = ref([]);
 const realRiverVal = ref(0);
 
 //
 function closePopupCES() {
   allData.popupShow = false;
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
   // 取消之后回到中心点
   // newfiberMapbox.map.easeTo({
@@ -334,17 +317,17 @@
 function changeDateJSD() {
   setTimeout(() => {
     if (!!chartJSD) chartJSD.dispose();
-    chartJSD = echarts.init(document.getElementById("chartHistoryJSD"));
-    chartOption.popupRainTrend.legend.data = ["水深"];
-    chartOption.popupRainTrend.yAxis.name = "m";
+    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
+    chartOption.popupRainTrend.legend.data = ['水深'];
+    chartOption.popupRainTrend.yAxis.name = 'm';
     chartOption.popupRainTrend.xAxis.data = [
-      "2024-07-12 12:30:20",
-      "2024-07-12 13:30:20",
-      "2024-07-12 14:30:20",
-      "2024-07-12 15:30:20",
+      '2024-07-12 12:30:20',
+      '2024-07-12 13:30:20',
+      '2024-07-12 14:30:20',
+      '2024-07-12 15:30:20',
     ];
     chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = "水深";
+    chartOption.popupRainTrend.series.name = '水深';
     chartOption.popupRainTrend.series.barWidth = 10;
     chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
     // 设置鼠标滚轮放大缩小展示数据区间
@@ -412,7 +395,7 @@
 let chartPopupRain = null;
 const initEchartsPopup = () => {
   if (!!chartPopupRain) chartPopupRain.dispose();
-  chartPopupRain = echarts.init(document.getElementById("chartPopupRainC"));
+  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
   chartOption.popupRainTrend.legend.data = [seleceName.value];
   chartOption.popupRainTrend.yAxis.name = unitName.value;
   chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
@@ -421,7 +404,7 @@
   // 设置鼠标滚轮放大缩小展示数据区间
   chartOption.popupRainTrend.dataZoom = [
     {
-      type: "inside",
+      type: 'inside',
       startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
     },
   ];
@@ -434,9 +417,9 @@
   chartPopupRain.setOption(chartOption.popupRainTrend);
 };
 // 切换因子点击
-const changeRainType = (val) => {
+const changeRainType = val => {
   selectCode.value = val;
-  let obj = dataOption.value.filter((item) => item.value == val)[0];
+  let obj = dataOption.value.filter(item => item.value == val)[0];
   selectCode.value = obj.value;
   seleceName.value = obj.label;
   unitName.value = obj.propertyUnit;
@@ -480,28 +463,30 @@
 //巡查反馈派发
 const submitControl = () => {
   let data = {
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
+};
+//街景弹框点击事件
+const showStreetLayer = () => {
+  console.log('少爷在这里加~~~~~~~~~');
 };
 onMounted(() => {
-  bus.on("closeCesiumPopup", () => {
+  bus.on('closeCesiumPopup', () => {
     allData.popupShow = false;
-    if (!!newfiberMapbox.getLayerByName("rqLine")) {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (!!newfiberMapbox.getLayerByName('rqLine')) {
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
     }
   });
-  bus.on("popupcontent", (params) => {
-    console.log("popup接收地图标注点值---111", params);
+  bus.on('popupcontent', params => {
+    console.log('popup接收地图标注点值---111', params);
     allData.dataList = params.popupInfo;
-    let pipePopupDiv = document.getElementById("cesiumPopupID");
+    let pipePopupDiv = document.getElementById('cesiumPopupID');
 
     let popupCenter, center, offsets;
     if (allData.dataList.geometry) {
-      if (allData.dataList.geometry.includes("LINESTRING")) {
-        popupCenter = turf.center(
-          turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))
-        ).geometry.coordinates;
+      if (allData.dataList.geometry.includes('LINESTRING')) {
+        popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
       } else {
         popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
       }
@@ -516,10 +501,10 @@
     window.window.pipePopup = new mapboxL7.Popup({
       html: pipePopupDiv,
       lngLat: {
-        lng: popupCenter[0],
-        lat: popupCenter[1],
+        lng: popupCenter ? popupCenter[0] : params.point[0],
+        lat: popupCenter ? popupCenter[1] : params.point[1],
       },
-      anchor: "center",
+      anchor: 'center',
       offsets: [-90, 130],
       autoClose: false,
     });
@@ -530,25 +515,25 @@
     });
     allData.popupShow = true;
     // 建筑社区弹框
-    if (params.popupInfo.type == "HMJZYSQ") {
+    if (params.popupInfo.type == 'HMJZYSQ') {
       allData.popupShow = false;
       let data = {
         title: params.popupInfo.name,
-        comIDs: ["xxinformation"],
+        comIDs: ['xxinformation'],
       };
-      bus.emit("publicDialog", data);
+      bus.emit('publicDialog', data);
       setTimeout(() => {
-        bus.emit("xxinformationList", params);
+        bus.emit('xxinformationList', params);
       }, 100);
     }
-    if (allData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
-    if (allData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
-    if (allData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
+    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
+    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
   });
 });
 onBeforeUnmount(() => {
-  bus.off("popupcontent");
-  bus.off("closeCesiumPopup");
+  bus.off('popupcontent');
+  bus.off('closeCesiumPopup');
 });
 </script>
 <style lang="scss">
@@ -574,8 +559,7 @@
     margin-top: 10px;
   }
   .title {
-    background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-      center;
+    background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
     background-size: cover;
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 4dbe10c..c1cf2bb 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,20 +5,14 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="[
-          'oneMapHeader',
-          'animate__animated',
-          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-        ]"
+        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
-            ><LocationFilled
-          /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -39,9 +33,7 @@
       <!-- 地图组件 -->
       <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM
-        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
-      ></WangJiaPingBIM>
+      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -68,42 +60,17 @@
       />
       <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng"></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL
-        v-if="AllData.ComShowID == 1"
-        :isActive="AllData.ComShowID == 1 ? true : false"
-        :showPanel="showPanel"
-      ></ComZTGL>
+      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ
-        v-if="AllData.ComShowID == 2"
-        :isActive="AllData.ComShowID == 2 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHRQ>
+      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS
-        v-if="AllData.ComShowID == 3"
-        :isActive="AllData.ComShowID == 3 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHPS>
+      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL
-        v-if="AllData.ComShowID == 4"
-        :isActive="AllData.ComShowID == 4 ? true : false"
-        :showPanel="showPanel"
-      >
-      </ComZHQL>
+      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD
-        v-if="AllData.ComShowID == 5"
-        :isActive="AllData.ComShowID == 5 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHSD>
+      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM
-        v-if="AllData.ComShowID == 6"
-        :isActive="AllData.ComShowID == 6 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHHM>
+      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -117,11 +84,7 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL
-        v-if="AllData.ComShowID == 7"
-        :isActive="AllData.ComShowID == 7 ? true : false"
-        :showPanel="showPanel"
-      ></ComFHPL>
+      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -131,11 +94,7 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="[
-          'MenuList' + index,
-          'animate__animated',
-          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
-        ]"
+        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -149,10 +108,7 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div
-            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
-            class="ErJiMenuBox"
-          >
+          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -171,11 +127,7 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun
-    :RYdialogShow="AllData.RYDialog"
-    :ZhuDongBoHao="AllData.ZhuDongBoHao"
-    @OneDialogHide="dialogHide"
-  ></ModelRongYun>
+  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -197,57 +149,60 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from "@/bus";
-import { fullscreenToggel } from "@/utils/util";
-import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from '@/bus';
+import request from '@/utils/request';
+import { fullscreenToggel } from '@/utils/util';
+import { ref, reactive, toRefs, onMounted } from 'vue';
 
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
-import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
-import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
-import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
-import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
-import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
-import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
-import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
-import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
-import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
-import FXPL from "@/assets/images/Sponge_screen/menu/FXPL.png";
-import AC_FXPL from "@/assets/images/Sponge_screen/menu/AC_FXPL.png";
-import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
-import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
+import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
+import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
+import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
+import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
+import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
+import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
+import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
+import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
+import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
+import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
+import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
+import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
+import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
+import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
 // 引用地图
-import OneMap from "./map/newfiberMapBox.vue";
+import OneMap from './map/newfiberMapBox.vue';
+// 引用街景地图
+import PanoramaMap from '@/views/oneMap/map/PanoramaMap.vue';
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
+import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
 // 引用隧道BIm
-import Tunnel from "./BIM/Tunnel.vue";
+import Tunnel from './BIM/Tunnel.vue';
 // 引用语音识别
-import Voice from "./../voice/recordPage/index.vue";
+import Voice from './../voice/recordPage/index.vue';
 // 引入融云通讯录
-import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
+import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
 // 子系统引入
-import ComZTGL from "./components/ZTGL.vue"; //总体概览
-import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
-import ComZHPS from "./components/ZHPS.vue"; //智慧排水
-import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
-import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
-import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
-import ComFHPL from "./components/FHPL.vue"; //防洪排涝
-import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
-import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
-import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
+import ComZTGL from './components/ZTGL.vue'; //总体概览
+import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
+import ComZHPS from './components/ZHPS.vue'; //智慧排水
+import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
+import ComZHSD from './components/ZHSD.vue'; //智慧隧道
+import ComZHHM from './components/ZHHM.vue'; //智慧海绵
+import ComFHPL from './components/FHPL.vue'; //防洪排涝
+import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
+import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
+import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
+import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
 // 图层控制面板
-import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
+import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
+import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
 // 左右滑动
-import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
-import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
+import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
+import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -255,8 +210,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: "",
-  text: "",
+  imgNum: '',
+  text: '',
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -344,61 +299,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: "",
-  SiteNo: "",
+  getSiteId: '',
+  SiteNo: '',
   data: {},
-  comIDs: ["spjk"],
+  comIDs: ['spjk'],
   customData: [],
-  RefName: "",
-  title: "详情",
+  RefName: '',
+  title: '详情',
 });
 onBeforeMount(() => {
-  console.log("ZhuanTiType", userStore.ZhuanTiType);
+  console.log('ZhuanTiType', userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: "总体概览",
+        name: '总体概览',
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ["路网", "河流水系"],
+        Layers: ['路网', '河流水系'],
       },
       {
-        name: "燃气安全",
+        name: '燃气安全',
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ["干管", "主管", "干管流向", "主管流向"],
+        Layers: ['干管', '主管', '干管流向', '主管流向'],
       },
       {
-        name: "排水安全",
+        name: '排水安全',
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ["雨水管网", "污水管网"],
+        Layers: ['雨水管网', '污水管网'],
         children: [
           {
-            name: "排水安全",
+            name: '排水安全',
             id: 3,
             Layers: [],
           },
           {
-            name: "防汛排涝",
+            name: '防汛排涝',
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: "桥梁安全",
+        name: '桥梁安全',
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: "隧道安全",
+        name: '隧道安全',
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -409,19 +364,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: "城市概览",
+        name: '城市概览',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: "监测分析",
+        name: '监测分析',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 61,
       },
       {
-        name: "建设评估",
+        name: '建设评估',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 62,
@@ -435,10 +390,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
-  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
+  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on("checkRainL", (params) => {
+  bus.on('checkRainL', params => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -446,7 +401,7 @@
     }
   });
   // 底部隐藏
-  bus.on("checkBottom", (params) => {
+  bus.on('checkBottom', params => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -454,15 +409,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog", (params) => {
+  bus.on('publicDialog', params => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? "详情";
+    dialogConfig.title = params.title ?? '详情';
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog_Close", (params) => {
+  bus.on('publicDialog_Close', params => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -472,14 +427,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on("OpenRY", (params) => {
+  bus.on('OpenRY', params => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit("showRy");
+    bus.emit('showRy');
   });
 
   // 切换专题图
-  bus.on("ChangeZhuanTiTu", (params) => {
+  bus.on('ChangeZhuanTiTu', params => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -489,18 +444,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on("changeShowPanel", (params) => {
+  bus.on('changeShowPanel', params => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off("BottomHidden");
-  bus.off("publicDialog");
-  bus.off("publicDialog_Close");
-  bus.off("OpenRY");
-  bus.off("ChangeZhuanTiTu");
-  bus.off("checkRainL");
-  bus.off("changeShowPanel");
+  bus.off('BottomHidden');
+  bus.off('publicDialog');
+  bus.off('publicDialog_Close');
+  bus.off('OpenRY');
+  bus.off('ChangeZhuanTiTu');
+  bus.off('checkRainL');
+  bus.off('changeShowPanel');
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -519,9 +474,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit("clearAllLayer");
+    bus.emit('clearAllLayer');
     // 打开默认的菜单
-    bus.emit("SetLayerShow", item.Layers);
+    bus.emit('SetLayerShow', item.Layers);
   }
 };
 // 二级菜单点击
@@ -540,10 +495,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit("showRy");
+  bus.emit('showRy');
 };
 // 关闭融云通讯录弹窗
-const dialogHide = (val) => {
+const dialogHide = val => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -551,25 +506,52 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log("point", point);
-  console.log("properties", properties);
-  console.log("feature---", feature);
-  if (properties) {
-    if (feature == "rq_pipeline_info") {
-      if (!!newfiberMapbox.getLayerByName("rqLine")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  console.log('point', point);
+  console.log('properties', properties);
+  console.log('feature---', feature);
+  if (!feature) {
+    let currentZoom = newfiberMapbox.map.getZoom();
+    console.log('currentZoom--', currentZoom);
+    if (currentZoom >= 17) {
+      let clickPoint = turf.point(point);
+      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
+      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
+      let data = await request({
+        url: `/bdApi//baiduservice/panorama`,
+        method: 'GET',
+        params: {
+          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
+          fov: 180,
+          height: 256,
+          width: 512,
+        },
+      });
+      if (data && data.data) {
+        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
       }
-      let rqLine = turf.featureCollection([
-        turf.feature(Terraformer.WKT.parse(properties.geometry)),
-      ]);
+      console.log('data----', data);
+      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
+      bus.emit('popupcontent', {
+        popupShow: true,
+        point: point,
+        popupInfo: data,
+      });
+    }
+  }
+  if (properties) {
+    if (feature == 'rq_pipeline_info') {
+      if (!!newfiberMapbox.getLayerByName('rqLine')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
+      }
+      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
       let layer = new mapboxL7.LineLayer({
-        name: "rqLine",
+        name: 'rqLine',
       })
         .source(rqLine)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("rgb(241, 159, 27)")
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(241, 159, 27)')
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -580,11 +562,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit("popupcontent", {
+    bus.emit('popupcontent', {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -599,20 +581,12 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array(
-    "星期日",
-    "星期一",
-    "星期二",
-    "星期三",
-    "星期四",
-    "星期五",
-    "星期六"
-  );
+  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -635,11 +609,11 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = (item) => {
+const handleMouseEnter = item => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = (item) => {
+const handleMouseLeave = item => {
   AllData.ErJiMenuShowID = null;
 };
 
@@ -770,7 +744,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -854,17 +828,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -911,7 +885,7 @@
       bottom: 0;
       width: 952px;
       height: 62px;
-      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -1045,7 +1019,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;
diff --git a/src/views/oneMap/map/PanoramaMap.vue b/src/views/oneMap/map/PanoramaMap.vue
new file mode 100644
index 0000000..14edbb0
--- /dev/null
+++ b/src/views/oneMap/map/PanoramaMap.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="mapPage">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script setup name="PanoramaMap">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
+const AllData = reactive({
+  panorama: null,
+});
+// 初始化街景地图
+const initePanoramaMap = () => {
+  AllData.panorama = BMapGL.Panorama('container');
+  AllData.panorama.setPosition(new BMapGL.Point(116.40385, 39.913795));
+  AllData.panorama.setPov({
+    // 修改全景的视角
+    pitch: 10,
+    heading: 140,
+  });
+  AllData.panorama.setOptions({
+    linksControl: true, // 隐藏道路指示控件，默认true
+    navigationControl: true, // 隐藏导航控件，默认true
+  });
+};
+onMounted(() => {
+  initePanoramaMap();
+});
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.mapPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 0;
+  background: lavender;
+}
+
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+</style>
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
index f14c679..3343523 100644
--- a/src/views/oneMap/smartBridge/LeftBox.vue
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -144,11 +144,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 160px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 155px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -159,7 +159,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -177,7 +177,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -198,7 +198,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;
diff --git a/src/views/oneMap/smartBridge/RightBox.vue b/src/views/oneMap/smartBridge/RightBox.vue
index d3a162c..fcdb83a 100644
--- a/src/views/oneMap/smartBridge/RightBox.vue
+++ b/src/views/oneMap/smartBridge/RightBox.vue
@@ -1,6 +1,6 @@
 <!-- 总体概览右侧面板 -->
 <template>
-  <div class="rightSD">
+  <div class="rightQL">
     <!-- 运行监测 -->
     <div class="topBox">
       <div class="ListBoxHeader">
@@ -16,11 +16,20 @@
           <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 class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'red'"></div>
+            </div>
+            <div class="pieBox">
+              <pieRing :echartData="pieData" :refresh="chartRefresh"></pieRing>
+              <div class="boxCircle">
+                <div class="biaoji1"></div>
+                <div class="biaoji2"></div>
+                <div class="biaoji3"></div>
+                <div class="biaoji4"></div>
+                <div class="outCircle">
+                  <div class="innerCircle"></div>
+                </div>
+                <div class="circleValue">{{ pieData.data }}<span>分</span></div>
               </div>
-              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
             </div>
           </div>
         </div>
@@ -34,18 +43,27 @@
             <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>
+            <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 class="YXJC_Box3_tableHeader">
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
+            </div>
+            <div class="YXJC_Box3_tableBody">
+              <div class="YXJC_Box3_tableList" v-for="item in YXJCTableData">
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
               </div>
             </div>
           </div>
@@ -89,8 +107,9 @@
   </div>
 </template>
 
-<script setup name="rightSD">
+<script setup name="rightQL">
 import twoLine from '../smartTunnel/components/twoLine.vue';
+import pieRing from './components/pieRing.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 
 import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
@@ -116,25 +135,36 @@
   company: '陕西海嵘工程试验检测股份有限公司',
 });
 const jgjcTitle = [
-  { name: '沉降监测', code: 'cj' },
-  { name: '滑坡监测', code: 'hp' },
-  { name: '收敛监测', code: 'sl' },
-  { name: '裂缝监测', code: 'lf' },
-  { name: '水位监测', code: 'sw' },
-  { name: '应变监测', code: 'yb' },
+  { name: '挠度', code: 'nd' },
+  { name: '振动', code: 'zd' },
+  { name: '位移', code: 'wy' },
+  { name: '索力', code: 'sl' },
+  { name: '裂缝', code: 'lf' },
+  { name: '应变', code: 'yb' },
 ];
 const jgjcData = ref({
-  cj: '1',
-  hp: '1',
-  sl: '0',
+  nd: '1',
+  zd: '1',
+  wy: '0',
+  sl: '1',
   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 YXJCTableData = [
+  {
+    fx: '北向南',
+    cp: '陕J-24YU8',
+    sj: '2024-09-30 12:26:00',
+    zz: '54.6',
+    cz: '16.2',
+  },
+  {
+    fx: '南北向',
+    cp: '陕J-24YU8',
+    sj: '2024-09-29 16:32:00',
+    zz: '48',
+    cz: '9.6',
+  },
 ];
 const tfjcData = ref({
   hz: '0',
@@ -157,6 +187,10 @@
   ],
 });
 
+const pieData = ref({
+  data: 80,
+});
+
 watch(
   () => lineData.value,
   (newVal, oldVal) => {
@@ -178,7 +212,7 @@
 </script>
 
 <style lang="scss" scoped>
-.rightSD {
+.rightQL {
   width: 100%;
   height: 100%;
   // box-sizing: border-box;
@@ -214,7 +248,7 @@
           display: inline-block;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 14px;
+          font-size: 16px;
           color: #ebfeff;
           height: 24px;
           line-height: 24px;
@@ -222,7 +256,7 @@
 
           &::after {
             content: '';
-            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;
@@ -232,7 +266,114 @@
         }
       }
       .jgBox {
+        position: relative;
         height: 140px;
+        .pieBox {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 140px;
+          height: 140px;
+          box-sizing: border-box;
+          // border: 1px solid rgba(255, 255, 255, 0.2);
+          .boxCircle {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            .circleValue {
+
+              width: 60px;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              font-weight: bold;
+              font-size: 28px;
+              color: #3efeca;
+              text-align: center;
+              span {
+                font-weight: 500;
+                font-size: 16px;
+                color: #cef6ff;
+              }
+            }
+
+            .biaoji1 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              left: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji2 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              right: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji4 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              bottom: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji3 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              top: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+
+            .outCircle {
+              position: relative;
+              // left: 0;
+              // top: 0;
+              width: 90px;
+              height: 90px;
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              /* border: 1px solid red; */
+              background: conic-gradient(from 0deg at 50% 50%, rgba(62, 255, 203, 0) 0%, #3effcb 100%);
+              animation: rotateGradient 5s linear infinite;
+              overflow: hidden;
+            }
+
+            .innerCircle {
+              position: absolute;
+              top: 10px;
+              left: 10px;
+              width: 70px;
+              height: 70px;
+              border-radius: 50%;
+              background-color: #235b7c;
+            }
+
+            @keyframes rotateGradient {
+              0% {
+                transform: rotate(0deg);
+              }
+              100% {
+                transform: rotate(360deg);
+              }
+            }
+          }
+        }
       }
       .jcBox_Content {
         margin-top: 5px;
@@ -245,55 +386,63 @@
           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;
+          &:nth-child(2n + 1) {
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
+            .jcInfo_title {
+              margin-left: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-left: 10px;
+            }
+            &::before {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              left: 0;
+              top: 0;
+              background: #00f2ff;
+            }
+          }
+          &:nth-child(2n) {
+            flex-direction: row-reverse;
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.05) 0%, rgba(21, 210, 253, 0.2) 100%);
+            .jcInfo_title {
+              margin-right: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-right: 10px;
+            }
+            &::after {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              right: 0;
+              top: 0;
+              background: #00f2ff;
+            }
           }
           .jcInfo_title {
             font-weight: bold;
             font-size: 16px;
             color: #ebfeff;
-            margin-left: 15px;
+            // 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_stateIcon {
+            width: 10px;
+            height: 10px;
+            background: #00ff9c;
+            border-radius: 50%;
+            // margin-right: 3px;
+            &.red {
+              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;
@@ -308,20 +457,57 @@
             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;
+        }
+        .YXJC_Box3_tableHeader {
+          width: 100%;
+          height: 35px;
+          line-height: 35px;
+          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
+          border-radius: 2px;
+        }
+
+        .YXJC_Box3_tableBody {
+          width: 100%;
+          // height: calc(100% - 40px);
+          overflow: auto;
+
+          .YXJC_Box3_tableList {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
+            border-radius: 2px;
+
+            .YXJC_Box3_tableSpan5 {
+              color: #ff3f3f;
             }
           }
         }
+
+        .YXJC_Box3_tableSpan {
+          display: inline-block;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ebfeff;
+          text-align: center;
+        }
+        .YXJC_Box3_tableSpan1 {
+          width: 60px;
+        }
+        .YXJC_Box3_tableSpan2 {
+          width: 100px;
+        }
+        .YXJC_Box3_tableSpan3 {
+          width: 158px;
+        }
+        .YXJC_Box3_tableSpan4 {
+          width: 50px;
+        }
+        .YXJC_Box3_tableSpan5 {
+          width: 50px;
+        }
       }
     }
     .txBox {
@@ -369,10 +555,10 @@
         .pgTitle {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
-          height: 14px;
-          line-height: 14px;
+          height: 16px;
+          line-height: 16px;
           // border: 1px solid red;
         }
       }
diff --git a/src/views/oneMap/smartBridge/components/pieRing.vue b/src/views/oneMap/smartBridge/components/pieRing.vue
new file mode 100644
index 0000000..2755843
--- /dev/null
+++ b/src/views/oneMap/smartBridge/components/pieRing.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieRing">
+import { guid } from '@/utils/ruoyi';
+
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+// console.log('-------------------', props.title);
+
+const id = guid();
+const myChart = shallowRef('');
+
+let angle = 0; //角度，用来做简单的动画效果的
+let pieValue = ref(80);
+let maxvalue = 100;
+let timerId = null;
+let option = ref({});
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
+//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+function getCirlPoint(x0, y0, r, angle) {
+  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+  return {
+    x: x1,
+    y: y1,
+  };
+}
+
+function draw() {
+  angle = angle + 10;
+  myChart.value.setOption(option.value, true);
+  //window.requestAnimationFrame(draw);
+}
+
+//初始化
+function intChart() {
+  pieValue.value = props.echartData?.data || 0;
+  let percent = ((pieValue.value / maxvalue) * 100).toFixed(0);
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  // if (!props.echartData.series.length) return;
+  option.value = {
+    // backgroundColor: '#000E1A',
+    title: {
+      text: '{a|' + percent + '} {c|分}',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 32,
+            color: 'rgba(62, 254, 202, 1)',
+            // fontFamily: 'Din',
+            // lineHeight: 40, // 调整行高以确保对齐
+            verticalAlign: 'bottom', // 底部对齐
+          },
+
+          c: {
+            fontSize: 14,
+            color: 'rgba(206, 246, 255, 1)',
+            // fontFamily: 'SanFrancisco ',
+            // lineHeight: 20, // 调整行高以确保对齐
+            // verticalAlign: 'bottom', // 底部对齐
+          },
+        },
+      },
+    },
+    polar: [
+      {
+        // radius: ['33.5%', '45%'],
+        radius: ['85%', '100%'],
+        // radius: '100%',
+        center: ['50%', '50%'],
+        // startAngle: 180, // 从180度开始
+        // endAngle: 0, // 到0度结束
+      },
+    ],
+
+    angleAxis: {
+      max: maxvalue,
+      show: false,
+      inverse: false,
+      clockwise: false, //角度轴的方向为逆时针方向。
+    },
+    radiusAxis: {
+      type: 'category',
+      show: true,
+      axisLabel: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+
+    series: [
+      // 大弧线
+      {
+        name: 'ring5',
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: function (params, api) {
+          return {
+            type: 'arc',
+            shape: {
+              cx: api.getWidth() / 2,
+              cy: api.getHeight() / 2,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2.1) * 0.9,
+              // r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.6,
+              // startAngle: (0+angle) * Math.PI / 180,
+              // endAngle: (90+angle) * Math.PI / 180
+              startAngle: (0 * Math.PI) / 180,
+              endAngle: (360 * Math.PI) / 180,
+            },
+            style: {
+              // stroke: 'rgb(53,53,53)',
+              stroke: 'rgb(10, 126, 156)',
+              fill: ' transparent',
+              lineWidth: 5,
+            },
+            silent: true,
+          };
+        },
+        data: [0],
+      },
+
+      // {
+      //   name: 'ring5',
+      //   type: 'custom',
+      //   coordinateSystem: 'none',
+      //   renderItem: function (params, api) {
+      //     // 定义线性渐变色
+      //     // let gradient = proxy.echarts.graphic.RadialGradient(
+      //     //   0.5,
+      //     //   0.5, // 圆心位置，相对于容器的百分比
+      //     //   0.5, // 半径，相对于容器的百分比
+      //     //   [
+      //     //     { offset: 0, color: 'rgba(62,255,203,0)' }, // 起始颜色
+      //     //     { offset: 1, color: '#3EFFCB' }, // 结束颜色
+      //     //   ]
+      //     // );
+      //     return {
+      //       type: 'arc',
+      //       shape: {
+      //         cx: api.getWidth() / 2,
+      //         cy: api.getHeight() / 2,
+      //         r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+      //         startAngle: ((0 + angle) * Math.PI) / 180,
+      //         endAngle: ((270 + angle) * Math.PI) / 180,
+      //       },
+      //       style: {
+      //         stroke: '#3EFFCB',
+      //         // stroke: gradient,
+      //         fill: 'transparent',
+      //         lineWidth: 5,
+      //       },
+      //       silent: true,
+      //     };
+      //   },
+      //   data: [0],
+      // },
+
+      //极坐标柱状图
+      {
+        name: '',
+        type: 'bar',
+        roundCap: true,
+        barWidth: 10,
+        showBackground: true,
+        stack: 'a',
+        backgroundStyle: {
+          color: 'rgba(66, 66, 66, 0)',
+          // borderWidth: 5,
+        },
+        data: [pieValue.value, 0],
+        coordinateSystem: 'polar',
+
+        itemStyle: {
+          normal: {
+            color: proxy.echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              {
+                offset: 0,
+                color: 'rgb(255,255,255,0.8)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,255,255,1)',
+              },
+            ]),
+            shadowBlur: 5,
+            shadowColor: 'rgba(62,255,203,0.8)',
+          },
+        },
+      },
+    ],
+  };
+
+  myChart.value.setOption(option.value);
+}
+
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+  // timerId = setInterval(function () {
+  //   //用setInterval做动画感觉有问题
+  //   draw();
+  // }, 100);
+});
+
+onBeforeUnmount(() => {
+  if (timerId) {
+    clearInterval(timerId);
+  }
+  myChart.value && myChart.value.dispose();
+  window.removeEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/smartTunnel/LeftBox.vue b/src/views/oneMap/smartTunnel/LeftBox.vue
index 20586bb..2278599 100644
--- a/src/views/oneMap/smartTunnel/LeftBox.vue
+++ b/src/views/oneMap/smartTunnel/LeftBox.vue
@@ -142,11 +142,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 145px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 140px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -157,7 +157,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -175,7 +175,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -196,7 +196,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;
diff --git a/src/views/oneMap/smartTunnel/RightBox.vue b/src/views/oneMap/smartTunnel/RightBox.vue
index 9f092a3..1f97e0c 100644
--- a/src/views/oneMap/smartTunnel/RightBox.vue
+++ b/src/views/oneMap/smartTunnel/RightBox.vue
@@ -214,7 +214,7 @@
           display: inline-block;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 14px;
+          font-size: 16px;
           color: #ebfeff;
           height: 24px;
           line-height: 24px;
@@ -285,13 +285,13 @@
             }
           }
           .jcInfo_btn {
-            width: 38px;
-            height: 21px;
-            margin-left: 18px;
+            width: 42px;
+            height: 24px;
+            margin-left: 12px;
             background: #0ea3c3;
             border-radius: 11px;
             font-weight: 500;
-            font-size: 14px;
+            font-size: 16px;
             color: #ebfeff;
             text-align: center;
           }
@@ -311,7 +311,7 @@
           }
           .tfInfo_title {
             font-weight: bold;
-            font-size: 14px;
+            font-size: 16px;
             color: #09bdf2;
           }
           .tfInfo_state {
@@ -370,10 +370,10 @@
         .pgTitle {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
-          height: 14px;
-          line-height: 14px;
+          height: 16px;
+          line-height: 16px;
           // border: 1px solid red;
         }
       }

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/components/mapboxPopup.vue b/src/views/oneMap/components/mapboxPopup.vue
index 95ec03f..b5b6e5f 100644
--- a/src/views/oneMap/components/mapboxPopup.vue
+++ b/src/views/oneMap/components/mapboxPopup.vue
@@ -47,11 +47,11 @@
           <div class="contentName">厂站类型：</div>
           <div class="contentValue">
             {{
-              allData.dataList.pumpType == "rain_water"
-                ? "雨水泵站"
-                : allData.dataList.pumpType == "sewage_water"
-                ? "污水泵站"
-                : "雨污合建"
+              allData.dataList.pumpType == 'rain_water'
+                ? '雨水泵站'
+                : allData.dataList.pumpType == 'sewage_water'
+                ? '污水泵站'
+                : '雨污合建'
             }}
           </div>
         </div>
@@ -60,22 +60,14 @@
           <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
           <div class="contentName">设计规模：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.designScaleSecond ||
-              allData.dataList.sweagepump.designScaleSecond ||
-              "--"
-            }}
+            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
             m³/s
           </div>
         </div>
         <div class="contentInfo">
           <div class="contentName">泵机台数：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.deviceCount ||
-              allData.dataList.sweagepump.deviceCount ||
-              "--"
-            }}台
+            {{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
           </div>
           <div class="contentName">建设单位：</div>
           <div class="contentValue" :title="allData.dataList.unitDep">
@@ -168,18 +160,8 @@
           style="width: 200px"
           @change="changeDate"
         />
-        <el-select
-          v-model="selectCode"
-          style="margin: -7px 0px 0px 10px; width: 150px"
-          size="small"
-          @change="changeRainType"
-        >
-          <el-option
-            v-for="item in dataOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
+          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div id="chartPopupRainC"></div>
       </div>
@@ -289,37 +271,38 @@
         <div class="submitControl" @click="submitControl">派发</div>
       </div>
     </div>
+    <!-- 街景图 -->
+    <div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
+      <img :src="allData.dataList.data.base64" />
+    </div>
   </div>
 </template>
 
 <script setup name="CesiumPopup">
-import bus from "@/bus";
+import bus from '@/bus';
 //import chartOption from '@/components/Echarts/pieChart_1.js';
 //import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
 const { proxy } = getCurrentInstance();
 const allData = reactive({
   dataList: {},
   popupShow: false,
-  dateTime: [
-    proxy.moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
-    proxy.moment().format("YYYY-MM-DD"),
-  ],
+  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
 });
 const dataOption = ref([]);
 const selectData = ref([]);
-const selectCode = ref("");
-const seleceName = ref("");
-const unitName = ref("");
+const selectCode = ref('');
+const seleceName = ref('');
+const unitName = ref('');
 const propertyMonitorXList = ref([]);
 const realRiverVal = ref(0);
 
 //
 function closePopupCES() {
   allData.popupShow = false;
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
   // 取消之后回到中心点
   // newfiberMapbox.map.easeTo({
@@ -334,17 +317,17 @@
 function changeDateJSD() {
   setTimeout(() => {
     if (!!chartJSD) chartJSD.dispose();
-    chartJSD = echarts.init(document.getElementById("chartHistoryJSD"));
-    chartOption.popupRainTrend.legend.data = ["水深"];
-    chartOption.popupRainTrend.yAxis.name = "m";
+    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
+    chartOption.popupRainTrend.legend.data = ['水深'];
+    chartOption.popupRainTrend.yAxis.name = 'm';
     chartOption.popupRainTrend.xAxis.data = [
-      "2024-07-12 12:30:20",
-      "2024-07-12 13:30:20",
-      "2024-07-12 14:30:20",
-      "2024-07-12 15:30:20",
+      '2024-07-12 12:30:20',
+      '2024-07-12 13:30:20',
+      '2024-07-12 14:30:20',
+      '2024-07-12 15:30:20',
     ];
     chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = "水深";
+    chartOption.popupRainTrend.series.name = '水深';
     chartOption.popupRainTrend.series.barWidth = 10;
     chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
     // 设置鼠标滚轮放大缩小展示数据区间
@@ -412,7 +395,7 @@
 let chartPopupRain = null;
 const initEchartsPopup = () => {
   if (!!chartPopupRain) chartPopupRain.dispose();
-  chartPopupRain = echarts.init(document.getElementById("chartPopupRainC"));
+  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
   chartOption.popupRainTrend.legend.data = [seleceName.value];
   chartOption.popupRainTrend.yAxis.name = unitName.value;
   chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
@@ -421,7 +404,7 @@
   // 设置鼠标滚轮放大缩小展示数据区间
   chartOption.popupRainTrend.dataZoom = [
     {
-      type: "inside",
+      type: 'inside',
       startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
     },
   ];
@@ -434,9 +417,9 @@
   chartPopupRain.setOption(chartOption.popupRainTrend);
 };
 // 切换因子点击
-const changeRainType = (val) => {
+const changeRainType = val => {
   selectCode.value = val;
-  let obj = dataOption.value.filter((item) => item.value == val)[0];
+  let obj = dataOption.value.filter(item => item.value == val)[0];
   selectCode.value = obj.value;
   seleceName.value = obj.label;
   unitName.value = obj.propertyUnit;
@@ -480,28 +463,30 @@
 //巡查反馈派发
 const submitControl = () => {
   let data = {
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
+};
+//街景弹框点击事件
+const showStreetLayer = () => {
+  console.log('少爷在这里加~~~~~~~~~');
 };
 onMounted(() => {
-  bus.on("closeCesiumPopup", () => {
+  bus.on('closeCesiumPopup', () => {
     allData.popupShow = false;
-    if (!!newfiberMapbox.getLayerByName("rqLine")) {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (!!newfiberMapbox.getLayerByName('rqLine')) {
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
     }
   });
-  bus.on("popupcontent", (params) => {
-    console.log("popup接收地图标注点值---111", params);
+  bus.on('popupcontent', params => {
+    console.log('popup接收地图标注点值---111', params);
     allData.dataList = params.popupInfo;
-    let pipePopupDiv = document.getElementById("cesiumPopupID");
+    let pipePopupDiv = document.getElementById('cesiumPopupID');
 
     let popupCenter, center, offsets;
     if (allData.dataList.geometry) {
-      if (allData.dataList.geometry.includes("LINESTRING")) {
-        popupCenter = turf.center(
-          turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))
-        ).geometry.coordinates;
+      if (allData.dataList.geometry.includes('LINESTRING')) {
+        popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
       } else {
         popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
       }
@@ -516,10 +501,10 @@
     window.window.pipePopup = new mapboxL7.Popup({
       html: pipePopupDiv,
       lngLat: {
-        lng: popupCenter[0],
-        lat: popupCenter[1],
+        lng: popupCenter ? popupCenter[0] : params.point[0],
+        lat: popupCenter ? popupCenter[1] : params.point[1],
       },
-      anchor: "center",
+      anchor: 'center',
       offsets: [-90, 130],
       autoClose: false,
     });
@@ -530,25 +515,25 @@
     });
     allData.popupShow = true;
     // 建筑社区弹框
-    if (params.popupInfo.type == "HMJZYSQ") {
+    if (params.popupInfo.type == 'HMJZYSQ') {
       allData.popupShow = false;
       let data = {
         title: params.popupInfo.name,
-        comIDs: ["xxinformation"],
+        comIDs: ['xxinformation'],
       };
-      bus.emit("publicDialog", data);
+      bus.emit('publicDialog', data);
       setTimeout(() => {
-        bus.emit("xxinformationList", params);
+        bus.emit('xxinformationList', params);
       }, 100);
     }
-    if (allData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
-    if (allData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
-    if (allData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
+    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
+    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
   });
 });
 onBeforeUnmount(() => {
-  bus.off("popupcontent");
-  bus.off("closeCesiumPopup");
+  bus.off('popupcontent');
+  bus.off('closeCesiumPopup');
 });
 </script>
 <style lang="scss">
@@ -574,8 +559,7 @@
     margin-top: 10px;
   }
   .title {
-    background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-      center;
+    background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
     background-size: cover;
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 4dbe10c..c1cf2bb 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,20 +5,14 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="[
-          'oneMapHeader',
-          'animate__animated',
-          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-        ]"
+        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
-            ><LocationFilled
-          /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -39,9 +33,7 @@
       <!-- 地图组件 -->
       <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM
-        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
-      ></WangJiaPingBIM>
+      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -68,42 +60,17 @@
       />
       <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng"></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL
-        v-if="AllData.ComShowID == 1"
-        :isActive="AllData.ComShowID == 1 ? true : false"
-        :showPanel="showPanel"
-      ></ComZTGL>
+      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ
-        v-if="AllData.ComShowID == 2"
-        :isActive="AllData.ComShowID == 2 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHRQ>
+      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS
-        v-if="AllData.ComShowID == 3"
-        :isActive="AllData.ComShowID == 3 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHPS>
+      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL
-        v-if="AllData.ComShowID == 4"
-        :isActive="AllData.ComShowID == 4 ? true : false"
-        :showPanel="showPanel"
-      >
-      </ComZHQL>
+      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD
-        v-if="AllData.ComShowID == 5"
-        :isActive="AllData.ComShowID == 5 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHSD>
+      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM
-        v-if="AllData.ComShowID == 6"
-        :isActive="AllData.ComShowID == 6 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHHM>
+      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -117,11 +84,7 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL
-        v-if="AllData.ComShowID == 7"
-        :isActive="AllData.ComShowID == 7 ? true : false"
-        :showPanel="showPanel"
-      ></ComFHPL>
+      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -131,11 +94,7 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="[
-          'MenuList' + index,
-          'animate__animated',
-          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
-        ]"
+        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -149,10 +108,7 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div
-            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
-            class="ErJiMenuBox"
-          >
+          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -171,11 +127,7 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun
-    :RYdialogShow="AllData.RYDialog"
-    :ZhuDongBoHao="AllData.ZhuDongBoHao"
-    @OneDialogHide="dialogHide"
-  ></ModelRongYun>
+  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -197,57 +149,60 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from "@/bus";
-import { fullscreenToggel } from "@/utils/util";
-import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from '@/bus';
+import request from '@/utils/request';
+import { fullscreenToggel } from '@/utils/util';
+import { ref, reactive, toRefs, onMounted } from 'vue';
 
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
-import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
-import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
-import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
-import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
-import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
-import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
-import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
-import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
-import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
-import FXPL from "@/assets/images/Sponge_screen/menu/FXPL.png";
-import AC_FXPL from "@/assets/images/Sponge_screen/menu/AC_FXPL.png";
-import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
-import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
+import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
+import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
+import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
+import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
+import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
+import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
+import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
+import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
+import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
+import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
+import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
+import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
+import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
+import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
 // 引用地图
-import OneMap from "./map/newfiberMapBox.vue";
+import OneMap from './map/newfiberMapBox.vue';
+// 引用街景地图
+import PanoramaMap from '@/views/oneMap/map/PanoramaMap.vue';
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
+import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
 // 引用隧道BIm
-import Tunnel from "./BIM/Tunnel.vue";
+import Tunnel from './BIM/Tunnel.vue';
 // 引用语音识别
-import Voice from "./../voice/recordPage/index.vue";
+import Voice from './../voice/recordPage/index.vue';
 // 引入融云通讯录
-import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
+import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
 // 子系统引入
-import ComZTGL from "./components/ZTGL.vue"; //总体概览
-import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
-import ComZHPS from "./components/ZHPS.vue"; //智慧排水
-import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
-import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
-import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
-import ComFHPL from "./components/FHPL.vue"; //防洪排涝
-import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
-import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
-import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
+import ComZTGL from './components/ZTGL.vue'; //总体概览
+import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
+import ComZHPS from './components/ZHPS.vue'; //智慧排水
+import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
+import ComZHSD from './components/ZHSD.vue'; //智慧隧道
+import ComZHHM from './components/ZHHM.vue'; //智慧海绵
+import ComFHPL from './components/FHPL.vue'; //防洪排涝
+import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
+import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
+import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
+import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
 // 图层控制面板
-import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
+import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
+import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
 // 左右滑动
-import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
-import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
+import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
+import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -255,8 +210,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: "",
-  text: "",
+  imgNum: '',
+  text: '',
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -344,61 +299,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: "",
-  SiteNo: "",
+  getSiteId: '',
+  SiteNo: '',
   data: {},
-  comIDs: ["spjk"],
+  comIDs: ['spjk'],
   customData: [],
-  RefName: "",
-  title: "详情",
+  RefName: '',
+  title: '详情',
 });
 onBeforeMount(() => {
-  console.log("ZhuanTiType", userStore.ZhuanTiType);
+  console.log('ZhuanTiType', userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: "总体概览",
+        name: '总体概览',
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ["路网", "河流水系"],
+        Layers: ['路网', '河流水系'],
       },
       {
-        name: "燃气安全",
+        name: '燃气安全',
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ["干管", "主管", "干管流向", "主管流向"],
+        Layers: ['干管', '主管', '干管流向', '主管流向'],
       },
       {
-        name: "排水安全",
+        name: '排水安全',
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ["雨水管网", "污水管网"],
+        Layers: ['雨水管网', '污水管网'],
         children: [
           {
-            name: "排水安全",
+            name: '排水安全',
             id: 3,
             Layers: [],
           },
           {
-            name: "防汛排涝",
+            name: '防汛排涝',
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: "桥梁安全",
+        name: '桥梁安全',
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: "隧道安全",
+        name: '隧道安全',
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -409,19 +364,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: "城市概览",
+        name: '城市概览',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: "监测分析",
+        name: '监测分析',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 61,
       },
       {
-        name: "建设评估",
+        name: '建设评估',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 62,
@@ -435,10 +390,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
-  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
+  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on("checkRainL", (params) => {
+  bus.on('checkRainL', params => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -446,7 +401,7 @@
     }
   });
   // 底部隐藏
-  bus.on("checkBottom", (params) => {
+  bus.on('checkBottom', params => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -454,15 +409,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog", (params) => {
+  bus.on('publicDialog', params => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? "详情";
+    dialogConfig.title = params.title ?? '详情';
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog_Close", (params) => {
+  bus.on('publicDialog_Close', params => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -472,14 +427,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on("OpenRY", (params) => {
+  bus.on('OpenRY', params => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit("showRy");
+    bus.emit('showRy');
   });
 
   // 切换专题图
-  bus.on("ChangeZhuanTiTu", (params) => {
+  bus.on('ChangeZhuanTiTu', params => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -489,18 +444,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on("changeShowPanel", (params) => {
+  bus.on('changeShowPanel', params => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off("BottomHidden");
-  bus.off("publicDialog");
-  bus.off("publicDialog_Close");
-  bus.off("OpenRY");
-  bus.off("ChangeZhuanTiTu");
-  bus.off("checkRainL");
-  bus.off("changeShowPanel");
+  bus.off('BottomHidden');
+  bus.off('publicDialog');
+  bus.off('publicDialog_Close');
+  bus.off('OpenRY');
+  bus.off('ChangeZhuanTiTu');
+  bus.off('checkRainL');
+  bus.off('changeShowPanel');
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -519,9 +474,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit("clearAllLayer");
+    bus.emit('clearAllLayer');
     // 打开默认的菜单
-    bus.emit("SetLayerShow", item.Layers);
+    bus.emit('SetLayerShow', item.Layers);
   }
 };
 // 二级菜单点击
@@ -540,10 +495,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit("showRy");
+  bus.emit('showRy');
 };
 // 关闭融云通讯录弹窗
-const dialogHide = (val) => {
+const dialogHide = val => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -551,25 +506,52 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log("point", point);
-  console.log("properties", properties);
-  console.log("feature---", feature);
-  if (properties) {
-    if (feature == "rq_pipeline_info") {
-      if (!!newfiberMapbox.getLayerByName("rqLine")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  console.log('point', point);
+  console.log('properties', properties);
+  console.log('feature---', feature);
+  if (!feature) {
+    let currentZoom = newfiberMapbox.map.getZoom();
+    console.log('currentZoom--', currentZoom);
+    if (currentZoom >= 17) {
+      let clickPoint = turf.point(point);
+      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
+      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
+      let data = await request({
+        url: `/bdApi//baiduservice/panorama`,
+        method: 'GET',
+        params: {
+          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
+          fov: 180,
+          height: 256,
+          width: 512,
+        },
+      });
+      if (data && data.data) {
+        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
       }
-      let rqLine = turf.featureCollection([
-        turf.feature(Terraformer.WKT.parse(properties.geometry)),
-      ]);
+      console.log('data----', data);
+      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
+      bus.emit('popupcontent', {
+        popupShow: true,
+        point: point,
+        popupInfo: data,
+      });
+    }
+  }
+  if (properties) {
+    if (feature == 'rq_pipeline_info') {
+      if (!!newfiberMapbox.getLayerByName('rqLine')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
+      }
+      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
       let layer = new mapboxL7.LineLayer({
-        name: "rqLine",
+        name: 'rqLine',
       })
         .source(rqLine)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("rgb(241, 159, 27)")
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(241, 159, 27)')
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -580,11 +562,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit("popupcontent", {
+    bus.emit('popupcontent', {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -599,20 +581,12 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array(
-    "星期日",
-    "星期一",
-    "星期二",
-    "星期三",
-    "星期四",
-    "星期五",
-    "星期六"
-  );
+  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -635,11 +609,11 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = (item) => {
+const handleMouseEnter = item => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = (item) => {
+const handleMouseLeave = item => {
   AllData.ErJiMenuShowID = null;
 };
 
@@ -770,7 +744,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -854,17 +828,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -911,7 +885,7 @@
       bottom: 0;
       width: 952px;
       height: 62px;
-      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -1045,7 +1019,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;
diff --git a/src/views/oneMap/map/PanoramaMap.vue b/src/views/oneMap/map/PanoramaMap.vue
new file mode 100644
index 0000000..14edbb0
--- /dev/null
+++ b/src/views/oneMap/map/PanoramaMap.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="mapPage">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script setup name="PanoramaMap">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
+const AllData = reactive({
+  panorama: null,
+});
+// 初始化街景地图
+const initePanoramaMap = () => {
+  AllData.panorama = BMapGL.Panorama('container');
+  AllData.panorama.setPosition(new BMapGL.Point(116.40385, 39.913795));
+  AllData.panorama.setPov({
+    // 修改全景的视角
+    pitch: 10,
+    heading: 140,
+  });
+  AllData.panorama.setOptions({
+    linksControl: true, // 隐藏道路指示控件，默认true
+    navigationControl: true, // 隐藏导航控件，默认true
+  });
+};
+onMounted(() => {
+  initePanoramaMap();
+});
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.mapPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 0;
+  background: lavender;
+}
+
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+</style>
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
index f14c679..3343523 100644
--- a/src/views/oneMap/smartBridge/LeftBox.vue
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -144,11 +144,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 160px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 155px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -159,7 +159,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -177,7 +177,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -198,7 +198,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;
diff --git a/src/views/oneMap/smartBridge/RightBox.vue b/src/views/oneMap/smartBridge/RightBox.vue
index d3a162c..fcdb83a 100644
--- a/src/views/oneMap/smartBridge/RightBox.vue
+++ b/src/views/oneMap/smartBridge/RightBox.vue
@@ -1,6 +1,6 @@
 <!-- 总体概览右侧面板 -->
 <template>
-  <div class="rightSD">
+  <div class="rightQL">
     <!-- 运行监测 -->
     <div class="topBox">
       <div class="ListBoxHeader">
@@ -16,11 +16,20 @@
           <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 class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'red'"></div>
+            </div>
+            <div class="pieBox">
+              <pieRing :echartData="pieData" :refresh="chartRefresh"></pieRing>
+              <div class="boxCircle">
+                <div class="biaoji1"></div>
+                <div class="biaoji2"></div>
+                <div class="biaoji3"></div>
+                <div class="biaoji4"></div>
+                <div class="outCircle">
+                  <div class="innerCircle"></div>
+                </div>
+                <div class="circleValue">{{ pieData.data }}<span>分</span></div>
               </div>
-              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
             </div>
           </div>
         </div>
@@ -34,18 +43,27 @@
             <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>
+            <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 class="YXJC_Box3_tableHeader">
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
+            </div>
+            <div class="YXJC_Box3_tableBody">
+              <div class="YXJC_Box3_tableList" v-for="item in YXJCTableData">
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
               </div>
             </div>
           </div>
@@ -89,8 +107,9 @@
   </div>
 </template>
 
-<script setup name="rightSD">
+<script setup name="rightQL">
 import twoLine from '../smartTunnel/components/twoLine.vue';
+import pieRing from './components/pieRing.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 
 import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
@@ -116,25 +135,36 @@
   company: '陕西海嵘工程试验检测股份有限公司',
 });
 const jgjcTitle = [
-  { name: '沉降监测', code: 'cj' },
-  { name: '滑坡监测', code: 'hp' },
-  { name: '收敛监测', code: 'sl' },
-  { name: '裂缝监测', code: 'lf' },
-  { name: '水位监测', code: 'sw' },
-  { name: '应变监测', code: 'yb' },
+  { name: '挠度', code: 'nd' },
+  { name: '振动', code: 'zd' },
+  { name: '位移', code: 'wy' },
+  { name: '索力', code: 'sl' },
+  { name: '裂缝', code: 'lf' },
+  { name: '应变', code: 'yb' },
 ];
 const jgjcData = ref({
-  cj: '1',
-  hp: '1',
-  sl: '0',
+  nd: '1',
+  zd: '1',
+  wy: '0',
+  sl: '1',
   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 YXJCTableData = [
+  {
+    fx: '北向南',
+    cp: '陕J-24YU8',
+    sj: '2024-09-30 12:26:00',
+    zz: '54.6',
+    cz: '16.2',
+  },
+  {
+    fx: '南北向',
+    cp: '陕J-24YU8',
+    sj: '2024-09-29 16:32:00',
+    zz: '48',
+    cz: '9.6',
+  },
 ];
 const tfjcData = ref({
   hz: '0',
@@ -157,6 +187,10 @@
   ],
 });
 
+const pieData = ref({
+  data: 80,
+});
+
 watch(
   () => lineData.value,
   (newVal, oldVal) => {
@@ -178,7 +212,7 @@
 </script>
 
 <style lang="scss" scoped>
-.rightSD {
+.rightQL {
   width: 100%;
   height: 100%;
   // box-sizing: border-box;
@@ -214,7 +248,7 @@
           display: inline-block;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 14px;
+          font-size: 16px;
           color: #ebfeff;
           height: 24px;
           line-height: 24px;
@@ -222,7 +256,7 @@
 
           &::after {
             content: '';
-            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;
@@ -232,7 +266,114 @@
         }
       }
       .jgBox {
+        position: relative;
         height: 140px;
+        .pieBox {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 140px;
+          height: 140px;
+          box-sizing: border-box;
+          // border: 1px solid rgba(255, 255, 255, 0.2);
+          .boxCircle {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            .circleValue {
+
+              width: 60px;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              font-weight: bold;
+              font-size: 28px;
+              color: #3efeca;
+              text-align: center;
+              span {
+                font-weight: 500;
+                font-size: 16px;
+                color: #cef6ff;
+              }
+            }
+
+            .biaoji1 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              left: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji2 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              right: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji4 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              bottom: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji3 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              top: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+
+            .outCircle {
+              position: relative;
+              // left: 0;
+              // top: 0;
+              width: 90px;
+              height: 90px;
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              /* border: 1px solid red; */
+              background: conic-gradient(from 0deg at 50% 50%, rgba(62, 255, 203, 0) 0%, #3effcb 100%);
+              animation: rotateGradient 5s linear infinite;
+              overflow: hidden;
+            }
+
+            .innerCircle {
+              position: absolute;
+              top: 10px;
+              left: 10px;
+              width: 70px;
+              height: 70px;
+              border-radius: 50%;
+              background-color: #235b7c;
+            }
+
+            @keyframes rotateGradient {
+              0% {
+                transform: rotate(0deg);
+              }
+              100% {
+                transform: rotate(360deg);
+              }
+            }
+          }
+        }
       }
       .jcBox_Content {
         margin-top: 5px;
@@ -245,55 +386,63 @@
           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;
+          &:nth-child(2n + 1) {
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
+            .jcInfo_title {
+              margin-left: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-left: 10px;
+            }
+            &::before {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              left: 0;
+              top: 0;
+              background: #00f2ff;
+            }
+          }
+          &:nth-child(2n) {
+            flex-direction: row-reverse;
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.05) 0%, rgba(21, 210, 253, 0.2) 100%);
+            .jcInfo_title {
+              margin-right: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-right: 10px;
+            }
+            &::after {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              right: 0;
+              top: 0;
+              background: #00f2ff;
+            }
           }
           .jcInfo_title {
             font-weight: bold;
             font-size: 16px;
             color: #ebfeff;
-            margin-left: 15px;
+            // 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_stateIcon {
+            width: 10px;
+            height: 10px;
+            background: #00ff9c;
+            border-radius: 50%;
+            // margin-right: 3px;
+            &.red {
+              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;
@@ -308,20 +457,57 @@
             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;
+        }
+        .YXJC_Box3_tableHeader {
+          width: 100%;
+          height: 35px;
+          line-height: 35px;
+          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
+          border-radius: 2px;
+        }
+
+        .YXJC_Box3_tableBody {
+          width: 100%;
+          // height: calc(100% - 40px);
+          overflow: auto;
+
+          .YXJC_Box3_tableList {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
+            border-radius: 2px;
+
+            .YXJC_Box3_tableSpan5 {
+              color: #ff3f3f;
             }
           }
         }
+
+        .YXJC_Box3_tableSpan {
+          display: inline-block;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ebfeff;
+          text-align: center;
+        }
+        .YXJC_Box3_tableSpan1 {
+          width: 60px;
+        }
+        .YXJC_Box3_tableSpan2 {
+          width: 100px;
+        }
+        .YXJC_Box3_tableSpan3 {
+          width: 158px;
+        }
+        .YXJC_Box3_tableSpan4 {
+          width: 50px;
+        }
+        .YXJC_Box3_tableSpan5 {
+          width: 50px;
+        }
       }
     }
     .txBox {
@@ -369,10 +555,10 @@
         .pgTitle {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
-          height: 14px;
-          line-height: 14px;
+          height: 16px;
+          line-height: 16px;
           // border: 1px solid red;
         }
       }
diff --git a/src/views/oneMap/smartBridge/components/pieRing.vue b/src/views/oneMap/smartBridge/components/pieRing.vue
new file mode 100644
index 0000000..2755843
--- /dev/null
+++ b/src/views/oneMap/smartBridge/components/pieRing.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieRing">
+import { guid } from '@/utils/ruoyi';
+
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+// console.log('-------------------', props.title);
+
+const id = guid();
+const myChart = shallowRef('');
+
+let angle = 0; //角度，用来做简单的动画效果的
+let pieValue = ref(80);
+let maxvalue = 100;
+let timerId = null;
+let option = ref({});
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
+//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+function getCirlPoint(x0, y0, r, angle) {
+  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+  return {
+    x: x1,
+    y: y1,
+  };
+}
+
+function draw() {
+  angle = angle + 10;
+  myChart.value.setOption(option.value, true);
+  //window.requestAnimationFrame(draw);
+}
+
+//初始化
+function intChart() {
+  pieValue.value = props.echartData?.data || 0;
+  let percent = ((pieValue.value / maxvalue) * 100).toFixed(0);
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  // if (!props.echartData.series.length) return;
+  option.value = {
+    // backgroundColor: '#000E1A',
+    title: {
+      text: '{a|' + percent + '} {c|分}',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 32,
+            color: 'rgba(62, 254, 202, 1)',
+            // fontFamily: 'Din',
+            // lineHeight: 40, // 调整行高以确保对齐
+            verticalAlign: 'bottom', // 底部对齐
+          },
+
+          c: {
+            fontSize: 14,
+            color: 'rgba(206, 246, 255, 1)',
+            // fontFamily: 'SanFrancisco ',
+            // lineHeight: 20, // 调整行高以确保对齐
+            // verticalAlign: 'bottom', // 底部对齐
+          },
+        },
+      },
+    },
+    polar: [
+      {
+        // radius: ['33.5%', '45%'],
+        radius: ['85%', '100%'],
+        // radius: '100%',
+        center: ['50%', '50%'],
+        // startAngle: 180, // 从180度开始
+        // endAngle: 0, // 到0度结束
+      },
+    ],
+
+    angleAxis: {
+      max: maxvalue,
+      show: false,
+      inverse: false,
+      clockwise: false, //角度轴的方向为逆时针方向。
+    },
+    radiusAxis: {
+      type: 'category',
+      show: true,
+      axisLabel: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+
+    series: [
+      // 大弧线
+      {
+        name: 'ring5',
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: function (params, api) {
+          return {
+            type: 'arc',
+            shape: {
+              cx: api.getWidth() / 2,
+              cy: api.getHeight() / 2,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2.1) * 0.9,
+              // r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.6,
+              // startAngle: (0+angle) * Math.PI / 180,
+              // endAngle: (90+angle) * Math.PI / 180
+              startAngle: (0 * Math.PI) / 180,
+              endAngle: (360 * Math.PI) / 180,
+            },
+            style: {
+              // stroke: 'rgb(53,53,53)',
+              stroke: 'rgb(10, 126, 156)',
+              fill: ' transparent',
+              lineWidth: 5,
+            },
+            silent: true,
+          };
+        },
+        data: [0],
+      },
+
+      // {
+      //   name: 'ring5',
+      //   type: 'custom',
+      //   coordinateSystem: 'none',
+      //   renderItem: function (params, api) {
+      //     // 定义线性渐变色
+      //     // let gradient = proxy.echarts.graphic.RadialGradient(
+      //     //   0.5,
+      //     //   0.5, // 圆心位置，相对于容器的百分比
+      //     //   0.5, // 半径，相对于容器的百分比
+      //     //   [
+      //     //     { offset: 0, color: 'rgba(62,255,203,0)' }, // 起始颜色
+      //     //     { offset: 1, color: '#3EFFCB' }, // 结束颜色
+      //     //   ]
+      //     // );
+      //     return {
+      //       type: 'arc',
+      //       shape: {
+      //         cx: api.getWidth() / 2,
+      //         cy: api.getHeight() / 2,
+      //         r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+      //         startAngle: ((0 + angle) * Math.PI) / 180,
+      //         endAngle: ((270 + angle) * Math.PI) / 180,
+      //       },
+      //       style: {
+      //         stroke: '#3EFFCB',
+      //         // stroke: gradient,
+      //         fill: 'transparent',
+      //         lineWidth: 5,
+      //       },
+      //       silent: true,
+      //     };
+      //   },
+      //   data: [0],
+      // },
+
+      //极坐标柱状图
+      {
+        name: '',
+        type: 'bar',
+        roundCap: true,
+        barWidth: 10,
+        showBackground: true,
+        stack: 'a',
+        backgroundStyle: {
+          color: 'rgba(66, 66, 66, 0)',
+          // borderWidth: 5,
+        },
+        data: [pieValue.value, 0],
+        coordinateSystem: 'polar',
+
+        itemStyle: {
+          normal: {
+            color: proxy.echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              {
+                offset: 0,
+                color: 'rgb(255,255,255,0.8)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,255,255,1)',
+              },
+            ]),
+            shadowBlur: 5,
+            shadowColor: 'rgba(62,255,203,0.8)',
+          },
+        },
+      },
+    ],
+  };
+
+  myChart.value.setOption(option.value);
+}
+
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+  // timerId = setInterval(function () {
+  //   //用setInterval做动画感觉有问题
+  //   draw();
+  // }, 100);
+});
+
+onBeforeUnmount(() => {
+  if (timerId) {
+    clearInterval(timerId);
+  }
+  myChart.value && myChart.value.dispose();
+  window.removeEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/smartTunnel/LeftBox.vue b/src/views/oneMap/smartTunnel/LeftBox.vue
index 20586bb..2278599 100644
--- a/src/views/oneMap/smartTunnel/LeftBox.vue
+++ b/src/views/oneMap/smartTunnel/LeftBox.vue
@@ -142,11 +142,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 145px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 140px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -157,7 +157,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -175,7 +175,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -196,7 +196,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;
diff --git a/src/views/oneMap/smartTunnel/RightBox.vue b/src/views/oneMap/smartTunnel/RightBox.vue
index 9f092a3..1f97e0c 100644
--- a/src/views/oneMap/smartTunnel/RightBox.vue
+++ b/src/views/oneMap/smartTunnel/RightBox.vue
@@ -214,7 +214,7 @@
           display: inline-block;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 14px;
+          font-size: 16px;
           color: #ebfeff;
           height: 24px;
           line-height: 24px;
@@ -285,13 +285,13 @@
             }
           }
           .jcInfo_btn {
-            width: 38px;
-            height: 21px;
-            margin-left: 18px;
+            width: 42px;
+            height: 24px;
+            margin-left: 12px;
             background: #0ea3c3;
             border-radius: 11px;
             font-weight: 500;
-            font-size: 14px;
+            font-size: 16px;
             color: #ebfeff;
             text-align: center;
           }
@@ -311,7 +311,7 @@
           }
           .tfInfo_title {
             font-weight: bold;
-            font-size: 14px;
+            font-size: 16px;
             color: #09bdf2;
           }
           .tfInfo_state {
@@ -370,10 +370,10 @@
         .pgTitle {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
-          height: 14px;
-          line-height: 14px;
+          height: 16px;
+          line-height: 16px;
           // border: 1px solid red;
         }
       }
diff --git a/src/views/oneMap/smartTunnel/components/twoLine.vue b/src/views/oneMap/smartTunnel/components/twoLine.vue
index 1ba54c5..d34aa79 100644
--- a/src/views/oneMap/smartTunnel/components/twoLine.vue
+++ b/src/views/oneMap/smartTunnel/components/twoLine.vue
@@ -120,7 +120,7 @@
       data: ['南向北', '北向南'],
       textStyle: {
         color: '#7e99aa',
-        fontSize: 12,
+        fontSize: 16,
       },
     },
     xAxis: {
@@ -142,7 +142,7 @@
         show: true,
         color: '#e2f5f7',
         // interval: 0,
-        fontSize: 12,
+        fontSize: 16,
         // formatter: function (value) {
         //   // return value.split(' ').join('\n');
         //   return value.slice(5);
@@ -162,7 +162,7 @@
       // nameRotate: 0, // 名称水平显示
       nameTextStyle: {
         color: '#7e99aa',
-        fontSize: 12,
+        fontSize: 16,
         padding: [0, 20, -2, 0],
       },
       axisLine: {
@@ -171,7 +171,7 @@
       axisLabel: {
         show: true,
         color: '#7e99aa',
-        fontSize: 12,
+        fontSize: 16,
       },
       splitLine: {
         //网格线

diff --git a/index.html b/index.html
index c24651b..1fea912 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
     author="wudi_sdk"></script>
   <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=2.0&key=0b78a9fa60dc5327ff4ad7cb031eb2b8&plugin=AMap.PlaceSearch"></script>
+  <!-- 百度全景 -->
+  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=V6pnSILC0g5Al0ue5KzqD9Hd7mqXoi6N"></script>
   <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.11"></script>
   <script src="/static/libs/mapbox/tiff.min.js"></script>
   <script src="/static/libs/mapbox/plotty.min.js"></script>
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 779366b..e26dce0 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,24 +82,27 @@
     <div class="ListBoxHeader">
       <div class="ListBoxHeader_font">实时监测</div>
     </div>
-    <Vue3SeamlessScroll
-      :list="FXJCData"
-      :singleHeight="60"
-      :singleWaitTime="1500"
-      :hover="true"
-      class="tableBody"
-    >
-      <div class="tableBodyList" v-for="item in FXJCData">
-        <span class="tableBodyList_span1">{{ item.num }}</span>
-        <span class="tableBodyList_span2">{{ item.sz }} </span>
-        <span class="tableBodyList_span3">{{ item.bm }}</span>
-        <span class="tableBodyList_span4">{{ item.zb }} </span>
-        <span class="tableBodyList_span5">
-          <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
-          <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
-        </span>
+    <div class="RealTop">
+      <div class="tableHeader">
+        <span class="tableHeaderList tableList1">位置</span>
+        <span class="tableHeaderList tableList2">监测对象</span>
+        <span class="tableHeaderList tableList3">监测指标</span>
+        <span class="tableHeaderList tableList4">监测时间</span>
+        <span class="tableHeaderList tableList5">状态</span>
       </div>
-    </Vue3SeamlessScroll>
+      <Vue3SeamlessScroll :list="FXJCData" :singleHeight="60" :singleWaitTime="1500" :hover="true" class="tableBody">
+        <div class="tableBodyList" v-for="item in FXJCData">
+          <span class="tableBodyList_span1" :title="item.name">{{ item.name }}</span>
+          <span class="tableBodyList_span2" :title="item.jcdx">{{ item.jcdx }} </span>
+          <span class="tableBodyList_span3" :title="item.jczb">{{ item.jczb }}</span>
+          <div class="tableBodyList_span4" :title="item.jcsj">{{ item.jcsj }}</div>
+          <span class="tableBodyList_span5">
+            <el-tag type="danger" v-if="item.zk == '异常'">异 常</el-tag>
+            <el-tag type="success" v-if="item.zk == '正常'">正 常</el-tag>
+          </span>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
@@ -127,17 +130,76 @@
 ]);
 const FXJCData = ref([
   {
-    num: "01",
-    zb: "管网病管",
-    sz: "排水",
-    bm: "BM234454",
-    zk: "异常",
+    name: '延安中学',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4.4%VOL',
+    jcsj: '2024/10/23 11:54',
+    zk: '正常',
   },
-  { num: "02", zb: "管网病管", sz: "排水", bm: "BM234454", zk: "正常" },
-  { num: "03", zb: "结构", sz: "隧道", bm: "BM234454", zk: "正常" },
-  { num: "04", zb: "老化", sz: "桥梁", bm: "BM234454", zk: "正常" },
-  { num: "05", zb: "老化", sz: "排水", bm: "BM234454", zk: "异常" },
-  { num: "06", zb: "老化", sz: "排水", bm: "BM234454", zk: "正常" },
+  {
+    name: '延安大学附属医院',
+    jcdx: '燃气管网',
+    jczb: '甲烷浓度4%VOL',
+    jcsj: '2024/10/23 12:14',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '倾角+1°',
+    jcsj: '2024/10/23 12:24',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁结构',
+    jczb: '位移12mm',
+    jcsj: '2024/10/23 13:13',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁外部荷载',
+    jczb: '均布荷载6.4kn/m',
+    jcsj: '2024/10/23 13:43',
+    zk: '正常',
+  },
+  {
+    name: '王家坪大桥',
+    jcdx: '桥梁气象环境',
+    jczb: '风速3.2m/s',
+    jcsj: '2024/10/23 14:03',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '裂缝宽度0.12mm',
+    jcsj: '2024/10/23 14:05',
+    zk: '正常',
+  },
+  {
+    name: '杨家岭隧道',
+    jcdx: '隧道结构',
+    jczb: '静应变+10με',
+    jcsj: '2024/10/23 14:25',
+    zk: '正常',
+  },
+
+  {
+    name: '王家坪旧址门口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:21',
+    zk: '正常',
+  },
+  {
+    name: '大砭沟与北大街交叉口',
+    jcdx: '积水液位',
+    jczb: '水深0m',
+    jcsj: '2024/10/23 15:25',
+    zk: '正常',
+  },
 ]);
 const yxjcname = ref("7天");
 function yearclick(val) {
@@ -424,82 +486,135 @@
       margin: 10px auto;
       width: 430px;
       height: calc(100% - 40px);
-      // background: red;
-      // background: url('@/assets/newImgs/yxjcE.png') no-repeat;
-      // background-size: 100% 100%;
     }
   }
 }
 .Realtime {
   width: 450px;
   height: 35%;
-  .tableBody {
-    width: 432px;
-    height: calc(100% - 50px);
-    overflow: hidden;
-    margin: 0 auto;
-    .tableBodyList {
-      height: 60px;
-      line-height: 60px;
+  .RealTop {
+    margin: 5px auto;
+    width: 430px;
+    height: calc(100% - 45px);
+
+    .tableHeader {
       width: 100%;
+      height: 34px;
+      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
+      border-radius: 2px;
+      border: 1px solid #74dde1;
       display: flex;
-      /* 选择偶数行 */
-      &:nth-child(even) {
-        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
-      }
-
-      .tableBodyList_span1 {
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 16px;
-        color: #00f2ff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
-        // background: #217e8cff;
-      }
-      .tableBodyList_span2 {
+      .tableHeaderList {
         font-family: Source Han Sans CN;
         font-weight: 400;
         font-size: 14px;
         color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 10%;
+        height: 34px;
+        line-height: 34px;
+        // padding-left: 5px;
+        // text-align: center;
       }
-      .tableBodyList_span3 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
+      .tableList1 {
+        width: 15%;
         text-align: center;
-        width: 25%;
       }
-
-      .tableBodyList_span4 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        width: 35%;
-      }
-
-      .tableBodyList_span5 {
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
+      .tableList2 {
         width: 20%;
+        text-align: center;
+      }
+      .tableList3 {
+        width: 20%;
+        text-align: center;
+      }
+      .tableList4 {
+        width: 25%;
+        text-align: center;
+      }
+      .tableList5 {
+        width: 20%;
+        text-align: center;
+      }
+    }
+    .tableBody {
+      width: 430px;
+      height: calc(100% - 35px);
+      overflow: hidden;
+      margin: 0 auto;
+      .tableBodyList {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        display: flex;
+        /* 选择偶数行 */
+        &:nth-child(even) {
+          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
+        }
+
+        .tableBodyList_span1 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 15%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+          // background: #217e8cff;
+        }
+        .tableBodyList_span2 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+        .tableBodyList_span3 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span4 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 25%;
+          overflow: hidden;
+          white-space: nowrap; /* 防止文字换行 */
+          text-overflow: ellipsis; /* 超出部分显示省略号 */
+        }
+
+        .tableBodyList_span5 {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          width: 20%;
+        }
       }
     }
   }
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 02952bd..911104f 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -11,147 +11,10 @@
       <LeftBox></LeftBox>
     </div>
     <!-- 右侧盒子 -->
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    >
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img
-                  src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png"
-                  class="JGGIF"
-                />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/ql.png"
-                class="YXJC_Box2Img"
-              />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img
-                src="@/assets/images/Sponge_screen/QiaoLiang/JX.png"
-                class="YXJC_Box_HeaderIcon"
-              />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{
-                    item.fx
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{
-                    item.cp
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{
-                    item.sj
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{
-                    item.zz
-                  }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{
-                    item.cz
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <RightBox></RightBox>
     </div>
-    <div
-      :class="[
-        'TopBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-      ]"
-    >
+    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
         <img class="TopInfoListIcon" :src="item.icon" alt="" />
         <div class="TopInfoListFont">{{ item.font }}</div>
@@ -164,89 +27,16 @@
 </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";
-import GZSB2 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png";
-import GZSB3 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png";
-import GZSB4 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png";
-import GZSB5 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png";
-import GZSB6 from "@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png";
-// 视频监控引入
-import SPJK1 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png";
-import SPJK2 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png";
-import SPJK3 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png";
-import SPJK4 from "@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png";
+import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
 // 顶部信息展示
 import QL_WD from "@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png";
 import QL_SD from "@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png";
 import QL_FS from "@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png";
 import QL_FL from "@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png";
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: "北向南",
-      cp: "陕J-24YU8",
-      sj: "2024-09-30 12:26:00",
-      zz: "54.6",
-      cz: "16.2",
-    },
-    {
-      fx: "南北向",
-      cp: "陕J-24YU8",
-      sj: "2024-09-29 16:32:00",
-      zz: "48",
-      cz: "9.6",
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -310,79 +100,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(
-          0deg,
-          rgba(35, 152, 196, 0.5) 0%,
-          rgba(0, 80, 133, 0.3) 100%
-        );
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -398,338 +115,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            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;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(21, 210, 253, 0) 100%
-            );
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(
-              90deg,
-              rgba(21, 210, 253, 0) 0%,
-              rgba(21, 210, 253, 0.2) 100%
-            );
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(
-            0deg,
-            rgba(21, 210, 253, 0.2) 0%,
-            rgba(0, 158, 164, 0.5) 100%
-          );
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(
-              0deg,
-              rgba(21, 210, 253, 0.2) 0%,
-              rgba(0, 158, 164, 0.05) 100%
-            );
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/FBox.png") no-repeat
-            center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url("@/assets/images/Sponge_screen/QiaoLiang/CBox.png") no-repeat
-            center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/components/mapboxPopup.vue b/src/views/oneMap/components/mapboxPopup.vue
index 95ec03f..b5b6e5f 100644
--- a/src/views/oneMap/components/mapboxPopup.vue
+++ b/src/views/oneMap/components/mapboxPopup.vue
@@ -47,11 +47,11 @@
           <div class="contentName">厂站类型：</div>
           <div class="contentValue">
             {{
-              allData.dataList.pumpType == "rain_water"
-                ? "雨水泵站"
-                : allData.dataList.pumpType == "sewage_water"
-                ? "污水泵站"
-                : "雨污合建"
+              allData.dataList.pumpType == 'rain_water'
+                ? '雨水泵站'
+                : allData.dataList.pumpType == 'sewage_water'
+                ? '污水泵站'
+                : '雨污合建'
             }}
           </div>
         </div>
@@ -60,22 +60,14 @@
           <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
           <div class="contentName">设计规模：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.designScaleSecond ||
-              allData.dataList.sweagepump.designScaleSecond ||
-              "--"
-            }}
+            {{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
             m³/s
           </div>
         </div>
         <div class="contentInfo">
           <div class="contentName">泵机台数：</div>
           <div class="contentValue">
-            {{
-              allData.dataList.rainpump.deviceCount ||
-              allData.dataList.sweagepump.deviceCount ||
-              "--"
-            }}台
+            {{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
           </div>
           <div class="contentName">建设单位：</div>
           <div class="contentValue" :title="allData.dataList.unitDep">
@@ -168,18 +160,8 @@
           style="width: 200px"
           @change="changeDate"
         />
-        <el-select
-          v-model="selectCode"
-          style="margin: -7px 0px 0px 10px; width: 150px"
-          size="small"
-          @change="changeRainType"
-        >
-          <el-option
-            v-for="item in dataOption"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
+          <el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <div id="chartPopupRainC"></div>
       </div>
@@ -289,37 +271,38 @@
         <div class="submitControl" @click="submitControl">派发</div>
       </div>
     </div>
+    <!-- 街景图 -->
+    <div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
+      <img :src="allData.dataList.data.base64" />
+    </div>
   </div>
 </template>
 
 <script setup name="CesiumPopup">
-import bus from "@/bus";
+import bus from '@/bus';
 //import chartOption from '@/components/Echarts/pieChart_1.js';
 //import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 
 const { proxy } = getCurrentInstance();
 const allData = reactive({
   dataList: {},
   popupShow: false,
-  dateTime: [
-    proxy.moment(new Date()).subtract(7, "days").format("YYYY-MM-DD"),
-    proxy.moment().format("YYYY-MM-DD"),
-  ],
+  dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
 });
 const dataOption = ref([]);
 const selectData = ref([]);
-const selectCode = ref("");
-const seleceName = ref("");
-const unitName = ref("");
+const selectCode = ref('');
+const seleceName = ref('');
+const unitName = ref('');
 const propertyMonitorXList = ref([]);
 const realRiverVal = ref(0);
 
 //
 function closePopupCES() {
   allData.popupShow = false;
-  if (!!newfiberMapbox.getLayerByName("rqLine")) {
-    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  if (!!newfiberMapbox.getLayerByName('rqLine')) {
+    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
   }
   // 取消之后回到中心点
   // newfiberMapbox.map.easeTo({
@@ -334,17 +317,17 @@
 function changeDateJSD() {
   setTimeout(() => {
     if (!!chartJSD) chartJSD.dispose();
-    chartJSD = echarts.init(document.getElementById("chartHistoryJSD"));
-    chartOption.popupRainTrend.legend.data = ["水深"];
-    chartOption.popupRainTrend.yAxis.name = "m";
+    chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
+    chartOption.popupRainTrend.legend.data = ['水深'];
+    chartOption.popupRainTrend.yAxis.name = 'm';
     chartOption.popupRainTrend.xAxis.data = [
-      "2024-07-12 12:30:20",
-      "2024-07-12 13:30:20",
-      "2024-07-12 14:30:20",
-      "2024-07-12 15:30:20",
+      '2024-07-12 12:30:20',
+      '2024-07-12 13:30:20',
+      '2024-07-12 14:30:20',
+      '2024-07-12 15:30:20',
     ];
     chartOption.popupRainTrend.xAxis.boundaryGap = true;
-    chartOption.popupRainTrend.series.name = "水深";
+    chartOption.popupRainTrend.series.name = '水深';
     chartOption.popupRainTrend.series.barWidth = 10;
     chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
     // 设置鼠标滚轮放大缩小展示数据区间
@@ -412,7 +395,7 @@
 let chartPopupRain = null;
 const initEchartsPopup = () => {
   if (!!chartPopupRain) chartPopupRain.dispose();
-  chartPopupRain = echarts.init(document.getElementById("chartPopupRainC"));
+  chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
   chartOption.popupRainTrend.legend.data = [seleceName.value];
   chartOption.popupRainTrend.yAxis.name = unitName.value;
   chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
@@ -421,7 +404,7 @@
   // 设置鼠标滚轮放大缩小展示数据区间
   chartOption.popupRainTrend.dataZoom = [
     {
-      type: "inside",
+      type: 'inside',
       startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
     },
   ];
@@ -434,9 +417,9 @@
   chartPopupRain.setOption(chartOption.popupRainTrend);
 };
 // 切换因子点击
-const changeRainType = (val) => {
+const changeRainType = val => {
   selectCode.value = val;
-  let obj = dataOption.value.filter((item) => item.value == val)[0];
+  let obj = dataOption.value.filter(item => item.value == val)[0];
   selectCode.value = obj.value;
   seleceName.value = obj.label;
   unitName.value = obj.propertyUnit;
@@ -480,28 +463,30 @@
 //巡查反馈派发
 const submitControl = () => {
   let data = {
-    comIDs: ["gdpf"],
+    comIDs: ['gdpf'],
   };
-  bus.emit("publicDialog", data);
+  bus.emit('publicDialog', data);
+};
+//街景弹框点击事件
+const showStreetLayer = () => {
+  console.log('少爷在这里加~~~~~~~~~');
 };
 onMounted(() => {
-  bus.on("closeCesiumPopup", () => {
+  bus.on('closeCesiumPopup', () => {
     allData.popupShow = false;
-    if (!!newfiberMapbox.getLayerByName("rqLine")) {
-      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+    if (!!newfiberMapbox.getLayerByName('rqLine')) {
+      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
     }
   });
-  bus.on("popupcontent", (params) => {
-    console.log("popup接收地图标注点值---111", params);
+  bus.on('popupcontent', params => {
+    console.log('popup接收地图标注点值---111', params);
     allData.dataList = params.popupInfo;
-    let pipePopupDiv = document.getElementById("cesiumPopupID");
+    let pipePopupDiv = document.getElementById('cesiumPopupID');
 
     let popupCenter, center, offsets;
     if (allData.dataList.geometry) {
-      if (allData.dataList.geometry.includes("LINESTRING")) {
-        popupCenter = turf.center(
-          turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))
-        ).geometry.coordinates;
+      if (allData.dataList.geometry.includes('LINESTRING')) {
+        popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
       } else {
         popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
       }
@@ -516,10 +501,10 @@
     window.window.pipePopup = new mapboxL7.Popup({
       html: pipePopupDiv,
       lngLat: {
-        lng: popupCenter[0],
-        lat: popupCenter[1],
+        lng: popupCenter ? popupCenter[0] : params.point[0],
+        lat: popupCenter ? popupCenter[1] : params.point[1],
       },
-      anchor: "center",
+      anchor: 'center',
       offsets: [-90, 130],
       autoClose: false,
     });
@@ -530,25 +515,25 @@
     });
     allData.popupShow = true;
     // 建筑社区弹框
-    if (params.popupInfo.type == "HMJZYSQ") {
+    if (params.popupInfo.type == 'HMJZYSQ') {
       allData.popupShow = false;
       let data = {
         title: params.popupInfo.name,
-        comIDs: ["xxinformation"],
+        comIDs: ['xxinformation'],
       };
-      bus.emit("publicDialog", data);
+      bus.emit('publicDialog', data);
       setTimeout(() => {
-        bus.emit("xxinformationList", params);
+        bus.emit('xxinformationList', params);
       }, 100);
     }
-    if (allData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
-    if (allData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
-    if (allData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
+    if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
+    if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
+    if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
   });
 });
 onBeforeUnmount(() => {
-  bus.off("popupcontent");
-  bus.off("closeCesiumPopup");
+  bus.off('popupcontent');
+  bus.off('closeCesiumPopup');
 });
 </script>
 <style lang="scss">
@@ -574,8 +559,7 @@
     margin-top: 10px;
   }
   .title {
-    background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
-      center;
+    background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
     background-size: cover;
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 4dbe10c..c1cf2bb 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -5,20 +5,14 @@
       <!-- 顶部 -->
       <div
         id="oneMapHeader"
-        :class="[
-          'oneMapHeader',
-          'animate__animated',
-          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
-        ]"
+        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
       >
         <!-- 标题 -->
         <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
         <div id="titleFont">延安市城市生命线安全运行监测系统</div>
         <!-- 标题左侧展示组件 -->
         <div class="Location">
-          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
-            ><LocationFilled
-          /></el-icon>
+          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
           延安
         </div>
         <div class="Timer">
@@ -39,9 +33,7 @@
       <!-- 地图组件 -->
       <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
       <!-- 桥梁BIM -->
-      <WangJiaPingBIM
-        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
-      ></WangJiaPingBIM>
+      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
       <!-- 隧道BIM -->
       <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
       <!-- 降雨效果 -->
@@ -68,42 +60,17 @@
       />
       <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng"></LayerControl>
       <!-- 1:总体概览 -->
-      <ComZTGL
-        v-if="AllData.ComShowID == 1"
-        :isActive="AllData.ComShowID == 1 ? true : false"
-        :showPanel="showPanel"
-      ></ComZTGL>
+      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
       <!-- 2:智慧燃气 -->
-      <ComZHRQ
-        v-if="AllData.ComShowID == 2"
-        :isActive="AllData.ComShowID == 2 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHRQ>
+      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
       <!-- 3:智慧排水 -->
-      <ComZHPS
-        v-if="AllData.ComShowID == 3"
-        :isActive="AllData.ComShowID == 3 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHPS>
+      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
       <!-- 4:智慧桥梁 -->
-      <ComZHQL
-        v-if="AllData.ComShowID == 4"
-        :isActive="AllData.ComShowID == 4 ? true : false"
-        :showPanel="showPanel"
-      >
-      </ComZHQL>
+      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
       <!-- 5:智慧隧道 -->
-      <ComZHSD
-        v-if="AllData.ComShowID == 5"
-        :isActive="AllData.ComShowID == 5 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHSD>
+      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
       <!-- 6:智慧海绵 -->
-      <ComZHHM
-        v-if="AllData.ComShowID == 6"
-        :isActive="AllData.ComShowID == 6 ? true : false"
-        :showPanel="showPanel"
-      ></ComZHHM>
+      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
       <!-- 智慧海绵-监测分析 -->
       <ZHHMJCFX
         v-if="AllData.ComShowID == 61"
@@ -117,11 +84,7 @@
         :showPanel="showPanel"
       ></ZHHMJSPG>
       <!-- 7:防洪排涝 -->
-      <ComFHPL
-        v-if="AllData.ComShowID == 7"
-        :isActive="AllData.ComShowID == 7 ? true : false"
-        :showPanel="showPanel"
-      ></ComFHPL>
+      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
     </div>
     <!-- 底部菜单 -->
     <div id="BottomMenuBox">
@@ -131,11 +94,7 @@
       <!-- 菜单List -->
       <div
         class="MenuList"
-        :class="[
-          'MenuList' + index,
-          'animate__animated',
-          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
-        ]"
+        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
         v-for="(item, index) in AllData.MenuListData"
         @click="MenuClick(item, index)"
         v-if="BottomshowPanel"
@@ -149,10 +108,7 @@
 
           <!-- 二级菜单 -->
           <!-- <Transition name="slide-fade2"> -->
-          <div
-            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
-            class="ErJiMenuBox"
-          >
+          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
             <span
               class="ErJiMenuList"
               :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
@@ -171,11 +127,7 @@
     <Voice></Voice>
   </div>
   <!-- 融云弹窗 -->
-  <ModelRongYun
-    :RYdialogShow="AllData.RYDialog"
-    :ZhuDongBoHao="AllData.ZhuDongBoHao"
-    @OneDialogHide="dialogHide"
-  ></ModelRongYun>
+  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
   <!-- 前端组件公共弹窗 -->
   <el-dialog
     modal-class="publicDialogVisible"
@@ -197,57 +149,60 @@
 </template>
 
 <script setup name="oneMapIndex">
-import bus from "@/bus";
-import { fullscreenToggel } from "@/utils/util";
-import { ref, reactive, toRefs, onMounted } from "vue";
+import bus from '@/bus';
+import request from '@/utils/request';
+import { fullscreenToggel } from '@/utils/util';
+import { ref, reactive, toRefs, onMounted } from 'vue';
 
-import useUserStore from "@/store/modules/user";
+import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
 // 菜单的图片资源
-import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
-import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
-import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
-import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
-import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
-import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
-import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
-import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
-import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
-import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
-import FXPL from "@/assets/images/Sponge_screen/menu/FXPL.png";
-import AC_FXPL from "@/assets/images/Sponge_screen/menu/AC_FXPL.png";
-import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
-import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
+import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
+import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
+import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
+import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
+import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
+import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
+import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
+import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
+import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
+import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
+import FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
+import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
+import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
+import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
 // 引用地图
-import OneMap from "./map/newfiberMapBox.vue";
+import OneMap from './map/newfiberMapBox.vue';
+// 引用街景地图
+import PanoramaMap from '@/views/oneMap/map/PanoramaMap.vue';
 // 引用王家坪大桥BIm
-import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
+import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
 // 引用隧道BIm
-import Tunnel from "./BIM/Tunnel.vue";
+import Tunnel from './BIM/Tunnel.vue';
 // 引用语音识别
-import Voice from "./../voice/recordPage/index.vue";
+import Voice from './../voice/recordPage/index.vue';
 // 引入融云通讯录
-import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
+import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
 // 子系统引入
-import ComZTGL from "./components/ZTGL.vue"; //总体概览
-import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
-import ComZHPS from "./components/ZHPS.vue"; //智慧排水
-import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
-import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
-import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
-import ComFHPL from "./components/FHPL.vue"; //防洪排涝
-import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
-import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
-import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
+import ComZTGL from './components/ZTGL.vue'; //总体概览
+import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
+import ComZHPS from './components/ZHPS.vue'; //智慧排水
+import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
+import ComZHSD from './components/ZHSD.vue'; //智慧隧道
+import ComZHHM from './components/ZHHM.vue'; //智慧海绵
+import ComFHPL from './components/FHPL.vue'; //防洪排涝
+import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
+import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
+import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
 // 降雨效果
-import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
+import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
 // 图层控制面板
-import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
+import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
 // 前端共同弹窗
-import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
+import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
 // 左右滑动
-import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
-import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
+import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
+import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
 // 时间以及天气
 const timer = ref(null);
 const dates = ref(null);
@@ -255,8 +210,8 @@
 const times = ref(null);
 const weather = ref({
   temperature: null,
-  imgNum: "",
-  text: "",
+  imgNum: '',
+  text: '',
 });
 const showPanel = ref(false);
 const showPanel2 = ref(false);
@@ -344,61 +299,61 @@
 // 公共弹窗
 const dialogConfig = reactive({
   visible: false,
-  getSiteId: "",
-  SiteNo: "",
+  getSiteId: '',
+  SiteNo: '',
   data: {},
-  comIDs: ["spjk"],
+  comIDs: ['spjk'],
   customData: [],
-  RefName: "",
-  title: "详情",
+  RefName: '',
+  title: '详情',
 });
 onBeforeMount(() => {
-  console.log("ZhuanTiType", userStore.ZhuanTiType);
+  console.log('ZhuanTiType', userStore.ZhuanTiType);
   if (userStore.ZhuanTiType == 1) {
     // 城市生命线
     AllData.MenuListData = [
       {
-        name: "总体概览",
+        name: '总体概览',
         iocn: ZTGL,
         AC_icon: AC_ZTGL,
         id: 1,
-        Layers: ["路网", "河流水系"],
+        Layers: ['路网', '河流水系'],
       },
       {
-        name: "燃气安全",
+        name: '燃气安全',
         iocn: ZHRQ,
         AC_icon: AC_ZHRQ,
         id: 2,
-        Layers: ["干管", "主管", "干管流向", "主管流向"],
+        Layers: ['干管', '主管', '干管流向', '主管流向'],
       },
       {
-        name: "排水安全",
+        name: '排水安全',
         iocn: ZHPS,
         AC_icon: AC_ZHPS,
         id: 3,
-        Layers: ["雨水管网", "污水管网"],
+        Layers: ['雨水管网', '污水管网'],
         children: [
           {
-            name: "排水安全",
+            name: '排水安全',
             id: 3,
             Layers: [],
           },
           {
-            name: "防汛排涝",
+            name: '防汛排涝',
             id: 7,
             Layers: [],
           },
         ],
       },
       {
-        name: "桥梁安全",
+        name: '桥梁安全',
         iocn: ZHQL,
         AC_icon: AC_ZHQL,
         id: 4,
         Layers: [],
       },
       {
-        name: "隧道安全",
+        name: '隧道安全',
         iocn: ZHSD,
         AC_icon: AC_ZHSD,
         id: 5,
@@ -409,19 +364,19 @@
     // 海绵
     AllData.MenuListData = [
       {
-        name: "城市概览",
+        name: '城市概览',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 6,
       },
       {
-        name: "监测分析",
+        name: '监测分析',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 61,
       },
       {
-        name: "建设评估",
+        name: '建设评估',
         iocn: ZHHM,
         AC_icon: AC_ZHHM,
         id: 62,
@@ -435,10 +390,10 @@
 onMounted(() => {
   fullscreenToggel();
   AllData.BottmBackGroundShow = true;
-  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
-  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
+  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
+  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
   // 降雨特征点击
-  bus.on("checkRainL", (params) => {
+  bus.on('checkRainL', params => {
     if (params == 1) {
       showRainFlow.value = false;
     } else {
@@ -446,7 +401,7 @@
     }
   });
   // 底部隐藏
-  bus.on("checkBottom", (params) => {
+  bus.on('checkBottom', params => {
     if (params == 1) {
       BottomshowPanel.value = false;
     } else {
@@ -454,15 +409,15 @@
     }
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog", (params) => {
+  bus.on('publicDialog', params => {
     dialogConfig.getSiteId = params.getSiteId;
-    dialogConfig.title = params.title ?? "详情";
+    dialogConfig.title = params.title ?? '详情';
     dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
     // 打开弹窗
     dialogConfig.visible = true;
   });
   // 共同弹窗触发事件
-  bus.on("publicDialog_Close", (params) => {
+  bus.on('publicDialog_Close', params => {
     // 打开弹窗
     dialogConfig.visible = false;
   });
@@ -472,14 +427,14 @@
   currentTime();
   //initRainImage();
   // 打开融云通讯录主动拨号
-  bus.on("OpenRY", (params) => {
+  bus.on('OpenRY', params => {
     AllData.ZhuDongBoHao = true;
     AllData.RYDialog = true;
-    bus.emit("showRy");
+    bus.emit('showRy');
   });
 
   // 切换专题图
-  bus.on("ChangeZhuanTiTu", (params) => {
+  bus.on('ChangeZhuanTiTu', params => {
     if (params.num == 1) {
       // 一级
       MenuClick(params.MenuData1);
@@ -489,18 +444,18 @@
     }
   });
   // 切换面板显示隐藏
-  bus.on("changeShowPanel", (params) => {
+  bus.on('changeShowPanel', params => {
     showPanel.value = params;
   });
 });
 onBeforeUnmount(() => {
-  bus.off("BottomHidden");
-  bus.off("publicDialog");
-  bus.off("publicDialog_Close");
-  bus.off("OpenRY");
-  bus.off("ChangeZhuanTiTu");
-  bus.off("checkRainL");
-  bus.off("changeShowPanel");
+  bus.off('BottomHidden');
+  bus.off('publicDialog');
+  bus.off('publicDialog_Close');
+  bus.off('OpenRY');
+  bus.off('ChangeZhuanTiTu');
+  bus.off('checkRainL');
+  bus.off('changeShowPanel');
 });
 // 菜单点击
 const MenuClick = (item, index) => {
@@ -519,9 +474,9 @@
   } else {
     AllData.MapShowBol = true;
     // 点击菜单时隐藏所有图层
-    bus.emit("clearAllLayer");
+    bus.emit('clearAllLayer');
     // 打开默认的菜单
-    bus.emit("SetLayerShow", item.Layers);
+    bus.emit('SetLayerShow', item.Layers);
   }
 };
 // 二级菜单点击
@@ -540,10 +495,10 @@
 const toRYBox = () => {
   AllData.RYDialog = true;
   AllData.ZhuDongBoHao = false;
-  bus.emit("showRy");
+  bus.emit('showRy');
 };
 // 关闭融云通讯录弹窗
-const dialogHide = (val) => {
+const dialogHide = val => {
   if (!val) {
     AllData.RYDialog = false;
     AllData.ZhuDongBoHao = false;
@@ -551,25 +506,52 @@
 };
 //地图点击事件
 const mapClick = async (point, properties, feature) => {
-  console.log("point", point);
-  console.log("properties", properties);
-  console.log("feature---", feature);
-  if (properties) {
-    if (feature == "rq_pipeline_info") {
-      if (!!newfiberMapbox.getLayerByName("rqLine")) {
-        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
+  console.log('point', point);
+  console.log('properties', properties);
+  console.log('feature---', feature);
+  if (!feature) {
+    let currentZoom = newfiberMapbox.map.getZoom();
+    console.log('currentZoom--', currentZoom);
+    if (currentZoom >= 17) {
+      let clickPoint = turf.point(point);
+      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
+      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
+      let data = await request({
+        url: `/bdApi//baiduservice/panorama`,
+        method: 'GET',
+        params: {
+          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
+          fov: 180,
+          height: 256,
+          width: 512,
+        },
+      });
+      if (data && data.data) {
+        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
       }
-      let rqLine = turf.featureCollection([
-        turf.feature(Terraformer.WKT.parse(properties.geometry)),
-      ]);
+      console.log('data----', data);
+      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
+      bus.emit('popupcontent', {
+        popupShow: true,
+        point: point,
+        popupInfo: data,
+      });
+    }
+  }
+  if (properties) {
+    if (feature == 'rq_pipeline_info') {
+      if (!!newfiberMapbox.getLayerByName('rqLine')) {
+        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
+      }
+      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
       let layer = new mapboxL7.LineLayer({
-        name: "rqLine",
+        name: 'rqLine',
       })
         .source(rqLine)
         .size(4)
-        .shape("line")
-        .texture("arrow")
-        .color("rgb(241, 159, 27)")
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(241, 159, 27)')
         .animate({
           interval: 2, // 间隔
           duration: 2, // 持续时间，延时
@@ -580,11 +562,11 @@
           lineTexture: true, // 开启线的贴图功能
           iconStep: 50, // 设置贴图纹理的间距
           borderWidth: 0, // 默认文 0，最大有效值为 0.5
-          borderColor: "#fff", // 默认为 #ccc
+          borderColor: '#fff', // 默认为 #ccc
         });
       newfiberMapbox.addLayer(layer);
     }
-    bus.emit("popupcontent", {
+    bus.emit('popupcontent', {
       popupShow: true,
       point: point,
       popupInfo: properties,
@@ -599,20 +581,12 @@
   let month = date.getMonth() + 1; // 月
   let day = date.getDate(); // 日
   let hour = date.getHours(); // 时
-  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
+  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
   let minute = date.getMinutes(); // 分
-  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
+  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
   let second = date.getSeconds(); // 秒
-  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
-  let weekAry = new Array(
-    "星期日",
-    "星期一",
-    "星期二",
-    "星期三",
-    "星期四",
-    "星期五",
-    "星期六"
-  );
+  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
+  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
   weeks.value = weekAry[date.getDay()];
   dates.value = `${year}-${month}-${day}`;
   times.value = `${hour}:${minute}:${second}`;
@@ -635,11 +609,11 @@
   // }
 };
 // 二级菜单展示
-const handleMouseEnter = (item) => {
+const handleMouseEnter = item => {
   AllData.ErJiMenuShowID = item.id;
 };
 // 二级菜单展示
-const handleMouseLeave = (item) => {
+const handleMouseLeave = item => {
   AllData.ErJiMenuShowID = null;
 };
 
@@ -770,7 +744,7 @@
     #oneMapHeader {
       width: 100%;
       height: 100px;
-      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
       background-size: cover;
       z-index: 100;
       position: absolute;
@@ -854,17 +828,17 @@
         cursor: pointer;
       }
       .goHome {
-        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
         background-size: contain;
         right: 150px;
       }
       .goUser_com {
-        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
         background-size: contain;
         right: 100px;
       }
       .goClose_com {
-        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
+        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
         background-size: contain;
         right: 50px;
       }
@@ -911,7 +885,7 @@
       bottom: 0;
       width: 952px;
       height: 62px;
-      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
       background-size: cover;
     }
     // 图标菜单样式 从左到右按照顺序进行设定
@@ -1045,7 +1019,7 @@
     height: 800px;
     border: 1px solid #15d2fd;
     .el-dialog__header {
-      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
+      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
       background-size: cover;
       padding: 0;
       height: 60px;
diff --git a/src/views/oneMap/map/PanoramaMap.vue b/src/views/oneMap/map/PanoramaMap.vue
new file mode 100644
index 0000000..14edbb0
--- /dev/null
+++ b/src/views/oneMap/map/PanoramaMap.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="mapPage">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script setup name="PanoramaMap">
+import { ref, reactive, toRefs, onMounted } from 'vue';
+
+const AllData = reactive({
+  panorama: null,
+});
+// 初始化街景地图
+const initePanoramaMap = () => {
+  AllData.panorama = BMapGL.Panorama('container');
+  AllData.panorama.setPosition(new BMapGL.Point(116.40385, 39.913795));
+  AllData.panorama.setPov({
+    // 修改全景的视角
+    pitch: 10,
+    heading: 140,
+  });
+  AllData.panorama.setOptions({
+    linksControl: true, // 隐藏道路指示控件，默认true
+    navigationControl: true, // 隐藏导航控件，默认true
+  });
+};
+onMounted(() => {
+  initePanoramaMap();
+});
+onBeforeUnmount(() => {});
+</script>
+
+<style lang="scss" scoped>
+.mapPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 0;
+  background: lavender;
+}
+
+#container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+</style>
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
index f14c679..3343523 100644
--- a/src/views/oneMap/smartBridge/LeftBox.vue
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -144,11 +144,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 160px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 155px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -159,7 +159,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -177,7 +177,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -198,7 +198,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;
diff --git a/src/views/oneMap/smartBridge/RightBox.vue b/src/views/oneMap/smartBridge/RightBox.vue
index d3a162c..fcdb83a 100644
--- a/src/views/oneMap/smartBridge/RightBox.vue
+++ b/src/views/oneMap/smartBridge/RightBox.vue
@@ -1,6 +1,6 @@
 <!-- 总体概览右侧面板 -->
 <template>
-  <div class="rightSD">
+  <div class="rightQL">
     <!-- 运行监测 -->
     <div class="topBox">
       <div class="ListBoxHeader">
@@ -16,11 +16,20 @@
           <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 class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'red'"></div>
+            </div>
+            <div class="pieBox">
+              <pieRing :echartData="pieData" :refresh="chartRefresh"></pieRing>
+              <div class="boxCircle">
+                <div class="biaoji1"></div>
+                <div class="biaoji2"></div>
+                <div class="biaoji3"></div>
+                <div class="biaoji4"></div>
+                <div class="outCircle">
+                  <div class="innerCircle"></div>
+                </div>
+                <div class="circleValue">{{ pieData.data }}<span>分</span></div>
               </div>
-              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
             </div>
           </div>
         </div>
@@ -34,18 +43,27 @@
             <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>
+            <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 class="YXJC_Box3_tableHeader">
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
+            </div>
+            <div class="YXJC_Box3_tableBody">
+              <div class="YXJC_Box3_tableList" v-for="item in YXJCTableData">
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
               </div>
             </div>
           </div>
@@ -89,8 +107,9 @@
   </div>
 </template>
 
-<script setup name="rightSD">
+<script setup name="rightQL">
 import twoLine from '../smartTunnel/components/twoLine.vue';
+import pieRing from './components/pieRing.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 
 import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
@@ -116,25 +135,36 @@
   company: '陕西海嵘工程试验检测股份有限公司',
 });
 const jgjcTitle = [
-  { name: '沉降监测', code: 'cj' },
-  { name: '滑坡监测', code: 'hp' },
-  { name: '收敛监测', code: 'sl' },
-  { name: '裂缝监测', code: 'lf' },
-  { name: '水位监测', code: 'sw' },
-  { name: '应变监测', code: 'yb' },
+  { name: '挠度', code: 'nd' },
+  { name: '振动', code: 'zd' },
+  { name: '位移', code: 'wy' },
+  { name: '索力', code: 'sl' },
+  { name: '裂缝', code: 'lf' },
+  { name: '应变', code: 'yb' },
 ];
 const jgjcData = ref({
-  cj: '1',
-  hp: '1',
-  sl: '0',
+  nd: '1',
+  zd: '1',
+  wy: '0',
+  sl: '1',
   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 YXJCTableData = [
+  {
+    fx: '北向南',
+    cp: '陕J-24YU8',
+    sj: '2024-09-30 12:26:00',
+    zz: '54.6',
+    cz: '16.2',
+  },
+  {
+    fx: '南北向',
+    cp: '陕J-24YU8',
+    sj: '2024-09-29 16:32:00',
+    zz: '48',
+    cz: '9.6',
+  },
 ];
 const tfjcData = ref({
   hz: '0',
@@ -157,6 +187,10 @@
   ],
 });
 
+const pieData = ref({
+  data: 80,
+});
+
 watch(
   () => lineData.value,
   (newVal, oldVal) => {
@@ -178,7 +212,7 @@
 </script>
 
 <style lang="scss" scoped>
-.rightSD {
+.rightQL {
   width: 100%;
   height: 100%;
   // box-sizing: border-box;
@@ -214,7 +248,7 @@
           display: inline-block;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 14px;
+          font-size: 16px;
           color: #ebfeff;
           height: 24px;
           line-height: 24px;
@@ -222,7 +256,7 @@
 
           &::after {
             content: '';
-            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;
@@ -232,7 +266,114 @@
         }
       }
       .jgBox {
+        position: relative;
         height: 140px;
+        .pieBox {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 140px;
+          height: 140px;
+          box-sizing: border-box;
+          // border: 1px solid rgba(255, 255, 255, 0.2);
+          .boxCircle {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            .circleValue {
+
+              width: 60px;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              font-weight: bold;
+              font-size: 28px;
+              color: #3efeca;
+              text-align: center;
+              span {
+                font-weight: 500;
+                font-size: 16px;
+                color: #cef6ff;
+              }
+            }
+
+            .biaoji1 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              left: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji2 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              right: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji4 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              bottom: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji3 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              top: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+
+            .outCircle {
+              position: relative;
+              // left: 0;
+              // top: 0;
+              width: 90px;
+              height: 90px;
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              /* border: 1px solid red; */
+              background: conic-gradient(from 0deg at 50% 50%, rgba(62, 255, 203, 0) 0%, #3effcb 100%);
+              animation: rotateGradient 5s linear infinite;
+              overflow: hidden;
+            }
+
+            .innerCircle {
+              position: absolute;
+              top: 10px;
+              left: 10px;
+              width: 70px;
+              height: 70px;
+              border-radius: 50%;
+              background-color: #235b7c;
+            }
+
+            @keyframes rotateGradient {
+              0% {
+                transform: rotate(0deg);
+              }
+              100% {
+                transform: rotate(360deg);
+              }
+            }
+          }
+        }
       }
       .jcBox_Content {
         margin-top: 5px;
@@ -245,55 +386,63 @@
           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;
+          &:nth-child(2n + 1) {
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
+            .jcInfo_title {
+              margin-left: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-left: 10px;
+            }
+            &::before {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              left: 0;
+              top: 0;
+              background: #00f2ff;
+            }
+          }
+          &:nth-child(2n) {
+            flex-direction: row-reverse;
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.05) 0%, rgba(21, 210, 253, 0.2) 100%);
+            .jcInfo_title {
+              margin-right: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-right: 10px;
+            }
+            &::after {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              right: 0;
+              top: 0;
+              background: #00f2ff;
+            }
           }
           .jcInfo_title {
             font-weight: bold;
             font-size: 16px;
             color: #ebfeff;
-            margin-left: 15px;
+            // 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_stateIcon {
+            width: 10px;
+            height: 10px;
+            background: #00ff9c;
+            border-radius: 50%;
+            // margin-right: 3px;
+            &.red {
+              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;
@@ -308,20 +457,57 @@
             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;
+        }
+        .YXJC_Box3_tableHeader {
+          width: 100%;
+          height: 35px;
+          line-height: 35px;
+          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
+          border-radius: 2px;
+        }
+
+        .YXJC_Box3_tableBody {
+          width: 100%;
+          // height: calc(100% - 40px);
+          overflow: auto;
+
+          .YXJC_Box3_tableList {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
+            border-radius: 2px;
+
+            .YXJC_Box3_tableSpan5 {
+              color: #ff3f3f;
             }
           }
         }
+
+        .YXJC_Box3_tableSpan {
+          display: inline-block;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ebfeff;
+          text-align: center;
+        }
+        .YXJC_Box3_tableSpan1 {
+          width: 60px;
+        }
+        .YXJC_Box3_tableSpan2 {
+          width: 100px;
+        }
+        .YXJC_Box3_tableSpan3 {
+          width: 158px;
+        }
+        .YXJC_Box3_tableSpan4 {
+          width: 50px;
+        }
+        .YXJC_Box3_tableSpan5 {
+          width: 50px;
+        }
       }
     }
     .txBox {
@@ -369,10 +555,10 @@
         .pgTitle {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
-          height: 14px;
-          line-height: 14px;
+          height: 16px;
+          line-height: 16px;
           // border: 1px solid red;
         }
       }
diff --git a/src/views/oneMap/smartBridge/components/pieRing.vue b/src/views/oneMap/smartBridge/components/pieRing.vue
new file mode 100644
index 0000000..2755843
--- /dev/null
+++ b/src/views/oneMap/smartBridge/components/pieRing.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieRing">
+import { guid } from '@/utils/ruoyi';
+
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+// console.log('-------------------', props.title);
+
+const id = guid();
+const myChart = shallowRef('');
+
+let angle = 0; //角度，用来做简单的动画效果的
+let pieValue = ref(80);
+let maxvalue = 100;
+let timerId = null;
+let option = ref({});
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
+//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+function getCirlPoint(x0, y0, r, angle) {
+  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+  return {
+    x: x1,
+    y: y1,
+  };
+}
+
+function draw() {
+  angle = angle + 10;
+  myChart.value.setOption(option.value, true);
+  //window.requestAnimationFrame(draw);
+}
+
+//初始化
+function intChart() {
+  pieValue.value = props.echartData?.data || 0;
+  let percent = ((pieValue.value / maxvalue) * 100).toFixed(0);
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  // if (!props.echartData.series.length) return;
+  option.value = {
+    // backgroundColor: '#000E1A',
+    title: {
+      text: '{a|' + percent + '} {c|分}',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 32,
+            color: 'rgba(62, 254, 202, 1)',
+            // fontFamily: 'Din',
+            // lineHeight: 40, // 调整行高以确保对齐
+            verticalAlign: 'bottom', // 底部对齐
+          },
+
+          c: {
+            fontSize: 14,
+            color: 'rgba(206, 246, 255, 1)',
+            // fontFamily: 'SanFrancisco ',
+            // lineHeight: 20, // 调整行高以确保对齐
+            // verticalAlign: 'bottom', // 底部对齐
+          },
+        },
+      },
+    },
+    polar: [
+      {
+        // radius: ['33.5%', '45%'],
+        radius: ['85%', '100%'],
+        // radius: '100%',
+        center: ['50%', '50%'],
+        // startAngle: 180, // 从180度开始
+        // endAngle: 0, // 到0度结束
+      },
+    ],
+
+    angleAxis: {
+      max: maxvalue,
+      show: false,
+      inverse: false,
+      clockwise: false, //角度轴的方向为逆时针方向。
+    },
+    radiusAxis: {
+      type: 'category',
+      show: true,
+      axisLabel: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+
+    series: [
+      // 大弧线
+      {
+        name: 'ring5',
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: function (params, api) {
+          return {
+            type: 'arc',
+            shape: {
+              cx: api.getWidth() / 2,
+              cy: api.getHeight() / 2,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2.1) * 0.9,
+              // r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.6,
+              // startAngle: (0+angle) * Math.PI / 180,
+              // endAngle: (90+angle) * Math.PI / 180
+              startAngle: (0 * Math.PI) / 180,
+              endAngle: (360 * Math.PI) / 180,
+            },
+            style: {
+              // stroke: 'rgb(53,53,53)',
+              stroke: 'rgb(10, 126, 156)',
+              fill: ' transparent',
+              lineWidth: 5,
+            },
+            silent: true,
+          };
+        },
+        data: [0],
+      },
+
+      // {
+      //   name: 'ring5',
+      //   type: 'custom',
+      //   coordinateSystem: 'none',
+      //   renderItem: function (params, api) {
+      //     // 定义线性渐变色
+      //     // let gradient = proxy.echarts.graphic.RadialGradient(
+      //     //   0.5,
+      //     //   0.5, // 圆心位置，相对于容器的百分比
+      //     //   0.5, // 半径，相对于容器的百分比
+      //     //   [
+      //     //     { offset: 0, color: 'rgba(62,255,203,0)' }, // 起始颜色
+      //     //     { offset: 1, color: '#3EFFCB' }, // 结束颜色
+      //     //   ]
+      //     // );
+      //     return {
+      //       type: 'arc',
+      //       shape: {
+      //         cx: api.getWidth() / 2,
+      //         cy: api.getHeight() / 2,
+      //         r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+      //         startAngle: ((0 + angle) * Math.PI) / 180,
+      //         endAngle: ((270 + angle) * Math.PI) / 180,
+      //       },
+      //       style: {
+      //         stroke: '#3EFFCB',
+      //         // stroke: gradient,
+      //         fill: 'transparent',
+      //         lineWidth: 5,
+      //       },
+      //       silent: true,
+      //     };
+      //   },
+      //   data: [0],
+      // },
+
+      //极坐标柱状图
+      {
+        name: '',
+        type: 'bar',
+        roundCap: true,
+        barWidth: 10,
+        showBackground: true,
+        stack: 'a',
+        backgroundStyle: {
+          color: 'rgba(66, 66, 66, 0)',
+          // borderWidth: 5,
+        },
+        data: [pieValue.value, 0],
+        coordinateSystem: 'polar',
+
+        itemStyle: {
+          normal: {
+            color: proxy.echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              {
+                offset: 0,
+                color: 'rgb(255,255,255,0.8)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,255,255,1)',
+              },
+            ]),
+            shadowBlur: 5,
+            shadowColor: 'rgba(62,255,203,0.8)',
+          },
+        },
+      },
+    ],
+  };
+
+  myChart.value.setOption(option.value);
+}
+
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+  // timerId = setInterval(function () {
+  //   //用setInterval做动画感觉有问题
+  //   draw();
+  // }, 100);
+});
+
+onBeforeUnmount(() => {
+  if (timerId) {
+    clearInterval(timerId);
+  }
+  myChart.value && myChart.value.dispose();
+  window.removeEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/oneMap/smartTunnel/LeftBox.vue b/src/views/oneMap/smartTunnel/LeftBox.vue
index 20586bb..2278599 100644
--- a/src/views/oneMap/smartTunnel/LeftBox.vue
+++ b/src/views/oneMap/smartTunnel/LeftBox.vue
@@ -142,11 +142,11 @@
     .topImg {
       display: block;
       width: 100%;
-      height: calc(100% - 135px);
+      height: calc(100% - 145px);
     }
     .topWZ {
       width: 100%;
-      height: 130px;
+      height: 140px;
       white-space: pre-wrap;
       word-break: break-word;
       text-indent: 2em;
@@ -157,7 +157,7 @@
       background-size: 100% 100%;
       font-family: Source Han Sans CN;
       font-weight: bold;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 22px;
       color: #61cafc;
     }
@@ -175,7 +175,7 @@
       position: relative;
       width: 136px;
       height: 76px;
-      padding: 6px 5px 6px 8px;
+      padding: 4px 0px 6px 6px;
       // 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;
@@ -196,7 +196,7 @@
         .shebeiBox_left_font {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
           // height: 26px;
           // line-height: 26px;
diff --git a/src/views/oneMap/smartTunnel/RightBox.vue b/src/views/oneMap/smartTunnel/RightBox.vue
index 9f092a3..1f97e0c 100644
--- a/src/views/oneMap/smartTunnel/RightBox.vue
+++ b/src/views/oneMap/smartTunnel/RightBox.vue
@@ -214,7 +214,7 @@
           display: inline-block;
           font-family: Source Han Sans CN;
           font-weight: bold;
-          font-size: 14px;
+          font-size: 16px;
           color: #ebfeff;
           height: 24px;
           line-height: 24px;
@@ -285,13 +285,13 @@
             }
           }
           .jcInfo_btn {
-            width: 38px;
-            height: 21px;
-            margin-left: 18px;
+            width: 42px;
+            height: 24px;
+            margin-left: 12px;
             background: #0ea3c3;
             border-radius: 11px;
             font-weight: 500;
-            font-size: 14px;
+            font-size: 16px;
             color: #ebfeff;
             text-align: center;
           }
@@ -311,7 +311,7 @@
           }
           .tfInfo_title {
             font-weight: bold;
-            font-size: 14px;
+            font-size: 16px;
             color: #09bdf2;
           }
           .tfInfo_state {
@@ -370,10 +370,10 @@
         .pgTitle {
           font-family: Source Han Sans CN;
           font-weight: 500;
-          font-size: 14px;
+          font-size: 16px;
           color: #ffffff;
-          height: 14px;
-          line-height: 14px;
+          height: 16px;
+          line-height: 16px;
           // border: 1px solid red;
         }
       }
diff --git a/src/views/oneMap/smartTunnel/components/twoLine.vue b/src/views/oneMap/smartTunnel/components/twoLine.vue
index 1ba54c5..d34aa79 100644
--- a/src/views/oneMap/smartTunnel/components/twoLine.vue
+++ b/src/views/oneMap/smartTunnel/components/twoLine.vue
@@ -120,7 +120,7 @@
       data: ['南向北', '北向南'],
       textStyle: {
         color: '#7e99aa',
-        fontSize: 12,
+        fontSize: 16,
       },
     },
     xAxis: {
@@ -142,7 +142,7 @@
         show: true,
         color: '#e2f5f7',
         // interval: 0,
-        fontSize: 12,
+        fontSize: 16,
         // formatter: function (value) {
         //   // return value.split(' ').join('\n');
         //   return value.slice(5);
@@ -162,7 +162,7 @@
       // nameRotate: 0, // 名称水平显示
       nameTextStyle: {
         color: '#7e99aa',
-        fontSize: 12,
+        fontSize: 16,
         padding: [0, 20, -2, 0],
       },
       axisLine: {
@@ -171,7 +171,7 @@
       axisLabel: {
         show: true,
         color: '#7e99aa',
-        fontSize: 12,
+        fontSize: 16,
       },
       splitLine: {
         //网格线
diff --git a/vite.config.js b/vite.config.js
index afb2c95..56ed385 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -80,6 +80,13 @@
           logLevel: 'debug',
           rewrite: p => p.replace(/^\/hsApi/, ''),
         },
+        //百度全景
+        '/bdApi': {
+          target: 'http://192.168.16.34:8105/', //测试服务
+          changeOrigin: true,
+          logLevel: 'debug',
+          rewrite: p => p.replace(/^\/bdApi/, ''),
+        },
       },
     },
     css: {