Merge branch 'dev-bxy' into 'dev'

feat: 灾害防范总览新增点击查看灾害预警弹窗

See merge request product-group-fe/sfy-safety-group/sfy-safety!165

src/api/disaster-overview/index.ts

@@ -45,6 +45,7 @@ export interface WarnRecord {
   disasterType: string; // 灾害类型
   warnTime: string; // 预警时间
   source: string; // 信息来源
+  content: string; // 发布内容
 }
 export interface DisasterWarningRecordsRes {
   warnCount: number; // 预警数量

src/views/disaster/overview/components/DisasterWarningRecords.vue

@@ -27,13 +27,13 @@
         </div>
         <div v-else>
           <RecordItem
-            class="record-item"
             v-for="(record, index) in warningRecordsList"
             :key="index"
             :img-url="weatherDisasterDic.find((item) => item.itemCode === record.disasterType)?.imageUrl"
             :disasterType="weatherDisasterDic.find((item) => item.itemCode === record.disasterType)?.itemValue"
             :warnTime="record.warnTime"
             :source="record.source"
+            :content="record.content"
           />
         </div>
       </div>
@@ -187,10 +187,6 @@
             object-fit: contain;
           }
         }
-
-        .record-item {
-          margin-bottom: 10px;
-        }
       }
     }
   }

src/views/disaster/overview/components/disaster-warning-records/QuarterRecords.vue

@@ -15,13 +15,13 @@
           <span>暂无数据</span>
         </div>
         <RecordItem
-          class="record-item"
           v-for="(record, subIndex) in item.warnRecord"
           :key="subIndex"
           :img-url="weatherDisasterDic.find((item) => item.itemCode === record.disasterType)?.imageUrl"
           :disasterType="weatherDisasterDic.find((item) => item.itemCode === record.disasterType)?.itemValue"
           :warnTime="record.warnTime"
           :source="record.source"
+          :content="record.content"
         />
       </el-collapse-item>
     </el-collapse>
@@ -65,10 +65,6 @@
     }
   }
 
-  .record-item {
-    margin-bottom: 10px;
-  }
-
   :deep(.el-collapse) {
     --el-collapse-border-color: transparent !important;
 

src/views/disaster/overview/components/disaster-warning-records/RecordItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="record-item-container">
+  <div class="record-item-container list-record" @click="dialogVisible = true">
     <img class="record-img" :src="imgUrl" alt="" />
     <div class="record-info">
       <div class="info-title">{{ disasterType }}</div>
@@ -9,15 +9,36 @@
       </div>
     </div>
   </div>
+  <el-dialog v-model="dialogVisible" width="984" align-center class="record-dialog">
+    <template #header>
+      <div class="record-item-container">
+        <img class="record-img dialog-record-img" :src="imgUrl" alt="" />
+        <div class="record-info">
+          <div class="info-title dialog-info-title">{{ disasterType }}</div>
+          <div>
+            <div class="info-time">{{ warnTime }}</div>
+            <div class="info-source">{{ source }}</div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div>{{ content }}</div>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElDialog } from 'element-plus';
+
   defineProps<{
     imgUrl: string | undefined;
     disasterType: string | undefined;
     warnTime: string;
     source: string;
+    content: string;
   }>();
+
+  const dialogVisible = ref(false);
 </script>
 
 <style lang="scss" scoped>
@@ -32,6 +53,10 @@
       margin-right: 10px;
     }
 
+    .dialog-record-img {
+      margin-right: 25px;
+    }
+
     .record-info {
       flex: 1;
       font-size: 12px;
@@ -48,6 +73,10 @@
         overflow: hidden;
       }
 
+      .dialog-info-title {
+        font-size: 24px;
+      }
+
       .info-time,
       .info-source {
         margin-bottom: 2px;
@@ -57,4 +86,38 @@
       }
     }
   }
+
+  .list-record {
+    cursor: pointer;
+    margin-bottom: 10px;
+  }
+
+  .list-record:hover {
+    background-color: #f5f5f5;
+  }
+</style>
+<style lang="scss">
+  .record-dialog {
+    padding: 30px;
+
+    .el-dialog__close {
+      font-size: 24px;
+      color: #000;
+    }
+
+    .el-dialog__headerbtn {
+      margin: 10px;
+    }
+
+    .el-dialog__header {
+      padding: 0 0 30px 0;
+      border-bottom: 1px solid #dcdfe6;
+    }
+
+    .el-dialog__body {
+      min-height: 353px;
+      padding-top: 30px;
+      overflow: atuo;
+    }
+  }
 </style>