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/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 1a47767..e62e2a7 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,18 +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>
 
@@ -121,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) {
@@ -414,82 +482,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/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 1a47767..e62e2a7 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,18 +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>
 
@@ -121,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) {
@@ -414,82 +482,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/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/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 1a47767..e62e2a7 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,18 +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>
 
@@ -121,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) {
@@ -414,82 +482,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/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/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 1a47767..e62e2a7 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,18 +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>
 
@@ -121,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) {
@@ -414,82 +482,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/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/OverallOverview/LeftBox.vue b/src/views/oneMap/OverallOverview/LeftBox.vue
index 1a47767..e62e2a7 100644
--- a/src/views/oneMap/OverallOverview/LeftBox.vue
+++ b/src/views/oneMap/OverallOverview/LeftBox.vue
@@ -82,18 +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>
 
@@ -121,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) {
@@ -414,82 +482,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/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/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: {