From 145a0b1e330de1cf49d5018a4bfe26f880074614 Mon Sep 17 00:00:00 2001
From: niedongsheng <605973111@qq.com>
Date: Fri, 10 Apr 2026 14:55:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B0=B4=E6=AF=81=E7=81=BE=E5=AE=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DisasterManagement/DisasterDetail.vue     |   7 +-
 ...alculateDialog.vue => CalculateDialog.vue} |   0
 .../WaterDisaster/LossList.vue                |   4 +-
 .../WaterDisaster/WaterDisaster.vue           | 116 +++++++-----------
 .../views/DisasterManagement/mockData.json    |  42 -------
 .../waterDisasterFormData.json                |   6 +-
 packages/screen/src/router/index.js           |   6 +-
 7 files changed, 52 insertions(+), 129 deletions(-)
 rename packages/mobile/src/views/DisasterManagement/WaterDisaster/{CubeCalculateDialog.vue => CalculateDialog.vue} (100%)
 delete mode 100644 packages/mobile/src/views/DisasterManagement/mockData.json

diff --git a/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue b/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue
index d1003cc..714fdc2 100644
--- a/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue
+++ b/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue
@@ -208,7 +208,7 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { showToast } from 'vant'
+import { showToast, showImagePreview } from 'vant'
 import PageContainer from '@/components/PageContainer.vue'
 import PanelItem from '@/components/PanelItem.vue'
 import CurrentSite from '@/components/CurrentSite.vue'
@@ -346,9 +346,8 @@ const handleContinueReport = () => {
 
 // 预览附件
 const previewFile = (file) => {
-  if (file.fileUrl) {
-    window.open(file.fileUrl, '_blank')
-  }
+  console.log("🚀 ~ previewFile ~ file:", file)
+  // showImagePreview
 }
 
 onMounted(() => {
diff --git a/packages/mobile/src/views/DisasterManagement/WaterDisaster/CubeCalculateDialog.vue b/packages/mobile/src/views/DisasterManagement/WaterDisaster/CalculateDialog.vue
similarity index 100%
rename from packages/mobile/src/views/DisasterManagement/WaterDisaster/CubeCalculateDialog.vue
rename to packages/mobile/src/views/DisasterManagement/WaterDisaster/CalculateDialog.vue
diff --git a/packages/mobile/src/views/DisasterManagement/WaterDisaster/LossList.vue b/packages/mobile/src/views/DisasterManagement/WaterDisaster/LossList.vue
index 85f0a7f..abd55ea 100644
--- a/packages/mobile/src/views/DisasterManagement/WaterDisaster/LossList.vue
+++ b/packages/mobile/src/views/DisasterManagement/WaterDisaster/LossList.vue
@@ -9,14 +9,14 @@
       </van-field>
     </template>
     <van-button size="small" block type="primary" plain @click="addLoss">添加损失</van-button>
-    <CubeCalculateDialog ref="cubeCalculateDialog" @confirm="confirmCalculate" />
+    <CalculateDialog ref="cubeCalculateDialog" @confirm="confirmCalculate" />
     <LossPicker ref="lossPicker" :options="options" @confirm="confirmAddLoss" />
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import CubeCalculateDialog from './CubeCalculateDialog.vue'
+import CalculateDialog from './CalculateDialog.vue'
 import { request } from '@shared/utils/request'
 import LossPicker from './LossPicker.vue'
 
diff --git a/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue b/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue
index 7d7fbe0..4503763 100644
--- a/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue
+++ b/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue
@@ -130,7 +130,7 @@
       <van-field v-model="formData.report.siteDescription" label="现场描述" placeholder="请填写" type="textarea" rows="2" autosize />
       <van-field label="附件" center>
         <template #input>
-          <van-uploader accept="video/*,image/*" v-model="formData.fileList" :file-list="formData.fileList" :after-read="afterRead" multiple :max-count="6" />
+          <van-uploader accept="video/*,image/*" :modelValue="getFileList()" :after-read="afterRead" multiple :max-count="6" @delete="removeFile" />
         </template>
       </van-field>
     </PanelItem>
@@ -148,7 +148,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { showToast, showFailToast, showLoadingToast } from 'vant'
 import PanelItem from '@/components/PanelItem.vue'
 import BasePicker from '@/components/BasePicker.vue'
@@ -165,12 +165,8 @@ const isContinue = computed(() => route.query.isContinue)
 // 处置措施单选值（用于单选组件）
 const disposalMeasureValue = ref('')
 
-// 附件列表
-const imageFileList = ref([])
-const videoFileList = ref([])
-
-// 表单数据 - 按 Request 接口结构定义
-const formData = reactive({
+// 表单数据 - 按 Request 接口结构定义，使用 ref 包装
+const formData = ref({
   // 顶层字段
   occurLocation: '', // 发生地点
   occurTime: '', // 发生时间
@@ -222,56 +218,12 @@ const formData = reactive({
 
 // 监听处置措施单选值变化，直接赋值给 report.disposalMeasures
 watch(disposalMeasureValue, (newVal) => {
-  formData.report.disposalMeasures = newVal
+  formData.value.report.disposalMeasures = newVal
 })
 
-// 监听附件变化，同步到 fileList
-watch(
-  imageFileList,
-  (newVal) => {
-    // 转换为接口需要的格式
-    formData.fileList = [
-      ...imageFileList.value.map((f) => ({
-        fileName: f.file?.name || '',
-        fileSize: f.file?.size || 0,
-        fileType: 1, // 1-图片
-        fileUrl: f.content || ''
-      })),
-      ...videoFileList.value.map((f) => ({
-        fileName: f.file?.name || '',
-        fileSize: f.file?.size || 0,
-        fileType: 2, // 2-视频
-        fileUrl: f.content || ''
-      }))
-    ]
-  },
-  { deep: true }
-)
-
-watch(
-  videoFileList,
-  (newVal) => {
-    formData.fileList = [
-      ...imageFileList.value.map((f) => ({
-        fileName: f.file?.name || '',
-        fileSize: f.file?.size || 0,
-        fileType: 1,
-        fileUrl: f.content || ''
-      })),
-      ...newVal.map((f) => ({
-        fileName: f.file?.name || '',
-        fileSize: f.file?.size || 0,
-        fileType: 2,
-        fileUrl: f.content || ''
-      }))
-    ]
-  },
-  { deep: true }
-)
-
 // 从 report.disposalMeasures 初始化处置措施单选值
 watch(
-  () => formData.report.disposalMeasures,
+  () => formData.value.report.disposalMeasures,
   (newVal) => {
     if (newVal && typeof newVal === 'string') {
       disposalMeasureValue.value = newVal
@@ -280,6 +232,17 @@ watch(
   { immediate: true }
 )
 
+const getFileList = () => {
+  const fileList = formData.value.fileList?.map((item) => {
+    return {
+      url: item.fileUrl,
+      name: item.fileName
+    }
+  })
+
+  return fileList
+}
+
 // BasePicker 选项数据
 const roadConditionOptions = [
   { label: '高速公路', value: '高速公路' },
@@ -312,19 +275,19 @@ const maxDate = new Date(2030, 11, 31)
 
 const initFormData = (newVal) => {
   if (newVal && Object.keys(newVal).length > 0) {
-    // 深度合并数据
-    Object.assign(formData, {
+    // 深度合并数据 - 直接替换整个对象
+    formData.value = {
       occurLocation: newVal.occurLocation || '',
       occurTime: newVal.occurTime || '',
       roadConditionType: newVal.roadConditionType || '',
       routeNo: newVal.routeNo || '',
-      event: { ...formData.event, ...(newVal.event || {}) },
-      report: { ...formData.report, ...(newVal.report || {}) },
+      event: { ...formData.value.event, ...(newVal.event || {}) },
+      report: { ...formData.value.report, ...(newVal.report || {}) },
       lossList: newVal.lossList || [],
       fileList: newVal.fileList || []
-    })
+    }
 
-    // 初始化处置措施单选值（直接赋值，不再需要 split）
+    // 初始化处置措施单选值
     if (newVal.report?.disposalMeasures) {
       disposalMeasureValue.value = newVal.report.disposalMeasures
     }
@@ -335,11 +298,10 @@ const initFormData = (newVal) => {
 const calibrateTime = () => {
   const now = new Date()
   const formatted = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
-  formData.occurTime = formatted
+  formData.value.occurTime = formatted
   showToast('时间已校准为当前时间')
 }
 
-
 // 图片上传处理
 const afterImageRead = (file) => {
   console.log('图片上传:', file)
@@ -425,7 +387,7 @@ const isValidVideo = (file) => {
 }
 
 /**
- * 统一的上传前校验（用于 el-upload 的 before-upload）
+ * 统一的上传前校验
  * @param {File} file - 上传的文件
  * @returns {boolean} 是否允许上传
  */
@@ -446,19 +408,19 @@ const checkFile = (file) => {
 
 const afterRead = async (options) => {
   const file = options.file
-  if(!checkFile(file)) return
+  if (!checkFile(file)) return
   const toast = showLoadingToast({
     message: '上传中...',
     forbidClick: true,
     duration: 0 // 设置为0表示不会自动关闭
   })
   try {
-    const formData = new FormData()
-    formData.append('file', file)
+    const uploadFormData = new FormData()
+    uploadFormData.append('file', file)
     const res = await request({
       url: '/snow-ops-platform/file/upload',
       method: 'post',
-      data: formData
+      data: uploadFormData
     })
     toast.close()
     if (res.code === '00000') {
@@ -472,10 +434,9 @@ const afterRead = async (options) => {
         fileType: type,
         fileSize: file.size
       }
-      if (!formData.fileList) formData.fileList = []
-      formData.fileList.push(fileData)
+      if (!formData.value.fileList) formData.value.fileList = []
+      formData.value.fileList.push(fileData)
 
-      console.log('fileList.value', formData.fileList)
     } else {
       throw new Error(res.message)
     }
@@ -488,22 +449,27 @@ const afterRead = async (options) => {
   }
 }
 
+const removeFile = (file, index) => {
+  // 删除文件
+  formData.value.fileList.splice(index, 1)
+}
+
 // 暴露验证方法
 const validate = () => {
-  if (!formData.occurTime) {
+  if (!formData.value.occurTime) {
     showToast('请填写发生时间')
     return false
   }
-  if (!formData.routeNo) {
+  if (!formData.value.routeNo) {
     showToast('请填写线路编号')
     return false
   }
   return true
 }
 
-// 获取表单数据
+// 获取表单数据 - 返回 formData.value 的副本
 const getFormData = () => {
-  return { ...formData }
+  return { ...formData.value }
 }
 
 // 暴露方法给父组件
@@ -600,4 +566,4 @@ defineExpose({
     width: 110px;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/mobile/src/views/DisasterManagement/mockData.json b/packages/mobile/src/views/DisasterManagement/mockData.json
deleted file mode 100644
index 3eb1a93..0000000
--- a/packages/mobile/src/views/DisasterManagement/mockData.json
+++ /dev/null
@@ -1,42 +0,0 @@
-[
-  {
-    "id": 1,
-    "title": "G242金铃乡老窖坪发生积雪",
-    "status": "未解除",
-    "occurTime": "2025/10/10 20:29",
-    "estimateRecoverTime": "2025/10/10 20:29",
-    "disasterType": "积雪"
-  },
-  {
-    "id": 2,
-    "title": "S521白鹿镇X发生边坡坍塌",
-    "status": "已解除",
-    "occurTime": "2025/10/10 20:29",
-    "estimateRecoverTime": "2025/10/10 20:29",
-    "disasterType": "边坡坍塌"
-  },
-  {
-    "id": 3,
-    "title": "彭水S523发生边坡坍塌",
-    "status": "未解除",
-    "occurTime": "2025/10/10 20:29",
-    "estimateRecoverTime": "2025/10/10 20:29",
-    "disasterType": "路基沉陷"
-  },
-  {
-    "id": 4,
-    "title": "梁平蟠龙镇G318发生山体滑坡",
-    "status": "已解除",
-    "occurTime": "2025/10/10 20:29",
-    "estimateRecoverTime": "2025/10/10 20:29",
-    "disasterType": "山体滑坡"
-  },
-  {
-    "id": 5,
-    "title": "重庆市大足区XX县G201行道树倒塌",
-    "status": "已解除",
-    "occurTime": "2025/10/10 20:29",
-    "estimateRecoverTime": "2025/10/10 20:29",
-    "disasterType": "行道树倒塌"
-  }
-]
diff --git a/packages/mobile/src/views/DisasterManagement/waterDisasterFormData.json b/packages/mobile/src/views/DisasterManagement/waterDisasterFormData.json
index 3608d4b..88e8f3d 100644
--- a/packages/mobile/src/views/DisasterManagement/waterDisasterFormData.json
+++ b/packages/mobile/src/views/DisasterManagement/waterDisasterFormData.json
@@ -1,6 +1,6 @@
 {
   "occurLocation": "G108国道 K2250+300处",
-  "occurTime": "2024-07-15 14:30:00",
+  "occurTime": null,
   "roadConditionType": "国道",
   "routeNo": "G108",
   "event": {
@@ -25,8 +25,8 @@
     "deadCount": 0,
     "strandedVehicleCount": 12,
     "disposalMeasures": "正常通行",
-    "actualRecoverTime": "2024-07-17 12:00:00",
-    "expectRecoverTime": "2024-07-18 18:00:00",
+    "actualRecoverTime": null,
+    "expectRecoverTime": null,
     "injuredCount": 1,
     "investedFunds": 35.8,
     "investedMachinery": 6,
diff --git a/packages/screen/src/router/index.js b/packages/screen/src/router/index.js
index 05778b8..3e16942 100644
--- a/packages/screen/src/router/index.js
+++ b/packages/screen/src/router/index.js
@@ -194,7 +194,7 @@ const routes = [
   {
     path: '/disasterManagement',
     name: 'disasterManagement',
-    component: () => import('../views/DisasterManagement/DisasterManagement.vue'),
+    component: () => import('../views/DisasterManagement/DisasterManagementPC.vue'),
     meta: {
       title: '灾害巡检事件',
       breadcrumb: true
@@ -203,7 +203,7 @@ const routes = [
   {
     path: '/disasterReport',
     name: 'DisasterReport',
-    component: () => import('../views/DisasterManagement/DisasterReport/DisasterReport.vue'),
+    component: () => import('../views/DisasterManagement/DisasterReport/DisasterReportPC.vue'),
     meta: {
       title: '灾毁事件填报',
       breadcrumb: true
@@ -212,7 +212,7 @@ const routes = [
   {
     path: '/waterDisasterDetail',
     name: 'WaterDisasterDetail',
-    component: () => import('../views/DisasterManagement/DisasterDetail/WaterDisasterDetail.vue'),
+    component: () => import('../views/DisasterManagement/DisasterDetail/WaterDisasterDetailPC.vue'),
     meta: {
       title: '水毁事件详情',
       breadcrumb: true