地质灾害

src/views/censusDataAnalysis/GeologicHazard/RightSection.vue

@@ -62,7 +62,7 @@
       <div class="title-box">
         <div class="gradient-text">风险影响</div>
       </div>
-      <div class="box-content" style="padding: 5px 0 5px 5px; height: 585px">
+      <div class="box-content" style="padding: 5px 0 5px 5px; height: 330px">
         <div class="box3">
           <div class="item">
             <i class="icon1" />
@@ -84,7 +84,7 @@
               </div>
             </div>
           </div>
-          <div class="item">
+          <div class="item" style="padding-left: 32px">
             <i class="icon3" />
             <div class="text-box">
               <div class="text1">潜在经济损失</div>
@@ -95,7 +95,20 @@
             </div>
           </div>
         </div>
-        <div class="box4"></div>
+        <div class="common-table" style="margin-top: 20px">
+          <div class="table-header">
+            <div class="td">区县名称</div>
+            <div class="td">隐患点数(个)</div>
+            <div class="td">威胁人数(人)</div>
+            <div class="td" style="width: 122px; flex: unset">潜在经济损失(万元)</div>
+          </div>
+          <div v-for="(item, index) in tableData" :key="index" class="tr">
+            <div class="td">{{ item.area }}</div>
+            <div class="td">{{ item.data1 }}</div>
+            <div class="td">{{ item.data2 }}</div>
+            <div class="td" style="width: 122px; flex: unset">{{ item.data3 }}</div>
+          </div>
+        </div>
       </div>
     </div>
     <Dialog v-model="showExportReport" type="xs" title="导出综合分析报告" hide-footer>
@@ -144,32 +157,7 @@ let riskDistributionState = reactive({
     { name: '低风险镇街', value: '0', icon: 'icon1', text: 'green-text' }
   ]
 });
-//
-let riskData = reactive([
-  { name: '公路高边坡', value: '1', icon: getImageUrl('highwaySlope') },
-  { name: '公路水路风险', value: '1', icon: getImageUrl('waterwayRisk') },
-  { name: '公路风险点', value: '1', icon: getImageUrl('highwayRisk') },
-  { name: '公共文化场所', value: '1', icon: getImageUrl('publicPlace2') },
-  { name: '医疗卫生机构', value: '1', icon: getImageUrl('hospital2') },
-  { name: '旅游景区', value: '1', icon: getImageUrl('scenicSpot2') },
-  { name: '宗教活动场所', value: '1', icon: getImageUrl('religiousPlace2') },
-  { name: '学校', value: '1', icon: getImageUrl('school2') },
-  { name: '体育场馆', value: '1', icon: getImageUrl('gymnasium2') },
-  { name: '星级饭店', value: '1', icon: getImageUrl('restaurant2') },
-  { name: '大型超市', value: '1', icon: getImageUrl('supermarket2') },
-  { name: '提供住宿的社会服务机构', value: '1', icon: getImageUrl('socialInstitution2') },
-  { name: '森林消防队伍', value: '1', icon: getImageUrl('firefightTeam') },
-  { name: '防火道路', value: '1', icon: getImageUrl('fireproofRoad') },
-  { name: '防火物资储备点', value: '1', icon: getImageUrl('materialReservePoint') },
-  { name: '尾矿库', value: '1', icon: getImageUrl('tailingPond2') },
-  { name: '金属非金属露天矿山', value: '1', icon: getImageUrl('opencastMine2') },
-  { name: '废石场', value: '1', icon: getImageUrl('wasteRockYard2') },
-  { name: '金属非金属地下矿山', value: '1', icon: getImageUrl('undergroundMine2') },
-  { name: '排土场', value: '1', icon: getImageUrl('dischargePlace2') },
-  { name: '化工园区', value: '1', icon: getImageUrl('park2') },
-  { name: '危化油气企业', value: '1', icon: getImageUrl('oilAndGasCompany') },
-  { name: '加油加气站', value: '1', icon: getImageUrl('gasStation2') }
-]);
+const tableData = ref([]);
 const getColor = (text) => {
   for (let i = 0; i < colorText.value.length; i++) {
     if (colorText.value[i].text === text) {
@@ -214,6 +202,14 @@ const getData = () => {
   riskDistributionState.townShipLevel[2].value = data3.data3;
   riskDistributionState.townShipLevel[3].value = data3.data4;
   riskDistributionState.townShipLevel[4].value = data3.data5;
+
+  tableData.value = [
+    { area: '茂南区', data1: '12', data2: '156', data3: '156' },
+    { area: '电白区', data1: '6', data2: '45', data3: '76' },
+    { area: '高州区', data1: '3', data2: '22', data3: '67' },
+    { area: '化州区', data1: '7', data2: '78', data3: '109' },
+    { area: '信宜区', data1: '18', data2: '198', data3: '242' }
+  ];
 };
 const parseTime2 = (dateStr) => {
   if (!dateStr) return '';
@@ -392,10 +388,9 @@ onMounted(() => {
       .box3 {
         width: 100%;
         display: flex;
-        justify-content: space-between;
         align-items: center;
         .item {
-          width: 146px;
+          width: 116px;
           height: 58px;
           background: url('@/assets/images/censusDataAnalysis/forestFire/box2.png') no-repeat;
           background-size: 100% 100%;
@@ -404,6 +399,10 @@ onMounted(() => {
           position: relative;
           padding-left: 40px;
           box-sizing: border-box;
+          margin-left: 20px;
+          &:first-child {
+            margin-left: 0;
+          }
           .icon1 {
             background: url('@/assets/images/censusDataAnalysis/forestFire/town.png') no-repeat;
           }
@@ -574,4 +573,12 @@ onMounted(() => {
     background-size: 100% 100%;
   }
 }
+.common-table {
+  .table-header {
+    padding: 0;
+  }
+  .tr {
+    padding: 2px 0;
+  }
+}
 </style>