feat: 新增风险类型数据块，修改标题

app/src/views/Home/components/RiskWarning.vue

@@ -82,18 +82,18 @@
        style="display: flex; align-items: center; justify-content: space-between; margin: 0px 15px;"
       >
       <img style="width:162px; height: 6px;" src="../../../assets/images/Group11.png" alt="">
-       <div  style="
+       <!-- <div  style="
           
           height: 20px;
           width: 50px;
           line-height: 20px;
-        "> 单位：栋</div>
+        "> 单位：栋</div> -->
       </div>
       <!-- 风险预警 -->
       <div
-        style="display: flex; flex-wrap: wrap; justify-content: space-around; margin-bottom: 20px;"
+        style="margin-top: 10px;display: flex; flex-wrap: wrap; justify-content: space-around; margin-bottom: 20px;"
       >
-        <div class="card" >
+        <!-- <div class="card" >
           <div class="left-card" @click="$emit('click-label', 'ZDFX')">
             <div class="card-item">重大<br>风险</div>
           </div>
@@ -124,7 +124,17 @@
           <div class="right-card" @click="showStice('低风险（蓝色）')" style="color: #0085FF;">
             {{ showValue("低风险") }}
           </div>
+        </div> -->
+
+        <div v-for="item,index in ['重大风险','较大风险', '一般风险', '较低风险', '低风险']">
+          <div :class="{
+          [`card_bg${index}`]: true
+        }" > <div style="margin-top: 50px; display: flex; flex-direction: column; align-items: center;">
+          {{ showValue(item) }} <div style="color:#fff;font-size: 18px;margin-top: 10px;">栋</div>
+        </div> </div>
         </div>
+
+
       </div>
       <img style="width:162px; height: 6px; margin-left:60%;" src="../../../assets/images/Group (1).png" alt="">
     </div>
@@ -159,6 +169,13 @@
 <script>
 import * as echarts from "echarts";
 import toolUtils from "@/utils/echartsTooltip";
+
+import img5 from '../../../assets/images/bg/重大风险.png';
+import img4 from '../../../assets/images/bg/一般风险.png';
+import img3 from '../../../assets/images/bg/低风险.png';
+import img2 from '../../../assets/images/bg/较低风险.png';
+import img1 from '../../../assets/images/bg/较大风险.png';
+
 export default {
   props: {
     riskList: Array,
@@ -172,10 +189,26 @@ export default {
       timer: "",
       label: [],
       labelColor: {
-        重大风险: "#FF0B0B",
-        较大风险: "#ff833d",
-        一般风险: "#fbff3d",
-        低风险: "#35c2ff",
+        重大风险: {
+          color: "#FF0B0B",
+          image: img5
+        },
+        较大风险: {
+          color: "#ff833d",
+          image: img1
+        },
+        一般风险: {
+          color: "#fbff3d",
+          image: img4
+        },
+        较低风险: {
+          color: "#35c2ff",
+          image: img2
+        },
+        低风险:{
+          color: '#35c2ff',
+          image: img3
+        }
       },
       idx: 1,
     };
@@ -200,6 +233,12 @@ export default {
   },
   methods: {
     showValue(label) {
+      if (label === '低风险') {
+        return 40697
+      }
+      if (label === '较低风险') {
+        label = '低风险'
+      }
       const item = this.riskList.find((item) => item.fxdj === label);
       return item ? item.sl : 0;
     },
@@ -533,4 +572,60 @@ background-size: 100% 100%;
     color: #FF4F4F;
     text-align: center;
   }
+
+.card_bg0 {
+  background: url('../../../assets/images/bg/重大风险.png') no-repeat;
+  width: 61px;
+  height: 190px;
+  background-size: 100% 100%;
+  color: #E4033C;
+  font-size: 20px;
+  display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.card_bg1 {
+  background: url('../../../assets/images/bg/较大风险.png') no-repeat;
+  width: 61px;
+  height: 190px;
+  background-size: 100% 100%;
+  color: #F66801;
+  font-size: 20px;
+  display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.card_bg2 {
+  background: url('../../../assets/images/bg/一般风险.png') no-repeat;
+  width: 61px;
+  height: 190px;
+  background-size: 100% 100%;
+  color: #F5DD02;
+  font-size: 20px;
+  display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.card_bg3 {
+  background: url('../../../assets/images/bg/较低风险.png') no-repeat;
+  width: 61px;
+  height: 190px;
+  background-size: 100% 100%;
+  color: #007EF1;
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.card_bg4 {
+  background: url('../../../assets/images/bg/低风险.png') no-repeat;
+  width: 61px;
+  height: 190px;
+  background-size: 100% 100%;
+  color: #2DD25D;
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

app/src/views/Risk/components/Totality.vue

@@ -5,7 +5,7 @@
                <div class="unit " >
                 <div v-for="(item,index) in list" :key="index" >
                   <div >
-                    <img :src="item.imgs" alt="" >
+                    <img :src="item.imgs" style="width: 70px; height: 78px;" alt="" />
                     <div class="num ">
                         <span class="num-b">{{ item.num }}</span>
                         <span>栋</span>
@@ -23,9 +23,10 @@
 
 <script>
 import imga from '../../../assets/images/Frame.png'
-import img1 from '../../../assets//images/Frame (1).png'
-import img2 from '../../../assets//images/Frame (2).png'
-import img3 from '../../../assets//images/Frame (3).png'
+import img1 from '../../../assets/images/Frame (1).png'
+import img2 from '../../../assets/images/Frame (2).png'
+import img3 from '../../../assets/images/Frame (3).png'
+import img4 from '../../../assets/images/Frame (4).png'
 import { ztzs } from '@/api/risk'
 
  export default {
@@ -54,10 +55,16 @@ import { ztzs } from '@/api/risk'
                     imgs:img2           
                 },
                 {
-                    title:'低风险',
+                    title:'较低风险',
                     num:0,
                     unit:'栋',
                     imgs:img3            
+                },
+                {
+                    title:'低风险',
+                    num: 40697,
+                    unit:'栋',
+                    imgs:img4            
                 }
             ]
         }
@@ -110,7 +117,7 @@ background-size: 100% 1005;
     // margin: 20px 0;
     .num-b{
         display: inline-block;
-        font-size: 28px;
+        font-size: 20px;
         margin-left: 20px;
         padding-top: 60px;
     }