Merge branch 'cc-dev' into 'dev'

添加messagebox样式

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

src/api/disaster-control/index.ts

@@ -138,6 +138,18 @@ export const addReporter = (reportTaskId: number, reporterIds: number[]) => {
   });
 };
 
+/**
+ * 添加整改人
+ */
+export const addFixer = (reportRecordId: number, fixPrincipals: number[]) => {
+  return http.request({
+    url: `/disasterHandle/addLossRecordFixPrincipals?reportRecordId=${reportRecordId}&fixPrincipals=${fixPrincipals.join(
+      ',',
+    )}`,
+    method: 'post',
+  });
+};
+
 /**
  * 创建损失记录
  */

src/router/full-routes.ts

@@ -421,6 +421,26 @@ export const disasterPreventionRoute = {
           path: 'disposal-rectification',
           redirect: '',
         },
+        {
+          component: '/disaster/disaster-control/PageDisposalRectificationItem',
+          id: 1044,
+          meta: {
+            activeMenu: '/disaster-prevention/disaster-control/disposal-rectification',
+            alwaysShow: false,
+            frameSrc: '',
+            hidden: false,
+            icon: '',
+            isFrame: 0,
+            isRoot: false,
+            noCache: false,
+            query: '',
+            title: '整改处理',
+          },
+          name: 'disaster-control-disposal-rectification-item',
+          parentId: 1027,
+          path: 'disposal-rectification-item/:id',
+          redirect: '',
+        },
       ],
       component: '',
       id: 1032,

src/styles/custom-component.scss

@@ -18,3 +18,64 @@
     overflow-y: auto;
   }
 }
+
+$message-box-content-padding--default: 0;
+$message-box-content-padding--icon: 36px;
+
+.customMessageBox {
+  padding: 20px 24px !important;
+  border-radius: 8px !important;
+  color: rgba(0, 0, 0, 0.88);
+  .el-message-box__title {
+    display: flex;
+    align-items: center;
+    font-weight: 550;
+    font-size: 16px;
+  }
+  .el-message-box__content {
+    font-size: 14px;
+  }
+}
+
+.customMessageBox--default {
+  @extend .customMessageBox;
+  .el-message-box__content {
+    padding-left: $message-box-content-padding--default;
+  }
+}
+
+.customMessageBox--icon {
+  @extend .customMessageBox;
+  .el-message-box__title::before {
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 12px;
+    background-size: 100% 100%;
+  }
+  .el-message-box__content {
+    padding-left: $message-box-content-padding--icon;
+  }
+}
+
+.customMessageBox--weak {
+  @extend .customMessageBox--icon;
+  .el-message-box__title::before {
+    background-image: url('@/assets/images/message-box/weak@1X.png');
+  }
+}
+
+.customMessageBox--warn {
+  @extend .customMessageBox--icon;
+  .el-message-box__title::before {
+    background-image: url('@/assets/images/message-box/warn@1X.png');
+  }
+}
+
+.customMessageBox--strong {
+  @extend .customMessageBox--icon;
+  .el-message-box__title::before {
+    background-image: url('@/assets/images/message-box/strong@1X.png');
+  }
+}

src/types/disaster-control/index.ts

@@ -22,7 +22,8 @@ export interface DisposalManagementTableQuery extends DisposalManagementListQuer
 export interface LossRecordTableQuery {
   handleTaskIds: number[];
   handleDeptIds?: number[];
-  fixStatus?: string;
+  fixStatus?: string | null;
+  isLoss?: number;
 }
 
 interface BasicResponse {
@@ -33,8 +34,10 @@ interface BasicResponse {
 
 export interface DisposalManagementListResponse {
   id: number;
+  handleTaskId: number;
   taskName: string;
   updatedAt: string;
+  dueCompleteTime: string;
 }
 
 export interface DisposalManagementCollapseListResponse<T> extends DisposalManagementListResponse {
@@ -63,6 +66,12 @@ export interface disasterReportRecordDetailListResponse {
   createdBy: string;
   images: string;
   fixerList: string;
+  isFixPrincipal: boolean; //是否整改责任人
+  safetyLevel: string;
+  isAffectWork: number | null;
+  estimatedLoss: string | null;
+  description: string;
+  remark: string;
 }
 
 export interface DisposalManagementTableResponse {
@@ -76,6 +85,7 @@ export interface LossRecordTableResponse {
 }
 
 export interface LossReportReportTaskResponse extends BasicResponse {
+  id: number;
   handleTaskId: number;
   taskName: string;
   isReportPrincipal: boolean; //是否上报责任人
@@ -124,17 +134,19 @@ export interface DisposalManagementRuleFormEdit extends Omit<DisposalManagementC
 export interface LossReportItemFormData
   extends Omit<
     disasterReportRecordDetailListResponse,
-    'id' | 'updatedAt' | 'responsibleDeptName' | 'fixStatus' | 'userGroupList' | 'images' | 'fixerList'
+    | 'id'
+    | 'updatedAt'
+    | 'responsibleDeptName'
+    | 'fixStatus'
+    | 'userGroupList'
+    | 'images'
+    | 'fixerList'
+    | 'isFixPrincipal'
   > {
   reportTaskName: string;
-  description: string;
-  safetyLevel: string;
-  isAffectWork: number | null;
-  estimatedLoss: string | null;
   responsibleDeptId: number | null;
   userGroupList: number[];
   isPush: number;
-  remark: string;
   affectedRoom: string; //自己创造的一个数值，不要传给后端
   images: string[];
   uploadImages: File[];

src/views/disaster/components/Search.vue

@@ -39,7 +39,7 @@
   };
   const handleReset = () => {
     for (const key in props.searchData) {
-      props.searchData[key] = '';
+      props.searchData[key] = null;
     }
     emit('update:searchData');
   };

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

@@ -378,7 +378,7 @@
   };
 
   const handleBatchRelease = async (id: number) => {
-    const confirmed = await openMessageBox('确定发布吗？');
+    const confirmed = await openMessageBox('','确定发布吗？','warn');
     if (!confirmed) return;
     await publishDisasterHandleTask(id);
     ElMessage.success('发布成功');
@@ -387,7 +387,7 @@
   };
 
   const handleBatchWithdraw = async (id: number) => {
-    const confirmed = await openMessageBox('确定撤回吗？');
+    const confirmed = await openMessageBox('','确定撤回吗？','warn');
     if (!confirmed) return;
     await withdrawDisasterHandleTask(id);
     ElMessage.success('撤回成功');
@@ -396,7 +396,7 @@
   };
 
   const handleBatchDelete = async (id: number) => {
-    const confirmed = await openMessageBox('确定删除吗？');
+    const confirmed = await openMessageBox('','确定删除吗？','warn');
     if (!confirmed) return;
     await deleteDisasterHandleTask(id);
     ElMessage.success('删除成功');

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

@@ -71,13 +71,29 @@
                       <span v-else>--</span>
                     </template>
                     <template #action="scope">
-                      <ActionButton text="查看" />
-                      <ActionButton text="去整改" />
-                      <ActionButton
-                        text="添加整改人"
-                        v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED"
-                        @click="handleAddFixer(scope.row.id, scope.row.fixerList)"
-                      />
+                      <div class="action-container" v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED">
+                        <ActionButton text="查看" />
+                        <ActionButton
+                          text="去整改"
+                          @click="
+                            handleRectification(scope.row.id, item.id, item.tableData[0].disasterReportRecordDetailList)
+                          "
+                        />
+                        <ActionButton
+                          text="添加整改人"
+                          v-if="scope.row.isFixPrincipal"
+                          @click="handleAddFixer(scope.row.id, scope.row.fixerList)"
+                        />
+                      </div>
+                      <div class="action-container" v-else>
+                        <ActionButton text="查看" />
+                        <ActionButton
+                          text="去整改"
+                          @click="
+                            handleRectification(scope.row.id, item.id, item.tableData[0].disasterReportRecordDetailList)
+                          "
+                        />
+                      </div>
                     </template>
                   </BasicTable>
                 </template>
@@ -100,7 +116,11 @@
       </div>
     </main>
     <el-dialog v-model="userInfo" title="添加整改人" destroy-on-close>
-      <InspectorSelect :customUserList="currentTaskInspectorList" @cancel="userInfo = false" />
+      <InspectorSelect
+        :customUserList="currentTaskInspectorList"
+        @cancel="userInfo = false"
+        @submit="handleAddFixerSubmit"
+      />
     </el-dialog>
   </div>
 </template>
@@ -111,10 +131,14 @@
   import BasicTable from '@/components/BasicTable.vue';
   import InspectorSelect from '@/views/disaster/components/InspectorSelect.vue';
   import { nextTick, onMounted, reactive, ref } from 'vue';
-  import { getDisasterControlCollapseData, getLossRecordTableData } from '@/api/disaster-control';
+  import { getDisasterControlCollapseData, getLossRecordTableData, addFixer } from '@/api/disaster-control';
   import type { disasterReportTaskInfoListResponse } from '@/types/disaster-control';
   import { DEFAULT_PAGE_SIZE, DISASTER_CONTROL_PAGE_SIZE_CONFIG, FIX_STATUS } from './src/constant';
-  import type { DisposalManagementCollapseListResponse, LossRecordTableResponse } from '@/types/disaster-control';
+  import type {
+    DisposalManagementCollapseListResponse,
+    LossRecordTableResponse,
+    disasterReportRecordDetailListResponse,
+  } from '@/types/disaster-control';
   import useTableConfig from '@/hooks/useTableConfigHook';
   import {
     DISPOSAL_RECTIFICATION_SEARCH_CONFIG,
@@ -130,13 +154,15 @@
   import { useDisasterControlHook } from './src/hook';
   import type { PersonGroupItem } from '@/types/person-group/type';
   import { queryUserInfoByIds } from '@/api/system/person-group';
+  import { ElMessage } from 'element-plus';
 
   const { getPriority, getPriorityDict, priorityDice } = useDisasterControlHook();
   const collapseItemRef = ref<InstanceType<typeof CollapseItem>[]>([]);
 
   const searchData = reactive({
-    priority: '',
+    priority: null,
     fixStatus: '',
+    isLoss: 1,
   });
 
   const userInfo = ref(false);
@@ -164,6 +190,7 @@
   };
 
   const handleSearch = () => {
+    searchData.isLoss = 1;
     getDisposalTableData();
   };
 
@@ -231,6 +258,35 @@
     userInfo.value = true;
   };
 
+  const handleAddFixerSubmit = async (ids: number[]) => {
+    if (!currentTaskId.value) return;
+    await addFixer(currentTaskId.value, ids);
+    ElMessage.success('添加整改人成功');
+    userInfo.value = false;
+    getDisposalTableData();
+  };
+
+  const defaultRouterName = 'disaster-control-disposal-rectification-item';
+  const handleRectification = (
+    id: number,
+    handleTaskId: number,
+    detailList: disasterReportRecordDetailListResponse[],
+  ) => {
+    const rectificationIds = detailList
+      .filter((item) => item.fixStatus === FIX_STATUS.TO_BE_RECTIFIED)
+      .map((item) => item.id);
+    sessionStorage.setItem('rectificationIds', JSON.stringify(rectificationIds));
+    router.push({
+      name: defaultRouterName,
+      params: {
+        id,
+      },
+      query: {
+        handleTaskId,
+      },
+    });
+  };
+
   const isViewTask = (disasterReportTaskInfoList: disasterReportTaskInfoListResponse[]) => {
     return disasterReportTaskInfoList.some((item) => item.status === ACTIVE_STATUS.ACTIVE);
   };

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

@@ -0,0 +1,136 @@
+<template>
+  <div class="disaster-precaution-container">
+    <header class="disaster-precaution-container__header">
+      <img :src="BackIcon" alt="back" class="back-icon" @click="router.back()" />
+      <span class="disaster-precaution-container__title">整改处理</span>
+    </header>
+    <main class="disaster-precaution-container__main">
+      <section class="disaster-information">
+        <div class="disaster-information__title">
+          <div class="disaster-information--line"></div>
+          <span>受灾信息</span>
+        </div>
+        <div class="disaster-information__content">
+          <section class="disaster-information__content--loss" v-if="LossReportItemFormData?.isLoss">
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <div class="disaster-information__content--item">
+                  <span class="label">受灾物品：</span>
+                  <span class="value">{{ LossReportItemFormData?.affectedItems }}</span>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="disaster-information__content--item">
+                  <span class="label">地点：</span>
+                  <span class="value">
+                    {{ LossReportItemFormData?.buildingNo }}
+                    {{ LossReportItemFormData?.floorNo }}
+                    {{ LossReportItemFormData?.roomNo }}
+                  </span>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="disaster-information__content--item">
+                  <span class="label">上报时间：</span>
+                  <span class="value">{{ LossReportItemFormData?.updatedAt }}</span>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <div class="disaster-information__content--item">
+                  <span class="label">影响安全评估：</span>
+                  <span class="value">{{ getSafetyLevel(LossReportItemFormData?.safetyLevel) }}</span>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="disaster-information__content--item">
+                  <span class="label">是否影响正常工作：</span>
+                  <span class="value">
+                    {{ LossReportItemFormData?.isAffectWork === 1 ? '是' : '否' }}
+                  </span>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="disaster-information__content--item" v-if="LossReportItemFormData?.estimatedLoss">
+                  <span class="label">损失金额评估：</span>
+                  <span class="value">{{ LossReportItemFormData?.estimatedLoss }}元</span>
+                </div>
+              </el-col>
+            </el-row>
+            <div class="disaster-information__content--item">
+              <span class="label">损失描述：</span>
+              <span class="value">{{ LossReportItemFormData?.description }}</span>
+            </div>
+            <div class="disaster-information__content--item" v-if="LossReportItemFormData?.images">
+              <span class="label">受灾图片：</span>
+              <div class="image-container">
+                <el-image
+                  v-for="(image, index) in JSON.parse(LossReportItemFormData?.images)"
+                  :key="index"
+                  :src="image"
+                  :zoom-rate="1.2"
+                  :max-scale="7"
+                  :min-scale="0.2"
+                  :preview-src-list="JSON.parse(LossReportItemFormData?.images)"
+                  show-progress
+                  :initial-index="index"
+                  fit="contain"
+                />
+              </div>
+            </div>
+            <div class="disaster-information__content--item" v-if="LossReportItemFormData?.remark">
+              <span class="label">备注：</span>
+              <span class="value">{{ LossReportItemFormData?.remark }}</span>
+            </div>
+          </section>
+        </div>
+      </section>
+      <section class="disaster-information">
+        <div class="disaster-information__title">
+          <div class="disaster-information--line"></div>
+          <span>整改处理</span>
+        </div>
+      </section>
+    </main>
+    <footer class="disaster-precaution-container__footer"> </footer>
+    <UploadLoading :form-loading="formLoading" v-if="formLoading" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import BackIcon from 'assets/svg/back.svg';
+  import { useRoute, useRouter } from 'vue-router';
+  import UploadLoading from '@/components/UploadLoading.vue';
+  import { ref, onMounted } from 'vue';
+  import { useDisasterControlHook } from './src/hook';
+  import type { disasterReportRecordDetailListResponse } from '@/types/disaster-control';
+
+  const LossReportItemFormData = ref<disasterReportRecordDetailListResponse>();
+  const { getLossReportItem, getSafetyLevel, getSafetyLevelDict } = useDisasterControlHook();
+
+  const router = useRouter();
+  const route = useRoute();
+  const id = Number(route.params.id);
+  const handleTaskId = Number(route.query.handleTaskId);
+  const formLoading = ref(false);
+  const getLossReportItemData = async () => {
+    const res = await getLossReportItem(handleTaskId, id);
+    LossReportItemFormData.value = res;
+  };
+  onMounted(() => {
+    getLossReportItemData();
+    getSafetyLevelDict();
+  });
+</script>
+
+<style lang="scss" scoped>
+  @use '../style/disaster.scss' as *;
+  @use './src/style/common.scss' as *;
+  @use './src//style/view-item.scss' as *;
+  .disaster-precaution-container__main {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 30px !important;
+  }
+</style>

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

@@ -191,6 +191,8 @@
   const initFormData = () => {
     uploadImagesRef.value?.removeAllImages();
     basicFormRef.value?.clearValidate();
+    ruleFormData.estimatedLoss = '';
+    ruleFormData.uploadImages = [];
     initBasicFormData();
     cloneRuleFormData();
   };

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

@@ -33,20 +33,16 @@
             :name="item.taskName"
             :defaultOpen="item.id === collapseList[0].id"
           >
-            <template #viewOperation>
-              <div class="update-time-container">
-                <span>发布时间：{{ item.updatedAt }}</span>
-              </div>
-            </template>
             <template #main-table>
               <el-button
                 type="primary"
                 :icon="Plus"
                 class="main-table__button"
+                v-if="isOverdue(item.dueCompleteTime)"
                 @click="handleReport(item.id, item.taskName)"
                 >新增</el-button
               >
-              <BasicTable :tableData="item.tableData[0].disasterReportRecordDetailList" :tableConfig="tableConfig">
+              <BasicTable :tableData="item.tableData[0]?.disasterReportRecordDetailList" :tableConfig="tableConfig">
                 <template #affectedArea="scope">
                   <div class="affected-area-container">
                     <span>{{ scope.row.buildingNo }}-{{ scope.row.floorNo }}-{{ scope.row.roomNo }}</span>
@@ -83,7 +79,7 @@
                   <div class="action-container" v-if="scope.row.affectedItems">
                     <ActionButton
                       text="编辑"
-                      v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED"
+                      v-if="isOverdue(scope.row.dueCompleteTime) && scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED"
                       @click="handleEdit(scope.row.id, item.id)"
                     />
                     <ActionButton text="查看" />
@@ -94,8 +90,17 @@
                     />
                   </div>
                   <div class="action-container" v-else>
-                    <ActionButton text="编辑" @click="handleEdit(scope.row.id, item.id)" />
-                    <ActionButton text="删除" @click="handleDelete(scope.row.id)" />
+                    <ActionButton text="查看" v-if="scope.row.fixStatus === FIX_STATUS.TEMPORARY_CLOSED" />
+                    <ActionButton
+                      text="编辑"
+                      @click="handleEdit(scope.row.id, item.id)"
+                      v-if="isOverdue(scope.row.dueCompleteTime) && scope.row.fixStatus !== FIX_STATUS.TEMPORARY_CLOSED"
+                    />
+                    <ActionButton
+                      text="删除"
+                      @click="handleDelete(scope.row.id)"
+                      v-if="scope.row.fixStatus !== FIX_STATUS.TEMPORARY_CLOSED"
+                    />
                   </div>
                 </template>
               </BasicTable>
@@ -120,14 +125,14 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick } from 'vue';
+  import { ref, reactive, onMounted, nextTick, onUnmounted } from 'vue';
   import { Plus } from '@element-plus/icons-vue';
   import Search from '@/views/disaster/components/Search.vue';
   import BasicTable from '@/components/BasicTable.vue';
   import ActionButton from '@/components/ActionButton.vue';
   import { getAllDepartments } from '@/api/auth/dept';
   import CollapseItem from './CollapseItem.vue';
-  import { DEFAULT_PAGE_SIZE, DISASTER_CONTROL_PAGE_SIZE_CONFIG, IS_LOSS, FIX_STATUS } from '../constant';
+  import { DEFAULT_PAGE_SIZE, DISASTER_CONTROL_PAGE_SIZE_CONFIG, FIX_STATUS } from '../constant';
   import type { DisposalManagementCollapseListResponse, LossRecordTableResponse } from '@/types/disaster-control';
   import { getReportTaskList, getLossRecordTableData, deleteLossRecord } from '@/api/disaster-control';
   import {
@@ -156,7 +161,7 @@
   const { tableConfig } = useTableConfig(LOSS_RECORD_TABLE_COLUMNS, DISPOSAL_MANAGEMENT_TABLE_OPTIONS, false);
   const searchData = reactive({
     handleDeptIds: [],
-    fixStatus: '',
+    fixStatus: null,
   });
   const handleSearch = () => {
     getDisposalTableData();
@@ -172,9 +177,11 @@
       queryParam: {},
     });
     collapseList.value = res.records.map((item) => ({
-      id: item.handleTaskId,
+      id: item.id,
+      handleTaskId: item.handleTaskId,
       taskName: item.taskName,
       updatedAt: item.updatedAt,
+      dueCompleteTime: item.dueCompleteTime,
       tableData: [
         {
           handleTaskId: item.handleTaskId,
@@ -199,7 +206,7 @@
       ...(handleDeptIds.length > 0 ? { handleDeptIds } : {}),
     });
     collapseList.value.forEach((item) => {
-      item.tableData = res.filter((tableItem) => tableItem.handleTaskId === item.id);
+      item.tableData = res.filter((tableItem) => tableItem.handleTaskId === item.handleTaskId);
     });
     tableConfig.loading = false;
   };
@@ -246,6 +253,18 @@
     await getDisposalTableData();
     ElMessage.success('删除成功');
   };
+  // 添加刷新时间变量，用于触发视图更新
+  const refreshTime = ref(Date.now());
+  let refreshTimer: number | null = null;
+  // 判断是否超过应完成时间
+  const isOverdue = (dueCompleteTime: string) => {
+    if (!dueCompleteTime) return false;
+
+    const dueTime = new Date(dueCompleteTime).getTime();
+    const currentTime = refreshTime.value;
+
+    return currentTime < dueTime;
+  };
 
   onMounted(async () => {
     const result = await getAllDepartments();
@@ -253,6 +272,17 @@
     getPriorityDict();
     await getDisposalData();
     await getDisposalTableData();
+    // 设置定时器，每秒更新一次时间
+    refreshTimer = window.setInterval(() => {
+      refreshTime.value = Date.now();
+    }, 1000);
+  });
+
+  onUnmounted(() => {
+    if (refreshTimer !== null) {
+      clearInterval(refreshTimer);
+      refreshTimer = null;
+    }
   });
 </script>
 

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

@@ -23,11 +23,11 @@
           <ActionButton
             text="去上报"
             v-if="isOverdue(scope.row.dueCompleteTime)"
-            @click="handleReport(scope.row.handleTaskId, scope.row.taskName)"
+            @click="handleReport(scope.row.id, scope.row.taskName)"
           />
           <ActionButton
             text="添加上报人"
-            v-if="scope.row.isReportPrincipal"
+            v-if="isOverdue(scope.row.dueCompleteTime) && scope.row.isReportPrincipal"
             @click="handleAddReporter(scope.row.id, scope.row.reporterList)"
           />
         </div>

src/views/disaster/disaster-control/src/config/table.ts

@@ -75,7 +75,7 @@ export const DISPOSAL_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
     prop: 'reportPrincipals',
     align: 'center',
     slot: 'reportPrincipals',
-    width: '200px',
+    width: '300px',
   },
   BASIC_TABLE_COLUMNS.ACTION,
 ];

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

@@ -19,6 +19,10 @@ export const useDisasterControlHook = () => {
     const res = await queryDictTypeDetail(DICT_CODE.PRIORITY);
     priorityDice.value = res.sysDictDataList;
   };
+  const getSafetyLevel = (safetyLevelCode: string | undefined) => {
+    if (!safetyLevelCode) return '';
+    return safetyLevelDice.value.find((item) => item.itemCode === safetyLevelCode)?.itemValue;
+  };
   const getPriority = (priorityCode: string) => {
     return priorityDice.value.find((item) => item.itemCode === priorityCode)?.itemValue;
   };
@@ -34,6 +38,7 @@ export const useDisasterControlHook = () => {
     safetyLevelDice,
     getPriorityDict,
     getSafetyLevelDict,
+    getSafetyLevel,
     getPriority,
     getLossReportItem,
   };

src/views/disaster/disaster-control/src/style/view-item.scss

@@ -0,0 +1,47 @@
+@use '@/styles/variables.scss' as *;
+.disaster-information {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  &__content--loss {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding-left: 12px;
+  }
+  &__content--item {
+    display: flex;
+    .label {
+      flex-shrink: 0;
+      color: rgba(0, 0, 0, 0.85);
+    }
+    .value {
+      flex: 1;
+      color: rgba(0, 0, 0, 0.65);
+    }
+    .image-container {
+      display: flex;
+      flex-wrap: wrap;
+      flex: 1;
+      gap: 8px;
+      .el-image {
+        max-width: 160px;
+        background: #f5f7fa;
+      }
+    }
+  }
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: 550;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.85);
+  }
+  &--line {
+    width: 2px;
+    height: 20px;
+    background: $primary-color;
+  }
+}

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

@@ -177,7 +177,7 @@
     isBatchDelete.value = Boolean(selectionItems.value.length === publishIds.length);
   };
   const handleBatchPublish = async () => {
-    const confirmed = await openMessageBox('确认发布任务吗？');
+    const confirmed = await openMessageBox('','确认发布任务吗？','warn');
     if (!confirmed) return;
     const publishIds = getSelectionIds(ACTIVE_STATUS.NOT_EFFECTIVE);
     try {
@@ -188,7 +188,7 @@
     }
   };
   const handleBatchWithdraw = async () => {
-    const confirmed = await openMessageBox('确认撤回已发布任务吗？');
+    const confirmed = await openMessageBox('','确认撤回已发布任务吗？','warn');
     if (!confirmed) return;
     const withdrawIds = getSelectionIds(ACTIVE_STATUS.ACTIVE);
     try {
@@ -200,7 +200,7 @@
   };
   const basicTableRef = ref<InstanceType<typeof BasicTable>>();
   const handleBatchDelete = async () => {
-    const confirmed = await openMessageBox('删除后任务不可恢复，确认删除吗？');
+    const confirmed = await openMessageBox('','删除后任务不可恢复，确认删除吗？','warn');
     if (!confirmed) return;
     const deleteIds = getSelectionIds(ACTIVE_STATUS.NOT_EFFECTIVE);
     await deleteTaskManagementItem(deleteIds);

src/views/disaster/hooks/messageBox.ts

@@ -1,9 +1,10 @@
 import { ElMessageBox } from 'element-plus';
 export const useMessageBox = () => {
-  const openMessageBox = (title: string) => {
-    return ElMessageBox.confirm('', title, {
+  const openMessageBox = (content: string, title: string, type: 'default' | 'weak' | 'warn' | 'strong') => {
+    return ElMessageBox.confirm(content, title, {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
+      customClass: `customMessageBox--${type}`,
     })
       .then(() => {
         return true;