diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗

diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 4ad63a3..9bcf91b 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -6,107 +6,7 @@
     </div>
     <!-- 右侧盒子 -->
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png" class="JGGIF" />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/ql.png" class="YXJC_Box2Img" />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+      <RightBox></RightBox>
     </div>
     <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
@@ -122,88 +22,15 @@
 
 <script setup name="ZHQL">
 import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
-// 感知设备引入
-import GZSB1 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB1.png';
-import GZSB2 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png';
-import GZSB3 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png';
-import GZSB4 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png';
-import GZSB5 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png';
-import GZSB6 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png';
-// 视频监控引入
-import SPJK1 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png';
-import SPJK2 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png';
-import SPJK3 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png';
-import SPJK4 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png';
+
 // 顶部信息展示
 import QL_WD from '@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png';
 import QL_SD from '@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png';
 import QL_FS from '@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png';
 import QL_FL from '@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png';
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: '北向南',
-      cp: '陕J-24YU8',
-      sj: '2024-09-30 12:26:00',
-      zz: '54.6',
-      cz: '16.2',
-    },
-    {
-      fx: '南北向',
-      cp: '陕J-24YU8',
-      sj: '2024-09-29 16:32:00',
-      zz: '48',
-      cz: '9.6',
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -263,75 +90,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(0deg, rgba(35, 152, 196, 0.5) 0%, rgba(0, 80, 133, 0.3) 100%);
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -343,316 +101,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 14px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            position: relative;
-
-            &::after {
-              content: '';
-              width: 60px;
-              height: 10px;
-              background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
-              position: absolute;
-              bottom: 0;
-              left: 0;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0) 100%);
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(90deg, rgba(21, 210, 253, 0) 0%, rgba(21, 210, 253, 0.2) 100%);
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url('@/assets/images/Sponge_screen/QiaoLiang/FBox.png') no-repeat center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url('@/assets/images/Sponge_screen/QiaoLiang/CBox.png') no-repeat center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);

diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 4ad63a3..9bcf91b 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -6,107 +6,7 @@
     </div>
     <!-- 右侧盒子 -->
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png" class="JGGIF" />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/ql.png" class="YXJC_Box2Img" />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+      <RightBox></RightBox>
     </div>
     <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
@@ -122,88 +22,15 @@
 
 <script setup name="ZHQL">
 import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
-// 感知设备引入
-import GZSB1 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB1.png';
-import GZSB2 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png';
-import GZSB3 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png';
-import GZSB4 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png';
-import GZSB5 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png';
-import GZSB6 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png';
-// 视频监控引入
-import SPJK1 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png';
-import SPJK2 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png';
-import SPJK3 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png';
-import SPJK4 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png';
+
 // 顶部信息展示
 import QL_WD from '@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png';
 import QL_SD from '@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png';
 import QL_FS from '@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png';
 import QL_FL from '@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png';
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: '北向南',
-      cp: '陕J-24YU8',
-      sj: '2024-09-30 12:26:00',
-      zz: '54.6',
-      cz: '16.2',
-    },
-    {
-      fx: '南北向',
-      cp: '陕J-24YU8',
-      sj: '2024-09-29 16:32:00',
-      zz: '48',
-      cz: '9.6',
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -263,75 +90,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(0deg, rgba(35, 152, 196, 0.5) 0%, rgba(0, 80, 133, 0.3) 100%);
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -343,316 +101,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 14px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            position: relative;
-
-            &::after {
-              content: '';
-              width: 60px;
-              height: 10px;
-              background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
-              position: absolute;
-              bottom: 0;
-              left: 0;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0) 100%);
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(90deg, rgba(21, 210, 253, 0) 0%, rgba(21, 210, 253, 0.2) 100%);
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url('@/assets/images/Sponge_screen/QiaoLiang/FBox.png') no-repeat center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url('@/assets/images/Sponge_screen/QiaoLiang/CBox.png') no-repeat center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>

diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 4ad63a3..9bcf91b 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -6,107 +6,7 @@
     </div>
     <!-- 右侧盒子 -->
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png" class="JGGIF" />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/ql.png" class="YXJC_Box2Img" />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+      <RightBox></RightBox>
     </div>
     <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
@@ -122,88 +22,15 @@
 
 <script setup name="ZHQL">
 import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
-// 感知设备引入
-import GZSB1 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB1.png';
-import GZSB2 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png';
-import GZSB3 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png';
-import GZSB4 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png';
-import GZSB5 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png';
-import GZSB6 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png';
-// 视频监控引入
-import SPJK1 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png';
-import SPJK2 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png';
-import SPJK3 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png';
-import SPJK4 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png';
+
 // 顶部信息展示
 import QL_WD from '@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png';
 import QL_SD from '@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png';
 import QL_FS from '@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png';
 import QL_FL from '@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png';
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: '北向南',
-      cp: '陕J-24YU8',
-      sj: '2024-09-30 12:26:00',
-      zz: '54.6',
-      cz: '16.2',
-    },
-    {
-      fx: '南北向',
-      cp: '陕J-24YU8',
-      sj: '2024-09-29 16:32:00',
-      zz: '48',
-      cz: '9.6',
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -263,75 +90,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(0deg, rgba(35, 152, 196, 0.5) 0%, rgba(0, 80, 133, 0.3) 100%);
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -343,316 +101,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 14px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            position: relative;
-
-            &::after {
-              content: '';
-              width: 60px;
-              height: 10px;
-              background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
-              position: absolute;
-              bottom: 0;
-              left: 0;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0) 100%);
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(90deg, rgba(21, 210, 253, 0) 0%, rgba(21, 210, 253, 0.2) 100%);
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url('@/assets/images/Sponge_screen/QiaoLiang/FBox.png') no-repeat center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url('@/assets/images/Sponge_screen/QiaoLiang/CBox.png') no-repeat center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/smartBridge/RightBox.vue b/src/views/oneMap/smartBridge/RightBox.vue
index d3a162c..3a7283e 100644
--- a/src/views/oneMap/smartBridge/RightBox.vue
+++ b/src/views/oneMap/smartBridge/RightBox.vue
@@ -1,6 +1,6 @@
 <!-- 总体概览右侧面板 -->
 <template>
-  <div class="rightSD">
+  <div class="rightQL">
     <!-- 运行监测 -->
     <div class="topBox">
       <div class="ListBoxHeader">
@@ -16,11 +16,20 @@
           <div class="jcBox_Content jgBox">
             <div class="jcInfo" v-for="(item, index) in jgjcTitle" :key="item.code">
               <div class="jcInfo_title">{{ item.name }}</div>
-              <div class="jcInfo_state" :class="jgjcData[item.code] == '1' ? '' : 'active'">
-                <div class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'active'"></div>
-                {{ jgjcData[item.code] == '1' ? '正常' : '异常' }}
+              <div class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'red'"></div>
+            </div>
+            <div class="pieBox">
+              <pieRing :echartData="pieData" :refresh="chartRefresh"></pieRing>
+              <div class="boxCircle">
+                <div class="biaoji1"></div>
+                <div class="biaoji2"></div>
+                <div class="biaoji3"></div>
+                <div class="biaoji4"></div>
+                <div class="outCircle">
+                  <div class="innerCircle"></div>
+                </div>
+                <div class="circleValue">{{ pieData.data }}<span>分</span></div>
               </div>
-              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
             </div>
           </div>
         </div>
@@ -34,19 +43,35 @@
             <twoLine :echartData="lineData" :refresh="chartRefresh" />
           </div>
         </div>
-        <!-- 突发事件监测 -->
+        <!-- 负荷监测 -->
         <div class="jcBox">
           <div class="jcBox_Header">
             <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
-            <span class="jcBox_HeaderFont">结构监测</span>
+            <span class="jcBox_HeaderFont">负荷监测</span>
           </div>
           <div class="jcBox_Content">
-            <div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
+            <!-- <div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
               <img :src="item.icon" alt="" class="tfInfo_icon" />
               <div class="tfInfo_title">{{ item.name }}</div>
               <div class="tfInfo_state" :class="tfjcData[item.code] == '0' ? '' : 'active'">
                 {{ tfjcData[item.code] == '1' ? '有' : '无' }}
               </div>
+            </div> -->
+            <div class="YXJC_Box3_tableHeader">
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
+            </div>
+            <div class="YXJC_Box3_tableBody">
+              <div class="YXJC_Box3_tableList" v-for="item in YXJCTableData">
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -89,8 +114,9 @@
   </div>
 </template>
 
-<script setup name="rightSD">
+<script setup name="rightQL">
 import twoLine from '../smartTunnel/components/twoLine.vue';
+import pieRing from './components/pieRing.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 
 import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
@@ -116,25 +142,36 @@
   company: '陕西海嵘工程试验检测股份有限公司',
 });
 const jgjcTitle = [
-  { name: '沉降监测', code: 'cj' },
-  { name: '滑坡监测', code: 'hp' },
-  { name: '收敛监测', code: 'sl' },
-  { name: '裂缝监测', code: 'lf' },
-  { name: '水位监测', code: 'sw' },
-  { name: '应变监测', code: 'yb' },
+  { name: '挠度', code: 'nd' },
+  { name: '振动', code: 'zd' },
+  { name: '位移', code: 'wy' },
+  { name: '索力', code: 'sl' },
+  { name: '裂缝', code: 'lf' },
+  { name: '应变', code: 'yb' },
 ];
 const jgjcData = ref({
-  cj: '1',
-  hp: '1',
-  sl: '0',
+  nd: '1',
+  zd: '1',
+  wy: '0',
+  sl: '1',
   lf: '1',
-  sw: '1',
   yb: '1',
 });
-const tfjcTitle = [
-  { name: '火灾', code: 'hz', icon: hz_icon },
-  { name: '交通事故', code: 'jt', icon: jtsg_icon },
-  { name: '有毒气体', code: 'dq', icon: ydqt_icon },
+const YXJCTableData = [
+  {
+    fx: '北向南',
+    cp: '陕J-24YU8',
+    sj: '2024-09-30 12:26:00',
+    zz: '54.6',
+    cz: '16.2',
+  },
+  {
+    fx: '南北向',
+    cp: '陕J-24YU8',
+    sj: '2024-09-29 16:32:00',
+    zz: '48',
+    cz: '9.6',
+  },
 ];
 const tfjcData = ref({
   hz: '0',
@@ -157,6 +194,10 @@
   ],
 });
 
+const pieData = ref({
+  data: 80,
+});
+
 watch(
   () => lineData.value,
   (newVal, oldVal) => {
@@ -178,7 +219,7 @@
 </script>
 
 <style lang="scss" scoped>
-.rightSD {
+.rightQL {
   width: 100%;
   height: 100%;
   // box-sizing: border-box;
@@ -232,7 +273,114 @@
         }
       }
       .jgBox {
+        position: relative;
         height: 140px;
+        .pieBox {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 140px;
+          height: 140px;
+          box-sizing: border-box;
+          // border: 1px solid rgba(255, 255, 255, 0.2);
+          .boxCircle {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            .circleValue {
+
+              width: 60px;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              font-weight: bold;
+              font-size: 28px;
+              color: #3efeca;
+              text-align: center;
+              span {
+                font-weight: 500;
+                font-size: 14px;
+                color: #cef6ff;
+              }
+            }
+
+            .biaoji1 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              left: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji2 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              right: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji4 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              bottom: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji3 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              top: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+
+            .outCircle {
+              position: relative;
+              // left: 0;
+              // top: 0;
+              width: 90px;
+              height: 90px;
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              /* border: 1px solid red; */
+              background: conic-gradient(from 0deg at 50% 50%, rgba(62, 255, 203, 0) 0%, #3effcb 100%);
+              animation: rotateGradient 5s linear infinite;
+              overflow: hidden;
+            }
+
+            .innerCircle {
+              position: absolute;
+              top: 10px;
+              left: 10px;
+              width: 70px;
+              height: 70px;
+              border-radius: 50%;
+              background-color: #235b7c;
+            }
+
+            @keyframes rotateGradient {
+              0% {
+                transform: rotate(0deg);
+              }
+              100% {
+                transform: rotate(360deg);
+              }
+            }
+          }
+        }
       }
       .jcBox_Content {
         margin-top: 5px;
@@ -245,44 +393,63 @@
           position: relative;
           width: 200px;
           height: 40px;
-          background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
           display: flex;
           align-items: center;
-          // justify-content: space-between;
-          &::before {
-            content: '';
-            width: 4px;
-            height: 40px;
-            position: absolute;
-            left: 0;
-            top: 0;
-            background: #00f2ff;
+          &:nth-child(2n + 1) {
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
+            .jcInfo_title {
+              margin-left: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-left: 10px;
+            }
+            &::before {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              left: 0;
+              top: 0;
+              background: #00f2ff;
+            }
+          }
+          &:nth-child(2n) {
+            flex-direction: row-reverse;
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.05) 0%, rgba(21, 210, 253, 0.2) 100%);
+            .jcInfo_title {
+              margin-right: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-right: 10px;
+            }
+            &::after {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              right: 0;
+              top: 0;
+              background: #00f2ff;
+            }
           }
           .jcInfo_title {
             font-weight: bold;
             font-size: 16px;
             color: #ebfeff;
-            margin-left: 15px;
+            // margin-left: 15px;
           }
-          .jcInfo_state {
-            display: flex;
-            align-items: center;
-            color: #00ff9c;
-            margin-left: 16px;
-            &.active {
-              color: #fe667b;
-            }
-            .jcInfo_stateIcon {
-              width: 10px;
-              height: 10px;
-              background: #00ff9c;
-              border-radius: 50%;
-              margin-right: 3px;
-              &.active {
-                background: #fe667b;
-              }
+
+          .jcInfo_stateIcon {
+            width: 10px;
+            height: 10px;
+            background: #00ff9c;
+            border-radius: 50%;
+            // margin-right: 3px;
+            &.red {
+              background: #fe667b;
             }
           }
+
           .jcInfo_btn {
             width: 38px;
             height: 21px;
@@ -322,6 +489,55 @@
             }
           }
         }
+        .YXJC_Box3_tableHeader {
+          width: 100%;
+          height: 35px;
+          line-height: 35px;
+          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
+          border-radius: 2px;
+        }
+
+        .YXJC_Box3_tableBody {
+          width: 100%;
+          // height: calc(100% - 40px);
+          overflow: auto;
+
+          .YXJC_Box3_tableList {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
+            border-radius: 2px;
+
+            .YXJC_Box3_tableSpan5 {
+              color: #ff3f3f;
+            }
+          }
+        }
+
+        .YXJC_Box3_tableSpan {
+          display: inline-block;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ebfeff;
+          text-align: center;
+        }
+        .YXJC_Box3_tableSpan1 {
+          width: 60px;
+        }
+        .YXJC_Box3_tableSpan2 {
+          width: 100px;
+        }
+        .YXJC_Box3_tableSpan3 {
+          width: 158px;
+        }
+        .YXJC_Box3_tableSpan4 {
+          width: 50px;
+        }
+        .YXJC_Box3_tableSpan5 {
+          width: 50px;
+        }
       }
     }
     .txBox {

diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index b6860fb..1bf25ae 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -285,7 +285,7 @@
       });
     },
     function (xhr) {
-      console.log(Math.floor((xhr.loaded / xhr.total) * 100));
+      // console.log(Math.floor((xhr.loaded / xhr.total) * 100));
     }
   );
 };
@@ -453,7 +453,7 @@
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
-  console.log(Camera.value);
+  // console.log(Camera.value);
 };
 
 // 创建气泡窗
diff --git a/src/views/oneMap/components/ZHQL.vue b/src/views/oneMap/components/ZHQL.vue
index 4ad63a3..9bcf91b 100644
--- a/src/views/oneMap/components/ZHQL.vue
+++ b/src/views/oneMap/components/ZHQL.vue
@@ -6,107 +6,7 @@
     </div>
     <!-- 右侧盒子 -->
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
-      <div class="ComBox RightBox1_1">
-        <div class="Box_header">运行监测</div>
-        <div class="Box_Body">
-          <div class="YXJC_Box YXJC_Box1">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">结构监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="JGBoxLeft">
-                <div class="JGBoxList">
-                  <div class="Font">挠度</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">位移</div>
-                  <div class="ColorBox" style="background: #358fff"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">裂缝</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <div class="JGBoxRight">
-                <div class="JGBoxList">
-                  <div class="Font">振动</div>
-                  <div class="ColorBox" style="background: #ffc37c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">索力</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-                <div class="JGBoxList">
-                  <div class="Font">应变</div>
-                  <div class="ColorBox" style="background: #00ff9c"></div>
-                </div>
-              </div>
-              <!-- gif  -->
-              <div class="JGGIFBox">
-                <img src="@/assets/images/Sponge_screen/QiaoLiang/quanquan.png" class="JGGIF" />
-                <span class="JGNum">90</span>
-                <span class="JGUnit">分</span>
-              </div>
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box2">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">通行监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/ql.png" class="YXJC_Box2Img" />
-            </div>
-          </div>
-          <div class="YXJC_Box YXJC_Box3">
-            <div class="YXJC_Box_Header">
-              <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="YXJC_Box_HeaderIcon" />
-              <span class="YXJC_Box_HeaderFont">负荷监测</span>
-            </div>
-            <div class="YXJC_Box_body">
-              <div class="YXJC_Box3_tableHeader">
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
-                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
-              </div>
-              <div class="YXJC_Box3_tableBody">
-                <div class="YXJC_Box3_tableList" v-for="item in AllData.YXJCTableData">
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
-                  <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ComBox RightBox1_2">
-        <div class="Box_header">检测评估</div>
-        <div class="Box_Body JCPG">
-          <div class="FBox">
-            <span class="Font1">&nbsp;2023年 11月20日</span>
-            <span class="Font2">最近一次检测</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">良好</span>
-            <span class="Font2">整体工作性能</span>
-          </div>
-          <div class="FBox">
-            <span class="Font1">二类</span>
-            <span class="Font2">技术状况等级</span>
-          </div>
-          <div class="CBox">
-            <span class="Font1">检测单位</span>
-            <span class="Font2">陕西海嵘工程试验检测股份有限公司</span>
-          </div>
-        </div>
-      </div>
+      <RightBox></RightBox>
     </div>
     <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopInfoList" v-for="item in AllData.TopInfoData">
@@ -122,88 +22,15 @@
 
 <script setup name="ZHQL">
 import LeftBox from '@/views/oneMap/smartBridge/LeftBox.vue';
+import RightBox from '@/views/oneMap/smartBridge/RightBox.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
-// 感知设备引入
-import GZSB1 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB1.png';
-import GZSB2 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB2.png';
-import GZSB3 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB3.png';
-import GZSB4 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB4.png';
-import GZSB5 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB5.png';
-import GZSB6 from '@/assets/images/Sponge_screen/QiaoLiang/GZSB6.png';
-// 视频监控引入
-import SPJK1 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK1.png';
-import SPJK2 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK2.png';
-import SPJK3 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK3.png';
-import SPJK4 from '@/assets/images/Sponge_screen/QiaoLiang/SPJK4.png';
+
 // 顶部信息展示
 import QL_WD from '@/assets/images/Sponge_screen/QiaoLiang/QL_WD.png';
 import QL_SD from '@/assets/images/Sponge_screen/QiaoLiang/QL_SD.png';
 import QL_FS from '@/assets/images/Sponge_screen/QiaoLiang/QL_FS.png';
 import QL_FL from '@/assets/images/Sponge_screen/QiaoLiang/QL_FL.png';
 const AllData = reactive({
-  // 感知设备
-  GZSBData: [
-    {
-      icon: GZSB1,
-      id: 1,
-    },
-    {
-      icon: GZSB2,
-      id: 2,
-    },
-    {
-      icon: GZSB3,
-      id: 3,
-    },
-    {
-      icon: GZSB4,
-      id: 4,
-    },
-    {
-      icon: GZSB5,
-      id: 5,
-    },
-    {
-      icon: GZSB6,
-      id: 6,
-    },
-  ],
-  // 视频监控
-  SPJKData: [
-    {
-      icon: SPJK1,
-      id: 1,
-    },
-    {
-      icon: SPJK2,
-      id: 2,
-    },
-    {
-      icon: SPJK3,
-      id: 3,
-    },
-    {
-      icon: SPJK4,
-      id: 4,
-    },
-  ],
-  // 负荷检测
-  YXJCTableData: [
-    {
-      fx: '北向南',
-      cp: '陕J-24YU8',
-      sj: '2024-09-30 12:26:00',
-      zz: '54.6',
-      cz: '16.2',
-    },
-    {
-      fx: '南北向',
-      cp: '陕J-24YU8',
-      sj: '2024-09-29 16:32:00',
-      zz: '48',
-      cz: '9.6',
-    },
-  ],
   // 顶部信息展示
   TopInfoData: [
     {
@@ -263,75 +90,6 @@
     box-sizing: border-box;
     // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .LeftBox1_1 {
-      width: 100%;
-      height: calc(100% - 235px - 280px);
-
-      .JJImg {
-        width: 100%;
-        height: 214px;
-        display: inline-block;
-        margin: 0;
-        box-sizing: border-box;
-      }
-      .JJFont {
-        width: 100%;
-        height: calc(100% - 225px);
-        font-family: Source Han Sans CN;
-        font-weight: bold;
-        font-size: 14px;
-        color: #61cafc;
-        line-height: 26px;
-        text-indent: 2ch;
-        box-sizing: border-box;
-        padding: 20px;
-        background: linear-gradient(0deg, rgba(35, 152, 196, 0.5) 0%, rgba(0, 80, 133, 0.3) 100%);
-        // animation: moveUp 2s infinite;
-        overflow: auto;
-      }
-    }
-    .LeftBox1_2 {
-      width: 100%;
-      height: 235px;
-
-      .GZSB {
-        .GZSBList {
-          width: 136px;
-          height: 76px;
-          float: left;
-          margin: 8px 3px;
-          cursor: pointer;
-
-          .GZSBListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-    .LeftBox1_3 {
-      width: 100%;
-      height: 280px;
-
-      .SPJK {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: space-around;
-        justify-content: space-around;
-        align-items: center;
-        .SPJKList {
-          width: 203px;
-          height: 104px;
-
-          .SPJKListImg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
   }
   .RightBox {
     width: 450px;
@@ -343,316 +101,8 @@
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
-    padding: 10px;
+    // padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
-
-    .RightBox1_1 {
-      width: 100%;
-      height: calc(100% - 255px);
-      .YXJC_Box {
-        width: 100%;
-
-        box-sizing: border-box;
-        padding-top: 10px;
-
-        .YXJC_Box_Header {
-          height: 24px;
-          width: 100%;
-
-          .YXJC_Box_HeaderIcon {
-            width: 24px;
-            height: 24px;
-            vertical-align: middle;
-          }
-          .YXJC_Box_HeaderFont {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 14px;
-            color: #ebfeff;
-            height: 24px;
-            line-height: 20px;
-            position: relative;
-
-            &::after {
-              content: '';
-              width: 60px;
-              height: 10px;
-              background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
-              position: absolute;
-              bottom: 0;
-              left: 0;
-            }
-          }
-        }
-
-        .YXJC_Box_body {
-          width: 100%;
-          height: calc(100% - 24px);
-          box-sizing: border-box;
-          padding-top: 10px;
-          position: relative;
-        }
-      }
-      .YXJC_Box1 {
-        height: 200px;
-
-        .JGBoxLeft {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          left: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-left: 4px solid #00f2ff;
-            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0) 100%);
-            margin-bottom: 10px;
-            text-align: left;
-            position: relative;
-
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              left: 20px;
-              text-align: left;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              left: 80px;
-            }
-          }
-        }
-
-        .JGBoxRight {
-          width: 150px;
-          height: 154px;
-          position: absolute;
-          top: 10px;
-          right: 10px;
-
-          .JGBoxList {
-            height: 40px;
-            width: 150px;
-            border-right: 4px solid #00f2ff;
-            background: linear-gradient(90deg, rgba(21, 210, 253, 0) 0%, rgba(21, 210, 253, 0.2) 100%);
-            margin-bottom: 10px;
-            position: relative;
-            .Font {
-              font-family: Source Han Sans CN;
-              font-weight: bold;
-              font-size: 16px;
-              color: #ebfeff;
-              height: 40px;
-              line-height: 40px;
-              width: 50px;
-              position: absolute;
-              right: 20px;
-              text-align: right;
-            }
-
-            .ColorBox {
-              width: 10px;
-              height: 10px;
-              border-radius: 10px;
-              position: absolute;
-              top: 15px;
-              right: 80px;
-            }
-          }
-        }
-
-        .JGGIFBox {
-          position: absolute;
-          top: 0;
-          left: 138px;
-        }
-        .JGGIF {
-          width: 154px;
-          height: 154px;
-        }
-        .JGNum {
-          position: absolute;
-          left: 50%;
-          margin-left: -30px;
-          top: 50%;
-          margin-top: -25px;
-          width: 50px;
-          height: 50px;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 38px;
-          color: #3efeca;
-          line-height: 51px;
-        }
-        .JGUnit {
-          position: absolute;
-          left: 50%;
-          margin-left: 20px;
-          top: 50%;
-          margin-top: -20px;
-          width: 30px;
-          height: 30px;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 14px;
-          color: #cef6ff;
-          line-height: 51px;
-        }
-      }
-      .YXJC_Box2 {
-        height: 245px;
-
-        .YXJC_Box2Img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .YXJC_Box3 {
-        height: calc(100% - 445px);
-
-        .YXJC_Box3_tableHeader {
-          width: 100%;
-          height: 40px;
-          line-height: 40px;
-          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
-          border-radius: 2px;
-        }
-
-        .YXJC_Box3_tableBody {
-          width: 100%;
-          height: calc(100% - 40px);
-          overflow: auto;
-
-          .YXJC_Box3_tableList {
-            width: 100%;
-            height: 60px;
-            line-height: 60px;
-            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
-            border-radius: 2px;
-
-            .YXJC_Box3_tableSpan5 {
-              color: #ff3f3f;
-            }
-          }
-        }
-
-        .YXJC_Box3_tableSpan {
-          display: inline-block;
-          font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 14px;
-          color: #ebfeff;
-          text-align: center;
-        }
-        .YXJC_Box3_tableSpan1 {
-          width: 60px;
-        }
-        .YXJC_Box3_tableSpan2 {
-          width: 100px;
-        }
-        .YXJC_Box3_tableSpan3 {
-          width: 158px;
-        }
-        .YXJC_Box3_tableSpan4 {
-          width: 50px;
-        }
-        .YXJC_Box3_tableSpan5 {
-          width: 50px;
-        }
-      }
-    }
-    .RightBox1_2 {
-      height: 245px;
-      width: 100%;
-      margin-top: 10px;
-
-      .JCPG {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: center;
-        justify-content: space-between;
-        align-items: center;
-        display: flex;
-        .FBox {
-          width: 135px;
-          height: 130px;
-          background: url('@/assets/images/Sponge_screen/QiaoLiang/FBox.png') no-repeat center;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          justify-content: center;
-          align-items: center;
-          flex-wrap: nowrap;
-          text-align: center;
-          .Font1 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #00f2ff;
-            line-height: 26px;
-            width: 100px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .Font2 {
-            display: inline-block;
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            width: 100px;
-            height: 30px;
-          }
-        }
-        .CBox {
-          width: 428px;
-          height: 39px;
-          background: url('@/assets/images/Sponge_screen/QiaoLiang/CBox.png') no-repeat center;
-          background-size: cover;
-          margin-top: 10px;
-          .Font1 {
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 16px;
-            color: #ebfeff;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-            padding: 0 20px;
-          }
-          .Font2 {
-            font-family: Source Han Sans CN;
-            font-weight: 500;
-            font-size: 16px;
-            color: #00f2ff;
-            line-height: 51px;
-            line-height: 39px;
-            line-height: 39px;
-            display: inline-block;
-          }
-        }
-      }
-    }
   }
   .TopBox {
     width: calc(100% - 1000px);
diff --git a/src/views/oneMap/components/ZHSD.vue b/src/views/oneMap/components/ZHSD.vue
index 1e783c8..bc57cd0 100644
--- a/src/views/oneMap/components/ZHSD.vue
+++ b/src/views/oneMap/components/ZHSD.vue
@@ -46,6 +46,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
   .RightBox {
     width: 450px;
@@ -60,6 +61,7 @@
     background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #15d2fd;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
   }
 }
 </style>
diff --git a/src/views/oneMap/smartBridge/RightBox.vue b/src/views/oneMap/smartBridge/RightBox.vue
index d3a162c..3a7283e 100644
--- a/src/views/oneMap/smartBridge/RightBox.vue
+++ b/src/views/oneMap/smartBridge/RightBox.vue
@@ -1,6 +1,6 @@
 <!-- 总体概览右侧面板 -->
 <template>
-  <div class="rightSD">
+  <div class="rightQL">
     <!-- 运行监测 -->
     <div class="topBox">
       <div class="ListBoxHeader">
@@ -16,11 +16,20 @@
           <div class="jcBox_Content jgBox">
             <div class="jcInfo" v-for="(item, index) in jgjcTitle" :key="item.code">
               <div class="jcInfo_title">{{ item.name }}</div>
-              <div class="jcInfo_state" :class="jgjcData[item.code] == '1' ? '' : 'active'">
-                <div class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'active'"></div>
-                {{ jgjcData[item.code] == '1' ? '正常' : '异常' }}
+              <div class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'red'"></div>
+            </div>
+            <div class="pieBox">
+              <pieRing :echartData="pieData" :refresh="chartRefresh"></pieRing>
+              <div class="boxCircle">
+                <div class="biaoji1"></div>
+                <div class="biaoji2"></div>
+                <div class="biaoji3"></div>
+                <div class="biaoji4"></div>
+                <div class="outCircle">
+                  <div class="innerCircle"></div>
+                </div>
+                <div class="circleValue">{{ pieData.data }}<span>分</span></div>
               </div>
-              <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
             </div>
           </div>
         </div>
@@ -34,19 +43,35 @@
             <twoLine :echartData="lineData" :refresh="chartRefresh" />
           </div>
         </div>
-        <!-- 突发事件监测 -->
+        <!-- 负荷监测 -->
         <div class="jcBox">
           <div class="jcBox_Header">
             <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
-            <span class="jcBox_HeaderFont">结构监测</span>
+            <span class="jcBox_HeaderFont">负荷监测</span>
           </div>
           <div class="jcBox_Content">
-            <div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
+            <!-- <div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
               <img :src="item.icon" alt="" class="tfInfo_icon" />
               <div class="tfInfo_title">{{ item.name }}</div>
               <div class="tfInfo_state" :class="tfjcData[item.code] == '0' ? '' : 'active'">
                 {{ tfjcData[item.code] == '1' ? '有' : '无' }}
               </div>
+            </div> -->
+            <div class="YXJC_Box3_tableHeader">
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">方向</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">车牌</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">通行时间</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">载重</span>
+              <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">超重</span>
+            </div>
+            <div class="YXJC_Box3_tableBody">
+              <div class="YXJC_Box3_tableList" v-for="item in YXJCTableData">
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan1">{{ item.fx }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan2">{{ item.cp }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan3">{{ item.sj }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan4">{{ item.zz }}</span>
+                <span class="YXJC_Box3_tableSpan YXJC_Box3_tableSpan5">{{ item.cz }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -89,8 +114,9 @@
   </div>
 </template>
 
-<script setup name="rightSD">
+<script setup name="rightQL">
 import twoLine from '../smartTunnel/components/twoLine.vue';
+import pieRing from './components/pieRing.vue';
 import { ref, reactive, toRefs, onMounted } from 'vue';
 
 import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
@@ -116,25 +142,36 @@
   company: '陕西海嵘工程试验检测股份有限公司',
 });
 const jgjcTitle = [
-  { name: '沉降监测', code: 'cj' },
-  { name: '滑坡监测', code: 'hp' },
-  { name: '收敛监测', code: 'sl' },
-  { name: '裂缝监测', code: 'lf' },
-  { name: '水位监测', code: 'sw' },
-  { name: '应变监测', code: 'yb' },
+  { name: '挠度', code: 'nd' },
+  { name: '振动', code: 'zd' },
+  { name: '位移', code: 'wy' },
+  { name: '索力', code: 'sl' },
+  { name: '裂缝', code: 'lf' },
+  { name: '应变', code: 'yb' },
 ];
 const jgjcData = ref({
-  cj: '1',
-  hp: '1',
-  sl: '0',
+  nd: '1',
+  zd: '1',
+  wy: '0',
+  sl: '1',
   lf: '1',
-  sw: '1',
   yb: '1',
 });
-const tfjcTitle = [
-  { name: '火灾', code: 'hz', icon: hz_icon },
-  { name: '交通事故', code: 'jt', icon: jtsg_icon },
-  { name: '有毒气体', code: 'dq', icon: ydqt_icon },
+const YXJCTableData = [
+  {
+    fx: '北向南',
+    cp: '陕J-24YU8',
+    sj: '2024-09-30 12:26:00',
+    zz: '54.6',
+    cz: '16.2',
+  },
+  {
+    fx: '南北向',
+    cp: '陕J-24YU8',
+    sj: '2024-09-29 16:32:00',
+    zz: '48',
+    cz: '9.6',
+  },
 ];
 const tfjcData = ref({
   hz: '0',
@@ -157,6 +194,10 @@
   ],
 });
 
+const pieData = ref({
+  data: 80,
+});
+
 watch(
   () => lineData.value,
   (newVal, oldVal) => {
@@ -178,7 +219,7 @@
 </script>
 
 <style lang="scss" scoped>
-.rightSD {
+.rightQL {
   width: 100%;
   height: 100%;
   // box-sizing: border-box;
@@ -232,7 +273,114 @@
         }
       }
       .jgBox {
+        position: relative;
         height: 140px;
+        .pieBox {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 140px;
+          height: 140px;
+          box-sizing: border-box;
+          // border: 1px solid rgba(255, 255, 255, 0.2);
+          .boxCircle {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            .circleValue {
+
+              width: 60px;
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              font-weight: bold;
+              font-size: 28px;
+              color: #3efeca;
+              text-align: center;
+              span {
+                font-weight: 500;
+                font-size: 14px;
+                color: #cef6ff;
+              }
+            }
+
+            .biaoji1 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              left: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji2 {
+              width: 10px;
+              height: 2px;
+              position: absolute;
+              top: 50%;
+              right: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji4 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              bottom: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+            .biaoji3 {
+              width: 2px;
+              height: 10px;
+              position: absolute;
+              left: 50%;
+              top: 0;
+              background-color: #ffffff;
+              z-index: 99;
+            }
+
+            .outCircle {
+              position: relative;
+              // left: 0;
+              // top: 0;
+              width: 90px;
+              height: 90px;
+              border-radius: 50%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              /* border: 1px solid red; */
+              background: conic-gradient(from 0deg at 50% 50%, rgba(62, 255, 203, 0) 0%, #3effcb 100%);
+              animation: rotateGradient 5s linear infinite;
+              overflow: hidden;
+            }
+
+            .innerCircle {
+              position: absolute;
+              top: 10px;
+              left: 10px;
+              width: 70px;
+              height: 70px;
+              border-radius: 50%;
+              background-color: #235b7c;
+            }
+
+            @keyframes rotateGradient {
+              0% {
+                transform: rotate(0deg);
+              }
+              100% {
+                transform: rotate(360deg);
+              }
+            }
+          }
+        }
       }
       .jcBox_Content {
         margin-top: 5px;
@@ -245,44 +393,63 @@
           position: relative;
           width: 200px;
           height: 40px;
-          background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
           display: flex;
           align-items: center;
-          // justify-content: space-between;
-          &::before {
-            content: '';
-            width: 4px;
-            height: 40px;
-            position: absolute;
-            left: 0;
-            top: 0;
-            background: #00f2ff;
+          &:nth-child(2n + 1) {
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
+            .jcInfo_title {
+              margin-left: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-left: 10px;
+            }
+            &::before {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              left: 0;
+              top: 0;
+              background: #00f2ff;
+            }
+          }
+          &:nth-child(2n) {
+            flex-direction: row-reverse;
+            background: linear-gradient(90deg, rgba(21, 210, 253, 0.05) 0%, rgba(21, 210, 253, 0.2) 100%);
+            .jcInfo_title {
+              margin-right: 15px;
+            }
+            .jcInfo_stateIcon {
+              margin-right: 10px;
+            }
+            &::after {
+              content: '';
+              width: 4px;
+              height: 40px;
+              position: absolute;
+              right: 0;
+              top: 0;
+              background: #00f2ff;
+            }
           }
           .jcInfo_title {
             font-weight: bold;
             font-size: 16px;
             color: #ebfeff;
-            margin-left: 15px;
+            // margin-left: 15px;
           }
-          .jcInfo_state {
-            display: flex;
-            align-items: center;
-            color: #00ff9c;
-            margin-left: 16px;
-            &.active {
-              color: #fe667b;
-            }
-            .jcInfo_stateIcon {
-              width: 10px;
-              height: 10px;
-              background: #00ff9c;
-              border-radius: 50%;
-              margin-right: 3px;
-              &.active {
-                background: #fe667b;
-              }
+
+          .jcInfo_stateIcon {
+            width: 10px;
+            height: 10px;
+            background: #00ff9c;
+            border-radius: 50%;
+            // margin-right: 3px;
+            &.red {
+              background: #fe667b;
             }
           }
+
           .jcInfo_btn {
             width: 38px;
             height: 21px;
@@ -322,6 +489,55 @@
             }
           }
         }
+        .YXJC_Box3_tableHeader {
+          width: 100%;
+          height: 35px;
+          line-height: 35px;
+          background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.5) 100%);
+          border-radius: 2px;
+        }
+
+        .YXJC_Box3_tableBody {
+          width: 100%;
+          // height: calc(100% - 40px);
+          overflow: auto;
+
+          .YXJC_Box3_tableList {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            background: linear-gradient(0deg, rgba(21, 210, 253, 0.2) 0%, rgba(0, 158, 164, 0.05) 100%);
+            border-radius: 2px;
+
+            .YXJC_Box3_tableSpan5 {
+              color: #ff3f3f;
+            }
+          }
+        }
+
+        .YXJC_Box3_tableSpan {
+          display: inline-block;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          font-size: 14px;
+          color: #ebfeff;
+          text-align: center;
+        }
+        .YXJC_Box3_tableSpan1 {
+          width: 60px;
+        }
+        .YXJC_Box3_tableSpan2 {
+          width: 100px;
+        }
+        .YXJC_Box3_tableSpan3 {
+          width: 158px;
+        }
+        .YXJC_Box3_tableSpan4 {
+          width: 50px;
+        }
+        .YXJC_Box3_tableSpan5 {
+          width: 50px;
+        }
       }
     }
     .txBox {
diff --git a/src/views/oneMap/smartBridge/components/pieRing.vue b/src/views/oneMap/smartBridge/components/pieRing.vue
new file mode 100644
index 0000000..917987e
--- /dev/null
+++ b/src/views/oneMap/smartBridge/components/pieRing.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieRing">
+import { guid } from '@/utils/ruoyi';
+
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+// console.log('-------------------', props.title);
+
+const id = guid();
+const myChart = shallowRef('');
+
+let angle = 0; //角度，用来做简单的动画效果的
+let pieValue = ref(80);
+let maxvalue = 100;
+let timerId = null;
+let option = ref({});
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+
+//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+function getCirlPoint(x0, y0, r, angle) {
+  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+  return {
+    x: x1,
+    y: y1,
+  };
+}
+
+function draw() {
+  angle = angle + 10;
+  myChart.value.setOption(option.value, true);
+  //window.requestAnimationFrame(draw);
+}
+
+//初始化
+function intChart() {
+  pieValue.value = props.echartData?.data || 0 
+  let percent = ((pieValue.value / maxvalue) * 100).toFixed(0);
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  // if (!props.echartData.series.length) return;
+  option.value = {
+    // backgroundColor: '#000E1A',
+    title: {
+      text: '{a|' + percent + '} {c|分}',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 32,
+            color: 'rgba(62, 254, 202, 1)',
+            // fontFamily: 'Din',
+            // lineHeight: 40, // 调整行高以确保对齐
+            verticalAlign: 'bottom', // 底部对齐
+          },
+
+          c: {
+            fontSize: 14,
+            color: 'rgba(206, 246, 255, 1)',
+            // fontFamily: 'SanFrancisco ',
+            // lineHeight: 20, // 调整行高以确保对齐
+            // verticalAlign: 'bottom', // 底部对齐
+          },
+        },
+      },
+    },
+    polar: [
+      {
+        // radius: ['33.5%', '45%'],
+        radius: ['85%', '100%'],
+        // radius: '100%',
+        center: ['50%', '50%'],
+        // startAngle: 180, // 从180度开始
+        // endAngle: 0, // 到0度结束
+      },
+    ],
+
+    angleAxis: {
+      max: maxvalue,
+      show: false,
+      inverse: false,
+      clockwise: false, //角度轴的方向为逆时针方向。
+    },
+    radiusAxis: {
+      type: 'category',
+      show: true,
+      axisLabel: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+
+    series: [
+      // 大弧线
+      {
+        name: 'ring5',
+        type: 'custom',
+        coordinateSystem: 'none',
+        renderItem: function (params, api) {
+          return {
+            type: 'arc',
+            shape: {
+              cx: api.getWidth() / 2,
+              cy: api.getHeight() / 2,
+              r: (Math.min(api.getWidth(), api.getHeight()) / 2.1) * 0.9,
+              // r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.6,
+              // startAngle: (0+angle) * Math.PI / 180,
+              // endAngle: (90+angle) * Math.PI / 180
+              startAngle: (0 * Math.PI) / 180,
+              endAngle: (360 * Math.PI) / 180,
+            },
+            style: {
+              // stroke: 'rgb(53,53,53)',
+              stroke: 'rgb(10, 126, 156)',
+              fill: ' transparent',
+              lineWidth: 5,
+            },
+            silent: true,
+          };
+        },
+        data: [0],
+      },
+
+      // {
+      //   name: 'ring5',
+      //   type: 'custom',
+      //   coordinateSystem: 'none',
+      //   renderItem: function (params, api) {
+      //     // 定义线性渐变色
+      //     // let gradient = proxy.echarts.graphic.RadialGradient(
+      //     //   0.5,
+      //     //   0.5, // 圆心位置，相对于容器的百分比
+      //     //   0.5, // 半径，相对于容器的百分比
+      //     //   [
+      //     //     { offset: 0, color: 'rgba(62,255,203,0)' }, // 起始颜色
+      //     //     { offset: 1, color: '#3EFFCB' }, // 结束颜色
+      //     //   ]
+      //     // );
+      //     return {
+      //       type: 'arc',
+      //       shape: {
+      //         cx: api.getWidth() / 2,
+      //         cy: api.getHeight() / 2,
+      //         r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+      //         startAngle: ((0 + angle) * Math.PI) / 180,
+      //         endAngle: ((270 + angle) * Math.PI) / 180,
+      //       },
+      //       style: {
+      //         stroke: '#3EFFCB',
+      //         // stroke: gradient,
+      //         fill: 'transparent',
+      //         lineWidth: 5,
+      //       },
+      //       silent: true,
+      //     };
+      //   },
+      //   data: [0],
+      // },
+
+      //极坐标柱状图
+      {
+        name: '',
+        type: 'bar',
+        roundCap: true,
+        barWidth: 10,
+        showBackground: true,
+        stack: 'a',
+        backgroundStyle: {
+          color: 'rgba(66, 66, 66, 0)',
+          // borderWidth: 5,
+        },
+        data: [pieValue.value, 0],
+        coordinateSystem: 'polar',
+
+        itemStyle: {
+          normal: {
+            color: proxy.echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              {
+                offset: 0,
+                color: 'rgb(255,255,255,0.8)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,255,255,1)',
+              },
+            ]),
+            shadowBlur: 5,
+            shadowColor: 'rgba(62,255,203,0.8)',
+          },
+        },
+      },
+    ],
+  };
+
+  myChart.value.setOption(option.value);
+}
+
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+  // timerId = setInterval(function () {
+  //   //用setInterval做动画感觉有问题
+  //   draw();
+  // }, 100);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(timerId);
+  myChart.value && myChart.value.dispose();
+  window.removeEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>