完成灾害防范所有表格

mock/disaster-control/table.ts

@@ -9,8 +9,9 @@ const disasterList = [
     endTime: '2024-03-20 10:00:00',
     disasterMaterial: [
       {
+        id: 1001,
         name: '台风灾害处置材料',
-        type: 'docx',
+        type: 'word',
         link: '',
       },
     ],
@@ -18,6 +19,48 @@ const disasterList = [
     activeStatus: 1,
     taskStage: 0,
   },
+  {
+    id: 1002,
+    disasterType: '台风',
+    disasterLevel: 'IV级/一般',
+    startTime: '2024-03-20 10:00:00',
+    endTime: '2024-03-20 10:00:00',
+    disasterMaterial: [
+      {
+        id: 1002,
+        name: '台风灾害处置材料',
+        type: 'ppt',
+        link: '',
+      },
+      {
+        id: 1003,
+        name: '台讯前期安全检查方案',
+        type: 'excel',
+        link: '',
+      },
+    ],
+    shouldCompleteTime: '2024-03-20 10:00:00',
+    activeStatus: 0,
+    taskStage: 0,
+  },
+  {
+    id: 1003,
+    disasterType: '台风',
+    disasterLevel: 'IV级/一般',
+    startTime: '2024-03-20 10:00:00',
+    endTime: '2024-03-20 10:00:00',
+    disasterMaterial: [
+      {
+        id: 1004,
+        name: '台风灾害处置材料',
+        type: 'pdf',
+        link: '',
+      },
+    ],
+    shouldCompleteTime: '2024-03-20 10:00:00',
+    activeStatus: 2,
+    taskStage: 1,
+  },
 ];
 
 export default [

mock/disaster-warning/table.ts

@@ -0,0 +1,86 @@
+import { resultSuccess } from '../_util';
+
+const warningInfoList = [
+  {
+    id: 1001,
+    warningIcon: '',
+    disasterType: '暴雨',
+    disasterLevel: '黄色',
+    warningTime: '2024-03-20 10:00:00',
+    warningContent: '上海市气象台7月12日1时发布暴雨黄色预警：未来两小时将有200毫米以上降水',
+    activeStatus: 0,
+    publishTime: '2024-03-20 10:00:00',
+    pushStatus: 0,
+  },
+  {
+    id: 1002,
+    warningIcon: '',
+    disasterType: '台风',
+    disasterLevel: '黄色',
+    warningTime: '2024-03-20 10:00:00',
+    warningContent: '上海市气象台7月12日1时发布台风黄色预警：预计未来24小时内将有特大暴雨',
+    activeStatus: 1,
+    publishTime: '2024-03-20 10:00:00',
+    pushStatus: 1,
+  },
+  {
+    id: 1003,
+    warningIcon: '',
+    disasterType: '高温',
+    disasterLevel: '红色',
+    warningTime: '2024-03-20 10:00:00',
+    warningContent: '上海市气象台7月12日1时发布高温红色预警：预计未来24小时内最高气温将升至40℃以上',
+    activeStatus: 2,
+    publishTime: '2024-03-20 10:00:00',
+    pushStatus: 1,
+  },
+];
+
+const defenseNoticeList = [
+  {
+    id: 1001,
+    noticeTitle: '上飞院关于加强防汛防台工作的通知',
+    disasterType: '暴雨',
+    disasterLevel: '黄色',
+    publishTime: '2024-03-20 10:00:00',
+    activeStatus: 0,
+    pushStatus: 0,
+  },
+  {
+    id: 1002,
+    noticeTitle: '上飞院关于加强防汛防台工作的通知',
+    disasterType: '台风',
+    disasterLevel: '黄色',
+    publishTime: '2024-03-20 10:00:00',
+    activeStatus: 1,
+    pushStatus: 1,
+  },
+  {
+    id: 1003,
+    noticeTitle: '上飞院关于加强防汛防台工作的通知',
+    disasterType: '高温',
+    disasterLevel: '红色',
+    publishTime: '2024-03-20 10:00:00',
+    activeStatus: 2,
+    pushStatus: 1,
+  },
+];
+
+export default [
+  {
+    url: '/eye_api_bak/api/admin/warning/getWarningInfoList',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      return resultSuccess(warningInfoList);
+    },
+  },
+  {
+    url: '/eye_api_bak/api/admin/warning/getDefenseNoticeList',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      return resultSuccess(defenseNoticeList);
+    },
+  },
+];

mock/login/routers.ts

@@ -44,7 +44,49 @@ const list = [
         redirect: '',
       },
       {
-        component: '/todo/todo',
+        children: [
+          {
+            component: '/disaster/disaster-warning/PageWarningInfo',
+            id: 1035,
+            meta: {
+              activeMenu: null,
+              alwaysShow: false,
+              frameSrc: '',
+              hidden: false,
+              icon: '',
+              isFrame: 0,
+              isRoot: false,
+              noCache: false,
+              query: '',
+              title: '预警信息',
+            },
+            name: '/disaster-prevention/disaster-warning/warning-info',
+            parentId: 1027,
+            path: 'warning-info',
+            redirect: '',
+          },
+          {
+            component: '/disaster/disaster-warning/PageDefenseNotice',
+            id: 1037,
+            meta: {
+              activeMenu: null,
+              alwaysShow: false,
+              frameSrc: '',
+              hidden: false,
+              icon: '',
+              isFrame: 0,
+              isRoot: false,
+              noCache: false,
+              query: '',
+              title: '防御通知',
+            },
+            name: '/disaster-prevention/disaster-warning/defense-notice',
+            parentId: 1027,
+            path: 'defense-notice',
+            redirect: '',
+          },
+        ],
+        component: '',
         id: 1027,
         meta: {
           activeMenu: null,

src/api/disaster-control/index.ts

@@ -0,0 +1,16 @@
+import { http } from '@/utils/http/axios';
+import type { DisasterControlTableDataResponse } from '@/types/disaster-control';
+/**
+ * 获取台风灾害管理表格数据
+ */
+export function getDisasterControlTableData() {
+  return http.request<DisasterControlTableDataResponse[]>(
+    {
+      url: 'admin/disaster/getDisasterList',
+      method: 'get',
+    },
+    {
+      ignoreTargetTenantId: true,
+    },
+  );
+}

src/api/disaster-warning/index.ts

@@ -0,0 +1,30 @@
+import { http } from '@/utils/http/axios';
+import type { WarningInfoListResponse, DefenseNoticeListResponse } from '@/types/disaster-warning';
+/**
+ * 获取预警信息列表
+ */
+export function getWarningInfoList() {
+  return http.request<WarningInfoListResponse[]>(
+    {
+      url: 'admin/warning/getWarningInfoList',
+      method: 'get',
+    },
+    {
+      ignoreTargetTenantId: true,
+    },
+  );
+}
+/**
+ * 获取防御通知列表
+ */
+export function getDefenseNoticeList() {
+  return http.request<DefenseNoticeListResponse[]>(
+    {
+      url: 'admin/warning/getDefenseNoticeList',
+      method: 'get',
+    },
+    {
+      ignoreTargetTenantId: true,
+    },
+  );
+}

src/components/ActionButton.vue

@@ -1,11 +1,30 @@
 <template>
-  <el-button v-bind="$attrs">{{ text }}</el-button>
+  <el-popconfirm
+    v-if="popconfirm"
+    :confirm-button-text="popconfirm.confirmText ? popconfirm.confirmText : '确定'"
+    :cancel-button-text="popconfirm.cancelText ? popconfirm.cancelText : '取消'"
+    :title="popconfirm.title"
+    @confirm="emits('confirm')"
+    @cancel="emits('cancel')"
+  >
+    <template #reference>
+      <el-button v-bind="$attrs">{{ text }}</el-button>
+    </template>
+  </el-popconfirm>
+  <el-button v-else v-bind="$attrs">{{ text }}</el-button>
 </template>
 
 <script lang="ts" setup>
+  interface PopconfirmProps {
+    title: string;
+    confirmText?: string;
+    cancelText?: string;
+  }
   defineProps<{
     text: string;
+    popconfirm?: PopconfirmProps;
   }>();
+  const emits = defineEmits(['confirm', 'cancel']);
 </script>
 
 <style lang="scss" scoped>

src/types/disaster-control/index.ts

@@ -0,0 +1,17 @@
+export interface DisasterMaterialList {
+  id: number;
+  name: string;
+  type: 'word' | 'excel' | 'ppt' | 'pdf';
+  link: string;
+}
+export interface DisasterControlTableDataResponse {
+  id: number;
+  disasterType: string;
+  disasterLevel: string;
+  startTime: string;
+  endTime: string;
+  disasterMaterial: DisasterMaterialList[];
+  shouldCompleteTime: string;
+  activeStatus: number;
+  taskStage: number;
+}

src/types/disaster-warning/index.ts

@@ -0,0 +1,17 @@
+interface BasicResponse {
+  id: number;
+  disasterType: string;
+  disasterLevel: string;
+  publishTime: string;
+  activeStatus: number;
+  pushStatus: number;
+}
+export interface WarningInfoListResponse extends BasicResponse {
+  warningIcon: string;
+  warningTime: string;
+  warningContent: string;
+}
+
+export interface DefenseNoticeListResponse extends BasicResponse {
+  noticeTitle: string;
+}

src/views/disaster/constant/index.ts

@@ -0,0 +1,55 @@
+/**
+ * 灾害防范通用常量
+ */
+
+// 生效状态
+export enum ACTIVE_STATUS {
+  INACTIVE = 0,
+  ACTIVE,
+  NOT_EFFECTIVE,
+}
+
+export const ACTIVE_STATUS_COLOR = {
+  [ACTIVE_STATUS.ACTIVE]: '#52c41a',
+  [ACTIVE_STATUS.INACTIVE]: '#ff4d4f',
+  [ACTIVE_STATUS.NOT_EFFECTIVE]: '#1890ff',
+};
+
+export const ACTIVE_STATUS_MAP: Record<number, string> = {
+  [ACTIVE_STATUS.ACTIVE]: '生效',
+  [ACTIVE_STATUS.INACTIVE]: '失效',
+  [ACTIVE_STATUS.NOT_EFFECTIVE]: '未生效',
+};
+
+export const ACTIVE_STATUS_OPTIONS_DEFAULT = [
+  {
+    label: '生效',
+    value: ACTIVE_STATUS.ACTIVE,
+  },
+  {
+    label: '失效',
+    value: ACTIVE_STATUS.INACTIVE,
+  },
+];
+
+export const ACTIVE_STATUS_OPTIONS_MANAGEMENT = [
+  {
+    label: '未生效',
+    value: ACTIVE_STATUS.NOT_EFFECTIVE,
+  },
+  ...ACTIVE_STATUS_OPTIONS_DEFAULT,
+];
+
+/**
+ * 文件类型图标
+ */
+import word from '@/assets/svg/word.svg';
+import excel from '@/assets/svg/excel.svg';
+import ppt from '@/assets/svg/ppt.svg';
+import pdf from '@/assets/svg/pdf.svg';
+export const FILE_TYPE_ICON = {
+  word: word,
+  excel: excel,
+  ppt: ppt,
+  pdf: pdf,
+};

src/views/disaster/disaster-control/PageDisasterControl.vue

@@ -1,28 +1,83 @@
 <template>
   <div class="disaster-precaution-container">
-    <header class="header">
-      <span class="title">灾后处置清单</span>
+    <header class="disaster-precaution-container__header">
+      <span class="disaster-precaution-container__title">灾后处置清单</span>
     </header>
-    <main class="main">
+    <main class="disaster-precaution-container__main">
       <div class="disaster-control-container">
         <header class="disaster-control__header">
           <el-button type="primary" class="disaster-control__header-button" :icon="Plus">创建灾害处置单</el-button>
           <Search />
         </header>
-        <BasicTable :table-config="tableConfig" :table-data="tableData"> </BasicTable>
+        <BasicTable
+          :table-config="tableConfig"
+          :table-data="tableData"
+          @update:pageSize="handleSizeChange"
+          @update:pageNumber="handleCurrentChange"
+        >
+          <template #disasterMaterial="scope">
+            <div class="disaster-material--div">
+              <div class="disaster-material--div__item" v-for="item in scope.row.disasterMaterial" :key="item.id">
+                <img :src="FILE_TYPE_ICON[item.type as keyof typeof FILE_TYPE_ICON]" alt="" />
+                <el-tooltip :content="item.name" placement="bottom" effect="light">
+                  <span>{{ item.name }}</span>
+                </el-tooltip>
+                <img :src="DownLoadIcon" alt="" class="download-icon" />
+              </div>
+            </div>
+          </template>
+          <template #activeStatus="scope">
+            <div class="active-status--div">
+              <div
+                class="dot"
+                :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.activeStatus as ACTIVE_STATUS] }"
+              ></div>
+              <span>{{ ACTIVE_STATUS_MAP[scope.row.activeStatus] }}</span>
+            </div>
+          </template>
+          <template #action="scope">
+            <ActionButton text="编辑" v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE" />
+            <ActionButton text="查看" />
+            <ActionButton
+              text="发布"
+              :popconfirm="{
+                title: '确定要发布?',
+              }"
+              v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
+            />
+            <ActionButton
+              text="取消发布"
+              :popconfirm="{
+                title: '确定要取消发布?',
+              }"
+              v-else-if="scope.row.activeStatus === ACTIVE_STATUS.ACTIVE"
+            />
+            <ActionButton
+              text="删除"
+              :popconfirm="{
+                title: '确定要删除?',
+              }"
+            />
+          </template>
+        </BasicTable>
       </div>
     </main>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, onMounted } from 'vue';
   import { Plus } from '@element-plus/icons-vue';
+  import DownLoadIcon from '@/assets/svg/download.svg';
   import Search from './src/components/Search.vue';
   import BasicTable from '@/components/BasicTable.vue';
+  import ActionButton from '@/components/ActionButton.vue';
   import type { TableColumnProps } from '@/types/basic-table';
   import useTableConfig from '@/hooks/useTableConfigHook';
-  const tableData = ref<any[]>([]);
+  import { getDisasterControlTableData } from '@/api/disaster-control';
+  import type { DisasterControlTableDataResponse } from '@/types/disaster-control';
+  import { ACTIVE_STATUS, ACTIVE_STATUS_COLOR, ACTIVE_STATUS_MAP, FILE_TYPE_ICON } from '@/views/disaster/constant';
+  const tableData = ref<DisasterControlTableDataResponse[]>([]);
   const columns: TableColumnProps[] = [
     {
       prop: 'disasterType',
@@ -31,53 +86,76 @@
     },
     {
       prop: 'disasterLevel',
-      label: '等级',
+      label: '灾害等级',
       align: 'center',
     },
     {
       prop: 'startTime',
       label: '开始时间',
       align: 'center',
+      width: '200cpx',
     },
     {
       prop: 'endTime',
       label: '结束时间',
       align: 'center',
+      width: '200cpx',
     },
     {
       prop: 'disasterMaterial',
       label: '处置材料',
       align: 'center',
       slot: 'disasterMaterial',
+      width: '200cpx',
     },
     {
       prop: 'shouldCompleteTime',
       label: '应完成时间',
       align: 'center',
-      slot: 'shouldCompleteTime',
+      width: '200cpx',
     },
     {
       prop: 'activeStatus',
       label: '生效状态',
       align: 'center',
       slot: 'activeStatus',
+      width: '120cpx',
     },
     {
       prop: 'action',
       label: '操作',
       align: 'center',
       slot: 'action',
-      width: '250cpx',
       fixed: 'right',
+      width: '250cpx',
     },
   ];
   const options = {
     emptyText: '暂无数据',
-    height: '64vh',
+    height: '63vh',
     loading: true,
     stripe: true,
   };
   const { tableConfig, pagination } = useTableConfig(columns, options);
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    tableConfig.loading = true;
+    getTableData();
+  };
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    tableConfig.loading = true;
+    getTableData();
+  };
+  const getTableData = async () => {
+    const res = await getDisasterControlTableData();
+    tableData.value = res;
+    pagination.total = tableData.value.length;
+    tableConfig.loading = false;
+  };
+  onMounted(() => {
+    getTableData();
+  });
 </script>
 
 <style lang="scss" scoped>
@@ -86,9 +164,31 @@
     font-size: 14cpx;
     margin-bottom: 20cpx;
   }
-  .disaster-control-container{
+  .disaster-control-container {
     display: flex;
     flex-direction: column;
     gap: 20cpx;
   }
+  .disaster-material--div {
+    display: flex;
+    flex-direction: column;
+    gap: 10cpx;
+    img {
+      width: 15cpx;
+      height: 15cpx;
+    }
+    &__item {
+      @include flex-center;
+      gap: 5cpx;
+      span {
+        width: 150cpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+  .download-icon {
+    cursor: pointer;
+  }
 </style>

src/views/disaster/disaster-control/src/components/Search.vue

@@ -14,9 +14,9 @@
         </el-select>
       </div>
       <div class="select-box--item">
-        <span>状态：</span>
+        <span>生效状态：</span>
         <el-select v-model="selectStatus" placeholder="请选择状态">
-          <el-option v-for="item in STATUS_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in ACTIVE_STATUS_OPTIONS_MANAGEMENT" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
       <div class="select-box--item">
@@ -42,6 +42,7 @@
 
 <script lang="ts" setup>
   import { ref } from 'vue';
+  import { ACTIVE_STATUS_OPTIONS_MANAGEMENT } from '@/views/disaster/constant';
   const selectDisasterType = ref('');
   // 根据字典配置
   const DISASTER_TYPE_OPTIONS = ref<{ label: string; value: string }[]>([]);
@@ -49,8 +50,6 @@
   // 根据字典配置
   const DISASTER_LEVEL_OPTIONS = ref<{ label: string; value: string }[]>([]);
   const selectStatus = ref('');
-  // 根据字典配置
-  const STATUS_OPTIONS = ref<{ label: string; value: string }[]>([]);
   const dateRange = ref<string[]>([]);
 </script>
 

src/views/disaster/disaster-precaution/PageTaskExecution.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="disaster-precaution-container">
-    <header class="header">
-      <span class="title">检查任务执行</span>
+    <header class="disaster-precaution-container__header">
+      <span class="disaster-precaution-container__title">检查任务执行</span>
       <el-tabs v-model="activeName">
         <el-tab-pane label="待执行任务" name="doing" />
         <el-tab-pane label="已提交任务" name="done" />
       </el-tabs>
     </header>
-    <main class="main">
+    <main class="disaster-precaution-container__main">
       <component :is="dynamicComponent" />
     </main>
   </div>
@@ -27,8 +27,7 @@
 
 <style lang="scss" scoped>
   @use '../style/disaster.scss' as *;
-  // override header padding
-  .header {
+  .disaster-precaution-container__header {
     padding: 16cpx 0 0 22cpx !important;
   }
   :deep(.el-tabs__header) {

src/views/disaster/disaster-precaution/PageTaskManagement.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="disaster-precaution-container">
-    <header class="header">
-      <span class="title">检查任务管理</span>
+    <header class="disaster-precaution-container__header">
+      <span class="disaster-precaution-container__title">检查任务管理</span>
     </header>
-    <main class="main">
+    <main class="disaster-precaution-container__main">
       <div class="disaster-precaution">
-        <header class="header" style="padding: 0 !important">
+        <header class="disaster-precaution__header">
           <el-button type="primary" :icon="Plus" class="create-task-btn">创建检查任务单</el-button>
           <Search type="management" />
         </header>
@@ -38,27 +38,27 @@
           <template #action="scope">
             <ActionButton text="编辑" v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE" />
             <ActionButton text="查看" />
-            <el-popconfirm
-              confirm-button-text="确定"
-              cancel-button-text="取消"
-              title="确定要发布?"
+            <ActionButton
+              text="发布"
+              :popconfirm="{
+                title: '确定要发布?',
+              }"
               v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
-            >
-              <template #reference>
-                <ActionButton text="发布" />
-              </template>
-            </el-popconfirm>
-            <el-popconfirm
-              confirm-button-text="确定"
-              cancel-button-text="取消"
-              title="确定要取消发布?"
+            />
+            <ActionButton
+              text="取消发布"
+              :popconfirm="{
+                title: '确定要取消发布?',
+              }"
               v-else-if="scope.row.activeStatus === ACTIVE_STATUS.ACTIVE"
-            >
-              <template #reference>
-                <ActionButton text="取消发布" />
-              </template>
-            </el-popconfirm>
-            <ActionButton text="删除" v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE" />
+            />
+            <ActionButton
+              text="删除"
+              :popconfirm="{
+                title: '确定要删除?',
+              }"
+              v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
+            />
           </template>
         </BasicTable>
       </div>
@@ -77,13 +77,8 @@
   import { getTaskManagementTableData } from '@/api/task-execution/tableData';
   import type { TaskExecutionTableData } from '@/types/task-execution/tableData';
   import OverdueIcon from '@/assets/svg/overdue.svg';
-  import {
-    OVERDUE_STATUS,
-    ACTIVE_STATUS,
-    ACTIVE_STATUS_MAP,
-    ACTIVE_STATUS_COLOR,
-    TASK_STAGE_MAP,
-  } from './src/constants/task-execution';
+  import { OVERDUE_STATUS, TASK_STAGE_MAP } from './src/constants/task-execution';
+  import { ACTIVE_STATUS, ACTIVE_STATUS_COLOR, ACTIVE_STATUS_MAP } from '@/views/disaster/constant';
   const tableData = ref<TaskExecutionTableData[]>([]);
   const columns: TableColumnProps[] = [
     {
@@ -130,7 +125,7 @@
   ];
   const options = {
     emptyText: '暂无数据',
-    height: '64vh',
+    height: '63vh',
     loading: true,
     stripe: true,
   };
@@ -147,7 +142,6 @@
   };
   const getTableData = async () => {
     const res = await getTaskManagementTableData();
-    console.log(res);
     tableData.value = res;
     pagination.total = tableData.value.length;
     tableConfig.loading = false;
@@ -158,11 +152,8 @@
 </script>
 
 <style scoped lang="scss">
-    @use '../style/disaster.scss' as *;
+  @use '../style/disaster.scss' as *;
   @use './src/style/task-execution.scss' as *;
-  .disaster-precaution {
-    gap: 20cpx !important;
-  }
   .create-task-btn {
     width: 150cpx;
     font-size: 14cpx;

src/views/disaster/disaster-precaution/PageTaskTemplate.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="disaster-precaution-container">
-    <header class="header">
-      <span class="title">灾害预防检查任务模板</span>
+    <header class="disaster-precaution-container__header">
+      <span class="disaster-precaution-container__title">灾害预防检查任务模板</span>
     </header>
-    <main class="main">
+    <main class="disaster-precaution-container__main">
       <div class="template-card-list">
         <div
           class="template-card-item"

src/views/disaster/disaster-precaution/PageTaskTemplateDetail.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="disaster-precaution-container">
-    <header class="header">
+    <header class="disaster-precaution-container__header">
       <img :src="BackIcon" alt="back" class="back-icon" @click="router.back()" />
-      <span class="title">{{ name }}</span>
+      <span class="disaster-precaution-container__title">{{ name }}</span>
     </header>
-    <main class="main">
+    <main class="disaster-precaution-container__main">
       <div class="template-container">
         <span class="title">被检查（自查）单位名称：</span>
         <TemplateTableMerge :operation-type="operationType" :main-table="data!" height="65vh" />
@@ -41,7 +41,7 @@
     width: 16cpx;
     cursor: pointer;
   }
-  .header {
+  .disaster-precaution-container__header {
     flex-direction: row !important;
     justify-content: flex-start !important;
     gap: 8cpx !important;

src/views/disaster/disaster-precaution/src/components/Search.vue

@@ -31,12 +31,11 @@
   import { ref, computed } from 'vue';
   import {
     TASK_TYPE_OPTIONS,
-    ACTIVE_STATUS_OPTIONS_DEFAULT,
-    ACTIVE_STATUS_OPTIONS_MANAGEMENT,
     TASK_STAGE_OPTIONS_DOING,
     TASK_STAGE_OPTIONS_DONE,
     TASK_STAGE_OPTIONS_MANAGEMENT,
   } from '../constants/task-execution';
+  import { ACTIVE_STATUS_OPTIONS_DEFAULT, ACTIVE_STATUS_OPTIONS_MANAGEMENT } from '@/views/disaster/constant';
   const selectTaskType = ref('');
   const selectActiveStatus = ref('');
   const selectTaskStage = ref('');
@@ -56,5 +55,5 @@
 </script>
 
 <style lang="scss" scoped>
-@use '@/views/disaster/style/search.scss' as *;
+  @use '@/views/disaster/style/search.scss' as *;
 </style>

src/views/disaster/disaster-precaution/src/components/TaskExecutionDoing.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="disaster-precaution">
-    <header class="header">
+    <header class="disaster-precaution__header">
       <Search type="doing" />
     </header>
     <BasicTable
@@ -46,14 +46,8 @@
   import Search from './Search.vue';
   import type { TableColumnProps } from '@/types/basic-table';
   import useTableConfig from '@/hooks/useTableConfigHook';
-  import {
-    ACTIVE_STATUS,
-    ACTIVE_STATUS_MAP,
-    ACTIVE_STATUS_COLOR,
-    TASK_STAGE_MAP,
-    TASK_STAGE_ACTION_TEXT,
-    OVERDUE_STATUS,
-  } from '../constants/task-execution';
+  import { TASK_STAGE_MAP, TASK_STAGE_ACTION_TEXT, OVERDUE_STATUS } from '../constants/task-execution';
+  import { ACTIVE_STATUS, ACTIVE_STATUS_MAP, ACTIVE_STATUS_COLOR } from '@/views/disaster/constant';
   import { getTaskExecutionDoingTableData } from '@/api/task-execution/tableData';
   import type { DoingTaskExecutionTableDataResponse } from '@/types/task-execution/tableData';
   import OverdueIcon from '@/assets/svg/overdue.svg';
@@ -101,7 +95,7 @@
   ];
   const options = {
     emptyText: '暂无数据',
-    height: '63vh',
+    height: '64vh',
     loading: true,
     stripe: true,
   };

src/views/disaster/disaster-precaution/src/components/TaskExecutionDone.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="disaster-precaution">
-    <header class="header">
+    <header class="disaster-precaution__header">
       <Search type="done" />
     </header>
     <BasicTable
@@ -31,19 +31,14 @@
       </template>
       <template #action="scope">
         <ActionButton text="查看" />
-        <el-popconfirm
-          confirm-button-text="确定"
-          cancel-button-text="取消"
-          title="是否撤回提交?"
+        <ActionButton
+          text="撤回"
+          :popconfirm="{
+            title: '是否撤回提交?',
+          }"
           @confirm="handleWithdraw(scope.row)"
-        >
-          <template #reference>
-            <ActionButton
-              text="撤回"
-              v-if="scope.row.taskStage !== TASK_STAGE.COMPLETED && scope.row.activeStatus === ACTIVE_STATUS.ACTIVE"
-            />
-          </template>
-        </el-popconfirm>
+          v-if="scope.row.taskStage !== TASK_STAGE.COMPLETED && scope.row.activeStatus === ACTIVE_STATUS.ACTIVE"
+        />
       </template>
     </BasicTable>
   </div>
@@ -56,14 +51,8 @@
   import Search from './Search.vue';
   import type { TableColumnProps } from '@/types/basic-table';
   import useTableConfig from '@/hooks/useTableConfigHook';
-  import {
-    ACTIVE_STATUS,
-    ACTIVE_STATUS_MAP,
-    ACTIVE_STATUS_COLOR,
-    TASK_STAGE,
-    TASK_STAGE_MAP,
-    OVERDUE_STATUS,
-  } from '../constants/task-execution';
+  import { TASK_STAGE, TASK_STAGE_MAP, OVERDUE_STATUS } from '../constants/task-execution';
+  import { ACTIVE_STATUS, ACTIVE_STATUS_MAP, ACTIVE_STATUS_COLOR } from '@/views/disaster/constant';
   import type { DoneTaskExecutionTableDataResponse } from '@/types/task-execution/tableData';
   import { getTaskExecutionDoneTableData } from '@/api/task-execution/tableData';
   const tableData = ref<DoneTaskExecutionTableDataResponse[]>([]);
@@ -118,7 +107,7 @@
   ];
   const options = {
     emptyText: '暂无数据',
-    height: '63vh',
+    height: '64vh',
     loading: true,
     stripe: true,
   };

src/views/disaster/disaster-precaution/src/constants/task-execution.ts

@@ -6,35 +6,18 @@ export enum TASK_TYPE {
   Midterm = 1,
   Later = 2,
 }
-export enum ACTIVE_STATUS {
-  INACTIVE = 0,
-  ACTIVE,
-  NOT_EFFECTIVE,
-}
 
 export enum OVERDUE_STATUS {
   OVERDUE = 1,
   NOT_OVERDUE = 0,
 }
 
-export const ACTIVE_STATUS_COLOR = {
-  [ACTIVE_STATUS.ACTIVE]: '#52c41a',
-  [ACTIVE_STATUS.INACTIVE]: '#ff4d4f',
-  [ACTIVE_STATUS.NOT_EFFECTIVE]: '#1890ff',
-};
-
 export const TASK_TYPE_MAP: Record<number, string> = {
   [TASK_TYPE.Previous]: '台讯前期',
   [TASK_TYPE.Midterm]: '台讯中期',
   [TASK_TYPE.Later]: '台讯后期',
 };
 
-export const ACTIVE_STATUS_MAP: Record<number, string> = {
-  [ACTIVE_STATUS.ACTIVE]: '生效',
-  [ACTIVE_STATUS.INACTIVE]: '失效',
-  [ACTIVE_STATUS.NOT_EFFECTIVE]: '未生效',
-};
-
 export enum TASK_STAGE {
   PENDING_CHECK = 0,
   PENDING_APPROVAL = 1,
@@ -72,32 +55,6 @@ export const TASK_TYPE_OPTIONS = [
   },
 ];
 
-export const ACTIVE_STATUS_OPTIONS_DEFAULT = [
-  {
-    label: '生效',
-    value: ACTIVE_STATUS.ACTIVE,
-  },
-  {
-    label: '失效',
-    value: ACTIVE_STATUS.INACTIVE,
-  },
-];
-
-export const ACTIVE_STATUS_OPTIONS_MANAGEMENT = [
-  {
-    label: '未生效',
-    value: ACTIVE_STATUS.NOT_EFFECTIVE,
-  },
-  {
-    label: '生效',
-    value: ACTIVE_STATUS.ACTIVE,
-  },
-  {
-    label: '失效',
-    value: ACTIVE_STATUS.INACTIVE,
-  },
-];
-
 export const TASK_STAGE_OPTIONS_DOING = [
   {
     label: '待检查',
@@ -137,16 +94,5 @@ export const TASK_STAGE_OPTIONS_MANAGEMENT = [
     label: '待检查',
     value: TASK_STAGE.PENDING_CHECK,
   },
-  {
-    label: '待审批',
-    value: TASK_STAGE.PENDING_APPROVAL,
-  },
-  {
-    label: '待复查',
-    value: TASK_STAGE.PENDING_REVIEW,
-  },
-  {
-    label: '已完成',
-    value: TASK_STAGE.COMPLETED,
-  },
+  ...TASK_STAGE_OPTIONS_DONE,
 ];

src/views/disaster/disaster-precaution/src/constants/template-detail.ts

@@ -178,12 +178,118 @@ export const MIDTERM_TEMPLATE_DATA = [
     actualSituation: '',
   },
   {
-    checkItem: '各类设施',
+    checkItem: '各类设施设备',
     checkStandard: '1.建筑、仓库、厂房检查门窗、玻璃是否完好，并全部关闭。',
     checkMethod: '现场、统计资料',
     compliance: null,
     actualSituation: '',
   },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '2.建筑、仓库、厂房屋顶无漏水，（硝盐炉）重点部位是否有应急防护措施。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '3.建筑、仓库、厂房面积较大的门，要在里面设置档杆或斜撑，防被吹坏措施。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '4.建筑、仓库、厂房检查大门遮雨棚是否有锈蚀、松动、断裂等异常，并及时排除加固。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '5.建筑、仓库、厂房关闭通风窗、排风孔，防止雨水进入厂房措施是否有效。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '6.建筑、仓库、厂房顶部物料、垃圾等是否清理完毕；悬挂物清理或加固。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard:
+      '7.防止库房积水（地势低洼的库房门口应设置足够高度防洪沙袋，沙袋间需加添黄土），地势低洼处库房内的电器设备要离开地面。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '8.交配电系统固定线路支架是否松动、断裂。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '9.交配电系统临时线路拆除，电线收好。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '10.室外配电箱（柜）门锁牢，并做好防雨措施，检查基座是否牢固，防止被风吹倒。配电板全部收回仓库。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '11.切断公司全部动力设备（照明电源除外）的电源。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '12.危险品库房、油库油罐、液化气站、天然气站等重点区域防雷接地装置完好可靠。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '13.建筑物和构筑物的防雷接地装置连接可靠。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '14.增加保安值班岗亭配重，棚顶四个角落采用绳索斜拉固定。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '15.检查车棚、风雨棚是否有锈蚀、松动、断裂等异常，并及时排除加固。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
+  {
+    checkItem: '各类设施设备',
+    checkStandard: '16.飞机等露天大型设施设备是否按要求采取系流等固定措施。',
+    checkMethod: '现场、统计资料',
+    compliance: null,
+    actualSituation: '',
+  },
   {
     checkItem: '周边环境',
     checkStandard:

src/views/disaster/disaster-precaution/src/style/task-execution.scss

@@ -1,12 +1,16 @@
 @use '@/styles/variables.scss' as *;
+@use '@/views/disaster/style/disaster.scss' as *;
 
 .disaster-precaution {
   @include flex-center;
   flex-direction: column;
-  gap: 32cpx;
+  gap: 20cpx;
   width: 100%;
   height: 100%;
-  .header {
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: 20cpx;
     width: 100%;
   }
 }
@@ -21,14 +25,3 @@
     text-overflow: ellipsis;
   }
 }
-
-.active-status--div {
-  @include flex-center;
-  width: 100%;
-  gap: 8cpx;
-  .dot {
-    width: 6cpx;
-    height: 6cpx;
-    border-radius: 50%;
-  }
-}

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

@@ -0,0 +1,158 @@
+<template>
+  <div class="disaster-precaution-container">
+    <header class="disaster-precaution-container__header">
+      <span class="disaster-precaution-container__title">防御通知管理列表</span>
+    </header>
+    <main class="disaster-precaution-container__main">
+      <div class="defense-notice-container">
+        <header class="defense-notice-container__header">
+          <el-button type="primary" class="defense-notice__header-button" :icon="Plus">创建灾害防御通知</el-button>
+          <Search />
+        </header>
+        <BasicTable
+          :tableConfig="tableConfig"
+          :tableData="tableData"
+          @update:pageSize="handleSizeChange"
+          @update:pageNumber="handleCurrentChange"
+        >
+          <template #activeStatus="scope">
+            <div class="active-status--div">
+              <div
+                class="dot"
+                :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.activeStatus as ACTIVE_STATUS] }"
+              ></div>
+              <span>{{ ACTIVE_STATUS_MAP[scope.row.activeStatus] }}</span>
+            </div>
+          </template>
+          <template #pushStatus="scope">
+            <span :style="{ color: scope.row.pushStatus === PUSH_STATUS.PUSHED ? '' : '#ff4d4f' }">
+              {{ PUSH_STATUS_MAP[scope.row.pushStatus as PUSH_STATUS] }}
+            </span>
+          </template>
+          <template #action="scope">
+            <ActionButton text="编辑" v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE" />
+            <ActionButton text="查看" />
+            <ActionButton
+              text="发布"
+              :popconfirm="{
+                title: '确定要发布?',
+              }"
+              v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
+            />
+            <ActionButton
+              text="取消发布"
+              :popconfirm="{
+                title: '确定要取消发布?',
+              }"
+              v-else-if="scope.row.activeStatus === ACTIVE_STATUS.ACTIVE"
+            />
+            <ActionButton
+              text="删除"
+              :popconfirm="{
+                title: '确定要删除?',
+              }"
+            />
+          </template>
+        </BasicTable>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { Plus } from '@element-plus/icons-vue';
+  import Search from './src/components/Search.vue';
+  import BasicTable from '@/components/BasicTable.vue';
+  import ActionButton from '@/components/ActionButton.vue';
+  import type { TableColumnProps } from '@/types/basic-table';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import { getDefenseNoticeList } from '@/api/disaster-warning';
+  import type { DefenseNoticeListResponse } from '@/types/disaster-warning';
+  import { ACTIVE_STATUS, ACTIVE_STATUS_COLOR, ACTIVE_STATUS_MAP } from '@/views/disaster/constant';
+  import { PUSH_STATUS_MAP, PUSH_STATUS } from './src/constant';
+  const tableData = ref<DefenseNoticeListResponse[]>([]);
+  const columns: TableColumnProps[] = [
+    {
+      prop: 'noticeTitle',
+      label: '通知标题',
+      align: 'center',
+    },
+    {
+      prop: 'disasterType',
+      label: '灾害类型',
+      align: 'center',
+    },
+    {
+      prop: 'disasterLevel',
+      label: '灾害等级',
+      align: 'center',
+    },
+    {
+      prop: 'publishTime',
+      label: '发布时间',
+      align: 'center',
+      width: '200cpx',
+    },
+    {
+      prop: 'activeStatus',
+      label: '生效状态',
+      align: 'center',
+      slot: 'activeStatus',
+      width: '120cpx',
+    },
+    {
+      prop: 'pushStatus',
+      label: '推送',
+      align: 'center',
+      slot: 'pushStatus',
+    },
+    {
+      prop: 'action',
+      label: '操作',
+      align: 'center',
+      slot: 'action',
+      fixed: 'right',
+      width: '250cpx',
+    },
+  ];
+  const options = {
+    emptyText: '暂无数据',
+    height: '63vh',
+    loading: true,
+    stripe: true,
+  };
+  const { tableConfig, pagination } = useTableConfig(columns, options);
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    tableConfig.loading = true;
+    getTableData();
+  };
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    tableConfig.loading = true;
+    getTableData();
+  };
+  const getTableData = async () => {
+    const res = await getDefenseNoticeList();
+    tableData.value = res;
+    pagination.total = tableData.value.length;
+    tableConfig.loading = false;
+  };
+  onMounted(() => {
+    getTableData();
+  });
+</script>
+
+<style lang="scss" scoped>
+  @use '../style/disaster.scss' as *;
+  .defense-notice-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20cpx;
+  }
+  .defense-notice__header-button {
+    font-size: 14cpx;
+    margin-bottom: 20cpx;
+  }
+</style>

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

@@ -0,0 +1,167 @@
+<template>
+  <div class="disaster-precaution-container">
+    <header class="disaster-precaution-container__header">
+      <span class="disaster-precaution-container__title">预警信息列表</span>
+    </header>
+    <main class="disaster-precaution-container__main">
+      <div class="warning-info-container">
+        <header class="warning-info-container__header">
+          <Search />
+        </header>
+        <BasicTable
+          :tableConfig="tableConfig"
+          :tableData="tableData"
+          @update:pageSize="handleSizeChange"
+          @update:pageNumber="handleCurrentChange"
+        >
+          <template #warningIcon="scope">
+            <img :src="scope.row.warningIcon ? scope.row.warningIcon : PlaceHolderWeather" alt="预警图标" />
+          </template>
+          <template #activeStatus="scope">
+            <div class="active-status--div">
+              <div
+                class="dot"
+                :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.activeStatus as ACTIVE_STATUS] }"
+              ></div>
+              <span>{{ ACTIVE_STATUS_MAP[scope.row.activeStatus] }}</span>
+            </div>
+          </template>
+          <template #pushStatus="scope">
+            <span :style="{ color: scope.row.pushStatus === PUSH_STATUS.PUSHED ? '' : '#ff4d4f' }">
+              {{ PUSH_STATUS_MAP[scope.row.pushStatus as PUSH_STATUS] }}
+            </span>
+          </template>
+          <template #action="scope">
+            <ActionButton
+              text="发布"
+              :popconfirm="{
+                title: '确定要发布?',
+              }"
+              v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
+            />
+            <ActionButton
+              text="取消发布"
+              :popconfirm="{
+                title: '确定要取消发布?',
+              }"
+              v-else-if="scope.row.activeStatus === ACTIVE_STATUS.ACTIVE"
+            />
+            <ActionButton
+              text="删除"
+              :popconfirm="{
+                title: '确定要删除?',
+              }"
+            />
+          </template>
+        </BasicTable>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import Search from './src/components/Search.vue';
+  import BasicTable from '@/components/BasicTable.vue';
+  import ActionButton from '@/components/ActionButton.vue';
+  import type { TableColumnProps } from '@/types/basic-table';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import { getWarningInfoList } from '@/api/disaster-warning';
+  import type { WarningInfoListResponse } from '@/types/disaster-warning';
+  import { ACTIVE_STATUS, ACTIVE_STATUS_COLOR, ACTIVE_STATUS_MAP } from '@/views/disaster/constant';
+  import PlaceHolderWeather from './src/images/placeholder-weather@1X.png';
+  import { PUSH_STATUS_MAP, PUSH_STATUS } from './src/constant';
+  const tableData = ref<WarningInfoListResponse[]>([]);
+  const columns: TableColumnProps[] = [
+    {
+      prop: 'warningIcon',
+      label: '预警图标',
+      align: 'center',
+      slot: 'warningIcon',
+    },
+    {
+      prop: 'disasterType',
+      label: '灾害类型',
+      align: 'center',
+    },
+    {
+      prop: 'disasterLevel',
+      label: '灾害等级',
+      align: 'center',
+    },
+    {
+      prop: 'warningTime',
+      label: '预警时间',
+      align: 'center',
+      width: '200cpx',
+    },
+    {
+      prop: 'warningContent',
+      label: '发布内容',
+      align: 'center',
+      width: '200cpx',
+    },
+    {
+      prop: 'activeStatus',
+      label: '生效状态',
+      align: 'center',
+      slot: 'activeStatus',
+      width: '120cpx',
+    },
+    {
+      prop: 'publishTime',
+      label: '发布时间',
+      align: 'center',
+      width: '200cpx',
+    },
+    {
+      prop: 'pushStatus',
+      label: '推送',
+      align: 'center',
+      slot: 'pushStatus',
+    },
+    {
+      prop: 'action',
+      label: '操作',
+      align: 'center',
+      slot: 'action',
+      fixed: 'right',
+      width: '250cpx',
+    },
+  ];
+  const options = {
+    emptyText: '暂无数据',
+    height: '68vh',
+    loading: true,
+    stripe: true,
+  };
+  const { tableConfig, pagination } = useTableConfig(columns, options);
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    tableConfig.loading = true;
+    getTableData();
+  };
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    tableConfig.loading = true;
+    getTableData();
+  };
+  const getTableData = async () => {
+    const res = await getWarningInfoList();
+    tableData.value = res;
+    pagination.total = tableData.value.length;
+    tableConfig.loading = false;
+  };
+  onMounted(() => {
+    getTableData();
+  });
+</script>
+
+<style lang="scss" scoped>
+  @use '../style/disaster.scss' as *;
+  .warning-info-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20cpx;
+  }
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <div class="search-box">
+    <section class="select-box">
+      <div class="select-box--item">
+        <span>灾害类型：</span>
+        <el-select v-model="selectDisasterType" placeholder="请选择灾害类型">
+          <el-option v-for="item in DISASTER_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <div class="select-box--item">
+        <span>灾害等级：</span>
+        <el-select v-model="selectDisasterLevel" placeholder="请选择灾害等级">
+          <el-option v-for="item in DISASTER_LEVEL_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <div class="select-box--item">
+        <span>生效状态：</span>
+        <el-select v-model="selectStatus" placeholder="请选择状态">
+          <el-option v-for="item in ACTIVE_STATUS_OPTIONS_MANAGEMENT" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+    </section>
+    <section class="search-btn">
+      <el-button type="primary">查询</el-button>
+      <el-button>重置</el-button>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ACTIVE_STATUS_OPTIONS_MANAGEMENT } from '@/views/disaster/constant';
+  const selectDisasterType = ref('');
+  // 根据字典配置
+  const DISASTER_TYPE_OPTIONS = ref<{ label: string; value: string }[]>([]);
+  const selectDisasterLevel = ref('');
+  // 根据字典配置
+  const DISASTER_LEVEL_OPTIONS = ref<{ label: string; value: string }[]>([]);
+  const selectStatus = ref('');
+</script>
+
+<style lang="scss" scoped>
+  @use '@/views/disaster/style/search.scss' as *;
+</style>

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

@@ -0,0 +1,8 @@
+export enum PUSH_STATUS {
+  NOT_PUSH = 0,
+  PUSHED,
+}
+export const PUSH_STATUS_MAP = {
+  [PUSH_STATUS.NOT_PUSH]: '否',
+  [PUSH_STATUS.PUSHED]: '是',
+};

src/views/disaster/style/disaster.scss

@@ -6,26 +6,37 @@
   width: 100%;
   height: 100%;
   background: #eee;
-  .main,
-  .header {
+  &__main,
+  &__header {
     width: calc(100vw - 310cpx);
     background-color: $white-color;
     border-radius: 4cpx;
   }
-  .header {
+  &__header {
     display: flex;
     flex-direction: column;
     gap: 16cpx;
     justify-content: space-between;
     padding: 16cpx 0 16cpx 22cpx;
-    .title {
-      font-size: 20cpx;
-      font-weight: 600;
-      color: rgba(0, 0, 0, 0.85);
-    }
   }
-  .main {
+  &__title {
+    font-size: 20cpx;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+  }
+  &__main {
     flex: 1;
     padding: 20cpx;
   }
 }
+
+.active-status--div {
+  @include flex-center;
+  width: 100%;
+  gap: 8cpx;
+  .dot {
+    width: 6cpx;
+    height: 6cpx;
+    border-radius: 50%;
+  }
+}

src/views/disaster/style/search.scss

@@ -3,7 +3,6 @@
   @include flex-center;
   justify-content: space-between;
   width: 100%;
-  height: 100%;
 }
 .select-box {
   display: flex;