里面的内容不做自适应

src/App.vue

@@ -8,9 +8,7 @@
 </template>
 
 <script setup lang="ts">
-  import { useRoute } from 'vue-router';
   import Nav from '@/components/Nav.vue';
-  const route = useRoute();
 </script>
 
 <style scoped lang="scss">
@@ -23,5 +21,6 @@
   .content {
     flex: 1;
     overflow-y: auto;
+    overflow-x: hidden;
   }
 </style>

src/api/disaster-control/index.ts

@@ -9,6 +9,8 @@ import type {
   LossRecordTableQuery,
   LossRecordTableResponse,
   DisposalManagementCreateQuery,
+  DisasterReportCreateQuery,
+  DisasterReportEditQuery,
 } from '@/types/disaster-control';
 import type { QueryPageResponse, QueryPageRequest } from '@/types/disaster';
 /**
@@ -41,6 +43,37 @@ export const createDisasterHandleTask = (query: DisposalManagementCreateQuery) =
   });
 };
 
+/**
+ * 创建灾害处置上报任务
+ */
+export const createDisasterReportTask = (query: DisasterReportCreateQuery) => {
+  return http.request({
+    url: '/disasterHandle/saveDisasterReportTask',
+    method: 'post',
+    data: query,
+  });
+};
+
+/**
+ * 发布灾害处置任务
+ */
+export const publishDisasterHandleTask = (handleTaskId: number) => {
+  return http.request({
+    url: `/disasterHandle/publishDisasterHandleTask?handleTaskId=${handleTaskId}`,
+    method: 'post',
+  });
+};
+
+/**
+ * 撤回灾害处置任务
+ */
+export const withdrawDisasterHandleTask = (handleTaskId: number) => {
+  return http.request({
+    url: `/disasterHandle/revokeDisasterHandleTask?handleTaskId=${handleTaskId}`,
+    method: 'post',
+  });
+};
+
 /**
  * 删除灾害处置任务
  */
@@ -51,6 +84,27 @@ export const deleteDisasterHandleTask = (handleTaskId: number) => {
   });
 };
 
+/**
+ * 删除灾害处置上报任务
+ */
+export const deleteDisasterReportTask = (reportTaskId: number) => {
+  return http.request({
+    url: `/disasterHandle/deleteDisasterReportTask?reportTaskId=${reportTaskId}`,
+    method: 'delete',
+  });
+};
+
+/**
+ * 编辑灾害处置上报任务
+ */
+export const editDisasterReportTask = (query: DisasterReportEditQuery) => {
+  return http.request({
+    url: '/disasterHandle/updateDisasterReportTask',
+    method: 'put',
+    data: query,
+  });
+};
+
 /**
  * 获取损失上报-上报任务数据
  */

src/components/ActionButton.vue

@@ -34,7 +34,7 @@
     background-color: transparent;
     color: $primary-color;
     padding: 0;
-    font-size: 14cpx;
+    font-size: 14px;
     &:disabled {
       color: $disabled-color;
       background-color: transparent;

src/components/AddItem.vue

@@ -70,10 +70,10 @@
   .add-item {
     display: flex;
     align-items: center;
-    gap: 12cpx;
+    gap: 12px;
     width: 100%;
-    height: 24cpx;
-    font-size: 14cpx;
+    height: 24px;
+    font-size: 14px;
     color: $text-color;
 
     
@@ -103,11 +103,11 @@
     &__input {
       width: 100%;
       height: 100%;
-      font-size: 14cpx;
+      font-size: 14px;
       border: 1px solid $text-color;
       border-radius: 4px;
       color: $text-color;
-      padding: 2cpx 10cpx;
+      padding: 2px 10px;
       outline: none;
       border: none;
     }

src/components/BasicForm.vue

@@ -52,8 +52,8 @@
   .el-form {
     display: flex;
     flex-direction: column;
-    width: 600cpx;
+    width: 600px;
     height: 100%;
-    gap: 12cpx;
+    gap: 12px;
   }
 </style>

src/components/BasicTable.vue

@@ -74,7 +74,7 @@
   .basic-table {
     display: flex;
     flex-direction: column;
-    gap: 20cpx;
+    justify-content: space-between;
     width: 100%;
     height: 100%;
   }
@@ -84,43 +84,19 @@
   :deep(.el-table th),
   :deep(.el-table.is-scrolling-none th.el-table-fixed-column--left),
   :deep(.el-table.is-scrolling-none th.el-table-fixed-column--right) {
-    font-size: 14cpx;
+    font-size: 14px;
     color: rgba($text-color, 0.85);
     background-color: #fafafa !important;
   }
   :deep(.el-table td) {
-    font-size: 14cpx;
+    font-size: 14px;
     color: rgba($text-color, 0.65);
     border: none;
-    padding: 16cpx;
+    padding: 16px;
   }
   .el-pagination {
     display: flex;
     justify-content: flex-end;
-    :deep(.btn-prev),
-    :deep(.btn-next),
-    :deep(.el-pager li) {
-      width: 32cpx;
-      height: 32cpx;
-    }
-    :deep(.el-pager li),
-    :deep(.el-pagination__jump),
-    :deep(.el-pagination__total),
-    :deep(.el-input__wrapper),
-    :deep(.el-select__wrapper),
-    :deep(.el-select__suffix) {
-      font-size: 14cpx;
-    }
-    :deep(.el-input__wrapper) {
-      padding: 1cpx 11cpx;
-    }
-    :deep(.el-select__wrapper) {
-      padding: 4cpx 12cpx;
-    }
-    :deep(.el-input__inner){
-      width: 34cpx;
-      height: 30cpx;
-    }
   }
   :deep(.el-loading-mask) {
     background-color: rgba(0, 0, 0, 0.05);
@@ -132,7 +108,7 @@
     @include flex-center;
     flex-direction: column;
     img {
-      width: 510cpx;
+      width: 510px;
     }
   }
 </style>

src/components/Login.vue

@@ -97,68 +97,68 @@
   }
   .login-form {
     position: relative;
-    width: 700cpx;
-    padding: 0 33cpx;
+    width: 700px;
+    padding: 0 33px;
     background: $white-color;
-    border-radius: 24cpx;
+    border-radius: 24px;
     &__header {
       width: 100%;
-      height: 100cpx;
-      font-size: 28cpx;
+      height: 100px;
+      font-size: 28px;
       font-weight: 550;
       color: #333;
       text-align: center;
-      line-height: 100cpx;
-      letter-spacing: 5cpx;
+      line-height: 100px;
+      letter-spacing: 5px;
     }
     &__main {
       @include flex-center;
       flex-direction: column;
-      gap: 20cpx;
+      gap: 20px;
     }
     &__code {
       @include flex-center;
       justify-content: space-between;
       width: 100%;
-      height: 72cpx;
+      height: 72px;
       .el-input--default {
         width: 50%;
       }
     }
     &__footer {
       width: 100%;
-      height: 100cpx;
-      margin-top: 18cpx;
+      height: 100px;
+      margin-top: 18px;
       .login-form__button {
         width: 100%;
-        height: 74cpx;
-        font-size: 24cpx;
+        height: 74px;
+        font-size: 24px;
         color: $white-color;
         background-color: $primary-color;
-        border-radius: 8cpx;
+        border-radius: 8px;
         cursor: pointer;
       }
     }
     .exit-icon {
       position: absolute;
-      top: 15cpx;
-      right: 16cpx;
-      width: 40cpx;
-      height: 40cpx;
+      top: 15px;
+      right: 16px;
+      width: 40px;
+      height: 40px;
       cursor: pointer;
     }
   }
   .login-form__form {
     display: flex;
     flex-direction: column;
-    gap: 2cpx;
+    gap: 2px;
     width: 100%;
   }
   .el-input--default {
     width: 100%;
-    height: 72cpx;
+    height: 72px;
     :deep(.el-input__inner) {
-      font-size: 20cpx;
+      font-size: 20px;
       color: #999;
     }
   }

src/components/LoginOld.vue

@@ -144,68 +144,68 @@
   }
   .login-form {
     position: relative;
-    width: 700cpx;
-    padding: 0 33cpx;
+    width: 700px;
+    padding: 0 33px;
     background: $white-color;
-    border-radius: 24cpx;
+    border-radius: 24px;
     &__header {
       width: 100%;
-      height: 100cpx;
-      font-size: 28cpx;
+      height: 100px;
+      font-size: 28px;
       font-weight: 550;
       color: #333;
       text-align: center;
-      line-height: 100cpx;
-      letter-spacing: 5cpx;
+      line-height: 100px;
+      letter-spacing: 5px;
     }
     &__main {
       @include flex-center;
       flex-direction: column;
-      gap: 20cpx;
+      gap: 20px;
     }
     &__code {
       @include flex-center;
       justify-content: space-between;
       width: 100%;
-      height: 72cpx;
+      height: 72px;
       .el-input--default {
         width: 50%;
       }
     }
     &__footer {
       width: 100%;
-      height: 100cpx;
-      margin-top: 18cpx;
+      height: 100px;
+      margin-top: 18px;
       .login-form__button {
         width: 100%;
-        height: 74cpx;
-        font-size: 24cpx;
+        height: 74px;
+        font-size: 24px;
         color: $white-color;
         background-color: $primary-color;
-        border-radius: 8cpx;
+        border-radius: 8px;
         cursor: pointer;
       }
     }
     .exit-icon {
       position: absolute;
-      top: 15cpx;
-      right: 16cpx;
-      width: 40cpx;
-      height: 40cpx;
+      top: 15px;
+      right: 16px;
+      width: 40px;
+      height: 40px;
       cursor: pointer;
     }
   }
   .login-form__form {
     display: flex;
     flex-direction: column;
-    gap: 2cpx;
+    gap: 2px;
     width: 100%;
   }
   .el-input--default {
     width: 100%;
-    height: 72cpx;
+    height: 72px;
     :deep(.el-input__inner) {
-      font-size: 20cpx;
+      font-size: 20px;
       color: #999;
     }
   }

src/components/UpdatePwd.vue

@@ -160,33 +160,33 @@
 
   .login-form {
     position: relative;
-    width: 700cpx;
-    padding: 0 33cpx;
+    width: 700px;
+    padding: 0 33px;
     background: $white-color;
-    border-radius: 24cpx;
+    border-radius: 24px;
 
     &__header {
       width: 100%;
-      height: 100cpx;
-      font-size: 28cpx;
+      height: 100px;
+      font-size: 28px;
       font-weight: 550;
       color: #333;
       text-align: center;
-      line-height: 100cpx;
-      letter-spacing: 5cpx;
+      line-height: 100px;
+      letter-spacing: 5px;
     }
 
     &__main {
       @include flex-center;
       flex-direction: column;
-      gap: 20cpx;
+      gap: 20px;
     }
 
     &__code {
       @include flex-center;
       justify-content: space-between;
       width: 100%;
-      height: 72cpx;
+      height: 72px;
       .el-input--default {
         width: 50%;
       }
@@ -194,26 +194,26 @@
 
     &__footer {
       width: 100%;
-      height: 100cpx;
-      margin-top: 18cpx;
+      height: 100px;
+      margin-top: 18px;
 
       .login-form__button {
         width: 100%;
-        height: 74cpx;
-        font-size: 24cpx;
+        height: 74px;
+        font-size: 24px;
         color: $white-color;
         background-color: $primary-color;
-        border-radius: 8cpx;
+        border-radius: 8px;
         cursor: pointer;
       }
     }
 
     .exit-icon {
       position: absolute;
-      top: 15cpx;
-      right: 16cpx;
-      width: 40cpx;
-      height: 40cpx;
+      top: 15px;
+      right: 16px;
+      width: 40px;
+      height: 40px;
       cursor: pointer;
     }
   }
@@ -221,16 +221,16 @@
   .login-form__form {
     display: flex;
     flex-direction: column;
-    gap: 2cpx;
+    gap: 2px;
     width: 100%;
   }
 
   .el-input--default {
     width: 100%;
-    height: 72cpx;
+    height: 72px;
 
     :deep(.el-input__inner) {
-      font-size: 20cpx;
+      font-size: 20px;
       color: #999;
     }
   }

src/layout/MenuLayout.vue

@@ -78,29 +78,31 @@
 <style scoped lang="scss">
   .home-container {
     display: flex;
-    gap: 10cpx;
-    padding: 10cpx;
+    gap: 10px;
+    padding: 10px;
     height: 100%;
   }
   .aside,
   .main {
     height: 100%;
-    border-radius: 4cpx;
+    border-radius: 4px;
   }
   .aside {
-    width: 270cpx;
+    width: 270px;
+    flex-shrink: 0;
   }
   .main {
-    width: calc(100% - 270cpx);
+    flex: 1;
+    overflow: auto;
   }
   .el-menu-vertical {
     width: 100%;
     height: 100%;
     border: none;
-    border-radius: 4cpx;
+    border-radius: 4px;
     .el-menu-item,
     :deep(.el-sub-menu__title) {
-      font-size: 18cpx;
+      font-size: 18px;
       color: #333;
     }
     .el-menu-item.is-active {
@@ -108,7 +110,7 @@
       background-color: $primary-color;
     }
     .el-menu-item:first-child.is-active {
-      border-radius: 4cpx 4cpx 0 0;
+      border-radius: 4px 4px 0 0;
     }
   }
 

src/main.scss

@@ -9,14 +9,22 @@
   &::-webkit-scrollbar {
     position: relative;
     width: 0;
+    height: 0;
   }
   &::-webkit-scrollbar-thumb {
     background-color: transparent;
   }
-}
-
-.el-button {
-  font-size: 14cpx !important;
+  &:hover {
+    &::-webkit-scrollbar {
+      position: relative;
+      width: 2px;
+      height: 5px;
+      border-radius: 2px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #d3d3d3;
+    }
+  }
 }
 
 body {

src/router/full-routes.ts

@@ -293,9 +293,6 @@ export const disasterPreventionRoute = {
         noCache: false,
         query: '',
         title: '预防检查',
-        // OverviewIcon: renderSvg('overview'),
-        // DisasterWarningIcon: renderSvg('disaster-warning'),
-        // DisasterControlIcon: renderSvg('disaster-control'),
       },
       name: 'disaster-precaution',
       parentId: 1022,
@@ -361,7 +358,7 @@ export const disasterPreventionRoute = {
           },
           name: 'disaster-control-disposal-management-item',
           parentId: 1027,
-          path: 'disposal-management-item',
+          path: 'disposal-management-item/:id',
           redirect: '',
         },
         {

src/styles/custom-component.scss

@@ -1,8 +1,8 @@
 @use './variables.scss' as *;
 
 .custom-tooltip {
-  width: 200cpx;
-  max-height: 200cpx;
+  width: 200px;
+  max-height: 200px;
   overflow-y: auto;
 }
 

src/types/disaster-control/index.ts

@@ -37,9 +37,11 @@ export interface DisposalManagementCollapseListResponse<T> extends DisposalManag
 }
 
 export interface disasterReportTaskInfoListResponse extends BasicResponse {
-  reportTaskId: number;
+  id: number;
   status: number;
   reportPrincipalInfoList: { reportPrincipalId: number; reportPrincipalName: string; reportPrincipalStaffNo: string }[];
+  userGroupList: string;
+  deptName: string;
 }
 
 export interface disasterReportRecordDetailListResponse {
@@ -79,7 +81,31 @@ export interface DisposalManagementCreateQuery {
   isPush: boolean;
 }
 
+export interface DisposalManagementEditQuery {
+  dueCompleteTime?: string;
+  reportRequirement?: string;
+  taskStage?: number;
+  isPush?: number;
+  status?: number;
+  userGroupList?: number[];
+}
+
+export interface DisasterReportCreateQuery extends DisposalManagementCreateQuery {
+  handleTaskId: number;
+}
+
+export interface DisasterReportEditQuery extends DisposalManagementEditQuery {
+  id: number; //灾害处置上报任务id
+  handleTaskId: number; //灾害处置任务id
+}
+
 export interface DisposalManagementRuleForm extends Omit<DisposalManagementCreateQuery, 'isPush'> {
   isPush: boolean | null;
-  realname: string;
+  createdByName: string;
+}
+
+export interface DisposalManagementRuleFormEdit extends Omit<DisposalManagementCreateQuery, 'isPush' | 'deptIds'> {
+  createdByName: string;
+  deptName: string;
+  isPush: number | null;
 }

src/views/disaster/components/GroupSelect.vue

@@ -80,7 +80,7 @@
     left: 0;
     bottom: -30px;
     cursor: pointer;
-    font-size: 10cpx;
+    font-size: 10px;
     color: $primary-color;
   }
 </style>

src/views/disaster/components/Search.vue

@@ -55,18 +55,18 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 28cpx;
+    gap: 28px;
     &--item {
       @include flex-center;
       white-space: nowrap;
-      gap: 10cpx;
+      gap: 10px;
     }
     span {
       color: rgba(0, 0, 0, 0.85);
-      font-size: 14cpx;
+      font-size: 14px;
     }
     .el-select {
-      width: 200cpx;
+      width: 200px;
     }
   }
   .search-btn {

src/views/disaster/components/Upload.vue

@@ -231,11 +231,11 @@
 
   .upload-button {
     @include flex-center;
-    gap: 5cpx;
-    width: 100cpx;
+    gap: 5px;
+    width: 100px;
     border: 1px solid rgba($text-color, 0.15);
     color: $primary-color;
-    font-size: 14cpx;
+    font-size: 14px;
     border-radius: 2px;
     text-align: center;
     cursor: pointer;
@@ -252,13 +252,13 @@
   }
 
   .progress-container {
-    margin-top: 16cpx;
+    margin-top: 16px;
   }
 
   .progress-info {
     display: flex;
     justify-content: space-between;
-    font-size: 14cpx;
+    font-size: 14px;
     color: #666;
   }
 
@@ -282,10 +282,10 @@
   }
 
   .file-list {
-    margin-top: 16cpx;
+    margin-top: 16px;
     display: flex;
     flex-wrap: wrap;
-    gap: 8cpx;
+    gap: 8px;
   }
 
   .file-item {
@@ -293,8 +293,8 @@
     justify-content: space-between;
     width: 100%;
     border: 1px solid #e5e7eb;
-    border-radius: 6cpx;
-    padding: 12cpx;
+    border-radius: 6px;
+    padding: 12px;
     transition: all 0.2s ease;
 
     &:hover {
@@ -305,9 +305,9 @@
   .file-info {
     display: flex;
     align-items: center;
-    gap: 8cpx;
+    gap: 8px;
     img {
-      width: 20cpx;
+      width: 20px;
     }
   }
 

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

@@ -11,7 +11,7 @@
             class="disaster-precaution__header--button"
             :icon="Plus"
             v-if="disposalManagementPermissions"
-            @click="handleCreateDisposalManagement(FORM_OPERATE_TYPE.TASK_ITEM)"
+            @click="handleCreateDisposalManagement"
           >
             创建灾害处置任务
           </el-button>
@@ -33,133 +33,140 @@
             </template>
           </Search>
         </header>
-        <div
-          class="collapse-container"
-          v-loading="collapseLoading"
-          :class="disposalManagementPermissions ? 'collapse-container--permission' : 'collapse-container--default'"
-        >
-          <div class="empty-container" v-if="collapseList.length === 0">
-            <img :src="Empty" />
-            <span>暂无数据</span>
-          </div>
-          <template v-else>
-            <CollapseItem
-              v-for="item in collapseList"
-              :key="item.id"
-              :name="item.taskName"
-              :defaultOpen="item.id === defaultOpenId"
-            >
-              <template #viewOperation>
-                <el-tooltip
-                  :content="isViewTask(item.tableData[0].disasterReportTaskInfoList) ? '查看' : '任务尚未发布'"
-                  placement="top"
-                  effect="light"
-                >
-                  <img
-                    :src="ViewDocument"
-                    :class="[
-                      'collapse-item__icon',
-                      { 'collapse-item__icon--disabled': !isViewTask(item.tableData[0].disasterReportTaskInfoList) },
-                    ]"
-                    @click.stop="isViewTask(item.tableData[0].disasterReportTaskInfoList) && handleViewTask(item.id)"
-                  />
-                </el-tooltip>
-              </template>
-              <template #batchOperation v-if="disposalManagementPermissions">
-                <el-button
-                  type="primary"
-                  v-if="isBatchRelease(item.tableData[0].disasterReportTaskInfoList)"
-                  @click.stop="handleBatchRelease(item.tableData[0].disasterReportTaskInfoList)"
-                  >发布
-                </el-button>
-                <el-button
-                  type="primary"
-                  v-if="isBatchWithdraw(item.tableData[0].disasterReportTaskInfoList)"
-                  @click.stop="handleBatchWithdraw(item.tableData[0].disasterReportTaskInfoList)"
-                  >撤回
-                </el-button>
-                <el-button
-                  type="primary"
-                  v-if="isBatchDelete(item.tableData[0].disasterReportTaskInfoList)"
-                  @click.stop="handleBatchDelete(item.id)"
-                  >删除
-                </el-button>
-              </template>
-              <template #main-table>
-                <el-button
-                  type="primary"
-                  :icon="Plus"
-                  class="main-table__button"
-                  @click="handleCreateDisposalManagement(FORM_OPERATE_TYPE.TABLE_ITEM, item.taskName)"
-                  >新增</el-button
-                >
-                <BasicTable :tableData="item.tableData[0].disasterReportTaskInfoList" :tableConfig="tableConfig">
-                  <template #status="scope">
-                    <div class="active-status--div">
-                      <div
-                        class="dot"
-                        :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.status as ACTIVE_STATUS] }"
-                      />
-                      <span>{{ ACTIVE_STATUS_MAP[scope.row.status] }}</span>
-                    </div>
-                  </template>
-                  <template #taskStage="scope">
-                    <span>{{ getTaskStage(scope.row.taskStage) }}</span>
-                  </template>
-                  <template #reportPrincipals="scope">
-                    <p v-for="user in scope.row.reportPrincipalInfoList" :key="user.reportPrincipalId">
-                      {{ user.reportPrincipalName }}（{{ user.reportPrincipalStaffNo }}）
-                    </p>
-                  </template>
-                  <template #action="scope">
-                    <ActionButton
-                      text="编辑"
-                      v-if="scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE && disposalManagementPermissions"
-                      @click="handleEditDisposalManagement(scope.row.id)"
-                    />
-                    <ActionButton
-                      text="发布"
-                      :popconfirm="{
-                        title: '确定发布吗？',
-                      }"
-                      v-if="scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE && disposalManagementPermissions"
-                    />
-                    <ActionButton
-                      text="撤回"
-                      :popconfirm="{
-                        title: '确定撤回吗？',
-                      }"
-                      v-if="
-                        scope.row.taskStage === TASK_STAGE.TO_BE_REPORTED ||
-                        (TASK_STAGE.OVERDUE && disposalManagementPermissions)
-                      "
-                    />
-                    <ActionButton
-                      text="删除"
-                      :popconfirm="{
-                        title: '确定删除吗？',
-                      }"
-                      v-if="scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE && disposalManagementPermissions"
+        <section class="disaster-precaution__section">
+          <div
+            class="collapse-container"
+            v-loading="collapseLoading"
+            :class="disposalManagementPermissions ? 'collapse-container--permission' : 'collapse-container--default'"
+          >
+            <div class="empty-container" v-if="collapseList.length === 0">
+              <img :src="Empty" />
+              <span>暂无数据</span>
+            </div>
+            <template v-else>
+              <CollapseItem
+                ref="collapseItemRef"
+                v-for="item in collapseList"
+                :key="item.id"
+                :name="item.taskName"
+                :defaultOpen="item.id === collapseList[0].id"
+              >
+                <template #viewOperation>
+                  <el-tooltip
+                    :content="isViewTask(item.tableData[0].disasterReportTaskInfoList) ? '查看' : '任务尚未发布'"
+                    placement="top"
+                    effect="light"
+                  >
+                    <img
+                      :src="ViewDocument"
+                      :class="[
+                        'collapse-item__icon',
+                        { 'collapse-item__icon--disabled': !isViewTask(item.tableData[0].disasterReportTaskInfoList) },
+                      ]"
+                      @click.stop="isViewTask(item.tableData[0].disasterReportTaskInfoList) && handleViewTask(item.id)"
                     />
-                    <ActionButton text="查看" v-if="scope.row.status === ACTIVE_STATUS.ACTIVE" />
-                  </template>
-                </BasicTable>
-              </template>
-            </CollapseItem>
-          </template>
-        </div>
-        <div class="pagination-container" v-if="collapseList.length > 0">
-          <el-pagination
-            :current-page="currentPage"
-            :page-size="pageSize"
-            :page-sizes="DISASTER_CONTROL_PAGE_SIZE_CONFIG"
-            layout="prev, pager, next, jumper, sizes, total"
-            background
-            :total="total"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-        </div>
+                  </el-tooltip>
+                </template>
+                <template #batchOperation v-if="disposalManagementPermissions">
+                  <el-button
+                    type="primary"
+                    v-if="isBatchRelease(item.tableData[0].disasterReportTaskInfoList)"
+                    @click.stop="handleBatchRelease(item.id)"
+                    >发布
+                  </el-button>
+                  <el-button
+                    type="primary"
+                    v-if="isBatchWithdraw(item.tableData[0].disasterReportTaskInfoList)"
+                    @click.stop="handleBatchWithdraw(item.id)"
+                    >撤回
+                  </el-button>
+                  <el-button
+                    type="primary"
+                    v-if="isBatchDelete(item.tableData[0].disasterReportTaskInfoList)"
+                    @click.stop="handleBatchDelete(item.id)"
+                    >删除
+                  </el-button>
+                </template>
+                <template #main-table>
+                  <el-button
+                    type="primary"
+                    :icon="Plus"
+                    class="main-table__button"
+                    @click="handleCreateReportTask(item.id, item.taskName)"
+                    >新增</el-button
+                  >
+                  <BasicTable :tableData="item.tableData[0].disasterReportTaskInfoList" :tableConfig="tableConfig">
+                    <template #status="scope">
+                      <div class="active-status--div">
+                        <div
+                          class="dot"
+                          :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.status as ACTIVE_STATUS] }"
+                        />
+                        <span>{{ ACTIVE_STATUS_MAP[scope.row.status] }}</span>
+                      </div>
+                    </template>
+                    <template #taskStage="scope">
+                      <span>{{ getTaskStage(scope.row.taskStage) }}</span>
+                    </template>
+                    <template #reportPrincipals="scope">
+                      <p v-for="user in scope.row.reportPrincipalInfoList" :key="user.reportPrincipalId">
+                        {{ user.reportPrincipalName }}（{{ user.reportPrincipalStaffNo }}）
+                      </p>
+                    </template>
+                    <template #action="scope">
+                      <ActionButton
+                        text="编辑"
+                        v-if="disposalManagementPermissions && scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE"
+                        @click="handleEditReportTask(item.id, scope.row.id)"
+                      />
+                      <ActionButton
+                        text="发布"
+                        :popconfirm="{
+                          title: '确定发布吗？',
+                        }"
+                        @confirm="handlePublishReportTask(scope.row.id, item.id)"
+                        v-if="disposalManagementPermissions && scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE"
+                      />
+                      <ActionButton
+                        text="撤回"
+                        :popconfirm="{
+                          title: '确定撤回吗？',
+                        }"
+                        @confirm="handleWithdrawReportTask(scope.row.id, item.id)"
+                        v-if="
+                          disposalManagementPermissions &&
+                          (scope.row.taskStage === TASK_STAGE.TO_BE_REPORTED ||
+                            scope.row.taskStage === TASK_STAGE.OVERDUE)
+                        "
+                      />
+                      <ActionButton
+                        text="删除"
+                        :popconfirm="{
+                          title: '确定删除吗？',
+                        }"
+                        @confirm="handleDeleteReportTask(scope.row.id)"
+                        v-if="disposalManagementPermissions && scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE"
+                      />
+                      <ActionButton text="查看" v-if="scope.row.status === ACTIVE_STATUS.ACTIVE" />
+                    </template>
+                  </BasicTable>
+                </template>
+              </CollapseItem>
+            </template>
+          </div>
+          <div class="pagination-container" v-if="collapseList.length > 0">
+            <el-pagination
+              :current-page="currentPage"
+              :page-size="pageSize"
+              :page-sizes="DISASTER_CONTROL_PAGE_SIZE_CONFIG"
+              layout="prev, pager, next, jumper, sizes, total"
+              background
+              :total="total"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+            />
+          </div>
+        </section>
       </div>
     </main>
   </div>
@@ -171,13 +178,17 @@
   import CollapseItem from './src/components/CollapseItem.vue';
   import BasicTable from '@/components/BasicTable.vue';
   import { getAllDepartments } from '@/api/auth/dept';
-  import { onMounted, reactive, ref } from 'vue';
+  import { onMounted, reactive, ref, nextTick } from 'vue';
   import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
   import type { DeptTreeItem } from '@/types/dept/type';
   import {
     getDisasterControlCollapseData,
     getDisasterControlTableData,
+    publishDisasterHandleTask,
+    withdrawDisasterHandleTask,
     deleteDisasterHandleTask,
+    deleteDisasterReportTask,
+    editDisasterReportTask,
   } from '@/api/disaster-control';
   import type { disasterReportTaskInfoListResponse } from '@/types/disaster-control';
   import { DEFAULT_PAGE_SIZE, DISASTER_CONTROL_PAGE_SIZE_CONFIG, TASK_STAGE } from './src/constant';
@@ -202,11 +213,12 @@
   import { useRouter } from 'vue-router';
   import Empty from 'assets/images/empty@1X.png';
   import ViewDocument from './src/svg/view-document.svg';
-  import { FORM_OPERATE_TYPE } from './src/constant';
   import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
+  import { useMessageBox } from '@/views/disaster/hooks/messageBox';
   import { ElMessage } from 'element-plus';
-  const { permissions } = useUserInfoHook();
 
+  const { permissions } = useUserInfoHook();
+  const { openMessageBox } = useMessageBox();
   const firstLevelDepts = ref<DeptTreeItem[]>([]);
   const searchData = reactive({
     reportDeptIds: [],
@@ -214,12 +226,12 @@
     taskStage: '',
   });
 
-  const defaultOpenId = ref<number>();
   const currentPage = ref(1);
   const pageSize = ref(DEFAULT_PAGE_SIZE);
   const total = ref(0);
 
   const collapseLoading = ref(false);
+  const collapseItemRef = ref<InstanceType<typeof CollapseItem>[]>([]);
   const collapseList = ref<DisposalManagementCollapseListResponse<DisposalManagementTableResponse>[]>([]);
   const disposalManagementPermissions = ref(false);
 
@@ -245,25 +257,63 @@
   const router = useRouter();
   const Task_RouterName = 'disaster-control-disposal-management-task-item';
   const Table_RouterName = 'disaster-control-disposal-management-item';
-  const handleCreateDisposalManagement = (type: FORM_OPERATE_TYPE, taskName?: string) => {
-    const routerName = type === FORM_OPERATE_TYPE.TASK_ITEM ? Task_RouterName : Table_RouterName;
+  const handleCreateDisposalManagement = () => {
     router.push({
-      name: routerName,
+      name: Task_RouterName,
       query: {
         operate: 'create',
-        taskName: taskName,
       },
     });
   };
-  const handleEditDisposalManagement = (id: number) => {
+  const handleCreateReportTask = (id: number, taskName: string) => {
     router.push({
       name: Table_RouterName,
+      params: {
+        id,
+      },
       query: {
+        operate: 'create',
+        taskName,
+      },
+    });
+  };
+  const handleEditReportTask = (id: number, reportTaskId: number) => {
+    router.push({
+      name: Table_RouterName,
+      params: {
         id,
+      },
+      query: {
+        reportTaskId,
         operate: 'edit',
       },
     });
   };
+  const handlePublishReportTask = async (id: number, handleTaskId: number) => {
+    await editDisasterReportTask({
+      id,
+      handleTaskId,
+      taskStage: TASK_STAGE.TO_BE_REPORTED,
+      status: ACTIVE_STATUS.ACTIVE,
+    });
+    ElMessage.success('发布成功');
+    await getDisposalTableData();
+  };
+  const handleWithdrawReportTask = async (id: number, handleTaskId: number) => {
+    await editDisasterReportTask({
+      id,
+      handleTaskId,
+      taskStage: TASK_STAGE.TO_BE_RELEASED,
+      status: ACTIVE_STATUS.NOT_EFFECTIVE,
+    });
+    ElMessage.success('已取消发布');
+    await getDisposalTableData();
+  };
+  const handleDeleteReportTask = async (id: number) => {
+    await deleteDisasterReportTask(id);
+    await getDisposalTableData();
+    ElMessage.success('删除成功');
+  };
 
   const getDisposalData = async () => {
     collapseLoading.value = true;
@@ -281,12 +331,12 @@
         },
       ],
     }));
-    console.log(collapseList.value);
-    defaultOpenId.value = collapseList.value[0].id;
-    console.log('默认打开的ID' + defaultOpenId.value);
     taskIds.value = collapseList.value.map((item) => item.id);
     total.value = res.totalRow;
     collapseLoading.value = false;
+    nextTick(() => {
+      collapseItemRef.value[0]?.openFirstCollapseItem();
+    });
   };
 
   const getDisposalTableData = async () => {
@@ -327,21 +377,27 @@
     console.log('查看任务ID' + id);
   };
 
-  const handleBatchRelease = (disasterReportTaskInfoList: disasterReportTaskInfoListResponse[]) => {
-    const batchReleaseIds = disasterReportTaskInfoList
-      .filter((item) => item.taskStage === TASK_STAGE.TO_BE_RELEASED)
-      .map((item) => item.reportTaskId);
-    console.log(batchReleaseIds);
+  const handleBatchRelease = async (id: number) => {
+    const confirmed = await openMessageBox('确定发布吗？');
+    if (!confirmed) return;
+    await publishDisasterHandleTask(id);
+    ElMessage.success('发布成功');
+    await getDisposalData();
+    await getDisposalTableData();
   };
 
-  const handleBatchWithdraw = (disasterReportTaskInfoList: disasterReportTaskInfoListResponse[]) => {
-    const batchWithdrawIds = disasterReportTaskInfoList
-      .filter((item) => item.taskStage === TASK_STAGE.TO_BE_REPORTED || item.taskStage === TASK_STAGE.OVERDUE)
-      .map((item) => item.reportTaskId);
-    console.log(batchWithdrawIds);
+  const handleBatchWithdraw = async (id: number) => {
+    const confirmed = await openMessageBox('确定撤回吗？');
+    if (!confirmed) return;
+    await withdrawDisasterHandleTask(id);
+    ElMessage.success('撤回成功');
+    await getDisposalData();
+    await getDisposalTableData();
   };
 
   const handleBatchDelete = async (id: number) => {
+    const confirmed = await openMessageBox('确定删除吗？');
+    if (!confirmed) return;
     await deleteDisasterHandleTask(id);
     ElMessage.success('删除成功');
     await getDisposalData();
@@ -363,9 +419,8 @@
   @use '../style/disaster.scss' as *;
   @use './src/style/collapse.scss' as *;
   @use './src/style/common.scss' as *;
-  @use './src/style/pagination.scss' as *;
-  $collapse-container-height-default: calc(68vh - 13cpx);
-  $collapse-container-height-permission: calc(63vh - 15cpx);
+  $collapse-container-height-default: calc(68vh - 43px);
+  $collapse-container-height-permission: calc(63vh - 45px);
   .collapse-container {
     &--permission {
       height: $collapse-container-height-permission;
@@ -377,7 +432,7 @@
     }
   }
   .collapse-item__icon {
-    width: 20cpx;
+    width: 20px;
     &--disabled {
       cursor: not-allowed;
       opacity: 0.5;

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

@@ -21,12 +21,14 @@
   import { useRoute, useRouter } from 'vue-router';
   import BackIcon from 'assets/svg/back.svg';
   import { ElMessage } from 'element-plus';
-  import { createDisasterHandleTask } from '@/api/disaster-control';
+  import { createDisasterReportTask, editDisasterReportTask } from '@/api/disaster-control';
+  import type { DisposalManagementCreateQuery, DisasterReportEditQuery } from '@/types/disaster-control';
 
   const router = useRouter();
   const route = useRoute();
   const operate = route.query.operate;
-  const id = route.query.id;
+  const id = Number(route.params.id);
+  const reportTaskId = Number(route.query.reportTaskId);
   const headerTitle = computed(() => {
     const fixedTitle = '灾害处置任务';
     if (operate === 'create') {
@@ -46,6 +48,13 @@
     }
   });
   const dynamicComponentRef = ref();
+  const createDisposalManagementItemFunc = async (formData: DisposalManagementCreateQuery) => {
+    await createDisasterReportTask({ handleTaskId: id, ...formData });
+  };
+  const editDisposalManagementItemFunc = async (formData: DisasterReportEditQuery) => {
+    if (!reportTaskId) return;
+    await editDisasterReportTask({ ...formData, id: reportTaskId, handleTaskId: id });
+  };
   const formLoading = ref(false);
   const submit = async () => {
     if (!dynamicComponentRef.value) return;
@@ -53,10 +62,20 @@
     if (!res) return;
     formLoading.value = true;
     const formData = dynamicComponentRef.value.getFormData();
-    await createDisasterHandleTask(formData);
-    ElMessage.success('提交成功');
-    formLoading.value = false;
-    router.back();
+    let message;
+    try {
+      if (operate === 'create') {
+        await createDisposalManagementItemFunc(formData);
+        message = '创建成功';
+      } else {
+        await editDisposalManagementItemFunc(formData);
+        message = '编辑成功';
+      }
+      ElMessage.success(message);
+      router.back();
+    } finally {
+      formLoading.value = false;
+    }
   };
 </script>
 

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

@@ -48,10 +48,13 @@
     if (!res) return;
     formLoading.value = true;
     const formData = dynamicComponentRef.value.getFormData();
-    await createDisasterHandleTask(formData);
-    ElMessage.success('提交成功');
-    formLoading.value = false;
-    router.back();
+    try {
+      await createDisasterHandleTask(formData);
+      ElMessage.success('提交成功');
+      router.back();
+    } finally {
+      formLoading.value = false;
+    }
   };
 </script>
 

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

@@ -12,78 +12,80 @@
             @update:searchData="handleSearch"
           />
         </header>
-        <div class="collapse-container" v-loading="collapseLoading">
-          <div class="empty-container" v-if="collapseList.length === 0">
-            <img :src="Empty" />
-            <span>暂无数据</span>
-          </div>
-          <template v-else>
-            <CollapseItem
-              v-for="item in collapseList"
-              :key="item.id"
-              :name="item.taskName"
-              :defaultOpen="item.id === 1"
-            >
-              <template #viewOperation> <img :src="ViewDocument" class="collapse-item__icon" /> </template>
-              <template #main-table>
-                <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>
-                    </div>
-                  </template>
-                  <template #affectedItems="scope">
-                    <el-tooltip :content="scope.row.affectedItems" placement="top-start" effect="light">
-                      <div class="affected-items-container">
-                        <span>{{ scope.row.affectedItems }}</span>
+        <section class="disaster-precaution__section">
+          <div class="collapse-container" v-loading="collapseLoading">
+            <div class="empty-container" v-if="collapseList.length === 0">
+              <img :src="Empty" />
+              <span>暂无数据</span>
+            </div>
+            <template v-else>
+              <CollapseItem
+                v-for="item in collapseList"
+                :key="item.id"
+                :name="item.taskName"
+                :defaultOpen="item.id === 1"
+              >
+                <template #viewOperation> <img :src="ViewDocument" class="collapse-item__icon" /> </template>
+                <template #main-table>
+                  <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>
                       </div>
-                    </el-tooltip>
-                  </template>
-                  <template #priority="scope">
-                    <div
-                      class="priority-container"
-                      :class="
-                        scope.row.priority === PRIORITY_STATUS.URGENT
-                          ? 'priority-container--urgent'
-                          : 'priority-container--normal'
-                      "
-                    >
-                      <span>{{ getPriorityStatus(scope.row.priority) }}</span>
-                    </div>
-                  </template>
-                  <template #fixStatus="scope">
-                    <div class="fix-status-container">
-                      <span>{{ getfixStatus(scope.row.fixStatus) }}</span>
-                    </div>
-                  </template>
-                  <template #action="scope">
-                    <div class="action-container" v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED">
-                      <ActionButton text="查看" />
-                      <ActionButton text="去整改" />
-                      <ActionButton text="添加整改人" />
-                    </div>
-                    <div class="action-container" v-else>
-                      <ActionButton text="查看" />
-                      <ActionButton text="去整改" />
-                    </div>
-                  </template>
-                </BasicTable>
-              </template>
-            </CollapseItem>
-          </template>
-        </div>
-        <div class="pagination-container" v-if="collapseList.length > 0">
-          <el-pagination
-            :current-page="currentPage"
-            :page-size="pageSize"
-            :page-sizes="DISASTER_CONTROL_PAGE_SIZE_CONFIG"
-            layout="prev, pager, next, jumper, sizes, total"
-            background
-            :total="total"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-        </div>
+                    </template>
+                    <template #affectedItems="scope">
+                      <el-tooltip :content="scope.row.affectedItems" placement="top-start" effect="light">
+                        <div class="affected-items-container">
+                          <span>{{ scope.row.affectedItems }}</span>
+                        </div>
+                      </el-tooltip>
+                    </template>
+                    <template #priority="scope">
+                      <div
+                        class="priority-container"
+                        :class="
+                          scope.row.priority === PRIORITY_STATUS.URGENT
+                            ? 'priority-container--urgent'
+                            : 'priority-container--normal'
+                        "
+                      >
+                        <span>{{ getPriorityStatus(scope.row.priority) }}</span>
+                      </div>
+                    </template>
+                    <template #fixStatus="scope">
+                      <div class="fix-status-container">
+                        <span>{{ getfixStatus(scope.row.fixStatus) }}</span>
+                      </div>
+                    </template>
+                    <template #action="scope">
+                      <div class="action-container" v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED">
+                        <ActionButton text="查看" />
+                        <ActionButton text="去整改" />
+                        <ActionButton text="添加整改人" />
+                      </div>
+                      <div class="action-container" v-else>
+                        <ActionButton text="查看" />
+                        <ActionButton text="去整改" />
+                      </div>
+                    </template>
+                  </BasicTable>
+                </template>
+              </CollapseItem>
+            </template>
+          </div>
+          <div class="pagination-container" v-if="collapseList.length > 0">
+            <el-pagination
+              :current-page="currentPage"
+              :page-size="pageSize"
+              :page-sizes="DISASTER_CONTROL_PAGE_SIZE_CONFIG"
+              layout="prev, pager, next, jumper, sizes, total"
+              background
+              :total="total"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+            />
+          </div>
+        </section>
       </div>
     </main>
   </div>
@@ -205,14 +207,13 @@
   @use '../style/disaster.scss' as *;
   @use './src/style/collapse.scss' as *;
   @use './src/style/common.scss' as *;
-  @use './src/style/pagination.scss' as *;
-  $collapse-container-height-default: calc(68vh - 13cpx);
+  $collapse-container-height-default: calc(68vh - 43px);
   .collapse-container {
     height: $collapse-container-height-default;
     max-height: $collapse-container-height-default;
   }
   .collapse-item__icon {
-    width: 20cpx;
+    width: 20px;
     &--disabled {
       cursor: not-allowed;
       opacity: 0.5;

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

@@ -35,6 +35,6 @@
     margin: 0;
   }
   :deep(.el-tabs__item) {
-    font-size: 14cpx !important;
+    font-size: 14px !important;
   }
 </style>

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

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
+  import { ref } from 'vue';
   import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
   const props = defineProps<{ name: string; defaultOpen?: boolean }>();
   const isOpen = ref(false);
@@ -30,8 +30,8 @@
     if (!props.defaultOpen) return;
     isOpen.value = true;
   };
-  onMounted(() => {
-    openFirstCollapseItem();
+  defineExpose({
+    openFirstCollapseItem,
   });
 </script>
 
@@ -39,25 +39,25 @@
   .collapse-item {
     width: 100%;
     background: #f2f8ff;
-    padding: 10cpx;
-    border-radius: 4cpx;
+    padding: 10px;
+    border-radius: 4px;
     margin-bottom: 8px;
     &__header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 10cpx 14cpx;
-      font-size: 20cpx;
+      padding: 10px 14px;
+      font-size: 20px;
       font-weight: 550;
       color: rgba($text-color, 0.85);
       cursor: pointer;
       &--left {
         @include flex-center;
-        gap: 20cpx;
+        gap: 20px;
       }
     }
     &__main {
-      padding-top: 20cpx;
+      padding-top: 20px;
     }
   }
 </style>

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

@@ -81,7 +81,7 @@
     getFormData,
   });
   onMounted(() => {
-    ruleFormData.realname = realname;
+    ruleFormData.createdByName = realname;
     ruleFormData.taskName = taskName;
     getDeptList();
     getUserGroupList();

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

@@ -37,7 +37,7 @@
   import { onMounted, ref } from 'vue';
   import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
   import type { DisposalManagementRuleForm } from '@/types/disaster-control';
-  import type { DeptTree } from '@/types/dept/type';
+  import type { DeptTreeItem } from '@/types/dept/type';
   import type { UserGroupOption } from '@/types/person-group/type';
   import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
   import { getAllDepartments } from '@/api/auth/dept';
@@ -47,7 +47,7 @@
 
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
 
-  const firstLevelDepts = ref<DeptTree[]>([]);
+  const firstLevelDepts = ref<DeptTreeItem[]>([]);
   const groupOptions = ref<UserGroupOption[]>([]);
 
   const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
@@ -79,7 +79,7 @@
     getFormData,
   });
   onMounted(() => {
-    ruleFormData.realname = realname;
+    ruleFormData.createdByName = realname;
     getDeptList();
     getUserGroupList();
     cloneRuleFormData();

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

@@ -1,24 +1,13 @@
 <template>
   <div class="info-container">
     <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
-      <template #deptIds>
-        <el-select
-          v-model="ruleFormData.deptIds"
-          multiple
-          placeholder="请选择上报部门"
-          filterable
-          class="custom-select"
-        >
-          <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
-        </el-select>
-      </template>
       <template #userGroupList>
         <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" />
       </template>
       <template #isPush>
         <el-radio-group v-model="ruleFormData.isPush">
-          <el-radio :label="true">是</el-radio>
-          <el-radio :label="false">否</el-radio>
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </template>
     </BasicForm>
@@ -31,31 +20,27 @@
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import {
     DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_EDIT,
-    DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
+    DISPOSAL_MANAGEMENT_TASK_FROM_DATA_EDIT,
     DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_EDIT,
   } from '../config';
   import { onMounted, ref } from 'vue';
-  import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
-  import type { DisposalManagementRuleForm } from '@/types/disaster-control';
-  import type { DeptTree } from '@/types/dept/type';
+  import type { DisposalManagementRuleFormEdit } from '@/types/disaster-control';
   import type { UserGroupOption } from '@/types/person-group/type';
-  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
-  import { getAllDepartments } from '@/api/auth/dept';
   import { getAllUserGroup } from '@/api/system/person-group';
+  import { getDisasterControlTableData } from '@/api/disaster-control';
   import { useRoute } from 'vue-router';
 
-  const { realname } = useUserInfoHook();
   const route = useRoute();
-  const taskName = route.query.taskName as string;
+  const id = Number(route.params.id);
+  const reportTaskId = Number(route.query.reportTaskId);
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
 
-  const firstLevelDepts = ref<DeptTree[]>([]);
   const groupOptions = ref<UserGroupOption[]>([]);
 
   const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
-    useFormConfigHook<DisposalManagementRuleForm>(
+    useFormConfigHook<DisposalManagementRuleFormEdit>(
       DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_EDIT,
-      DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
+      DISPOSAL_MANAGEMENT_TASK_FROM_DATA_EDIT,
       DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_EDIT,
     );
 
@@ -68,10 +53,6 @@
     cloneRuleFormData();
     return ruleFormData;
   };
-  const getDeptList = async () => {
-    const res = await getAllDepartments();
-    firstLevelDepts.value = formatDeptTree(res);
-  };
   const getUserGroupList = async () => {
     const res = await getAllUserGroup();
     groupOptions.value = res.groupVOList;
@@ -80,12 +61,21 @@
     handleValidate,
     getFormData,
   });
+  const getFormDetail = async () => {
+    const res = await getDisasterControlTableData({ handleTaskIds: [id] });
+    const taskItem = res[0].disasterReportTaskInfoList.find((tableItem) => tableItem.id === reportTaskId);
+    if (!taskItem) return;
+    for (const key in ruleFormData) {
+      if (key in taskItem) {
+        ruleFormData[key] = taskItem[key];
+        ruleFormData.userGroupList = JSON.parse(taskItem.userGroupList) || [];
+      }
+    }
+    cloneRuleFormData();
+  };
   onMounted(() => {
-    ruleFormData.realname = realname;
-    ruleFormData.taskName = taskName;
-    getDeptList();
+    getFormDetail();
     getUserGroupList();
-    cloneRuleFormData();
     beforeRouteLeave();
   });
 </script>
@@ -93,4 +83,4 @@
 <style scoped lang="scss">
   @use '@/views/disaster/style/info-container.scss' as *;
   @use '../style/item-common.scss' as *;
-</style>
+</style>

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

@@ -20,72 +20,74 @@
         </template>
       </Search>
     </header>
-    <div class="collapse-container" v-loading="collapseLoading">
-      <div class="empty-container" v-if="collapseList.length === 0">
-        <img :src="Empty" />
-        <span>暂无数据</span>
-      </div>
-      <template v-else>
-        <CollapseItem v-for="item in collapseList" :key="item.id" :name="item.taskName" :defaultOpen="item.id === 1">
-          <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">新增</el-button>
-            <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>
-                </div>
-              </template>
-              <template #affectedItems="scope">
-                <el-tooltip :content="scope.row.affectedItems" placement="top-start" effect="light">
-                  <div class="affected-items-container">
-                    <span>{{ scope.row.affectedItems }}</span>
+    <section class="disaster-precaution__section">
+      <div class="collapse-container" v-loading="collapseLoading">
+        <div class="empty-container" v-if="collapseList.length === 0">
+          <img :src="Empty" />
+          <span>暂无数据</span>
+        </div>
+        <template v-else>
+          <CollapseItem v-for="item in collapseList" :key="item.id" :name="item.taskName" :defaultOpen="item.id === 1">
+            <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">新增</el-button>
+              <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>
+                  </div>
+                </template>
+                <template #affectedItems="scope">
+                  <el-tooltip :content="scope.row.affectedItems" placement="top-start" effect="light">
+                    <div class="affected-items-container">
+                      <span>{{ scope.row.affectedItems }}</span>
+                    </div>
+                  </el-tooltip>
+                </template>
+                <template #priority="scope">
+                  <div
+                    class="priority-container"
+                    :class="
+                      scope.row.priority === PRIORITY_STATUS.URGENT
+                        ? 'priority-container--urgent'
+                        : 'priority-container--normal'
+                    "
+                  >
+                    <span>{{ getPriorityStatus(scope.row.priority) }}</span>
+                  </div>
+                </template>
+                <template #fixStatus="scope">
+                  <div class="fix-status-container">
+                    <span>{{ getfixStatus(scope.row.fixStatus) }}</span>
                   </div>
-                </el-tooltip>
-              </template>
-              <template #priority="scope">
-                <div
-                  class="priority-container"
-                  :class="
-                    scope.row.priority === PRIORITY_STATUS.URGENT
-                      ? 'priority-container--urgent'
-                      : 'priority-container--normal'
-                  "
-                >
-                  <span>{{ getPriorityStatus(scope.row.priority) }}</span>
-                </div>
-              </template>
-              <template #fixStatus="scope">
-                <div class="fix-status-container">
-                  <span>{{ getfixStatus(scope.row.fixStatus) }}</span>
-                </div>
-              </template>
-              <template #action="scope">
-                <ActionButton text="编辑" v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED" />
-                <ActionButton text="查看" v-if="scope.row.isLoss === IS_LOSS.NO_LOSS" />
-                <ActionButton text="删除" />
-              </template>
-            </BasicTable>
-          </template>
-        </CollapseItem>
-      </template>
-    </div>
-    <div class="pagination-container" v-if="collapseList.length > 0">
-      <el-pagination
-        :current-page="currentPage"
-        :page-size="pageSize"
-        :page-sizes="DISASTER_CONTROL_PAGE_SIZE_CONFIG"
-        layout="prev, pager, next, jumper, sizes, total"
-        background
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
+                </template>
+                <template #action="scope">
+                  <ActionButton text="编辑" v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED" />
+                  <ActionButton text="查看" v-if="scope.row.isLoss === IS_LOSS.NO_LOSS" />
+                  <ActionButton text="删除" />
+                </template>
+              </BasicTable>
+            </template>
+          </CollapseItem>
+        </template>
+      </div>
+      <div class="pagination-container" v-if="collapseList.length > 0">
+        <el-pagination
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :page-sizes="DISASTER_CONTROL_PAGE_SIZE_CONFIG"
+          layout="prev, pager, next, jumper, sizes, total"
+          background
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </section>
   </div>
 </template>
 
@@ -192,14 +194,13 @@
   @use '@/views/disaster/style/disaster.scss' as *;
   @use '../style/collapse.scss' as *;
   @use '../style/common.scss' as *;
-  @use '../style/pagination.scss' as *;
-  $collapse-container-height: calc(60vh - 20cpx);
+  $collapse-container-height: calc(60vh - 50px);
   .collapse-container {
     height: $collapse-container-height;
     max-height: $collapse-container-height;
   }
   .update-time-container {
-    font-size: 14cpx;
+    font-size: 14px;
     color: #999;
     font-weight: 400;
   }

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

@@ -45,7 +45,7 @@ const DISPOSAL_MANAGEMENT_BASIC_FROM_CONFIG: FormConfig[] = [
   },
   {
     label: '创建人',
-    prop: 'realname',
+    prop: 'createdByName',
     component: 'ElInput',
     componentProps: {
       disabled: true,
@@ -103,7 +103,7 @@ export const DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_EDIT: FormConfig[] = [
   },
   {
     label: '上报部门',
-    prop: 'deptIds',
+    prop: 'deptName',
     component: 'ElInput',
     componentProps: {
       disabled: true,
@@ -116,15 +116,19 @@ export const DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_EDIT: FormConfig[] = [
 const BASIC_FROM_DATA = {};
 const DISPOSAL_MANAGEMENT_BASIC_FROM_DATA = {
   taskName: '',
-  deptIds: [],
   dueCompleteTime: '',
   reportRequirement: '',
   userGroupList: [],
   isPush: null,
-  realname: '',
+  createdByName: '',
 };
 export const DISPOSAL_MANAGEMENT_TASK_FROM_DATA = {
   ...DISPOSAL_MANAGEMENT_BASIC_FROM_DATA,
+  deptIds: [],
+};
+export const DISPOSAL_MANAGEMENT_TASK_FROM_DATA_EDIT = {
+  ...DISPOSAL_MANAGEMENT_BASIC_FROM_DATA,
+  deptName: '',
 };
 
 // 通用表单规则

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

@@ -14,6 +14,7 @@ import {
 import {
   DISPOSAL_MANAGEMENT_TASK_FROM_CONFIG,
   DISPOSAL_MANAGEMENT_TASK_FROM_DATA,
+  DISPOSAL_MANAGEMENT_TASK_FROM_DATA_EDIT,
   DISPOSAL_MANAGEMENT_TASK_FROM_RULES,
   DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_CREATE,
   DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_CREATE,
@@ -38,4 +39,5 @@ export {
   DISPOSAL_MANAGEMENT_ITEM_FROM_CONFIG_EDIT,
   DISPOSAL_MANAGEMENT_ITEM_FROM_RULES_EDIT,
   DISPOSAL_RECTIFICATION_SEARCH_CONFIG,
+  DISPOSAL_MANAGEMENT_TASK_FROM_DATA_EDIT,
 };

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

@@ -18,7 +18,7 @@ export const DISPOSAL_MANAGEMENT_TABLE_OPTIONS = {
 // 损失上报-上报任务表格配置
 export const LOSS_REPORT_REPORT_TASK_TABLE_OPTIONS = {
   ...TABLE_OPTIONS,
-  height: 'calc(65vh - 20px)',
+  height: 'calc(65vh - 50px)',
 };
 
 // 基础表格列配置项
@@ -28,7 +28,7 @@ const BASIC_TABLE_COLUMNS = {
     label: '序号',
     prop: 'index',
     align: 'center',
-    width: '80cpx',
+    width: '80px',
   },
   DEPT_NAME: {
     label: '上报部门',
@@ -39,7 +39,7 @@ const BASIC_TABLE_COLUMNS = {
     label: '应完成上报时间',
     prop: 'dueCompleteTime',
     align: 'center',
-    width: '200cpx',
+    width: '200px',
   },
   TASK_STAGE: {
     label: '任务阶段',
@@ -53,7 +53,7 @@ const BASIC_TABLE_COLUMNS = {
     align: 'center',
     slot: 'action',
     fixed: 'right',
-    width: '250cpx',
+    width: '250px',
   },
 };
 
@@ -67,7 +67,7 @@ export const DISPOSAL_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
     prop: 'status',
     align: 'center',
     slot: 'status',
-    width: '120cpx',
+    width: '120px',
   },
   BASIC_TABLE_COLUMNS.TASK_STAGE,
   {
@@ -75,7 +75,7 @@ export const DISPOSAL_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
     prop: 'reportPrincipals',
     align: 'center',
     slot: 'reportPrincipals',
-    width: '200cpx',
+    width: '200px',
   },
   BASIC_TABLE_COLUMNS.ACTION,
 ];
@@ -101,20 +101,20 @@ export const LOSS_RECORD_TABLE_COLUMNS: TableColumnProps[] = [
     prop: 'affectedArea',
     align: 'center',
     slot: 'affectedArea',
-    width: '180cpx',
+    width: '180px',
   },
   {
     label: '受灾物品',
     prop: 'affectedItems',
     align: 'center',
     slot: 'affectedItems',
-    width: '200cpx',
+    width: '200px',
   },
   {
     label: '上报时间',
     prop: 'updatedAt',
     align: 'center',
-    width: '200cpx',
+    width: '200px',
   },
   {
     label: '整改部门',

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

@@ -105,9 +105,3 @@ export const LOSS_REPORT_TABS = [
     value: 'lossRecord',
   },
 ];
-
-// 表单操作项
-export enum FORM_OPERATE_TYPE {
-  TABLE_ITEM = 'tableItem',
-  TASK_ITEM = 'taskItem',
-}

src/views/disaster/disaster-control/src/style/collapse.scss

@@ -3,19 +3,26 @@ $priority-urgent-color: #ff4d4f;
 .collapse-container {
   display: flex;
   flex-direction: column;
-  gap: 10cpx;
+  gap: 10px;
   width: 100%;
   overflow-y: auto;
   .main-table__button {
-    margin-bottom: 10cpx;
+    margin-bottom: 10px;
   }
 }
+.disaster-precaution__section {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
 .empty-container {
   width: 100%;
   height: 100%;
   @include flex-center;
   flex-direction: column;
-  gap: 10cpx;
+  gap: 10px;
 }
 .pagination-container {
   display: flex;

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

@@ -1,11 +1,11 @@
 .disaster-precaution-container__header {
   flex-direction: row !important;
   justify-content: flex-start !important;
-  gap: 8cpx !important;
+  gap: 8px !important;
 }
 
 .custom-select {
-  width: 200cpx;
+  width: 200px;
   :deep(.el-select__selection) {
     min-height: 24px;
     max-height: 24px;

src/views/disaster/disaster-control/src/style/pagination.scss

@@ -1,26 +0,0 @@
-.el-pagination {
-  :deep(.btn-prev),
-  :deep(.btn-next),
-  :deep(.el-pager li) {
-    width: 32cpx;
-    height: 32cpx;
-  }
-  :deep(.el-pager li),
-  :deep(.el-pagination__jump),
-  :deep(.el-pagination__total),
-  :deep(.el-input__wrapper),
-  :deep(.el-select__wrapper),
-  :deep(.el-select__suffix) {
-    font-size: 14cpx;
-  }
-  :deep(.el-input__wrapper) {
-    padding: 1cpx 11cpx;
-  }
-  :deep(.el-select__wrapper) {
-    padding: 4cpx 12cpx;
-  }
-  :deep(.el-input__inner) {
-    width: 34cpx;
-    height: 30cpx;
-  }
-}

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

@@ -141,11 +141,11 @@
   .disaster-precaution-container__header {
     flex-direction: row !important;
     justify-content: flex-start !important;
-    gap: 8cpx !important;
+    gap: 8px !important;
   }
   .title,
   .content {
-    font-size: 14cpx;
+    font-size: 14px;
   }
   .title {
     color: rgba($text-color, 0.85);

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

@@ -104,6 +104,6 @@
   .disaster-precaution-container__header {
     flex-direction: row !important;
     justify-content: flex-start !important;
-    gap: 8cpx !important;
+    gap: 8px !important;
   }
 </style>

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

@@ -295,12 +295,12 @@
   .batch-operation--div {
     @include flex-center;
     justify-content: flex-start;
-    gap: 60cpx;
+    gap: 60px;
     width: 100%;
-    height: 54cpx;
-    border: 4cpx;
-    padding: 16cpx 25cpx;
+    height: 54px;
+    border: 4px;
+    padding: 16px 25px;
     background-color: #ddefff;
-    margin-top: 20cpx;
+    margin-top: 20px;
   }
 </style>

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

@@ -39,12 +39,12 @@
   @use '../style/disaster.scss' as *;
   .template-card-list {
     display: flex;
-    gap: 32cpx;
+    gap: 32px;
   }
   .template-card-item {
     @include flex-center;
     flex-direction: column;
-    width: 245cpx;
+    width: 245px;
     cursor: pointer;
     transition: all 0.3s ease-in-out;
     &:hover {
@@ -55,15 +55,15 @@
       width: 100%;
     }
     .img-container {
-      height: 147cpx;
+      height: 147px;
       background-size: cover;
       background-position: center center;
     }
     .footer {
-      height: 55cpx;
-      line-height: 55cpx;
+      height: 55px;
+      line-height: 55px;
       text-align: center;
-      font-size: 16cpx;
+      font-size: 16px;
       color: rgba(0, 0, 0, 0.85);
       outline: 1px solid #e9e9e9;
     }

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

@@ -44,9 +44,9 @@
   .disaster-precaution-container__header {
     flex-direction: row !important;
     justify-content: flex-start !important;
-    gap: 8cpx !important;
+    gap: 8px !important;
   }
   .disaster-precaution-container__main {
-    width: calc(100vw - 300cpx);
+    width: calc(100vw - 300px);
   }
 </style>

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

@@ -420,8 +420,8 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 5cpx;
-    padding: 5cpx;
+    gap: 5px;
+    padding: 5px;
     height: 120px;
   }
 
@@ -459,15 +459,6 @@
       height: 60%;
       max-height: 60%;
       overflow: auto;
-      &:hover {
-        &::-webkit-scrollbar {
-          position: relative;
-          width: 2px;
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: #d3d3d3;
-        }
-      }
     }
     .execute-person {
       @include flex-center;

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

@@ -3,9 +3,9 @@
  */
 import type { TableColumnProps } from '@/types/basic-table';
 
-export const TABLE_MANAGEMENT_HEIGHT_DEFAULT = 'calc(65vh - 20px)';
-export const TABLE_MANAGEMENT_HEIGHT_NOT_PERMISSION = 'calc(70vh - 20px)';
-export const TABLE_MANAGEMENT_HEIGHT_BATCH_OPERATION = 'calc(65vh - 95px)';
+export const TABLE_MANAGEMENT_HEIGHT_DEFAULT = 'calc(65vh - 50px)';
+export const TABLE_MANAGEMENT_HEIGHT_NOT_PERMISSION = 'calc(70vh - 50px)';
+export const TABLE_MANAGEMENT_HEIGHT_BATCH_OPERATION = 'calc(65vh - 125px)';
 
 // 基础表格样式配置
 const TABLE_OPTIONS_DEFAULT = {
@@ -30,7 +30,7 @@ const BASIC_TABLE_COLUMNS = {
     label: '任务名称',
     align: 'center',
     slot: 'taskName',
-    width: '150cpx',
+    width: '150px',
   },
   SELF_CHECK_UNIT: {
     prop: 'deptName',
@@ -47,7 +47,7 @@ const BASIC_TABLE_COLUMNS = {
     prop: 'dueCompleteTime',
     label: '应完成时间',
     align: 'center',
-    width: '200cpx',
+    width: '200px',
   },
   TASK_STAGE: {
     prop: 'taskState',
@@ -60,7 +60,7 @@ const BASIC_TABLE_COLUMNS = {
     label: '操作',
     align: 'center',
     slot: 'action',
-    width: '250cpx',
+    width: '250px',
     fixed: 'right',
   },
 };
@@ -72,7 +72,7 @@ export const TASK_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
     label: '',
     type: 'selection',
     align: 'center',
-    width: '80cpx',
+    width: '80px',
   },
   BASIC_TABLE_COLUMNS.TASK_NAME,
   BASIC_TABLE_COLUMNS.SELF_CHECK_UNIT,
@@ -83,14 +83,14 @@ export const TASK_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
     label: '生效状态',
     align: 'center',
     slot: 'effectStatus',
-    width: '120cpx',
+    width: '120px',
   },
   BASIC_TABLE_COLUMNS.TASK_STAGE,
   {
     prop: 'updatedAt',
     label: '创建时间',
     align: 'center',
-    width: '200cpx',
+    width: '200px',
   },
   BASIC_TABLE_COLUMNS.ACTION,
 ];

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

@@ -10,6 +10,6 @@
     text-overflow: ellipsis;
   }
   img {
-    width: 36cpx;
+    width: 36px;
   }
 }

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

@@ -4,6 +4,6 @@
 .task-type-container {
   display: flex;
   justify-content: space-between;
-  gap: 10cpx;
+  gap: 10px;
   width: 100%;
 }

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

@@ -251,12 +251,12 @@
   @use '../style/disaster.scss' as *;
   @use './src/common.scss' as *;
   .weather-warning-icon {
-    width: 50cpx;
-    height: 50cpx;
+    width: 50px;
+    height: 50px;
   }
   .content--div {
     width: 100%;
-    max-height: 50cpx;
+    max-height: 50px;
     overflow-y: hidden;
   }
 </style>

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

@@ -1,8 +1,8 @@
 .disaster-precaution-container__header {
   flex-direction: row !important;
   justify-content: flex-start !important;
-  gap: 8cpx !important;
+  gap: 8px !important;
 }
 .el-select {
-  width: 200cpx;
+  width: 200px;
 }

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

@@ -100,18 +100,18 @@
   }
   .title {
     width: 100%;
-    font-size: 20cpx;
+    font-size: 20px;
     font-weight: 600;
     color: rgba($text-color, 0.85);
-    margin-bottom: 18cpx;
+    margin-bottom: 18px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .disaster {
     display: flex;
-    gap: 370cpx;
-    margin-bottom: 8cpx;
+    gap: 370px;
+    margin-bottom: 8px;
   }
   .info-item {
     color: rgba($text-color, 0.85);
@@ -131,11 +131,11 @@
     height: 1px;
     background-color: #979797;
     opacity: 0.26;
-    margin-top: 18cpx;
-    margin-bottom: 18cpx;
+    margin-top: 18px;
+    margin-bottom: 18px;
   }
   .attachment {
-    margin-top: 18cpx;
+    margin-top: 18px;
     a {
       color: $primary-color;
       cursor: pointer;
@@ -144,26 +144,26 @@
   .attachment-list {
     display: flex;
     flex-wrap: wrap;
-    gap: 10cpx;
-    margin-top: 10cpx;
+    gap: 10px;
+    margin-top: 10px;
   }
   .attachment-item {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    width: 220cpx;
-    height: 81cpx;
-    padding: 16cpx 10cpx;
+    width: 220px;
+    height: 81px;
+    padding: 16px 10px;
     background: #eee;
-    border-radius: 8cpx;
+    border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
     &:hover {
       background: #ddd;
-      box-shadow: 0 0 10cpx rgba(0, 0, 0, 0.1);
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     }
     &--name {
-      font-size: 14cpx;
+      font-size: 14px;
       color: #333;
     }
     &--footer {
@@ -171,10 +171,10 @@
       justify-content: space-between;
       .info {
         @include flex-center;
-        gap: 2cpx;
+        gap: 2px;
         img {
-          width: 16cpx;
-          height: 16cpx;
+          width: 16px;
+          height: 16px;
         }
         span {
           color: #999;

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

@@ -3,8 +3,8 @@
  */
 import type { TableColumnProps } from '@/types/basic-table';
 
-export const TABLE_HEIGHT_DEFAULT = 'calc(70vh - 20px)';
-export const TABLE_HEIGHT_PREMISSION = 'calc(65vh - 20px)';
+export const TABLE_HEIGHT_DEFAULT = 'calc(70vh - 50px)';
+export const TABLE_HEIGHT_PREMISSION = 'calc(65vh - 50px)';
 // 基础表格样式配置
 export const TABLE_OPTIONS = {
   emptyText: '暂无数据',
@@ -25,19 +25,20 @@ const BASIC_TABLE_COLUMNS = {
     label: '灾害等级',
     align: 'center',
     slot: 'disasterLevel',
+    minWidth: '150px',
   },
   PUBLISH_TIME: {
     prop: 'pushTime',
     label: '发布时间',
     align: 'center',
-    width: '200cpx',
+    minWidth: '200px',
   },
   ACTIVE_STATUS: {
     prop: 'effectState',
     label: '生效状态',
     align: 'center',
     slot: 'effectState',
-    width: '120cpx',
+    width: '120px',
   },
   PUSH_STATUS: {
     prop: 'isPush',
@@ -51,7 +52,7 @@ const BASIC_TABLE_COLUMNS = {
     align: 'center',
     slot: 'action',
     fixed: 'right',
-    width: '250cpx',
+    minWidth: '250px',
   },
 };
 
@@ -62,26 +63,27 @@ export const WARNING_INFO_TABLE_COLUMNS_DEFAULT: TableColumnProps[] = [
     label: '预警图标',
     align: 'center',
     slot: 'warningIcon',
-    width: '150cpx',
+    minWidth: '150px',
   },
   {
     prop: 'disasterType',
     label: '预警类型',
     align: 'center',
     slot: 'disasterType',
+    minWidth: '200px',
   },
   BASIC_TABLE_COLUMNS.DISASTER_LEVEL,
   {
     prop: 'warnTime',
     label: '预警时间',
     align: 'center',
-    width: '200cpx',
+    minWidth: '200px',
   },
   {
     prop: 'content',
     label: '发布内容',
     align: 'center',
-    minWidth: '200cpx',
+    minWidth: '200px',
     slot: 'content',
   },
 ];
@@ -98,6 +100,7 @@ const DEFENSE_NOTICE_TABLE_COLUMNS_COMMON: TableColumnProps[] = [
     prop: 'title',
     label: '通知标题',
     align: 'center',
+    minWidth: '200px',
   },
   {
     prop: 'disasterType',
@@ -119,7 +122,7 @@ export const DEFENSE_NOTICE_TABLE_COLUMNS_PERMISSION: TableColumnProps[] = [
     label: '创建时间',
     prop: 'createdAt',
     align: 'center',
-    width: '200cpx',
+    minWidth: '200px',
   },
   BASIC_TABLE_COLUMNS.ACTION,
 ];

src/views/disaster/overview/PageOverview.vue

@@ -119,7 +119,6 @@
     gap: 10cpx;
     width: 100%;
     height: 100%;
-    background-color: $background-color;
     &__header {
       width: 100%;
       height: 40cpx;

src/views/disaster/style/disaster.scss

@@ -2,52 +2,56 @@
 .disaster-precaution-container {
   display: flex;
   flex-direction: column;
-  gap: 10cpx;
+  gap: 10px;
   width: 100%;
   height: 100%;
   &__main,
   &__header {
     width: 100%;
     background-color: $white-color;
-    border-radius: 4cpx;
+    border-radius: 4px;
   }
   &__header {
     display: flex;
     flex-direction: column;
-    gap: 16cpx;
+    gap: 16px;
     justify-content: space-between;
-    padding: 16cpx 0 16cpx 22cpx;
+    padding: 16px 0 16px 22px;
+    flex-shrink: 0;
     .back-icon {
-      width: 16cpx;
+      width: 16px;
       cursor: pointer;
     }
   }
   &__title {
-    font-size: 20cpx;
+    font-size: 20px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.85);
   }
   &__main {
     flex: 1;
-    padding: 20cpx;
+    padding: 20px;
     overflow-y: auto;
     .disaster-precaution {
       display: flex;
       flex-direction: column;
-      gap: 20cpx;
+      width: 100%;
+      height: 100%;
+      gap: 20px;
       &__header--button {
-        margin-bottom: 20cpx;
+        margin-bottom: 20px;
       }
     }
   }
   &__footer {
     @include flex-center;
     justify-content: flex-end;
-    width: calc(100vw - 310cpx);
-    height: 88cpx;
-    padding: 28cpx;
+    width: 100%;
+    height: 88px;
+    flex-shrink: 0;
+    padding: 28px;
     background-color: $white-color;
-    border-radius: 4cpx;
+    border-radius: 4px;
   }
 }
 
@@ -55,10 +59,10 @@
   @include flex-center;
   justify-content: space-between;
   width: 100%;
-  gap: 8cpx;
+  gap: 8px;
   .dot {
-    width: 6cpx;
-    height: 6cpx;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
   }
   span {

src/views/disaster/style/info-container.scss

@@ -1,5 +1,5 @@
 .info-container {
   width: 100%;
-  max-height: calc(100vh - 350cpx);
+  max-height: calc(100vh - 350px);
   overflow: auto;
 }

src/views/disaster/style/search.scss

@@ -1,27 +0,0 @@
-@use '@/styles/variables.scss' as *;
-.search-box {
-  @include flex-center;
-  justify-content: space-between;
-  width: 100%;
-}
-.select-box {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10cpx;
-  &--item {
-    @include flex-center;
-    white-space: nowrap;
-    gap: 10cpx;
-  }
-  span {
-    color: rgba(0, 0, 0, 0.85);
-    font-size: 14cpx;
-  }
-  .el-select {
-    width: 200cpx;
-  }
-}
-.search-btn {
-  display: flex;
-}

src/views/home/PageHome.vue

@@ -15,9 +15,10 @@
 
 <style lang="scss" scoped>
   .home-container {
+    width: 100%;
+    height: 100%;
     position: relative;
     display: flex;
-    justify-content: center;
     flex-direction: column;
   }
   .introduction-words {
@@ -30,10 +31,12 @@
     width: 100%;
     height: 510cpx;
     background: url('assets/images/home/home-bg@1X.png') no-repeat center center / cover;
+    flex-shrink: 0;
   }
   .introduction-card-section {
     width: 100%;
     flex: 1;
-    padding: 26cpx 20cpx 57cpx 20cpx;
+    max-height: 407cpx;
+    padding: 10cpx 20cpx;
   }
 </style>

src/views/home/src/components/IntroductionCard.vue

@@ -29,8 +29,8 @@
   }
   .introduction-card {
     width: 361cpx;
-    height: 407cpx;
-    padding: 40cpx 34cpx 0 34cpx;
+    height: 100%;
+    padding: 15cpx 34cpx 0 34cpx;
     background-color: $white-color;
     border-radius: 5cpx;
     &__header {
@@ -41,8 +41,8 @@
       font-size: 24cpx;
       color: #333;
       img {
-        width: 100cpx;
-        height: 100cpx;
+        width: 80cpx;
+        height: 80cpx;
       }
     }
     &__content {