feat: 重构灾害管理

packages/mobile/src/views/DisasterManagement/IceDisaster.vue

@@ -169,11 +169,13 @@ import { useRouter, useRoute } from 'vue-router'
 import { showToast, showLoadingToast } from 'vant'
 import PanelItem from '@/components/PanelItem.vue'
 import { request } from '../../../../shared/utils/request'
+import { useYHZStore } from '@/stores/yhzStore';
 
 const router = useRouter()
 const route = useRoute()
+const yhzStore = useYHZStore()
+
 // 组件挂载时获取数据
-const yhzDetail = ref({}) // 养护站详情数据
 const INIT_FORM = reactive({
   event: {
     occurLocation: '', // 发生地点
@@ -293,7 +295,7 @@ const checkMaterialAmount = (material, index) => {
 const getMaterialList = async (wzmc) => {
   try {
     const data = {
-      yhzid: yhzDetail.value.id,
+      yhzid: yhzStore.getYHZInfo.id,
       wzmc,
       pageNum: 1,
       pageSize: 9999
@@ -329,9 +331,9 @@ const handleAdd = async () => {
       forbidClick: true,
       duration: 0 // 设置为0表示不会自动关闭
     })
-    form.event.serviceStationId = yhzDetail.value.id
-    form.event.district = yhzDetail.value.qxmc
-    console.log('yhzDetail', toRaw(yhzDetail.value))
+    form.event.serviceStationId = yhzStore.getYHZInfo.id
+    form.event.district = yhzStore.getYHZInfo.qxmc
+    console.log('yhzDetail', toRaw(yhzStore.getYHZInfo))
     console.log('form', toRaw(form))
     const res = await request({
       url: '/snow-ops-platform/event/add',

packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue

@@ -4,7 +4,7 @@
     <PanelItem title="基本信息" v-if="!isContinue">
       <van-form>
         <!-- 路况类别 -->
-        <BasePicker v-model="formData.roadConditionType" :options="options['roadConditionType']" label="路况类别" placeholder="请选择" />
+        <BasePicker v-model="formData.roadConditionType" :options="options['waterRoadConditionType']" label="路况类别" placeholder="请选择" />
 
         <!-- 是否阻断 (event.isBlocked) -->
         <BasePicker v-model="formData.event.isBlocked" :options="options['yesNoBool']" label="是否阻断" placeholder="请选择" />
@@ -116,17 +116,17 @@
 
     <!-- 投入资源 (report) -->
     <PanelItem>
-      <van-field v-model="formData.report.investedMachinery" label="已投机械" placeholder="请填写" type="digit">
+      <van-field v-model="formData.report.investedMachinery" label="投入机械" placeholder="请填写" type="digit">
         <template #button>
           <span class="field-unit">台/班</span>
         </template>
       </van-field>
-      <van-field v-model="formData.report.investedManpower" label="已投入力" placeholder="请填写" type="number">
+      <van-field v-model="formData.report.investedManpower" label="投入人力" placeholder="请填写" type="number">
         <template #button>
           <span class="field-unit">人次</span>
         </template>
       </van-field>
-      <van-field v-model="formData.report.investedFunds" label="已投资金" placeholder="请填写" type="digit">
+      <van-field v-model="formData.report.investedFunds" label="投入资金" placeholder="请填写" type="digit">
         <template #button>
           <span class="field-unit">万元</span>
         </template>

packages/screen/src/router/index.js

@@ -181,7 +181,6 @@ const routes = [
     }
   },
 
-
   // 项目管理 - 区县
   {
     path: '/projectManagement',
@@ -245,18 +244,25 @@ const routes = [
     }
   },
   {
-    path: '/disasterReport',
-    name: 'DisasterReport',
-    component: () => import('../views/DisasterManagement/DisasterReport/DisasterReportPC.vue'),
+    path: '/iceDisasterReport',
+    component: () => import('../views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue'),
     meta: {
-      title: '灾毁事件填报',
+      title: '冰雪灾害上报',
+      breadcrumb: true
+    }
+  },
+  {
+    path: '/waterDisasterReport',
+    component: () => import('../views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue'),
+    meta: {
+      title: '水毁灾害上报',
       breadcrumb: true
     }
   },
   {
     path: '/waterDisasterDetail',
     name: 'WaterDisasterDetail',
-    component: () => import('../views/DisasterManagement/DisasterDetail/WaterDisasterDetailPC.vue'),
+    component: () => import('../views/DisasterManagement/WaterDisasterDetail/WaterDisasterDetailPC.vue'),
     meta: {
       title: '水毁事件详情',
       breadcrumb: true

packages/screen/src/views/DisasterManagement/DisasterManagementPC.vue

@@ -329,7 +329,7 @@ const handleEdit = (row) => {
 
 // 新增跳转
 const toReport = () => {
-  router.push('/disasterReport')
+  router.push('/waterDisasterReport')
 }
 
 // 查看图片

packages/screen/src/views/DisasterManagement/DisasterReport/DisasterReportPC.vue

@@ -1,115 +0,0 @@
-<template>
-  <div class="disaster-report">
-    <el-page-header @back="handleBack" class="page-header">
-      <template #content>
-        <span class="title">{{ isEdit ? '灾毁填报' : '灾毁填报' }}</span>
-      </template>
-    </el-page-header>
-
-    <WaterDisasterReport />
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Upload } from '@element-plus/icons-vue'
-import { request } from '@/utils/request'
-import WaterDisasterReport from './WaterDisasterReportPC.vue'
-
-const router = useRouter()
-const route = useRoute()
-const isEdit = computed(() => !!route.query.id)
-
-const handleBack = () => {
-  router.back()
-}
-</script>
-
-<style scoped lang="scss">
-.disaster-report {
-  padding: 20px;
-  background-color: #f5f7fa;
-  height: 100%;
-  overflow: auto;
-
-  .page-header {
-    margin-bottom: 20px;
-    padding: 0 0 16px 0;
-    border-bottom: 1px solid #e4e7ed;
-
-    .title {
-      font-size: 18px;
-      font-weight: 600;
-      color: #303133;
-    }
-  }
-
-  .disaster-form {
-    .form-section {
-      margin-bottom: 20px;
-
-      :deep(.el-card__header) {
-        padding: 12px 20px;
-        background-color: #fafafa;
-        border-bottom: 1px solid #ebeef5;
-      }
-
-      :deep(.el-card__body) {
-        padding: 20px;
-      }
-    }
-
-    .section-header {
-      .section-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: #303133;
-        position: relative;
-        padding-left: 10px;
-
-        &::before {
-          content: '';
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 3px;
-          height: 16px;
-          background-color: #409eff;
-          border-radius: 2px;
-        }
-      }
-    }
-
-    .sub-section-title {
-      font-size: 14px;
-      font-weight: 500;
-      color: #606266;
-      margin: 8px 0 16px 0;
-      padding-left: 8px;
-      border-left: 3px solid #409eff;
-    }
-
-    .unit-suffix {
-      margin-left: 8px;
-      color: #909399;
-      font-size: 12px;
-    }
-
-    .upload-tip {
-      font-size: 12px;
-      color: #909399;
-      margin-top: 8px;
-    }
-
-    .form-actions {
-      display: flex;
-      justify-content: center;
-      gap: 16px;
-      padding: 20px 0 40px;
-    }
-  }
-}
-</style>

packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue

@@ -0,0 +1,705 @@
+<template>
+  <div class="disaster-form-page">
+    <el-page-header style="margin-bottom: 10px;" @back="router.go(-1)" class="page-header">
+      <template #content>
+        <span class="title">{{ '冰雪灾害填报' }}</span>
+      </template>
+    </el-page-header>
+
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" class="disaster-form" @submit.prevent>
+      <!-- 基本信息区块 -->
+      <el-card class="form-section" shadow="never">
+        <template #header>
+          <div class="section-header">
+            <span class="section-title">基本信息</span>
+          </div>
+        </template>
+
+        <BlockItem title="填报人员信息">
+          <el-row :gutter="24">
+            <!-- 填报单位 -->
+            <el-col :span="8">
+              <el-form-item label="填报单位" prop="event.reporterUnit">
+                <el-input v-model="formData.event.reporterUnit" placeholder="请填写" />
+              </el-form-item>
+            </el-col>
+            <!-- 联系人 -->
+            <el-col :span="8">
+              <el-form-item label="联系人员" prop="event.contactPerson">
+                <el-input v-model="formData.event.contactPerson" placeholder="请填写" />
+              </el-form-item>
+            </el-col>
+            <!-- 联系电话 -->
+            <el-col :span="8">
+              <el-form-item label="联系电话" prop="event.contactPhone">
+                <el-input v-model="formData.event.contactPhone" placeholder="请填写" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </BlockItem>
+
+        <BlockItem title="路况事件信息">
+          <el-row :gutter="24">
+            <!-- 发生时间 -->
+            <el-col :span="8">
+              <el-form-item label="发生时间" prop="occurTime">
+                <el-date-picker v-model="formData.occurTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
+              </el-form-item>
+            </el-col>
+            <!-- 路况类别 -->
+            <el-col :span="8">
+              <el-form-item label="路况类别" prop="roadConditionType">
+                <el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
+                  <el-option v-for="(option, idx) in options['iceRoadConditionType']" :label="option.label" :value="option.value" :key="idx" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- 处理措施-->
+            <el-col :span="8">
+              <el-form-item label="处理措施" prop="report.disposalMeasures">
+                <el-select v-model="formData.report.disposalMeasures" placeholder="请选择" style="width: 100%">
+                  <el-option v-for="(option, idx) in options['disposalMeasures']" :label="option.label" :value="option.value" :key="idx" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="事件类型">
+                <el-select v-model="eventType" placeholder="请选择" style="width: 100%" @change="handleEventTypeChange">
+                  <el-option v-for="(option, idx) in options['eventType']" :label="option.label" :value="option.value" :key="idx" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- 预计恢复时间 -->
+            <el-col :span="8">
+              <el-form-item label="预计恢复时间" prop="report.expectRecoverTime">
+                <el-date-picker v-model="formData.report.expectRecoverTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24"> </el-row>
+          <el-row :gutter="24">
+            <!-- 现场描述 -->
+            <el-col :span="16">
+              <el-form-item label="现场描述(绕行方案)" prop="report.siteDescription">
+                <el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </BlockItem>
+
+        <BlockItem title="位置信息">
+          <el-row :gutter="24">
+            <!-- 路线类型 -->
+            <el-col :span="8">
+              <el-form-item label="路线类型">
+                <el-select v-model="filterForm.routeType" placeholder="请选择" style="width: 100%">
+                  <el-option v-for="(option, idx) in options['roadType']" :label="option.label" :value="option.value" :key="idx" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- 所属区县 -->
+            <el-col :span="8">
+              <el-form-item label="所属区县" prop="event.district">
+                <el-select v-model="formData.event.district" placeholder="请选择" style="width: 100%" @change="handleDistrictChange">
+                  <el-option v-for="(option, idx) in options['area']" :label="option.label" :value="option.value" :key="idx" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- 受灾里程 -->
+            <el-col :span="8">
+              <el-form-item label="受灾里程" prop="event.disasterMileage">
+                <el-input v-model="formData.event.disasterMileage" placeholder="请填写" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="地点路线" prop="routeNo">
+                <RoadRoutesSelect v-model="formData.routeNo" @change="handleRouteNoChange" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" />
+              </el-form-item>
+            </el-col>
+            <!-- 起点桩号 -->
+            <el-col :span="8">
+              <el-form-item label="起点桩号(K)" prop="event.startStakeNo">
+                <el-input v-model="formData.event.startStakeNo" placeholder="请填写">
+                  <template #prepend>K</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <!-- 止点桩号 -->
+            <el-col :span="8">
+              <el-form-item label="止点桩号(K)" prop="event.endStakeNo">
+                <el-input v-model="formData.event.endStakeNo" placeholder="请填写">
+                  <template #prepend>K</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <!-- 路况位置 -->
+            <el-col :span="8">
+              <el-form-item label="路况位置" prop="occurLocation">
+                <el-input v-model="formData.occurLocation" placeholder="请填写" />
+              </el-form-item>
+            </el-col>
+            <!-- 阻断点小地名 -->
+            <el-col :span="8">
+              <el-form-item label="阻断点小地名" prop="event.blockedPointName">
+                <el-input v-model="formData.event.blockedPointName" placeholder="请填写" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <!-- 经度 -->
+            <el-col :span="8">
+              <el-form-item label="经度" prop="event.longitude">
+                <el-input v-model="formData.event.longitude" placeholder="经度"> </el-input>
+              </el-form-item>
+            </el-col>
+
+            <!-- 纬度 -->
+            <el-col :span="8">
+              <el-form-item label="纬度" prop="event.latitude">
+                <el-input v-model="formData.event.latitude" placeholder="纬度"> </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="图片上传" prop="fileList">
+                <FileUpload type="image" :limit="9" v-model="formData.fileList" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="视频上传" prop="fileList">
+                <FileUpload type="video" :limit="9" v-model="formData.fileList" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </BlockItem>
+      </el-card>
+
+      <el-card class="form-section" shadow="never">
+        <template #header>
+          <div class="section-header">
+            <span class="section-title">灾毁损失</span>
+          </div>
+        </template>
+        <BlockItem title="路况事件信息">
+          <el-row :gutter="24">
+            <!-- 受伤人员 -->
+            <el-col :span="8">
+              <el-form-item label="受伤人员" prop="report.injuredCount">
+                <el-input-number v-model="formData.report.injuredCount" :min="0" :step="1" style="width: 100%">
+                  <template #suffix>
+                    <span class="unit-text">人</span>
+                  </template>
+                </el-input-number>
+              </el-form-item>
+            </el-col>
+
+            <!-- 死亡人员 -->
+            <el-col :span="8">
+              <el-form-item label="死亡人员" prop="report.deadCount">
+                <el-input-number v-model="formData.report.deadCount" :min="0" :step="1" style="width: 100%">
+                  <template #suffix>
+                    <span class="unit-text">人</span>
+                  </template>
+                </el-input-number>
+              </el-form-item>
+            </el-col>
+
+            <!-- 滞留人员 -->
+            <el-col :span="8">
+              <el-form-item label="滞留人员" prop="report.strandedPersonCount">
+                <el-input-number v-model="formData.report.strandedPersonCount" :min="0" :step="1" style="width: 100%">
+                  <template #suffix>
+                    <span class="unit-text">人</span>
+                  </template>
+                </el-input-number>
+              </el-form-item>
+            </el-col>
+
+            <!-- 损坏车辆 -->
+            <el-col :span="8">
+              <el-form-item label="损坏车辆" prop="report.damagedVehicleCount">
+                <el-input-number v-model="formData.report.damagedVehicleCount" :min="0" :step="1" style="width: 100%">
+                  <template #suffix>
+                    <span class="unit-text">辆</span>
+                  </template>
+                </el-input-number>
+              </el-form-item>
+            </el-col>
+
+            <!-- 滞留车辆 -->
+            <el-col :span="8">
+              <el-form-item label="滞留车辆" prop="report.strandedVehicleCount">
+                <el-input-number v-model="formData.report.strandedVehicleCount" :min="0" :step="1" style="width: 100%">
+                  <template #suffix>
+                    <span class="unit-text">辆</span>
+                  </template>
+                </el-input-number>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </BlockItem>
+        <BlockItem title="道路损失及其他">
+          <LossList v-model:model-value="formData.report.lossList" />
+
+          <el-row :gutter="24">
+            <!-- 投入机械 -->
+            <el-col :span="8">
+              <el-form-item label="投入机械" prop="report.investedMachinery">
+                <el-input-number v-model="formData.report.investedMachinery" :min="0" :precision="1" style="width: 100%" placeholder="请填写">
+                  <template #suffix>
+                    <span class="unit-text">台/班</span>
+                  </template>
+                </el-input-number>
+              </el-form-item>
+            </el-col>
+
+            <!-- 投入人力 -->
+            <el-col :span="8">
+              <el-form-item label="投入人力" prop="report.investedManpower">
+                <el-input-number v-model="formData.report.investedManpower" :min="0" :step="1" style="width: 100%" placeholder="请填写">
+                  <template #suffix>
+                    <span class="unit-text">人次</span>
+                  </template>
+                </el-input-number>
+              </el-form-item>
+            </el-col>
+
+            <!-- 投入资金 -->
+            <el-col :span="8">
+              <el-form-item label="投入资金" prop="report.investedFunds">
+                <el-input-number v-model="formData.report.investedFunds" :min="0" :precision="2" style="width: 100%" placeholder="请填写">
+                  <template #suffix>
+                    <span class="unit-text">万元</span>
+                  </template>
+                </el-input-number>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </BlockItem>
+        <BlockItem title="恢复重建预估费用">
+          <el-row :gutter="24">
+            <!-- 是否需要恢复重建 -->
+            <el-col :span="8">
+              <el-form-item label="是否需要恢复重建" prop="event.needsRecovery">
+                <el-select v-model="formData.event.needsRecovery" placeholder="请选择" style="width: 100%">
+                  <el-option v-for="(option, idx) in options['yesNoBool']" :label="option.label" :value="option.value" :key="idx" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+            <!-- 恢复重建预估费用 -->
+            <el-col :span="8" v-if="formData?.event.needsRecovery">
+              <el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
+                <el-input-number v-model="formData.event.estimatedRecoveryCost" :min="0" :precision="2" style="width: 100%" placeholder="请填写">
+                  <template #suffix>
+                    <span class="unit-text">万元</span>
+                  </template>
+                </el-input-number>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </BlockItem>
+      </el-card>
+
+      <!-- 提交按钮 -->
+      <div class="form-actions">
+        <el-button @click="handleBack">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="submitting">提交</el-button>
+      </div>
+    </el-form>
+
+    <!-- 图片预览对话框 -->
+    <el-dialog v-model="previewDialogVisible" title="图片预览" width="600px">
+      <img :src="previewImageUrl" style="width: 100%" alt="预览图片" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Plus, Upload } from '@element-plus/icons-vue'
+import { request } from '@/utils/request'
+import LossList from './WaterDisasterLossListPC.vue'
+import BlockItem from '@/component/BlockItem.vue'
+import FileUpload from '@/component/FileUpload/FileUpload.vue'
+import { useOptions } from '@shared/composables/useOptions'
+import RoadRoutesSelect from '../components/RoadRoutesSelect.vue'
+
+const router = useRouter()
+const route = useRoute()
+const { options, getAreaOptions } = useOptions()
+const formRef = ref(null)
+const submitting = ref(false)
+
+// 是否为续报
+const isContinue = computed(() => route.query.isContinue === 'true')
+
+// 处置措施数组（用于多选框组，需要转换为逗号分隔的字符串）
+const disposalMeasuresArray = ref([])
+
+// 附件列表
+const imageFileList = ref([])
+const videoFileList = ref([])
+
+const eventType = ref('冰雪事件')
+
+const filterForm = reactive({
+  routeType: ''
+})
+
+const formData = reactive({
+  // 顶层字段
+  occurLocation: null, // 发生地点/路况位置
+  occurTime: null, // 发生时间
+  roadConditionType: null, // 路况类别
+  routeNo: null, // 线路编号
+
+  // event 对象
+  event: {
+    blockedMileage: null, // 阻断里程
+    blockedPointName: null, // 阻断点小地名
+    contactPerson: null, // 联系人
+    contactPhone: null, // 联系电话
+    district: null, // 上报区县
+    endStakeNo: null, // 止点桩号
+    estimatedRecoveryCost: null, // 恢复重建预估费用
+    inspectionMileage: null, // 巡查里程
+    needsRecovery: null, // 是否需要恢复重建
+    reporterUnit: null, // 填报单位
+    startStakeNo: null, // 起点桩号
+    disasterMileage: null // 受灾里程
+  },
+
+  // report 对象
+  report: {
+    actualRecoverTime: null, // 实际恢复时间
+    damagedVehicleCount: null, // 损坏车辆
+    deadCount: null, // 死亡人员
+    disposalMeasures: null, // 处置措施（逗号分隔）
+    expectRecoverTime: null, // 预计恢复时间
+    injuredCount: null, // 受伤人员
+    investedFunds: null, // 已投资金
+    investedMachinery: null, // 已投机械
+    investedManpower: null, // 已投人力
+    remark: null, // 处理情况/备注
+    siteDescription: null, // 现场描述
+    strandedPersonCount: null, // 滞留人员
+    strandedVehicleCount: null, // 滞留车辆
+    totalLossAmount: null // 损失总金额
+  },
+
+  // lossList 数组
+  lossList: [],
+
+  // fileList 数组
+  fileList: []
+})
+
+const handleEventTypeChange = () => {
+  router.replace({ path: '/waterDisasterReport' })
+}
+
+// 监听处置措施数组变化，转换为逗号分隔的字符串存到 report.disposalMeasures
+watch(
+  disposalMeasuresArray,
+  (newVal) => {
+    formData.report.disposalMeasures = newVal.length ? newVal.join(',') : null
+  },
+  { deep: true }
+)
+
+// 监听图片附件变化，同步到 fileList
+watch(
+  imageFileList,
+  () => {
+    syncFileList()
+  },
+  { deep: true }
+)
+
+// 监听视频附件变化，同步到 fileList
+watch(
+  videoFileList,
+  () => {
+    syncFileList()
+  },
+  { deep: true }
+)
+
+// 同步附件到 fileList
+const syncFileList = () => {
+  formData.fileList = [
+    ...imageFileList.value.map((f) => ({
+      fileName: f.name || '',
+      fileSize: f.size || 0,
+      fileType: 1, // 1-图片
+      fileUrl: f.url || f.content || ''
+    })),
+    ...videoFileList.value.map((f) => ({
+      fileName: f.name || '',
+      fileSize: f.size || 0,
+      fileType: 2, // 2-视频
+      fileUrl: f.url || f.content || ''
+    }))
+  ]
+}
+
+// 从 report.disposalMeasures 初始化处置措施数组
+watch(
+  () => formData.report.disposalMeasures,
+  (newVal) => {
+    if (newVal && typeof newVal === 'string') {
+      disposalMeasuresArray.value = newVal.split(',').filter(Boolean)
+    } else {
+      disposalMeasuresArray.value = []
+    }
+  },
+  { immediate: true }
+)
+
+// 表单校验规则
+const formRules = {
+  roadConditionType: [{ required: true, message: '请选择路况类别', trigger: 'change' }],
+  'report.disposalMeasures': [{ required: true, message: '请选择处置措施', trigger: 'change' }],
+  'event.blockedMileage': [{ required: true, message: '请输入阻断里程', trigger: 'blur' }],
+  occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
+  'report.expectRecoverTime': [{ required: true, message: '请输入预计恢复时间', trigger: 'blur' }],
+  routeNo: [{ required: true, message: '请输入线路编号', trigger: 'blur' }],
+  'event.startStakeNo': [{ required: true, message: '请输入起点桩号', trigger: 'blur' }],
+  'event.endStakeNo': [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
+  occurLocation: [{ required: true, message: '请输入路况位置', trigger: 'blur' }],
+  'event.blockedPointName': [{ required: true, message: '请输入阻断点小地名', trigger: 'blur' }],
+  'event.longitude': [{ required: true, message: '请输入经度', trigger: 'blur' }],
+  'event.latitude': [{ required: true, message: '请输入纬度', trigger: 'blur' }],
+  'event.needsRecovery': [{ required: true, message: '请选择是否需要恢复重建', trigger: 'change' }],
+  'event.estimatedRecoveryCost': [{ required: true, message: '请输入恢复重建预估费用', trigger: 'blur' }]
+  // 'event.reporterUnit': [{ required: true, message: '请输入填报单位', trigger: 'blur' }],
+  // 'event.contactPerson': [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+  // 'event.contactPhone': [
+  //   { required: true, message: '请输入联系电话', trigger: 'blur' },
+  //   { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+  // ]
+}
+
+// 图片上传前校验
+const beforeImageUpload = (file) => {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+  const isLt500k = file.size / 1024 < 500
+
+  if (!isJpgOrPng) {
+    ElMessage.error('只能上传 JPG/PNG 格式的图片!')
+    return false
+  }
+  if (!isLt500k) {
+    ElMessage.error('图片大小不能超过 500KB!')
+    return false
+  }
+  return false // 返回false阻止自动上传，由提交时统一处理
+}
+
+// 视频上传前校验
+const beforeVideoUpload = (file) => {
+  const isLt20M = file.size / 1024 / 1024 < 20
+  if (!isLt20M) {
+    ElMessage.error('视频大小不能超过 20MB!')
+    return false
+  }
+  return false
+}
+
+// 图片预览
+const previewDialogVisible = ref(false)
+const previewImageUrl = ref('')
+
+const handlePicturePreview = (file) => {
+  previewImageUrl.value = file.url
+  previewDialogVisible.value = true
+}
+
+const handlePictureRemove = (file, fileList) => {
+  imageFileList.value = fileList
+}
+
+// 返回上一页
+const handleBack = () => {
+  router.back()
+}
+
+// 初始化表单数据（用于编辑/续报）
+const initFormData = (data) => {
+  Object.assign(formData, data)
+}
+
+const handleDistrictChange = () => {
+  formData.routeNo = null
+}
+
+const handleRouteNoChange = (item) => {
+  formData.event.startStakeNo = item.startStakeNo
+  formData.event.endStakeNo = item.endStakeNo
+}
+
+// 获取表单数据
+const getFormData = () => {
+  return { ...formData }
+}
+
+// 表单验证
+const validate = async () => {
+  if (!formRef.value) return false
+  try {
+    await formRef.value.validate()
+    return true
+  } catch (error) {
+    ElMessage.warning('请完善表单信息')
+    return false
+  }
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  // 验证表单
+  if (!(await validate())) {
+    return
+  }
+
+  submitting.value = true
+  try {
+    // 获取表单数据
+
+    // 添加事件类型和站点信息
+    const submitData = {
+      ...formData
+      // 可以在这里添加站点信息等其他数据
+    }
+
+    const res = await request({
+      url: '/snow-ops-platform/water-damage/addOrUpdate',
+      method: 'post',
+      data: submitData
+    })
+
+    if (res?.code === '00000') {
+      ElMessage.success('提交成功')
+    } else {
+      ElMessage.error(res.message)
+    }
+
+    // 提交成功后返回列表页
+    setTimeout(() => {
+      router.replace('/disasterManagement')
+    }, 1000)
+  } catch (error) {
+    ElMessage.error('提交失败，请重试')
+    console.error('提交失败:', error)
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 加载编辑数据
+const loadEditData = async () => {
+  initFormData({})
+}
+
+onMounted(() => {
+  // 获取区县下拉列表
+  getAreaOptions()
+
+  loadEditData()
+})
+
+// 暴露方法给父组件
+defineExpose({
+  validate,
+  initFormData,
+  getFormData
+})
+</script>
+
+<style scoped lang="scss">
+.disaster-form-page {
+  padding: 20px;
+  background-color: #f5f7fa;
+  height: 100%;
+  overflow: auto;
+
+  .disaster-form {
+    .form-section {
+      margin-bottom: 20px;
+
+      :deep(.el-card__header) {
+        padding: 12px 20px;
+        background-color: #fafafa;
+        border-bottom: 1px solid #ebeef5;
+      }
+
+      :deep(.el-card__body) {
+        padding: 20px;
+      }
+    }
+
+    .section-header {
+      .section-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+        position: relative;
+        padding-left: 10px;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 3px;
+          height: 16px;
+          background-color: #409eff;
+          border-radius: 2px;
+        }
+      }
+    }
+
+    .sub-section-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #606266;
+      margin: 8px 0 16px 0;
+      padding-left: 8px;
+      border-left: 3px solid #409eff;
+    }
+
+    .unit-text {
+      color: #909399;
+      font-size: 12px;
+    }
+
+    .upload-tip {
+      font-size: 12px;
+      color: #909399;
+      margin-top: 8px;
+    }
+
+    .video-preview {
+      margin-top: 12px;
+    }
+
+    .form-actions {
+      display: flex;
+      justify-content: center;
+      gap: 16px;
+      padding: 20px 0 40px;
+    }
+  }
+}
+</style>

packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue

@@ -99,15 +99,15 @@
           </el-input>
         </el-form-item>
 
-        <!-- 已投入力 -->
-        <el-form-item label="已投入力">
+        <!-- 投入人力 -->
+        <el-form-item label="投入人力">
           <el-input-number v-model="formData.report.investedManpower" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
             <template slot="append">人次</template>
           </el-input-number>
         </el-form-item>
 
-        <!-- 已投资金 -->
-        <el-form-item label="已投资金">
+        <!-- 投入资金 -->
+        <el-form-item label="投入资金">
           <el-input v-model="formData.report.investedFunds" placeholder="请填写" style="width: 300px">
             <template slot="append">万元</template>
           </el-input>

packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterDetailPC.vue

@@ -196,19 +196,19 @@
                     <el-row :gutter="24">
                       <el-col :span="8">
                         <div class="info-item margin">
-                          <span class="info-label">已投入机械：</span>
+                          <span class="info-label">投入机械：</span>
                           <span class="info-value">{{ report.investedMachinery ? report.investedMachinery + '台/班' : '-'}}</span>
                         </div>
                       </el-col>
                       <el-col :span="8">
                         <div class="info-item margin">
-                          <span class="info-label">已投入人力：</span>
+                          <span class="info-label">投入人力：</span>
                           <span class="info-value">{{ report.investedManpower ? report.investedManpower + '人次' : '-'}}</span>
                         </div>
                       </el-col>
                       <el-col :span="8">
                         <div class="info-item margin">
-                          <span class="info-label">已投入资金：</span>
+                          <span class="info-label">投入资金：</span>
                           <span class="info-value">{{ report.investedFunds ? report.investedFunds + '万元' : '-'}}</span>
                         </div>
                       </el-col>

packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="disaster-form-page">
+    <el-page-header style="margin-bottom: 10px;" @back="router.go(-1)" class="page-header">
+      <template #content>
+        <span class="title">{{ '水毁灾害填报' }}</span>
+      </template>
+    </el-page-header>
+    
     <el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" class="disaster-form" @submit.prevent>
       <!-- 基本信息区块 -->
       <el-card class="form-section" shadow="never">
@@ -36,7 +42,7 @@
           <el-row :gutter="24">
             <el-col :span="8">
               <el-form-item label="事件类型">
-                <el-select v-model="eventType" placeholder="请选择" style="width: 100%">
+                <el-select v-model="eventType" placeholder="请选择" style="width: 100%" @change="handleEventTypeChange">
                   <el-option v-for="(option, idx) in options['eventType']" :label="option.label" :value="option.value" :key="idx" />
                 </el-select>
               </el-form-item>
@@ -45,7 +51,7 @@
             <el-col :span="8">
               <el-form-item label="路况类别" prop="roadConditionType">
                 <el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="(option, idx) in options['roadConditionType']" :label="option.label" :value="option.value" :key="idx" />
+                  <el-option v-for="(option, idx) in options['waterRoadConditionType']" :label="option.label" :value="option.value" :key="idx" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -208,7 +214,12 @@
         </BlockItem>
       </el-card>
 
-      <el-card title="灾毁损失">
+      <el-card class="form-section" shadow="never">
+        <template #header>
+          <div class="section-header">
+            <span class="section-title">灾毁损失</span>
+          </div>
+        </template>
         <BlockItem title="路况事件信息">
           <el-row :gutter="24">
             <!-- 受伤人员 -->
@@ -271,9 +282,9 @@
           <LossList v-model:model-value="formData.report.lossList" />
 
           <el-row :gutter="24">
-            <!-- 已投入机械 -->
+            <!-- 投入机械 -->
             <el-col :span="8">
-              <el-form-item label="已投入机械" prop="report.investedMachinery">
+              <el-form-item label="投入机械" prop="report.investedMachinery">
                 <el-input-number v-model="formData.report.investedMachinery" :min="0" :precision="1" style="width: 100%" placeholder="请填写">
                   <template #suffix>
                     <span class="unit-text">台/班</span>
@@ -282,7 +293,7 @@
               </el-form-item>
             </el-col>
 
-            <!-- 已投入人力 -->
+            <!-- 投入人力 -->
             <el-col :span="8">
               <el-form-item label="投入人力" prop="report.investedManpower">
                 <el-input-number v-model="formData.report.investedManpower" :min="0" :step="1" style="width: 100%" placeholder="请填写">
@@ -293,9 +304,9 @@
               </el-form-item>
             </el-col>
 
-            <!-- 已投入资金 -->
+            <!-- 投入资金 -->
             <el-col :span="8">
-              <el-form-item label="已投入资金" prop="report.investedFunds">
+              <el-form-item label="投入资金" prop="report.investedFunds">
                 <el-input-number v-model="formData.report.investedFunds" :min="0" :precision="2" style="width: 100%" placeholder="请填写">
                   <template #suffix>
                     <span class="unit-text">万元</span>
@@ -355,7 +366,7 @@ import LossList from './WaterDisasterLossListPC.vue'
 import BlockItem from '@/component/BlockItem.vue'
 import FileUpload from '@/component/FileUpload/FileUpload.vue'
 import { useOptions } from '@shared/composables/useOptions'
-import RoadRoutesSelect from './RoadRoutesSelect.vue'
+import RoadRoutesSelect from '../components/RoadRoutesSelect.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -429,6 +440,10 @@ const formData = reactive({
   fileList: []
 })
 
+const handleEventTypeChange = () => {
+  router.replace({ path: '/iceDisasterReport' })
+}
+
 // 监听处置措施数组变化，转换为逗号分隔的字符串存到 report.disposalMeasures
 watch(
   disposalMeasuresArray,
@@ -490,22 +505,22 @@ watch(
 // 表单校验规则
 const formRules = {
   roadConditionType: [{ required: true, message: '请选择路况类别', trigger: 'change' }],
-  "event.isBlocked": [{ required: true, message: '请选择是否阻断', trigger: 'change' }],
-  "event.repairProgress": [{ required: true, message: '请选择抢险进度', trigger: 'change' }],
-  "report.disposalMeasures": [{ required: true, message: '请选择处置措施', trigger: 'change' }],
-  "event.damageCount": [{ required: true, message: '请输入水毁处数', trigger: 'blur' }],
-  "event.blockedMileage": [{ required: true, message: '请输入阻断里程', trigger: 'blur' }],
+  'event.isBlocked': [{ required: true, message: '请选择是否阻断', trigger: 'change' }],
+  'event.repairProgress': [{ required: true, message: '请选择抢险进度', trigger: 'change' }],
+  'report.disposalMeasures': [{ required: true, message: '请选择处置措施', trigger: 'change' }],
+  'event.damageCount': [{ required: true, message: '请输入水毁处数', trigger: 'blur' }],
+  'event.blockedMileage': [{ required: true, message: '请输入阻断里程', trigger: 'blur' }],
   occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
-  "report.expectRecoverTime": [{ required: true, message: '请输入预计恢复时间', trigger: 'blur' }],
-  "routeNo": [{ required: true, message: '请输入线路编号', trigger: 'blur' }],
-  "event.startStakeNo": [{ required: true, message: '请输入起点桩号', trigger: 'blur' }],
-  "event.endStakeNo": [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
-  "occurLocation": [{ required: true, message: '请输入路况位置', trigger: 'blur' }],
-  "event.blockedPointName": [{ required: true, message: '请输入阻断点小地名', trigger: 'blur' }],
-  "event.longitude": [{ required: true, message: '请输入经度', trigger: 'blur' }],
-  "event.latitude": [{ required: true, message: '请输入纬度', trigger: 'blur' }],
-  "event.needsRecovery": [{ required: true, message: '请选择是否需要恢复重建', trigger: 'change' }],
-  "event.estimatedRecoveryCost": [{ required: true, message: '请输入恢复重建预估费用', trigger: 'blur' }],
+  'report.expectRecoverTime': [{ required: true, message: '请输入预计恢复时间', trigger: 'blur' }],
+  routeNo: [{ required: true, message: '请输入线路编号', trigger: 'blur' }],
+  'event.startStakeNo': [{ required: true, message: '请输入起点桩号', trigger: 'blur' }],
+  'event.endStakeNo': [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
+  occurLocation: [{ required: true, message: '请输入路况位置', trigger: 'blur' }],
+  'event.blockedPointName': [{ required: true, message: '请输入阻断点小地名', trigger: 'blur' }],
+  'event.longitude': [{ required: true, message: '请输入经度', trigger: 'blur' }],
+  'event.latitude': [{ required: true, message: '请输入纬度', trigger: 'blur' }],
+  'event.needsRecovery': [{ required: true, message: '请选择是否需要恢复重建', trigger: 'change' }],
+  'event.estimatedRecoveryCost': [{ required: true, message: '请输入恢复重建预估费用', trigger: 'blur' }]
   // 'event.reporterUnit': [{ required: true, message: '请输入填报单位', trigger: 'blur' }],
   // 'event.contactPerson': [{ required: true, message: '请输入联系人', trigger: 'blur' }],
   // 'event.contactPhone': [
@@ -563,7 +578,6 @@ const initFormData = (data) => {
   Object.assign(formData, data)
 }
 
-
 const handleDistrictChange = () => {
   formData.routeNo = null
 }
@@ -657,7 +671,10 @@ defineExpose({
 
 <style scoped lang="scss">
 .disaster-form-page {
+  padding: 20px;
   background-color: #f5f7fa;
+  height: 100%;
+  overflow: auto;
 
   .disaster-form {
     .form-section {

packages/shared/composables/useOptions.js

@@ -57,8 +57,14 @@ export function useOptions() {
     { label: '村道', value: 'C' }
   ]
 
-  // 路况类型
-  options.value['roadConditionType'] = [
+  // 路况类型 水灾 冰灾
+  // 雪灾
+  options.value['iceRoadConditionType'] = [
+    { label: '积雪', value: '积雪' },
+    { label: '积冰', value: '积冰' },
+  ]
+  // 水灾
+  options.value['waterRoadConditionType'] = [
     { label: '山体滑坡', value: '山体滑坡' },
     { label: '泥石流', value: '泥石流' },
     { label: '边坡坍塌(上、下)', value: '边坡坍塌(上、下)' },