diff --git a/src/views/oneMap/Echarts/tslyqk_constituent_3d.vue b/src/views/oneMap/Echarts/tslyqk_constituent_3d.vue
index 9ace255..5467a1d 100644
--- a/src/views/oneMap/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/oneMap/Echarts/tslyqk_constituent_3d.vue
@@ -268,7 +268,7 @@
       orient: 'vertical',
       icon: 'circle',
       right: '5%',
-      top: '5%',
+      top: '10%',
       y: 'center',
       show: true,
       itemGap: 20,

diff --git a/src/views/oneMap/Echarts/tslyqk_constituent_3d.vue b/src/views/oneMap/Echarts/tslyqk_constituent_3d.vue
index 9ace255..5467a1d 100644
--- a/src/views/oneMap/Echarts/tslyqk_constituent_3d.vue
+++ b/src/views/oneMap/Echarts/tslyqk_constituent_3d.vue
@@ -268,7 +268,7 @@
       orient: 'vertical',
       icon: 'circle',
       right: '5%',
-      top: '5%',
+      top: '10%',
       y: 'center',
       show: true,
       itemGap: 20,
diff --git a/src/views/oneMap/OverallOverview/RightBox.vue b/src/views/oneMap/OverallOverview/RightBox.vue
index 99db179..f7191b5 100644
--- a/src/views/oneMap/OverallOverview/RightBox.vue
+++ b/src/views/oneMap/OverallOverview/RightBox.vue
@@ -23,23 +23,48 @@
         </div>
       </div>
       <div class="ContentNum">
-        <img :src="fxzb" alt="" style="width: 399px; height: 117px; position: relative; top: 18px; left: 28px" />
-        <div class="dfFlxa">
-          <!-- <div class="middleextA">
-            <div class="GasList">
-              <div class="iconTb">
-                <img :src="item.Imgurl" alt="" class="iconTbimg" />
-              </div>
-              <div class="GasMc">{{ item.name }}</div>
+        <div class="dfFlxa" v-for="(item, index) in riskData">
+          <div class="middleextA flex">
+            <div>
+              <img :src="item.Imgurl" alt="" />
             </div>
-            <div class="Gasprogress">
-           
+            <div style="margin-left: 4px">{{ item.name }}</div>
+          </div>
+          <div class="middleextB flex">
+            <div class="BJ_CenBox1" :style="getWidth(item, 1)"></div>
+            <div
+              style="
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                font-size: 13px;
+                color: rgba(248, 116, 75, 1);
+                text-align: right;
+                line-height: 12px;
+                margin-left: 5px;
+              "
+            >
+              {{ item.sl }}
             </div>
           </div>
-          <div class="middleextB">
-            <div class="GasNum">{{ item.num }}</div>
-            <div class="GasGl">{{ item.dw }}</div>
-          </div> -->
+          <div class="middleextC flex">
+            <div
+              style="
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                font-size: 17px;
+                color: #12f9ff;
+                width: 65%;
+
+                text-align: right;
+              "
+            >
+              {{ item.num }}
+            </div>
+
+            <div style="font-family: Source Han Sans CN; font-weight: bold; font-size: 13px; color: #34909f">
+              {{ item.dw }}
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -141,10 +166,10 @@
   refresh: 1,
 });
 const riskData = ref([
-  { name: '燃气', num: '234', sl: 70, Imgurl: ranqi_icon, dw: '公里', refresh: 1 },
-  { name: '排水', num: '234', sl: 80, Imgurl: ps_icon, dw: '公里', refresh: 1 },
-  { name: '桥梁', num: '1', sl: 90, Imgurl: qiaoliang, dw: '座', refresh: 1 },
-  { name: '隧道', num: '1', sl: 60, Imgurl: sd_icon, dw: '座', refresh: 1 },
+  { name: '燃气', num: 234, sl: 178, Imgurl: ranqi_icon, dw: '公里' },
+  { name: '排水', num: 234, sl: 118, Imgurl: ps_icon, dw: '公里' },
+  { name: '桥梁', num: 84, sl: 0, Imgurl: qiaoliang, dw: '座' },
+  { name: '隧道', num: 1, sl: 0, Imgurl: sd_icon, dw: '座' },
 ]);
 const tableData = ref([
   { name: '预警数据', num: '60', gm: '较多', Imgurl: yjsj },
@@ -156,8 +181,14 @@
 function yearclick(val) {
   activedname.value = val.name;
 }
-const format = percentage => {
-  return percentage ? `${percentage}` : `${percentage}`;
+// 动态计算盒子的宽度
+const getWidth = (item, Num) => {
+  let widthNum = 0;
+  if (Num == 1) {
+    widthNum = (item.sl / (item.num + item.sl)) * 100;
+    console.log(widthNum, 'widthNum');
+  }
+  return `width:${widthNum}%`;
 };
 const showPanel = ref(true); //面板展开收起
 // 面板内容展开收起控制
@@ -179,7 +210,7 @@
 <style lang="scss" scoped>
 .RiskAssessment {
   width: 450px;
-  height: 49%;
+  height: 410px;
   // background: yellowgreen;
   .RiskProportion {
     width: 450px;
@@ -190,60 +221,44 @@
       width: 450px;
       height: 140px;
       .dfFlxa {
-        width: 400px;
+        width: 420px;
         height: 30px;
         margin: 5px auto;
         display: flex;
-        align-items: center;
-        justify-content: center;
 
         .middleextA {
-          width: 75%;
-          display: flex;
-          .GasList {
-            display: flex;
-            width: 20%;
-            .iconTb {
-              width: 40%;
-              .iconTbimg {
-                width: 20px;
-                height: 20px;
-              }
-            }
-            .GasMc {
-              width: 60%;
-              font-family: Source Han Sans CN;
-              font-weight: 500;
-              font-size: 14px;
-              color: #ebfeff;
-            }
-          }
-          .Gasprogress {
-            width: 80%;
-          }
+          height: 30px;
+          width: 17%;
+          align-items: center;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 14px;
+          color: #ebfeff;
         }
         .middleextB {
-          width: 25%;
-          display: flex;
-          .GasNum {
-            width: 60%;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 20px;
-            color: #12f9ff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
+          height: 14px;
+          width: 58%;
+          margin-top: 8px;
+          background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
+          border-radius: 16px;
+          border: 1px solid #15d2fd;
+          // background: yellow;
+          .BJ_CenBox1 {
+            display: inline-block;
+            height: 12px;
+            background: #00f2ff;
+            border-radius: 15px;
+            box-sizing: border-box;
+            // padding: 0 5px;
           }
-          .GasGl {
-            width: 40%;
-            font-family: Source Han Sans CN;
-            font-weight: bold;
-            font-size: 14px;
-            color: #34909f;
-            display: flex;
-            align-items: center;
-          }
+        }
+        .middleextC {
+          margin-left: 18px;
+          height: 30px;
+          width: 20%;
+          justify-content: space-between;
+          align-items: center;
+          // background: red;
         }
       }
     }
@@ -252,13 +267,13 @@
     margin-top: 5px;
     width: 450px;
     // height: 41%;
-    height: calc(100% - 240px);
-    // background: #b2cad6;
+    height: calc(100% - 225px);
+    // background: blue;
   }
 }
 .WarningSisposal {
   width: 450px;
-  height: 49%;
+  height: calc(100vh - 530px);
   // background: red;
   .WarningSj {
     width: 450px;