损失记录明细样式需要调整

src/api/disaster-control/index.ts

@@ -14,6 +14,7 @@ import type {
   LossRecordCreateQuery,
   LossRecordEditQuery,
   DisposalRectificationCreateQuery,
+  DisposalRectificationFormData,
 } from '@/types/disaster-control';
 import type { QueryPageResponse, QueryPageRequest } from '@/types/disaster';
 /**
@@ -193,3 +194,13 @@ export const createDisposalRectification = (query: DisposalRectificationCreateQu
     data: query,
   });
 };
+
+/**
+ * 查询整改列表
+ */
+export const getRectificationList = (reportRecordIds: number[]) => {
+  return http.request<{ disasterLossFixRecordList: DisposalRectificationFormData[] }[]>({
+    url: `/disasterHandle/queryLossFixRecord?reportRecordIds=${reportRecordIds.join(',')}`,
+    method: 'get',
+  });
+};

src/router/full-routes.ts

@@ -442,6 +442,26 @@ export const disasterPreventionRoute = {
           path: 'disposal-rectification-item/:id',
           redirect: '',
         },
+        {
+          component: '/disaster/disaster-control/PageViewDisposalRectification',
+          id: 1045,
+          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-detail',
+          parentId: 1027,
+          path: 'disposal-rectification-item-detail/:id',
+          redirect: '',
+        },
       ],
       component: '',
       id: 1032,

src/types/disaster-control/index.ts

@@ -196,6 +196,7 @@ export interface DisposalRectificationFormData {
   createdByName: string;
   uploadImages: File[];
   uploadFiles: FileItem[];
+  createdAt?: string;
 }
 
 export interface DisposalRectificationCreateQuery extends DisposalRectificationFormData {

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

@@ -52,7 +52,7 @@
                 :isActive="activeId === item.id"
                 @toggle="handleCollapseToggle(item.id)"
               >
-                <template #viewOperation>
+                <template #view-operation>
                   <el-tooltip
                     :content="isViewTask(item.tableData[0].disasterReportTaskInfoList) ? '查看' : '任务尚未发布'"
                     placement="top"
@@ -68,7 +68,7 @@
                     />
                   </el-tooltip>
                 </template>
-                <template #batchOperation v-if="disposalManagementPermissions">
+                <template #right-header v-if="disposalManagementPermissions">
                   <el-button
                     class="custom-el-button"
                     v-if="isBatchRelease(item.tableData[0].disasterReportTaskInfoList)"

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

@@ -37,7 +37,7 @@
                 :isActive="activeId === item.id"
                 @toggle="handleCollapseToggle(item.id)"
               >
-                <template #viewOperation>
+                <template #view-operation>
                   <el-tooltip
                     :content="item.tableData[0].disasterReportRecordDetailList.length ? '查看' : '任务无损失'"
                     placement="top"
@@ -49,6 +49,7 @@
                         'collapse-item__icon',
                         { 'collapse-item__icon--disabled': !item.tableData[0].disasterReportRecordDetailList.length },
                       ]"
+                      @click="handleViewTask(item.handleTaskId, item.taskName)"
                     />
                   </el-tooltip>
                 </template>
@@ -90,7 +91,10 @@
                       </template>
                       <template #action="scope">
                         <div class="action-container" v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED">
-                          <ActionButton text="查看" />
+                          <ActionButton
+                            text="查看"
+                            @click="handleViewTask(item.handleTaskId, item.taskName, scope.row.id, scope.row.fixTaskId)"
+                          />
                           <ActionButton
                             text="去整改"
                             @click="
@@ -109,7 +113,10 @@
                           />
                         </div>
                         <div class="action-container" v-else>
-                          <ActionButton text="查看" />
+                          <ActionButton
+                            text="查看"
+                            @click="handleViewTask(item.handleTaskId, item.taskName, scope.row.id, scope.row.fixTaskId)"
+                          />
                           <ActionButton
                             text="去整改"
                             @click="
@@ -169,7 +176,6 @@
   import { getfixStatus } from './src/util';
   import type { PersonGroupItem } from '@/types/person-group/type';
   import type {
-    disasterReportTaskInfoListResponse,
     DisposalManagementCollapseListResponse,
     LossRecordTableResponse,
     disasterReportRecordDetailListResponse,
@@ -182,7 +188,6 @@
     DISPOSAL_MANAGEMENT_TABLE_OPTIONS,
   } from './src/config';
   import { DEFAULT_PAGE_SIZE, DISASTER_CONTROL_PAGE_SIZE_CONFIG, FIX_STATUS } from './src/constant';
-  import { ACTIVE_STATUS } from '@/views/disaster/constant';
   import Empty from 'assets/images/empty@1X.png';
   import ViewDocument from './src/svg/view-document.svg';
 
@@ -228,16 +233,6 @@
 
   const taskIds = ref<number[]>([]);
   const router = useRouter();
-  const Table_RouterName = 'disaster-control-disposal-management-item';
-  const handleEditDisposalManagement = (id: number) => {
-    router.push({
-      name: Table_RouterName,
-      query: {
-        id,
-        operate: 'edit',
-      },
-    });
-  };
 
   const handleCollapseToggle = (itemId: number) => {
     if (activeId.value === itemId) {
@@ -331,12 +326,18 @@
     });
   };
 
-  const isViewTask = (disasterReportTaskInfoList: disasterReportTaskInfoListResponse[]) => {
-    return disasterReportTaskInfoList.some((item) => item.status === ACTIVE_STATUS.ACTIVE);
-  };
-
-  const handleViewTask = (id: number) => {
-    console.log('查看任务ID' + id);
+  const handleViewTask = (handleTaskId: number, taskName: string, lossTaskId?: number, fixTaskId?: number) => {
+    router.push({
+      name: 'disaster-control-disposal-rectification-item-detail',
+      params: {
+        id: handleTaskId,
+      },
+      query: {
+        taskName,
+        lossTaskId,
+        fixTaskId,
+      },
+    });
   };
 
   onMounted(async () => {

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

@@ -5,87 +5,7 @@
       <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="JSON.parse(LossReportItemFormData?.images).length">
-              <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>
+      <DisasterInfo :LossReportItemFormData="LossReportItemFormData" v-if="LossReportItemFormData?.isLoss" />
       <section class="disaster-information">
         <div class="disaster-information__title">
           <div class="disaster-information--line"></div>
@@ -119,6 +39,7 @@
   import BasicForm from '@/components/BasicForm.vue';
   import UploadImages from './src/components/UploadImages.vue';
   import UploadFiles from '@/views/disaster/components/UploadFiles.vue';
+  import DisasterInfo from './src/components/DisasterInfo.vue';
   import { useDisasterControlHook } from './src/hook';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import { useUserInfoHook } from '@/views/disaster/hooks';

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

@@ -0,0 +1,140 @@
+<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>
+    <TaskInfoSection :task-name="taskName" @export-loss-detail="exportLossDetail" />
+    <main class="disaster-precaution-container__main">
+      <section class="info-container">
+        <CollapseItem
+          v-for="item in [1, 2, 3]"
+          :key="item"
+          :name="`上报单位：${item}`"
+          :isActive="activeId === item"
+          @toggle="handleCollapseToggle(item)"
+        >
+          <template #view-operation>
+            <div class="rectification-info">
+              <span class="num">26</span>
+              <span>条，整改完成16条</span>
+            </div>
+          </template>
+          <template #right-header>
+            <span class="collapse-item__header--right">{{ activeId === item ? '收起' : '立即查看' }}</span>
+          </template>
+          <template #main-table>
+            <div class="rectification-table">
+              <section class="damaged-list-container">
+                <DamagedList :damagedList="damagedList" :activeId="0" />
+              </section>
+              <section class="disaster-info-container">
+                <DisasterInfo :LossReportItemFormData="LossReportItemFormData" v-if="LossReportItemFormData?.isLoss" />
+                <Rectification :rectificationList="rectificationList" />
+              </section>
+            </div>
+          </template>
+        </CollapseItem>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import BackIcon from 'assets/svg/back.svg';
+  import { useRoute, useRouter } from 'vue-router';
+  import { onMounted, ref } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import TaskInfoSection from './src/components/TaskInfoSection.vue';
+  import CollapseItem from './src/components/CollapseItem.vue';
+  import DamagedList from './src/components/DamagedList.vue';
+  import DisasterInfo from './src/components/DisasterInfo.vue';
+  import Rectification from './src/components/Rectification.vue';
+  import type { disasterReportRecordDetailListResponse, DisposalRectificationFormData } from '@/types/disaster-control';
+  import { getRectificationList } from '@/api/disaster-control';
+
+  const router = useRouter();
+  const route = useRoute();
+  const handleTaskId = Number(route.params.id);
+  const { taskName, lossTaskId, fixTaskId } = route.query as unknown as {
+    taskName: string;
+    lossTaskId: number;
+    fixTaskId: number;
+  };
+  const exportLossDetail = () => {
+    ElMessage.warning('暂未开放');
+  };
+  const activeId = ref<number | null>(1);
+  const handleCollapseToggle = (itemId: number) => {
+    if (activeId.value === itemId) {
+      activeId.value = null;
+    } else {
+      activeId.value = itemId;
+    }
+  };
+  const LossReportItemFormData: disasterReportRecordDetailListResponse = {
+    affectedItems: 'hahah',
+    buildingNo: '16',
+    description: '测试',
+    estimatedLoss: null,
+    fixStatus: 1,
+    fixTaskId: 98,
+    fixerList: '[70]',
+    floorNo: '17',
+    id: 162,
+    images:
+      '["./skyeye-file-upload/sfysecurity/ATTACHMENT/attachment_avatar.jpg","./skyeye-file-upload/sfysecurity/ATTACHMENT/attachment_pig.jpg","./skyeye-file-upload/sfysecurity/ATTACHMENT/attachment_R-C.jpg"]',
+    isAffectWork: 0,
+    isFixPrincipal: true,
+    isLoss: 1,
+    priority: 'urgent',
+    remark: '',
+    responsibleDeptName: '综合计划部',
+    roomNo: '18',
+    safetyLevel: 'mild',
+    updatedAt: '2025-06-13 10:29:06',
+    userGroupList: '[13]',
+    createdBy: '70',
+  };
+  const damagedList: string[] = [
+    '玻璃破损6处',
+    '树木倒伏',
+    '道闸杆',
+    '摄像机支架',
+    '支架鸭嘴（不锈钢）',
+    '遥控器',
+    '室外防水设备箱',
+  ];
+  const rectificationList = ref<DisposalRectificationFormData[]>([]);
+  onMounted(async () => {
+    const res = await getRectificationList([lossTaskId]);
+    rectificationList.value = res[0].disasterLossFixRecordList;
+  });
+</script>
+
+<style lang="scss" scoped>
+  @use '../style/disaster.scss' as *;
+  @use './src/style/common.scss' as *;
+  @use '@/views/disaster/style/info-container.scss' as *;
+  .rectification-info {
+    font-size: 16px;
+    font-family: 0;
+    .num {
+      color: $primary-color;
+    }
+  }
+  .collapse-item__header--right {
+    font-size: 16px;
+    color: $primary-color;
+  }
+  .rectification-table {
+    display: flex;
+    gap: 10px;
+  }
+  .disaster-info-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    flex: 1;
+  }
+</style>

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

@@ -5,11 +5,11 @@
         <el-icon class="collapse-item__icon">
           <component :is="isActive ? ArrowUp : ArrowDown" />
         </el-icon>
-        <span>{{ name }}</span>
-        <slot name="viewOperation" />
+        <span style="font-weight: 550">{{ name }}</span>
+        <slot name="view-operation" />
       </div>
       <div class="collapse-item__header--right">
-        <slot name="batchOperation" />
+        <slot name="right-header" />
       </div>
     </div>
     <div v-show="isActive" class="collapse-item__main">
@@ -20,14 +20,14 @@
 
 <script lang="ts" setup>
   import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
-  
-  defineProps<{ 
-    name: string; 
+
+  defineProps<{
+    name: string;
     isActive?: boolean;
   }>();
-  
+
   const emit = defineEmits(['toggle']);
-  
+
   const toggle = () => {
     emit('toggle');
   };
@@ -46,7 +46,6 @@
       justify-content: space-between;
       padding: 10px 14px;
       font-size: 20px;
-      font-weight: 550;
       color: rgba($text-color, 0.85);
       cursor: pointer;
       &--left {

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

@@ -0,0 +1,47 @@
+<template>
+  <div class="damaged-list">
+    <header class="header"> 受灾物品 </header>
+    <nav class="nav">
+      <div class="nav-item" v-for="(item, index) in damagedList" :key="index" :class="{ active: activeId === index }">
+        <span class="nav-item__name">{{ item }}</span>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  defineProps<{
+    damagedList: string[];
+    activeId: number;
+  }>();
+</script>
+
+<style lang="scss" scoped>
+  .damaged-list {
+    width: 200px;
+    height: 100%;
+    border-radius: 4px;
+    background-color: $white-color;
+  }
+  .header {
+    width: 100%;
+    height: 44px;
+    font-weight: 550;
+    font-size: 16px;
+    line-height: 44px;
+    padding: 0 16px;
+  }
+  .nav-item {
+    width: 100%;
+    padding: 8px 16px;
+    font-size: 14px;
+    color: #666;
+    cursor: pointer;
+    &.active,
+    &:hover {
+      color: $primary-color;
+      background-color: #e7f1ff;
+      border-radius: 4px;
+    }
+  }
+</style>

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

@@ -0,0 +1,102 @@
+<template>
+  <div 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">
+        <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="JSON.parse(LossReportItemFormData?.images).length">
+          <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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useDisasterControlHook } from '../hook';
+  import type { disasterReportRecordDetailListResponse } from '@/types/disaster-control';
+
+  defineProps<{
+    LossReportItemFormData: disasterReportRecordDetailListResponse;
+  }>();
+  const { getSafetyLevel } = useDisasterControlHook();
+</script>
+
+<style lang="scss" scoped>
+  @use '../style/view-item.scss' as *;
+  .disaster-information {
+    background-color: $white-color;
+    padding: 10px;
+    border-radius: 4px;
+  }
+</style>

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

@@ -34,7 +34,7 @@
             :isActive="activeId === item.id"
             @toggle="handleCollapseToggle(item.id)"
           >
-            <template #viewOperation>
+            <template #view-operation>
               <el-tooltip
                 :content="item.tableData[0].disasterReportRecordDetailList.length ? '查看' : '任务无损失'"
                 placement="top"

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="disaster-information">
+    <div class="disaster-information__title">
+      <div class="disaster-information--line"></div>
+      <span>整改信息</span>
+    </div>
+    <div class="disaster-information__content">
+      <BasicTable :tableData="rectificationList" :tableConfig="tableConfig">
+        <template #fixImages="scope">
+          <div class="image-container" v-if="JSON.parse(scope.row.fixImages).length">
+            <el-image
+              :src="JSON.parse(scope.row.fixImages)[0]"
+              :zoom-rate="1.2"
+              :max-scale="7"
+              :min-scale="0.2"
+              :preview-src-list="JSON.parse(scope.row.fixImages)"
+              :initial-index="0"
+              show-progress
+              fit="contain"
+              preview-teleported
+            />
+            <span class="image-count"> 共{{ JSON.parse(scope.row.fixImages).length }}张 </span>
+          </div>
+        </template>
+        <template #fixMaterials="scope">
+          <div class="material-container" v-for="item in JSON.parse(scope.row.fixMaterials)" :key="item.fileId">
+            <div class="material-container--item" v-if="item">
+              <img :src="FILE_TYPE_ICON[item.fileType]" />
+              <span>{{ item.fileName }}</span>
+            </div>
+          </div>
+        </template>
+      </BasicTable>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import BasicTable from '@/components/BasicTable.vue';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import type { DisposalRectificationFormData } from '@/types/disaster-control';
+  import { RECTIFICATION_INFO_TABLE_COLUMNS, RECTIFICATION_INFO_TABLE_OPTIONS } from '../config';
+  import { FILE_TYPE_ICON } from '@/views/disaster/constant';
+  defineProps<{
+    rectificationList: DisposalRectificationFormData[];
+  }>();
+  const { tableConfig } = useTableConfig(RECTIFICATION_INFO_TABLE_COLUMNS, RECTIFICATION_INFO_TABLE_OPTIONS, false);
+  tableConfig.loading = false;
+</script>
+
+<style lang="scss" scoped>
+  @use '../style/view-item.scss' as *;
+  .disaster-information {
+    background-color: $white-color;
+    padding: 10px;
+    border-radius: 4px;
+  }
+  .image-container {
+    position: relative;
+  }
+  .el-image {
+    display: block !important;
+  }
+  .image-count {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: 0 5px;
+    background: rgba($text-color, 0.6);
+    color: rgba($white-color, 0.7);
+    font-size: 14px;
+  }
+  .material-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    img {
+      width: 20px;
+    }
+  }
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="disaster-precaution-container__header">
+    <section class="task-info">
+      <span class="disaster-precaution-container__title">{{ taskName }}</span>
+      <el-button type="primary" @click="emit('exportLossDetail')">
+        <template #icon>
+          <img :src="ExportIcon" />
+        </template>
+        导出损失明细
+      </el-button>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import ExportIcon from 'assets/svg/export.svg';
+  defineProps<{
+    taskName: string;
+  }>();
+  const emit = defineEmits<{
+    (e: 'exportLossDetail'): void;
+  }>();
+</script>
+
+<style lang="scss" scoped>
+  @use '@/views/disaster/style/disaster.scss' as *;
+  .task-info {
+    @include flex-center;
+    justify-content: space-between;
+    width: 100%;
+  }
+</style>

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

@@ -10,6 +10,8 @@ import {
   DISPOSAL_MANAGEMENT_TABLE_OPTIONS,
   LOSS_REPORT_REPORT_TASK_TABLE_OPTIONS,
   LOSS_RECORD_TABLE_COLUMNS,
+  RECTIFICATION_INFO_TABLE_OPTIONS,
+  RECTIFICATION_INFO_TABLE_COLUMNS,
 } from './table';
 import {
   DISPOSAL_MANAGEMENT_TASK_FROM_CONFIG,
@@ -54,4 +56,6 @@ export {
   DISPOSAL_RECTIFICATION_FORM_CONFIG,
   DISPOSAL_RECTIFICATION_FORM_DATA,
   DISPOSAL_RECTIFICATION_FORM_RULES,
+  RECTIFICATION_INFO_TABLE_OPTIONS,
+  RECTIFICATION_INFO_TABLE_COLUMNS,
 };

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

@@ -18,6 +18,11 @@ export const LOSS_REPORT_REPORT_TASK_TABLE_OPTIONS = {
   ...TABLE_OPTIONS,
 };
 
+// 整改信息明细表格配置
+export const RECTIFICATION_INFO_TABLE_OPTIONS = {
+  ...TABLE_OPTIONS,
+};
+
 // 基础表格列配置项
 const BASIC_TABLE_COLUMNS = {
   INDEX: {
@@ -111,19 +116,74 @@ export const LOSS_RECORD_TABLE_COLUMNS: TableColumnProps[] = [
     label: '整改部门',
     prop: 'responsibleDeptName',
     slot: 'responsibleDeptName',
-    minWidth: '120px'
+    minWidth: '120px',
   },
   {
     label: '优先级',
     prop: 'priority',
     slot: 'priority',
-    minWidth: '120px'
+    minWidth: '120px',
   },
   {
     label: '整改进度',
     prop: 'fixStatus',
     slot: 'fixStatus',
-    minWidth: '120px'
+    minWidth: '120px',
   },
   BASIC_TABLE_COLUMNS.ACTION,
 ];
+
+export const RECTIFICATION_INFO_TABLE_COLUMNS: TableColumnProps[] = [
+  {
+    label: '整改次数',
+    prop: 'index',
+    type: 'index',
+    align: 'center',
+    width: '120px',
+  },
+  {
+    label: '整改措施',
+    prop: 'fixMethod',
+    minWidth: '120px',
+  },
+  {
+    label: '整改图片',
+    prop: 'fixImages',
+    slot: 'fixImages',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    label: '整改材料',
+    prop: 'fixMaterials',
+    slot: 'fixMaterials',
+    width: '120px'
+  },
+  {
+    label: '整改时限',
+    prop: 'fixDeadline',
+    minWidth: '200px',
+  },
+  {
+    label: '整改时间',
+    prop: 'createdAt',
+    minWidth: '200px',
+  },
+  {
+    label: '整改状态',
+    prop: 'fixStatus',
+    slot: 'fixStatus',
+    minWidth: '120px',
+  },
+  {
+    label: '整改人',
+    prop: 'createdBy',
+    slot: 'createdBy',
+    minWidth: '120px',
+  },
+  {
+    label: '备注',
+    prop: 'remark',
+    minWidth: '200px',
+  },
+];

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

@@ -1,7 +1,3 @@
-:deep(.el-date-editor) {
-  --el-date-editor-width: 100%;
-}
-
 .affected-room-container {
   display: flex;
 }

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

@@ -113,7 +113,6 @@ export const DEFENSE_NOTICE_TABLE_COLUMNS_PERMISSION: TableColumnProps[] = [
   {
     label: '创建时间',
     prop: 'createdAt',
-    align: 'center',
     minWidth: '200px',
   },
   BASIC_TABLE_COLUMNS.ACTION,

src/views/disaster/style/disaster.scss

@@ -16,7 +16,7 @@
     flex-direction: column;
     gap: 16px;
     justify-content: space-between;
-    padding: 16px 0 16px 22px;
+    padding: 16px 22px;
     flex-shrink: 0;
     .back-icon {
       width: 16px;