风险监测完成

src/views/routineCommandMap/LeftSection/RiskMonitor.vue

@@ -98,30 +98,28 @@
           </div>
         </div>
       </div>
+      <div class="data-box4">{{ raidDescribe }}</div>
     </div>
     <div v-show="active === '2'" class="risk-content">
-      <div class="data-box1">
+      <div class="data-box5">
         <div class="box-left">
-          <i :class="getStatusClass()"></i>
+          <i :class="getStatusClass4()"></i>
           <div class="text-box">
             <div class="text1">当前最高火警等级</div>
-            <div :class="getStatusClass2()">{{ hazardousChemicals.nowWarningLevelName }}</div>
+            <div :class="getStatusClass5()">{{ forestFireData.nowLevel }}</div>
           </div>
         </div>
         <i class="line" />
         <div class="box-right">
-          <div>{{ hazardousChemicals.highRiskArea.toString() }}</div>
+          <div>{{ forestFireData.text }}</div>
         </div>
       </div>
-      <div class="data-box2">
+      <div class="data-box6">
         <div class="common-title-box">预警等级</div>
         <div class="box-right">
-          <div v-for="(item, index) in hazardousChemicals.warningLevelData" :key="index" :class="getStatusClass3(item.name)">
+          <div v-for="(item, index) in levelList" :key="index" :class="getStatusClass6(item)">
             <i class="icon" />
-            <div class="text-box">
-              <div class="text">{{ item.value }}</div>
-              <div>{{ item.name }}</div>
-            </div>
+            <div class="text">{{ item }}</div>
           </div>
         </div>
       </div>
@@ -193,27 +191,45 @@ const rainList = ref({
   data5: 0,
   data6: 0
 });
+const raidDescribe = ref('');
 // 森林火灾
+const forestFireData = ref({
+  nowLevel: '',
+  text: ''
+});
+const levelList = ref(['极度危险', '高度危险', '较高危险', '较低危险']);
 const getStatusClass4 = () => {
-  const level = hazardousChemicals.value.nowWarningLevel;
-  if (level === '1') {
+  const level = forestFireData.value.nowLevel;
+  if (level === '较低危险') {
     return 'icon1 lowRisk1';
-  } else if (level === '2') {
+  } else if (level === '较高危险') {
     return 'icon1 normalRisk1';
-  } else if (level === '3') {
+  } else if (level === '高度危险') {
     return 'icon1 moreRisk1';
-  } else if (level === '4') {
+  } else if (level === '极度危险') {
     return 'icon1 significantRisk1';
   }
 };
-const getStatusClass5 = (level: string) => {
-  if (level === '低风险') {
+const getStatusClass5 = () => {
+  const level = forestFireData.value.nowLevel;
+  if (level === '较低危险') {
+    return 'lowRiskText1';
+  } else if (level === '较高危险') {
+    return 'normalRiskText1';
+  } else if (level === '高度危险') {
+    return 'moreRiskText1';
+  } else if (level === '极度危险') {
+    return 'significantRiskText1';
+  }
+};
+const getStatusClass6 = (level: string) => {
+  if (level === '较低危险') {
     return 'lowRiskBox';
-  } else if (level === '一般风险') {
+  } else if (level === '较高危险') {
     return 'normalRiskBox';
-  } else if (level === '较大风险') {
+  } else if (level === '高度危险') {
     return 'moreRiskBox';
-  } else if (level === '重大风险') {
+  } else if (level === '极度危险') {
     return 'significantRiskBox';
   }
 };
@@ -232,9 +248,13 @@ const initData = () => {
     };
     hazardousChemicals.value = data;
   } else if (active.value === '1') {
-
+    raidDescribe.value =
+      '今日08时至当前，全市有5个镇街发生降雨，最大降雨出现在茂名市茂南区高山镇，累计雨量为67.0毫米。当前1小时降雨量大于50毫米的镇街0个;当前3小时降雨量大于100毫米的镇街0个';
   } else if (active.value === '2') {
-
+    forestFireData.value = {
+      nowLevel: '极度危险',
+      text: '2024年09月09日08时，电白区、信宜市的森林火险等级为中度危险(三级)。高州市、信宜市、化州市的森林火灾等级为轻度危险'
+    };
   }
 };
 onMounted(() => {
@@ -457,9 +477,20 @@ onMounted(() => {
   align-items: center;
   .box {
     display: flex;
+    align-items: center;
     flex-direction: column;
     color: #edfaff;
     font-size: 38px;
+    width: 193px;
+    height: 180px;
+    background: url('@/assets/images/routineCommandMap/riskMonitor/box.png') no-repeat;
+    background-size: 100% 100%;
+    .text1 {
+      margin-top: 45px;
+    }
+    .text2 {
+      margin-top: 20px;
+    }
   }
   .box2 {
     display: flex;
@@ -501,6 +532,180 @@ onMounted(() => {
     }
   }
 }
+.data-box4 {
+  width: 1908px;
+  height: 190px;
+  background: url('@/assets/images/routineCommandMap/riskMonitor/boxBg2.png') no-repeat;
+  background-size: 100% 100%;
+  margin-top: 15px;
+  padding: 30px 50px;
+  color: #fff;
+  font-size: 38px;
+  line-height: 70px;
+}
+.data-box5 {
+  width: 1892px;
+  height: 200px;
+  background: url('@/assets/images/routineCommandMap/riskMonitor/boxBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  .box-left {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    .text-box {
+      margin-left: 20px;
+      .text1 {
+        font-size: 38px;
+        color: #edfaff;
+      }
+    }
+    .lowRisk1 {
+      background: url('@/assets/images/routineCommandMap/riskMonitor/lowForestFire.png') no-repeat;
+    }
+    .normalRisk1 {
+      background: url('@/assets/images/routineCommandMap/riskMonitor/highForestFire.png') no-repeat;
+    }
+    .moreRisk1 {
+      background: url('@/assets/images/routineCommandMap/riskMonitor/highForestFire2.png') no-repeat;
+    }
+    .significantRisk1 {
+      background: url('@/assets/images/routineCommandMap/riskMonitor/highForestFire3.png') no-repeat;
+    }
+    .icon1 {
+      width: 172px;
+      height: 188px;
+      background-size: 100% 100%;
+      display: inline-block;
+    }
+    .lowRiskText1,
+    .normalRiskText1,
+    .moreRiskText1,
+    .significantRiskText1 {
+      font-size: 48px;
+    }
+    .lowRiskText1,
+    .normalRiskText1,
+    .moreRiskText1,
+    .significantRiskText1 {
+      color: transparent;
+      -webkit-background-clip: text;
+      background-clip: text;
+      display: inline-block;
+    }
+    .lowRiskText1 {
+      background-image: linear-gradient(to bottom, #ffffff 25%, #247dff 100%);
+    }
+    .normalRiskText1 {
+      background-image: linear-gradient(to bottom, #ffffff 25%, #ffda00 100%);
+    }
+    .moreRiskText1 {
+      background-image: linear-gradient(to bottom, #ffffff 25%, #ff8400 100%);
+    }
+    .significantRiskText1 {
+      background-image: linear-gradient(to bottom, #ffffff 25%, #ff2b34 100%);
+    }
+  }
+  .line {
+    width: 4px;
+    height: 115px;
+    background-color: #a7ccdf;
+    margin: 0 72px;
+  }
+  .box-right {
+    font-size: 38px;
+    line-height: 76px;
+    color: #edfaff;
+    flex: 1;
+  }
+}
+.data-box6 {
+  width: 1896px;
+  height: 215px;
+  background: url('@/assets/images/routineCommandMap/dataBox.png') no-repeat bottom center;
+  background-size: 1896px 123px;
+  padding: 0 70px;
+  display: flex;
+  align-items: center;
+  .box-right {
+    display: flex;
+    font-size: 38px;
+    color: #edfaff;
+    .lowRiskBox {
+      background: url('@/assets/images/routineCommandMap/riskMonitor/dataBox1.png') no-repeat;
+      background-size: 100% 100%;
+      .icon {
+        width: 76px;
+        height: 82px;
+        background: url('@/assets/images/routineCommandMap/riskMonitor/lowRisk2.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 25px;
+      }
+      .text {
+        background-image: linear-gradient(to bottom, #ffffff 25%, #247dff 100%);
+      }
+    }
+    .normalRiskBox {
+      background: url('@/assets/images/routineCommandMap/riskMonitor/dataBox2.png') no-repeat;
+      .icon {
+        width: 76px;
+        height: 82px;
+        background: url('@/assets/images/routineCommandMap/riskMonitor/normalRisk2.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 25px;
+      }
+      .text {
+        background-image: linear-gradient(to bottom, #ffffff 25%, #ffda00 100%);
+      }
+    }
+    .moreRiskBox {
+      background: url('@/assets/images/routineCommandMap/riskMonitor/dataBox3.png') no-repeat;
+      .icon {
+        width: 76px;
+        height: 83px;
+        background: url('@/assets/images/routineCommandMap/riskMonitor/moreRisk2.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 25px;
+      }
+      .text {
+        background-image: linear-gradient(to bottom, #ffffff 25%, #ff8400 100%);
+      }
+    }
+    .significantRiskBox {
+      background: url('@/assets/images/routineCommandMap/riskMonitor/dataBox4.png') no-repeat;
+      .icon {
+        width: 76px;
+        height: 83px;
+        background: url('@/assets/images/routineCommandMap/riskMonitor/significantRisk2.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 25px;
+      }
+      .text {
+        background-image: linear-gradient(to bottom, #ffffff 25%, #ff2b34 100%);
+      }
+    }
+    .lowRiskBox,
+    .normalRiskBox,
+    .moreRiskBox,
+    .significantRiskBox {
+      width: 365px;
+      height: 124px;
+      background-size: 100% 100%;
+      padding-left: 30px;
+      display: flex;
+      align-items: center;
+      .text {
+        color: transparent;
+        -webkit-background-clip: text;
+        background-clip: text;
+        display: inline-block;
+        font-size: 38px;
+        font-family: BEBAS-1;
+      }
+    }
+  }
+}
 .flex {
   display: flex;
   justify-content: space-between;