添加预警信息查看

src/views/disaster/disaster-warning/PageWarningInfo.vue

@@ -54,7 +54,7 @@
             <img :src="getWarningIcon(scope.row.disasterType)" alt="预警图标" class="weather-warning-icon" />
           </template>
           <template #disasterType="scope">
-            <span>{{ getDisasterType(scope.row.disasterType) }}</span>
+            <span>{{ getWarningType(scope.row.disasterType) }}</span>
           </template>
           <template #disasterLevel="scope">
             <span>{{ getDisasterLevel(scope.row.disasterLevel) }}</span>
@@ -90,6 +90,7 @@
                 @click="handleEditWarningInfo(scope.row.id)"
                 v-if="scope.row.effectState === ACTIVE_STATUS.NOT_EFFECTIVE"
               />
+              <ActionButton text="查看" @click="handleViewWarningInfo(scope.row.id)" />
               <ActionButton
                 text="发布"
                 :popconfirm="{
@@ -152,8 +153,15 @@
   } from './src/config';
 
   const { permissions } = useUserInfoHook();
-  const { warningTypeDice, disasterLevelDice, getWarningInfoDict, getDisasterLevelDict, getDisasterLevel } =
-    useDisasterWarningHook();
+  const {
+    warningTypeDice,
+    disasterLevelDice,
+    getWarningInfoDict,
+    getWarningType,
+    getWarningIcon,
+    getDisasterLevelDict,
+    getDisasterLevel,
+  } = useDisasterWarningHook();
 
   const router = useRouter();
   const contentMaxHeight = 50;
@@ -162,13 +170,6 @@
     disasterLevel: null,
     effectState: null,
   });
-  const getWarningIcon = (disasterCode: string) => {
-    const icon = warningTypeDice.value.find((item) => item.itemCode === disasterCode)?.imageUrl;
-    return icon;
-  };
-  const getDisasterType = (disasterCode: string) => {
-    return warningTypeDice.value.find((item) => item.itemCode === disasterCode)?.itemValue;
-  };
   const defaultName = 'warning-info-item';
   const handleCreateWarningInfo = () => {
     router.push({
@@ -187,6 +188,14 @@
       },
     });
   };
+  const handleViewWarningInfo = (id: number) => {
+    router.push({
+      name: defaultName,
+      query: {
+        id,
+      },
+    });
+  };
   const handlePublishWarningInfo = async (id: number, effectState: number) => {
     const message = effectState === ACTIVE_STATUS.ACTIVE ? '已取消发布' : '发布成功';
     const effectStateStatus = effectState === ACTIVE_STATUS.ACTIVE ? ACTIVE_STATUS.NOT_EFFECTIVE : ACTIVE_STATUS.ACTIVE;

src/views/disaster/disaster-warning/PageWarningInfoItem.vue

@@ -35,7 +35,7 @@
     } else if (operate === 'edit') {
       return `编辑${fixedTitle}`;
     }
-    return '未知操作';
+    return `${fixedTitle}详情`;
   });
   const dynamicComponent = computed(() => {
     if (operate === 'create') {
@@ -43,7 +43,7 @@
     } else if (operate === 'edit') {
       return defineAsyncComponent(() => import('./src/components/EditWarningInfoItem.vue'));
     } else {
-      return '';
+      return defineAsyncComponent(() => import('./src/components/ViewWarningInfoItem.vue'));
     }
   });
   const dynamicComponentRef = ref();

src/views/disaster/disaster-warning/src/components/ViewDefenseNoticeItem.vue

@@ -98,46 +98,7 @@
 </script>
 
 <style scoped lang="scss">
-  .info-container__header {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  .title {
-    font-size: 20px;
-    font-weight: 600;
-    color: rgba($text-color, 0.85);
-    margin-bottom: 18px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .disaster {
-    display: flex;
-    gap: 370px;
-    margin-bottom: 16px;
-  }
-  .info-item {
-    color: rgba($text-color, 0.85);
-  }
-  .info-content,
-  .content {
-    color: rgba($text-color, 0.65);
-  }
-
-  .content {
-    white-space: pre-wrap;
-    word-break: break-word;
-  }
-
-  .divider {
-    width: 100%;
-    height: 1px;
-    background-color: #979797;
-    opacity: 0.26;
-    margin-top: 18px;
-    margin-bottom: 18px;
-  }
+  @use '../style/view-common.scss' as *;
   .attachment {
     margin-top: 18px;
     a {

src/views/disaster/disaster-warning/src/components/ViewWarningInfoItem.vue

@@ -0,0 +1,61 @@
+<template>
+  <header class="info-container__header">
+    <span class="title">{{ getWarningType(warningInfoDetail?.disasterType || '') }}</span>
+    <div class="disaster">
+      <p class="info-item">
+        灾害等级：<span class="info-content">{{ getDisasterLevel(warningInfoDetail?.disasterLevel || '') }}</span>
+      </p>
+      <p class="info-item">
+        创建人：<span class="info-content">{{ warningInfoDetail?.realname }}</span>
+      </p>
+      <p class="info-item">
+        预警时间：<span class="info-content">{{ warningInfoDetail?.warnTime }}</span>
+      </p>
+      <p class="info-item">
+        信息来源：<span class="info-content">{{ warningInfoDetail?.source }}</span>
+      </p>
+    </div>
+  </header>
+  <section class="divider" />
+  <section class="content">
+    <div v-html="warningInfoDetail?.content"></div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { useDisasterWarningHook } from '../hook';
+  import type { WarningInfoDetailResponse } from '@/types/disaster-warning';
+  import { getWarningInfoDetail } from '@/api/disaster-warning';
+
+  const props = defineProps<{
+    id: number;
+  }>();
+
+  const { getWarningInfoDict, getWarningType, getDisasterLevelDict, getDisasterLevel } = useDisasterWarningHook();
+
+  const warningInfoDetail = ref<WarningInfoDetailResponse>();
+
+  onMounted(() => {
+    getWarningInfoDict();
+    getDisasterLevelDict();
+    getWarningInfoDetail(props.id).then((res) => {
+      warningInfoDetail.value = res;
+    });
+  });
+</script>
+
+<style scoped lang="scss">
+  @use '../style/view-common.scss' as *;
+  .disaster {
+    flex-wrap: wrap;
+    gap: 0;
+    margin-bottom: 0;
+  }
+  .info-item {
+    width: 50%;
+    &:nth-child(1) {
+      margin-bottom: 16px;
+    }
+  }
+</style>

src/views/disaster/disaster-warning/src/hook.ts

@@ -25,6 +25,12 @@ export const useDisasterWarningHook = () => {
     const disasterLevelRes = await queryDictTypeDetail(DICT_CODE.DISASTER_LEVEL);
     disasterLevelDice.value = disasterLevelRes.sysDictDataList;
   };
+  const getWarningType = (warningType: string) => {
+    return warningTypeDice.value.find((item) => item.itemCode === warningType)?.itemValue;
+  };
+  const getWarningIcon = (warningType: string) => {
+    return warningTypeDice.value.find((item) => item.itemCode === warningType)?.imageUrl;
+  };
   const getDisasterType = (disasterType: string) => {
     return disasterTypeDice.value.find((item) => item.itemCode === disasterType)?.itemValue;
   };
@@ -38,6 +44,8 @@ export const useDisasterWarningHook = () => {
     getWarningInfoDict,
     getDisasterTypeDict,
     getDisasterLevelDict,
+    getWarningType,
+    getWarningIcon,
     getDisasterType,
     getDisasterLevel,
   };

src/views/disaster/disaster-warning/src/style/view-common.scss

@@ -0,0 +1,41 @@
+@use '@/styles/variables.scss' as *;
+.info-container__header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  color: rgba($text-color, 0.85);
+  margin-bottom: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.disaster {
+  display: flex;
+  gap: 370px;
+  margin-bottom: 16px;
+}
+.info-item {
+  color: rgba($text-color, 0.85);
+}
+.info-content,
+.content {
+  color: rgba($text-color, 0.65);
+}
+
+.content {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: #979797;
+  opacity: 0.26;
+  margin-top: 18px;
+  margin-bottom: 18px;
+}