feat: 冰雪专题

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

@@ -3,13 +3,15 @@
     <div class="content">
       <PanelItem title="基本信息">
         <van-form class="IceEventAddForm" label-align="left" colon>
-          <van-field v-model="form.event.occurTime" label="发生时间" center>
+          <van-field v-model="form.occurTime" label="发生时间" center>
             <template #button>
               <van-button plain round type="primary" size="mini" @click="getCurrentTime">校准时间</van-button>
             </template>
           </van-field>
+          <!-- 线路编号 (顶层 routeNo) -->
+          <RoadRoutesPicker v-model="form.routeNo" label="线路编号" placeholder="请线路" @change="handleRouteNoChange" />
           <van-field v-model="form.event.occurLocation" label="发生地点" center placeholder="请填写" />
-          <van-field v-model="form.event.routeNo" label="线路编号" center placeholder="请填写" />
+          <van-field v-model="form.occurLocation" label="路况位置" center placeholder="请填写" />
           <van-field v-model="form.event.startStakeNo" label="起点桩号" center placeholder="请填写" />
           <van-field v-model="form.event.endStakeNo" label="止点桩号" center placeholder="请填写" />
           <van-field v-model="form.event.disasterMileage" label="受灾里程" center type="number" placeholder="请填写" />
@@ -21,16 +23,20 @@
           <van-field label="处置措施" center>
             <template #input>
               <div class="disposal-buttons">
-                <van-button plain :type="form.event.disposalMeasures === '限速通行' ? 'primary' : 'default'" size="small" @click="toggleDisposal('限速通行')">
+                <van-button
-                  限速通行
+                  v-for="item in options['iceDisposalMeasures'] || []"
-                </van-button>
+                  :key="item.value"
-                <van-button plain :type="form.event.disposalMeasures === '封闭交通' ? 'primary' : 'default'" size="small" @click="toggleDisposal('封闭交通')" class="last-button">
+                  plain
-                  封闭交通
+                  :type="form.report.disposalMeasures === item.value ? 'primary' : 'default'"
+                  size="small"
+                  @click="toggleDisposal(item.value)"
+                >
+                  {{ item.label }}
                 </van-button>
               </div>
             </template>
           </van-field>
-          <van-field v-model="form.event.expectRecoverTime" label="预计恢复时间" center placeholder="请选择" readonly clickable @click="showExpectPicker = true" />
+          <van-field v-model="form.report.expectRecoverTime" label="预计恢复时间" center placeholder="请选择" readonly clickable @click="showExpectPicker = true" />
           <van-popup :show="showExpectPicker" round position="bottom" close-on-click-overlay @close="showExpectPicker = false">
             <van-picker-group title="选择日期时间" :tabs="['选择日期', '选择时间']" @confirm="handleConfirmExpectTime" @cancel="showExpectPicker = false">
               <van-date-picker v-model="expectDate" :min-date="minDate" :max-date="maxDate" />
@@ -42,13 +48,13 @@
 
       <PanelItem title="实施情况">
         <van-form class="IceEventAddForm" label-align="left" colon>
-          <van-field v-model="form.material.inputManpower" type="number" label="投入人力" center placeholder="请填写">
+          <van-field v-model="form.report.inputManpower" type="number" label="投入人力" center placeholder="请填写">
             <template #extra> 人次 </template>
           </van-field>
-          <van-field v-model="form.material.inputFunds" type="number" label="投入资金" center placeholder="请填写">
+          <van-field v-model="form.report.inputFunds" type="number" label="投入资金" center placeholder="请填写">
             <template #extra> 万元 </template>
           </van-field>
-          <van-field v-model="form.material.inputEquipment" type="number" label="投入设备" center placeholder="请填写">
+          <van-field v-model="form.report.inputEquipment" type="number" label="投入设备" center placeholder="请填写">
             <template #extra> 台班 </template>
           </van-field>
 
@@ -96,32 +102,20 @@
               <van-button type="primary" block @click="addSelectedMaterials" style="margin-top: 10px"> 确认添加 </van-button>
             </div>
           </van-popup>
-
-          <van-field label="当前通行情况" center>
-            <template #input>
-              <div class="disposal-buttons">
-                <van-button plain :type="form.traffic.currentStatus === 1 ? 'primary' : 'default'" size="small" @click="form.traffic.currentStatus = 1"> 正常通行 </van-button>
-                <van-button plain :type="form.traffic.currentStatus === 2 ? 'primary' : 'default'" size="small" @click="form.traffic.currentStatus = 2"> 限速通行 </van-button>
-                <van-button plain :type="form.traffic.currentStatus === 3 ? 'primary' : 'default'" size="small" @click="form.traffic.currentStatus = 3" class="last-button">
-                  封闭交通
-                </van-button>
-              </div>
-            </template>
-          </van-field>
           <van-field label="有无车辆滞留" center>
             <template #input>
               <div class="disposal-buttons">
-                <van-button plain :type="form.traffic.hasStrandedVehicles === 1 ? 'primary' : 'default'" size="small" @click="form.traffic.hasStrandedVehicles = 1">
+                <van-button plain :type="form.report.hasStrandedVehicles === 1 ? 'primary' : 'default'" size="small" @click="form.report.hasStrandedVehicles = 1">
                   有滞留
                 </van-button>
                 <van-button
                   plain
-                  :type="form.traffic.hasStrandedVehicles === 0 ? 'primary' : 'default'"
+                  :type="form.report.hasStrandedVehicles === 0 ? 'primary' : 'default'"
                   size="small"
                   @click="
                     () => {
-                      form.traffic.hasStrandedVehicles = 0
+                      form.report.hasStrandedVehicles = 0
-                      form.traffic.strandedVehicleCount = null
+                      form.report.strandedVehicleCount = null
                     }
                   "
                   class="last-button"
@@ -131,9 +125,9 @@
               </div>
             </template>
           </van-field>
-          <van-field v-if="form.traffic.hasStrandedVehicles === 1" v-model="form.traffic.strandedVehicleCount" type="number" label="滞留车辆数" center placeholder="请填写" />
+          <van-field v-if="form.report.hasStrandedVehicles === 1" v-model="form.report.strandedVehicleCount" type="number" label="滞留车辆数" center placeholder="请填写" />
 
-          <van-field v-model="form.traffic.actualRecoverTime" label="实际恢复时间" center placeholder="请选择" readonly clickable @click="showActualPicker = true" />
+          <van-field v-model="form.report.actualRecoverTime" label="实际恢复时间" center placeholder="请选择" readonly clickable @click="showActualPicker = true" />
           <van-popup :show="showActualPicker" round position="bottom" close-on-click-overlay @close="showActualPicker = false">
             <van-picker-group title="选择日期时间" :tabs="['选择日期', '选择时间']" @confirm="handleConfirmActualTime" @cancel="showActualPicker = false">
               <van-date-picker v-model="actualDate" :min-date="minDate" :max-date="maxDate" />
@@ -141,17 +135,18 @@
             </van-picker-group>
           </van-popup>
 
+          <van-field v-model="form.report.siteDescription" label="现场情况描述" type="textarea" rows="2" autosize center placeholder="请填写" />
+
           <van-field label="附件" center>
             <template #input>
               <van-uploader
-                v-model="fileList"
+                :modelValue="getFileList()"
-                @delete="handleDelete"
                 name="photos"
-                :file-list="fileList"
                 :file-type="['image/jpeg', 'image/png']"
                 :after-read="afterRead"
                 multiple
                 :max-count="6"
+                @delete="removeFile"
               />
             </template>
           </van-field>
@@ -164,57 +159,80 @@
 </template>
 
 <script setup>
-import { ref, onMounted, reactive, toRaw, watch, computed } from 'vue'
+import { ref, onMounted, reactive, watch, computed } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { useRouter } 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';
+import { useYHZStore } from '@/stores/yhzStore'
+import RoadRoutesPicker from './RoadRoutesPicker.vue'
+import { useOptions } from '@shared/composables/useOptions'
 
 const router = useRouter()
-const route = useRoute()
 const yhzStore = useYHZStore()
+const { options } = useOptions()
+const DEFAULT_REPORTER_UNIT = '万州区公路中心'
 
 // 组件挂载时获取数据
 const INIT_FORM = reactive({
+  occurLocation: '',
+  occurTime: '',
+  routeNo: '',
   event: {
     occurLocation: '', // 发生地点
-    routeNo: '', // 线路编号
-    occurTime: '', // 发生时间
     startStakeNo: '', // 起点桩号
     endStakeNo: '', // 止点桩号
+    startStakeLng: null,
+    startStakeLat: null,
+    endStakeLng: null,
+    endStakeLat: null,
     disasterMileage: '', // 受灾里程
-    expectRecoverTime: '', // 预计恢复时间
-    actualRecoverTime: '', // 实际恢复时间
     serviceStationId: '', // 养护站ID
     district: '', // 所属区县
+    reporterName: '',
     reportTime: '', // 填报时间
     reporterPhone: '', // 填报人手机号
-    disposalMeasures: '', // 处置措施
+    reportUnit: DEFAULT_REPORTER_UNIT,
+    routeNo: '',
+    occurTime: '',
+    roadConditionLocation: '',
+    routeType: '',
     createTime: '', // 创建时间
     updateTime: '', // 更新时间
     isDeleted: '' // 是否删除 0-未删除 1-已删除
   },
-  material: {
+  report: {
     inputManpower: null, // 投入人力
     inputFunds: null, // 投入资金
     inputEquipment: null, // 投入设备
-    createTime: '', // 创建时间
+    disposalMeasures: '',
-    updateTime: '' // 更新时间
+    expectRecoverTime: '',
-  },
+    actualRecoverTime: '',
-  traffic: {
+    hasStrandedVehicles: 0,
-    currentStatus: 0, // 当前通行情况 1-正常通行 2-限速通行 3-封闭交通
+    strandedVehicleCount: null,
-    hasStrandedVehicles: 0, // 是否有车辆滞留 0-无 1-有
+    siteDescription: '',
-    strandedVehicleCount: null, // 车辆滞留数量
+    reporterName: '',
-    actualRecoverTime: '', // 实际恢复时间
+    reporterPhone: '',
+    reportTime: '',
+    industrialSalt: null,
+    antiSlipSand: null,
+    sandbags: null,
     createTime: '', // 创建时间
     updateTime: '' // 更新时间
   },
   yhzMaterialList: [], // 养护站物资列表
-  photos: []
+  fileList: []
 })
 const form = reactive({ ...INIT_FORM })
-const fileList = ref([])
+
+const getFileList = () => {
+  return (
+    form.fileList?.map((item) => ({
+      url: item.fileUrl,
+      name: item.fileName
+    })) || []
+  )
+}
 
 // 日期格式化
 const formatTime = (date = new Date()) => {
@@ -223,16 +241,16 @@ const formatTime = (date = new Date()) => {
 }
 
 const getCurrentTime = () => {
-  form.event.occurTime = formatTime()
+  form.occurTime = formatTime()
 }
 
 const toggleDisposal = (type) => {
-  form.event.disposalMeasures = form.event.disposalMeasures === type ? '' : type
+  form.report.disposalMeasures = form.report.disposalMeasures === type ? '' : type
 }
 
 // 组件挂载时获取数据
 onMounted(() => {
-  form.event.occurTime = formatTime() // 初始化为当前时间
+  form.occurTime = formatTime() // 初始化为当前时间
 })
 
 // 添加物资相关
@@ -286,7 +304,6 @@ const checkMaterialAmount = (material, index) => {
       type: 'fail',
       message: '输入数量不能超过物资余额'
     })
-    // 设置为最大值
     form.yhzMaterialList[index].usageAmount = material.ye
   }
 }
@@ -331,14 +348,37 @@ const handleAdd = async () => {
       forbidClick: true,
       duration: 0 // 设置为0表示不会自动关闭
     })
-    form.event.serviceStationId = yhzStore.getYHZInfo.id
+    form.event.serviceStationId = yhzStore.getYHZInfo?.id || ''
-    form.event.district = yhzStore.getYHZInfo.qxmc
+    form.event.district = yhzStore.getYHZInfo?.qxmc || ''
-    console.log('yhzDetail', toRaw(yhzStore.getYHZInfo))
+    const reportTime = form.report.reportTime || form.event.reportTime || formatTime()
-    console.log('form', toRaw(form))
+    const submitData = {
+      ...form,
+      event: {
+        ...form.event,
+        routeNo: form.routeNo,
+        occurTime: form.occurTime,
+        reportTime,
+        reportUnit: form.event.reportUnit || DEFAULT_REPORTER_UNIT,
+        disposalMeasures: form.report.disposalMeasures,
+        expectRecoverTime: form.report.expectRecoverTime,
+        actualRecoverTime: form.report.actualRecoverTime || null,
+        roadConditionLocation: form.occurLocation,
+        eventType: '冰雪事件'
+      },
+      report: {
+        ...form.report,
+        reporterName: form.report.reporterName || form.event.reporterName,
+        reporterPhone: form.report.reporterPhone || form.event.reporterPhone,
+        reportTime
+      }
+    }
+    if (submitData.report.hasStrandedVehicles !== 1) {
+      submitData.report.strandedVehicleCount = null
+    }
     const res = await request({
-      url: '/snow-ops-platform/event/add',
+      url: '/snow-ops-platform/event/addOrUpdate',
       method: 'POST',
-      data: form
+      data: submitData
     })
     if (res.code === '00000') {
       toast.close()
@@ -373,7 +413,7 @@ const maxDate = new Date(2050, 11, 31)
 const handleConfirmExpectTime = () => {
   const [year, month, day] = expectDate.value
   const [hour, minute] = expectTime.value
-  form.event.expectRecoverTime =
+  form.report.expectRecoverTime =
     `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ` + `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:00`
   showExpectPicker.value = false
 }
@@ -382,7 +422,7 @@ const showActualPicker = ref(false)
 const handleConfirmActualTime = () => {
   const [year, month, day] = actualDate.value
   const [hour, minute] = actualTime.value
-  form.traffic.actualRecoverTime =
+  form.report.actualRecoverTime =
     `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ` + `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:00`
   showActualPicker.value = false
 }
@@ -390,19 +430,62 @@ const handleConfirmActualTime = () => {
 // 在打开选择器时设置初始值
 watch(showExpectPicker, (val) => {
   if (val) {
-    const current = form.event.expectRecoverTime ? new Date(form.event.expectRecoverTime) : new Date()
+    const current = form.report.expectRecoverTime ? new Date(form.report.expectRecoverTime) : new Date()
     expectDate.value = [current.getFullYear(), current.getMonth() + 1, current.getDate()]
     expectTime.value = [current.getHours(), current.getMinutes()]
   }
 })
 watch(showActualPicker, (val) => {
   if (val) {
-    const current = form.traffic.actualRecoverTime ? new Date(form.traffic.actualRecoverTime) : new Date()
+    const current = form.report.actualRecoverTime ? new Date(form.report.actualRecoverTime) : new Date()
     actualDate.value = [current.getFullYear(), current.getMonth() + 1, current.getDate()]
     actualTime.value = [current.getHours(), current.getMinutes()]
   }
 })
 
+const parsePointValue = (point) => {
+  if (!point) {
+    return { longitude: null, latitude: null }
+  }
+
+  if (Array.isArray(point) && point.length >= 2) {
+    return {
+      longitude: point[0] ?? null,
+      latitude: point[1] ?? null
+    }
+  }
+
+  if (typeof point === 'string') {
+    try {
+      const parsed = JSON.parse(point)
+      if (Array.isArray(parsed) && parsed.length >= 2) {
+        return {
+          longitude: parsed[0] ?? null,
+          latitude: parsed[1] ?? null
+        }
+      }
+    } catch (_error) {
+      return { longitude: null, latitude: null }
+    }
+  }
+
+  return { longitude: null, latitude: null }
+}
+
+const handleRouteNoChange = (item) => {
+  form.routeNo = item.routeCode
+  form.event.startStakeNo = item.startStakeNo
+  form.event.endStakeNo = item.endStakeNo
+
+  const startPoint = parsePointValue(item.startPoint ?? item.startpoint)
+  const endPoint = parsePointValue(item.endPoint ?? item.endpoint)
+
+  form.event.startStakeLng = startPoint.longitude
+  form.event.startStakeLat = startPoint.latitude
+  form.event.endStakeLng = endPoint.longitude
+  form.event.endStakeLat = endPoint.latitude
+}
+
 // 文件上传
 const afterRead = async (file) => {
   try {
@@ -420,14 +503,12 @@ const afterRead = async (file) => {
     })
     toast.close()
     if (res.code === '00000') {
-      form.photos.push({ photoUrl: res.data })
+      form.fileList.push({
-      const index = fileList.value.findIndex((f) => f.file === file.file)
+        fileName: file.file.name,
-      if (index !== -1) {
+        fileUrl: res.data,
-        fileList.value[index].serverUrl = res.data
+        fileType: 1,
-      }
+        fileSize: file.file.size
-
+      })
-      console.log('form.photos', toRaw(form.photos))
-      console.log('fileList.value', fileList.value)
     } else {
       throw new Error(res.message)
     }
@@ -441,13 +522,8 @@ const afterRead = async (file) => {
 }
 
 // 文件删除
-const handleDelete = (file) => {
+const removeFile = (file, index) => {
-  if (file.serverUrl) {
+  form.fileList.splice(index, 1)
-    const index = form.photos.findIndex((p) => p.photoUrl === file.serverUrl)
-    if (index !== -1) {
-      form.photos.splice(index, 1)
-    }
-  }
 }
 </script>
 

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

@@ -295,9 +295,47 @@ const isVideoFile = (file) => {
   if (file.fileUrl && videoExtensions.test(file.fileUrl)) return true
 }
 
+const parsePointValue = (point) => {
+  if (!point) {
+    return { longitude: null, latitude: null }
+  }
+
+  if (Array.isArray(point) && point.length >= 2) {
+    return {
+      longitude: point[0] ?? null,
+      latitude: point[1] ?? null
+    }
+  }
+
+  if (typeof point === 'string') {
+    try {
+      const parsed = JSON.parse(point)
+      if (Array.isArray(parsed) && parsed.length >= 2) {
+        return {
+          longitude: parsed[0] ?? null,
+          latitude: parsed[1] ?? null
+        }
+      }
+    } catch (_error) {
+      return { longitude: null, latitude: null }
+    }
+  }
+
+  return { longitude: null, latitude: null }
+}
+
 const handleRouteNoChange = (item) => {
-  formData.value.event.startStakeNo = item.startStakeNo
+  formData.routeNo = item.routeCode
-  formData.value.event.endStakeNo = item.endStakeNo
+  formData.event.startStakeNo = item.startStakeNo
+  formData.event.endStakeNo = item.endStakeNo
+
+  const startPoint = parsePointValue(item.startPoint)
+  const endPoint = parsePointValue(item.endPoint)
+
+  formData.event.startStakeLongitude = startPoint.longitude
+  formData.event.startStakeLatitude = startPoint.latitude
+  formData.event.endStakeLongitude = endPoint.longitude
+  formData.event.endStakeLatitude = endPoint.latitude
 }
 
 /**
@@ -404,7 +442,7 @@ const afterRead = async (options) => {
     if (res.code === '00000') {
       const name = file.name
       const url = res.data
-      const type = isImageFile({ fileUrl: url}) ? 1 : isVideoFile({ fileUrl: url}) ? 2 : 3
+      const type = isImageFile({ fileUrl: url }) ? 1 : isVideoFile({ fileUrl: url }) ? 2 : 3
       const fileData = {
         fileName: name,
         fileUrl: url,

packages/screen/src/component/NumberInput/NumberInput.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-input
+    v-bind="$attrs"
+    :model-value="displayValue"
+    @update:modelValue="handleUpdate"
+    @change="handleChange"
+    @blur="handleBlur"
+    @focus="handleFocus"
+  >
+    <template v-if="$slots.prepend" #prepend>
+      <slot name="prepend" />
+    </template>
+    <template v-if="$slots.prefix" #prefix>
+      <slot name="prefix" />
+    </template>
+    <template v-if="$slots.suffix" #suffix>
+      <slot name="suffix" />
+    </template>
+    <template v-if="$slots.append" #append>
+      <slot name="append" />
+    </template>
+  </el-input>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { updateValueForNumber } from '@/utils/math'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  precision: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'input', 'change', 'blur', 'focus'])
+
+const displayValue = computed(() => props.modelValue ?? '')
+
+const normalizeValue = (value) => {
+  const target = { value: props.modelValue }
+  updateValueForNumber(target, 'value', value, props.precision)
+  return target.value
+}
+
+const handleUpdate = (value) => {
+  const normalizedValue = normalizeValue(value)
+  emit('update:modelValue', normalizedValue)
+  emit('input', normalizedValue)
+}
+
+const handleChange = (value) => {
+  emit('change', normalizeValue(value))
+}
+
+const handleBlur = (event) => {
+  emit('blur', event)
+}
+
+const handleFocus = (event) => {
+  emit('focus', event)
+}
+</script>

packages/screen/src/utils/math.js

@@ -0,0 +1,18 @@
+export const updateValueForNumber = (obj, key, value, precision = 2) => {
+  let normalizedValue = String(value ?? '').replace(/[^\d.]/g, '')
+  normalizedValue = normalizedValue.replace(/^\./, '')
+
+  if (precision <= 0) {
+    obj[key] = normalizedValue.replace(/\./g, '')
+    return
+  }
+
+  const firstDotIndex = normalizedValue.indexOf('.')
+  if (firstDotIndex !== -1) {
+    const integerPart = normalizedValue.slice(0, firstDotIndex)
+    const decimalPart = normalizedValue.slice(firstDotIndex + 1).replace(/\./g, '').slice(0, precision)
+    normalizedValue = decimalPart ? `${integerPart}.${decimalPart}` : `${integerPart}.`
+  }
+
+  obj[key] = normalizedValue
+}

packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterContinueReportPC.vue

@@ -1,130 +1,88 @@
 <template>
-  <div class="water-disaster-pc">
+  <div class="ice-disaster-pc">
-    <!-- 合并后的单个卡片 -->
+    <el-card class="info-card" shadow="never">
-    <el-card class="form-card" shadow="never">
+      <template #header>
-      <div slot="header" class="card-header">
+        <div class="card-header">
-        <span>续报信息</span>
+          <span class="card-title">续报信息</span>
-      </div>
+        </div>
+      </template>
 
-      <!-- 所有表单项合并到一个区域，每行一个 -->
+      <el-form :model="formData"  v-if="formData.report">
-      <el-form :model="formData" label-width="120px" size="small">
+        <BlockItem title="处置情况">
-        <!-- 处置措施 -->
+          <el-form-item label="处理措施">
-        <el-form-item label="处置措施">
+            <el-select v-model="formData.report.disposalMeasures" placeholder="请选择" style="width: 100%">
-          <el-select v-model="formData.report.disposalMeasures">
+              <el-option v-for="(option, idx) in options['iceDisposalMeasures']" :key="idx" :label="option.label" :value="option.value" />
-            <el-option label="半幅封闭" value="半幅封闭" />
+            </el-select>
-            <el-option label="全副封闭" value="全副封闭" />
+          </el-form-item>
-            <el-option label="便道通行" value="便道通行" />
-            <el-option label="正常通行" value="正常通行" />
-          </el-select>
-        </el-form-item>
 
-        <!-- 预计恢复时间 -->
+          <el-form-item label="预计恢复时间">
-        <el-form-item label="预计恢复时间">
+            <el-date-picker
-          <el-date-picker
+              v-model="formData.report.expectRecoverTime"
-            v-model="formData.report.expectRecoverTime"
+              type="datetime"
-            type="datetime"
+              placeholder="请选择时间"
-            placeholder="请选择时间"
+              value-format="YYYY-MM-DD HH:mm:ss"
-            value-format="yyyy-MM-dd HH:mm"
+              :picker-options="pickerOptions"
-            :picker-options="pickerOptions"
+              style="width: 100%"
-            style="width: 100%"
+            />
-          />
+          </el-form-item>
-        </el-form-item>
+          {{ formData.report.expectRecoverTime }}
 
-        <!-- 实际恢复时间 -->
+          <el-form-item label="实际预计恢复时间">
-        <el-form-item label="实际恢复时间">
+            <el-date-picker
-          <el-date-picker
+              v-model="formData.report.actualRecoverTime"
-            v-model="formData.report.actualRecoverTime"
+              type="datetime"
-            type="datetime"
+              placeholder="请选择时间"
-            placeholder="请选择时间"
+              value-format="YYYY-MM-DD HH:mm:ss"
-            value-format="yyyy-MM-dd HH:mm"
+              :picker-options="pickerOptions"
-            :picker-options="pickerOptions"
+              style="width: 100%"
-            style="width: 100%"
+            />
-          />
+          </el-form-item>
-        </el-form-item>
+        </BlockItem>
 
-        <!-- 受伤人员 -->
+        <BlockItem title="实施情况">
-        <el-form-item label="受伤人员">
+          <MaterialList v-model="formData.yhzMaterialList" :yhzId="formData.event.serviceStationId" :col-span="24" />
-          <el-input-number v-model="formData.report.injuredCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+          <el-form-item label="投入资金">
-            <template slot="append">人</template>
+            <NumberInput v-model="formData.report.inputFunds" :precision="2" placeholder="请填写" style="width: 300px">
-          </el-input-number>
+              <template #append>万元</template>
-        </el-form-item>
+            </NumberInput>
+          </el-form-item>
 
-        <!-- 死亡人员 -->
+          <el-form-item label="投入人力">
-        <el-form-item label="死亡人员">
+            <NumberInput v-model="formData.report.inputManpower" :precision="0" placeholder="请填写" style="width: 300px">
-          <el-input-number v-model="formData.report.deadCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+              <template #append>人次</template>
-            <template slot="append">人</template>
+            </NumberInput>
-          </el-input-number>
+          </el-form-item>
-        </el-form-item>
 
-        <!-- 滞留人员 -->
+          <el-form-item label="投入设备">
-        <el-form-item label="滞留人员">
+            <NumberInput v-model="formData.report.inputEquipment" :precision="1" placeholder="请填写" style="width: 300px">
-          <el-input-number v-model="formData.report.strandedPersonCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+              <template #append>台/班</template>
-            <template slot="append">人</template>
+            </NumberInput>
-          </el-input-number>
+          </el-form-item>
-        </el-form-item>
 
-        <!-- 损坏车辆 -->
+          <el-form-item label="有无滞留车辆">
-        <el-form-item label="损坏车辆">
+            <el-select v-model="formData.report.hasStrandedVehicles" placeholder="请选择" style="width: 300px" @change="handleHasStrandedVehiclesChange">
-          <el-input-number v-model="formData.report.damagedVehicleCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+              <el-option label="有" :value="1" />
-            <template slot="append">辆</template>
+              <el-option label="无" :value="0" />
-          </el-input-number>
+            </el-select>
-        </el-form-item>
+          </el-form-item>
 
-        <!-- 滞留车辆 -->
+          <el-form-item label="滞留车辆">
-        <el-form-item label="滞留车辆">
+            <NumberInput v-model="formData.report.strandedVehicleCount" :precision="0" placeholder="请填写" style="width: 300px">
-          <el-input-number v-model="formData.report.strandedVehicleCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+              <template #append>辆</template>
-            <template slot="append">辆</template>
+            </NumberInput>
-          </el-input-number>
+          </el-form-item>
-        </el-form-item>
 
-        <!-- 损失列表组件 -->
+          <el-form-item label="现场情况描述">
-        <loss-list :col-span="24" v-model="formData.lossList" />
+            <el-input v-model="formData.report.siteDescription" type="textarea" :rows="3" placeholder="请输入"  />
+          </el-form-item>
 
-        <!-- 处理情况 -->
+          <el-form-item label="附件">
-        <el-form-item label="处理情况">
+            <div class="upload-wrapper">
-          <el-input v-model="formData.report.remark" type="textarea" :rows="2" placeholder="请填写（选填）" style="width: 60%" />
+              <FileUpload v-model="formData.fileList" type="image" :limit="6" />
-        </el-form-item>
+              <div class="upload-tip">只能上传jpg/png文件，且不超过500kb 最多上传6张照片</div>
-
+            </div>
-        <!-- 损失总金额 -->
+          </el-form-item>
-        <el-form-item label="损失总金额">
+        </BlockItem>
-          <el-input v-model="formData.report.totalLossAmount" placeholder="请填写（选填）" style="width: 300px">
-            <template slot="append">万元</template>
-          </el-input>
-        </el-form-item>
-
-        <!-- 已投机械 -->
-        <el-form-item label="已投机械">
-          <el-input v-model="formData.report.investedMachinery" placeholder="请填写" style="width: 300px">
-            <template slot="append">台/班</template>
-          </el-input>
-        </el-form-item>
-
-        <!-- 投入人力 -->
-        <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-input v-model="formData.report.investedFunds" placeholder="请填写" style="width: 300px">
-            <template slot="append">万元</template>
-          </el-input>
-        </el-form-item>
-
-        <!-- 现场描述 -->
-        <el-form-item label="现场描述">
-          <el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" style="width: 60%" />
-        </el-form-item>
-
-        <!-- 是否需要恢复重建 -->
-        <el-form-item label="是否需要恢复重建">
-          <el-radio-group v-model="formData.event.needsRecovery">
-            <el-radio :label="true">是</el-radio>
-            <el-radio :label="false">否</el-radio>
-          </el-radio-group>
-        </el-form-item>
 
         <el-form-item>
           <el-button type="primary" @click="handleSubmit">追加记录</el-button>
@@ -135,12 +93,15 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch, computed } from 'vue'
+import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { request } from '@shared/utils/request'
-import LossList from '../WaterDisasterReport/WaterDisasterLossListPC.vue'
+import BlockItem from '@/component/BlockItem.vue'
+import FileUpload from '@/component/FileUpload/FileUpload.vue'
+import NumberInput from '@/component/NumberInput/NumberInput.vue'
+import MaterialList from '../components/MaterialList.vue'
+import { useOptions } from '@shared/composables/useOptions'
 
-// Props 定义
 const props = defineProps({
   value: {
     type: Object,
@@ -148,137 +109,55 @@ const props = defineProps({
   }
 })
 
-// Emits 定义
+const emit = defineEmits(['refresh'])
-const emit = defineEmits(['input', 'change', 'submit'])
 
-// 表单数据
+const { options } = useOptions()
-const formData = reactive({
-  occurLocation: '',
-  occurTime: '',
-  roadConditionType: '',
-  routeNo: '',
-  event: {
-    blockedMileage: '',
-    blockedPointName: '',
-    contactPerson: '',
-    contactPhone: '',
-    damageCount: '',
-    district: '',
-    endStakeNo: '',
-    estimatedRecoveryCost: '',
-    isBlocked: '',
-    needsRecovery: '',
-    repairProgress: '',
-    reporterUnit: '',
-    startStakeNo: ''
-  },
-  report: {
-    actualRecoverTime: '',
-    damagedVehicleCount: '',
-    deadCount: '',
-    disposalMeasures: '',
-    expectRecoverTime: '',
-    injuredCount: '',
-    investedFunds: '',
-    investedMachinery: '',
-    investedManpower: '',
-    remark: '',
-    siteDescription: '',
-    strandedPersonCount: '',
-    strandedVehicleCount: '',
-    totalLossAmount: ''
-  },
-  lossList: [],
-  fileList: []
-})
 
-// 处置措施单选值
-const disposalMeasureValue = ref('')
 
-// 下拉选项
+const formData = ref({})
-const roadConditionOptions = [
-  { label: '高速公路', value: '高速公路' },
-  { label: '国道', value: '国道' },
-  { label: '省道', value: '省道' },
-  { label: '县道', value: '县道' },
-  { label: '乡道', value: '乡道' },
-  { label: '村道', value: '村道' }
-]
 
-const blockedOptions = [
-  { label: '是', value: true },
-  { label: '否', value: false }
-]
-
-const repairProgressOptions = [
-  { label: '未抢险', value: '未抢险' },
-  { label: '抢险中', value: '抢险中' },
-  { label: '已完成', value: '已完成' }
-]
-
-// 日期选择器配置
 const pickerOptions = {
   disabledDate(time) {
     return time.getTime() < new Date(2020, 0, 1) || time.getTime() > new Date(2030, 11, 31)
   }
 }
 
-// 监听处置措施单选值变化
+const initFormData = (data = {}) => {
-watch(disposalMeasureValue, (newVal) => {
+  formData.value = data
-  formData.report.disposalMeasures = newVal
+}
-})
+
-
+const validate = () => {
-// 监听外部传入的值
+  const form = formData.value
-watch(
+  if (!form.report.disposalMeasures) {
-  () => props.value,
+    ElMessage.warning('请选择处理措施')
-  (newVal) => {
+    return false
-    if (newVal && Object.keys(newVal).length > 0) {
+  }
-      initFormData(newVal)
+  if (!form.report.expectRecoverTime) {
-    }
+    ElMessage.warning('请选择预计恢复时间')
-  },
+    return false
-  { immediate: true, deep: true }
+  }
-)
+  if (!form.report.siteDescription) {
-
+    ElMessage.warning('请填写现场情况描述')
-// 监听表单数据变化，向外传递
+    return false
-watch(
+  }
-  () => formData,
+  return true
-  (newVal) => {
+}
-    emit('input', newVal)
+
-    emit('change', newVal)
+const getFormData = () => {
-  },
+  const submitData = {
-  { deep: true }
+    ...formData.value,
-)
+    report: {
-
+      ...formData.value.report
-// 从 report.disposalMeasures 初始化处置措施单选值
+    }
-watch(
+  }
-  () => formData.report.disposalMeasures,
+
-  (newVal) => {
+  if (submitData.report.hasStrandedVehicles !== 1) {
-    if (newVal && typeof newVal === 'string') {
+    submitData.report.strandedVehicleCount = null
-      disposalMeasureValue.value = newVal
+  }
-    }
+
-  },
+  return submitData
-  { immediate: true }
-)
-
-// 初始化表单数据
-const initFormData = (data) => {
-  Object.assign(formData, {
-    occurLocation: data.occurLocation || '',
-    occurTime: data.occurTime || '',
-    roadConditionType: data.roadConditionType || '',
-    routeNo: data.routeNo || '',
-    event: { ...formData.event, ...(data.event || {}) },
-    report: { ...formData.report, ...(data.report || {}) },
-    lossList: data.lossList || [],
-    fileList: data.fileList || []
-  })
-
-  if (data.report?.disposalMeasures) {
-    disposalMeasureValue.value = data.report.disposalMeasures
-  }
 }
 
-// 校准时间
 const calibrateTime = () => {
   const now = new Date()
   const year = now.getFullYear()
@@ -286,162 +165,89 @@ const calibrateTime = () => {
   const day = String(now.getDate()).padStart(2, '0')
   const hours = String(now.getHours()).padStart(2, '0')
   const minutes = String(now.getMinutes()).padStart(2, '0')
-  formData.occurTime = `${year}-${month}-${day} ${hours}:${minutes}`
+  formData.value.occurTime = `${year}-${month}-${day} ${hours}:${minutes}`
   ElMessage.success('时间已校准为当前时间')
 }
 
-// 表单验证
+const handleHasStrandedVehiclesChange = (value) => {
-const validate = () => {
+  if (value !== 1) {
-  if (!formData.occurTime) {
+    formData.value.report.strandedVehicleCount = null
-    ElMessage.warning('请填写发生时间')
-    return false
-  }
-  if (!formData.routeNo) {
-    ElMessage.warning('请填写线路编号')
-    return false
-  }
-  return true
-}
-
-// 获取表单数据
-const getFormData = () => {
-  return { ...formData }
-}
-
-// 重置表单
-const resetForm = () => {
-  Object.assign(formData, {
-    occurLocation: '',
-    occurTime: '',
-    roadConditionType: '',
-    routeNo: '',
-    event: {
-      blockedMileage: '',
-      blockedPointName: '',
-      contactPerson: '',
-      contactPhone: '',
-      damageCount: '',
-      district: '',
-      endStakeNo: '',
-      estimatedRecoveryCost: '',
-      isBlocked: '',
-      needsRecovery: '',
-      repairProgress: '',
-      reporterUnit: '',
-      startStakeNo: ''
-    },
-    report: {
-      actualRecoverTime: '',
-      damagedVehicleCount: '',
-      deadCount: '',
-      disposalMeasures: '',
-      expectRecoverTime: '',
-      injuredCount: '',
-      investedFunds: '',
-      investedMachinery: '',
-      investedManpower: '',
-      remark: '',
-      siteDescription: '',
-      strandedPersonCount: '',
-      strandedVehicleCount: '',
-      totalLossAmount: ''
-    },
-    lossList: [],
-    fileList: []
-  })
-  disposalMeasureValue.value = ''
-}
-
-// 提交方法
-const submit = () => {
-  if (validate()) {
-    emit('submit', getFormData())
   }
 }
 
 const handleSubmit = async () => {
-  // 验证表单
   if (!validate()) {
     return
   }
 
   try {
-    // 获取表单数据
-
-    // 添加事件类型和站点信息
-    const submitData = {
-      ...formData
-      // 可以在这里添加站点信息等其他数据
-    }
-
     const res = await request({
-      url: '/snow-ops-platform/water-damage/addOrUpdate',
+      url: '/snow-ops-platform/event/addOrUpdate',
       method: 'post',
-      data: submitData
+      data: getFormData()
     })
 
     if (res?.code === '00000') {
       ElMessage.success('提交成功')
-
+      emit('refresh')
-      emit("refresh")
     } else {
-      ElMessage.error(res.message)
+      ElMessage.error(res?.message || '提交失败')
     }
   } catch (error) {
     ElMessage.error('提交失败，请重试')
     console.error('提交失败:', error)
-  } finally {
-
   }
 }
 
-// 暴露方法给父组件
 defineExpose({
   validate,
   initFormData,
   getFormData,
-  resetForm,
+  calibrateTime
-  calibrateTime,
 })
 </script>
 
 <style lang="scss" scoped>
-.water-disaster-pc {
+.ice-disaster-pc {
   background-color: #f5f7fa;
   height: 100%;
 
-  .form-card {
+  .info-card {
+    margin-bottom: 20px;
     border-radius: 8px;
 
+    :deep(.el-card__header) {
+      padding: 16px 20px;
+      border-bottom: 1px solid #ebeef5;
+      background: #fafafa;
+    }
+
     .card-header {
-      font-size: 16px;
+      .card-title {
-      font-weight: 600;
+        font-size: 16px;
-      color: #303133;
+        font-weight: 600;
-      border-left: 4px solid #409eff;
+        color: #303133;
-      padding-left: 12px;
+      }
     }
   }
 
-  ::v-deep .el-form-item {
+  :deep(.el-form-item) {
     margin-bottom: 22px;
   }
 
-  ::v-deep .el-input-group__append {
+  // :deep(.el-input-group__append) {
-    padding: 0 10px;
+  //   padding: 0 10px;
+  // }
+
+  .upload-wrapper {
+    width: 100%;
   }
 
-  ::v-deep .el-input-number {
+  .upload-tip {
-    width: 300px;
+    margin-top: 8px;
-
+    color: #909399;
-    .el-input-group__append {
+    font-size: 12px;
-      padding: 0 10px;
+    line-height: 1.6;
-    }
-  }
-
-  ::v-deep .el-radio-group {
-    .el-radio {
-      margin-right: 20px;
-    }
   }
 }
 </style>

packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="web-detail-container">
+  <div class="page-container">
-    <div class="content-container">
+    <div class="content-container" v-if="detailData">
       <div class="left-panel">
         <!-- 基本信息卡片 -->
         <el-card class="info-card" shadow="never">
@@ -20,13 +20,13 @@
             <el-col :span="8">
               <div class="info-item">
                 <span class="info-label">所属服务站：</span>
-                <span class="info-value">{{}}</span>
+                <span class="info-value">{{ detailData.event?.stationName || '-' }}</span>
               </div>
             </el-col>
             <el-col :span="8">
               <div class="info-item">
                 <span class="info-label">线路编号：</span>
-                <span class="info-value">{{}}</span>
+                <span class="info-value">{{ detailData.routeNo || detailData.event?.routeNo || '-' }}</span>
               </div>
             </el-col>
           </el-row>
@@ -34,22 +34,66 @@
             <el-col :span="8">
               <div class="info-item">
                 <span class="info-label">发现时间：</span>
-                <span class="info-value">冰雪事件</span>
+                <span class="info-value">{{ detailData.occurTime || '-' }}</span>
               </div>
             </el-col>
             <el-col :span="8">
               <div class="info-item">
                 <span class="info-label">路况位置：</span>
-                <span class="info-value">{{}}</span>
+                <span class="info-value">{{ detailData.occurLocation || '-' }}</span>
               </div>
             </el-col>
             <el-col :span="8">
               <div class="info-item">
                 <span class="info-label">发生地点：</span>
-                <span class="info-value">{{}}</span>
+                <span class="info-value">{{ detailData.event?.occurLocation || '-' }}</span>
               </div>
             </el-col>
           </el-row>
+
+          <el-row :gutter="20" class="info-row">
+            <div class="stake-panel">
+              <el-icon class="stake-point-icon">
+                <LocationFilled />
+              </el-icon>
+              <div class="info-item">
+                <span class="info-label">起点桩号：</span>
+                <span class="info-value">{{ formatStakeNo(detailData.event?.startStakeNo) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">纬度：</span>
+                <span class="info-value">{{ formatValue(detailData.event?.startStakeLat ?? detailData.event?.startStakeLatitude) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">经度：</span>
+                <span class="info-value">{{ formatValue(detailData.event?.startStakeLng ?? detailData.event?.startStakeLongitude) }}</span>
+              </div>
+            </div>
+            <div class="stake-center">
+              <div class="info-item stake-mileage-item">
+                <span class="info-label">受灾里程：</span>
+                <span class="info-value">{{ formatMileage(detailData.event?.disasterMileage) }}</span>
+              </div>
+              <div class="stake-mileage-line"></div>
+            </div>
+            <div class="stake-panel">
+              <el-icon class="stake-point-icon">
+                <LocationFilled />
+              </el-icon>
+              <div class="info-item">
+                <span class="info-label">止点桩号：</span>
+                <span class="info-value">{{ formatStakeNo(detailData.event?.endStakeNo) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">纬度：</span>
+                <span class="info-value">{{ formatValue(detailData.event?.endStakeLat ?? detailData.event?.endStakeLatitude) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">经度：</span>
+                <span class="info-value">{{ formatValue(detailData.event?.endStakeLng ?? detailData.event?.endStakeLongitude) }}</span>
+              </div>
+            </div>
+          </el-row>
         </el-card>
         <!-- 填报情况 -->
         <el-card class="info-card" shadow="never">
@@ -58,41 +102,94 @@
               <span class="card-title">填报情况</span>
             </div>
           </template>
+          <div v-if="hasReportData">
+            <div v-for="(report, index) in allReports" :key="'report' + index" class="report-section">
+              <div class="report-header">
+                <span class="report-title">{{ getReportTitle(index) }}</span>
+                <span class="report-meta">时间：{{ formatValue(report.createTime) }}</span>
+              </div>
+              <div class="content-wrapper">
+                <div class="basic-info-wrapper">
+                  <div class="info-list">
+                    <div class="info-item">
+                      <span class="info-label">处理措施：</span>
+                      <span class="info-value">{{ formatDisposalMeasures(report.disposalMeasures) }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">预计恢复时间：</span>
+                      <span class="info-value">{{ formatValue(report.expectRecoverTime) }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">实际恢复时间：</span>
+                      <span class="info-value">{{ formatValue(report.actualRecoverTime) }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">填报人：</span>
+                      <span class="info-value">{{ formatValue(report.reporterName || report.reportUserName || report.createByName) }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">联系电话：</span>
+                      <span class="info-value">{{ formatValue(report.reporterPhone || report.phone || report.reportPhone || report.contactPhone) }}</span>
+                    </div>
+                    <div class="info-item" v-for="(item, index) in report.materialUsageList" :key="index">
+                      <span class="info-label">{{item.materialName}}：</span>
+                      <span class="info-value">{{ getMaterialUsageText(item) }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">投入资金：</span>
+                      <span class="info-value">{{ formatUnitValue(report.inputFunds ?? report.material?.inputFunds ?? report.investedFunds, '万元') }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">投入人力：</span>
+                      <span class="info-value">{{ formatUnitValue(report.inputManpower ?? report.material?.inputManpower ?? report.investedManpower, '人次') }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">投入设备：</span>
+                      <span class="info-value">{{ formatUnitValue(report.inputEquipment ?? report.material?.inputEquipment ?? report.investedMachinery, '台') }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">有无车辆滞留：</span>
+                      <span class="info-value">{{ getHasStrandedVehiclesText(report) }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">滞留车辆：</span>
+                      <span class="info-value">{{ formatUnitValue(report.strandedVehicleCount ?? report.traffic?.strandedVehicleCount, '辆') }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">现场情况描述：</span>
+                      <span class="info-value">{{ formatValue(report.siteDescription) }}</span>
+                    </div>
+                  </div>
+                  <div class="file-list">
+                    <FileUpload v-model="report.fileList" :readonly="!isEdit" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <el-empty v-else description="暂无填报情况" :image-size="100" />
         </el-card>
       </div>
-      <!-- <div class="right-panel" v-if="isEdit">
+      <div class="right-panel" v-if="isEdit">
         <ContinueReport ref="continueReport" @refresh="getDisasterDetail" />
-      </div> -->
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, computed } from 'vue'
+import { onMounted, ref, computed, nextTick } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { ArrowLeft, Picture, VideoCamera } from '@element-plus/icons-vue'
+import { LocationFilled } from '@element-plus/icons-vue'
-import ContinueReport from './IceDisasterContinueReportPC.vue'
 import { request } from '@shared/utils/request'
+import ContinueReport from './IceDisasterContinueReportPC.vue'
 import FileUpload from '@/component/FileUpload/FileUpload.vue'
 
-const router = useRouter()
 const route = useRoute()
 
 // 详情数据
-const detailData = ref({
+const detailData = ref(null)
-  event: null,
-  report: [],
-  fileList: [],
-  lossList: [],
-  occurLocation: '',
-  occurTime: '',
-  roadConditionType: '',
-  routeNo: ''
-})
-
-// 事件状态
-const eventStatus = ref(0)
 
 // 是否为编辑
 const isEdit = computed(() => {
@@ -101,19 +198,25 @@ const isEdit = computed(() => {
 
 const continueReport = ref(null)
 
+const formatValue = (value) => {
+  return value || value === 0 ? value : '-'
+}
+
+const formatStakeNo = (value) => {
+  if (!value && value !== 0) return '-'
+  const text = String(value).trim()
+  if (!text) return '-'
+  return /^k/i.test(text) ? text.toUpperCase() : `K${text}`
+}
+
+const formatMileage = (value) => {
+  if (!value && value !== 0) return '-'
+  return `${value}公里`
+}
+
 // 所有填报记录（首报 + 续报）
 const allReports = computed(() => {
-  const reports =
+  return detailData.value.report || []
-    detailData.value.report?.map((item, index) => {
-      if (index === detailData.value.report.length - 1) {
-        item.title = '首报'
-      } else {
-        item.title = '续报' + (detailData.value.report.length - 1 - index)
-      }
-      return item
-    }) || []
-  return reports
-  // return reports.reverse()
 })
 
 // 是否有填报数据
@@ -121,6 +224,39 @@ const hasReportData = computed(() => {
   return allReports.value.length > 0
 })
 
+const getReportTitle = (index) => {
+  const reportLength = allReports.value.length
+  return index === reportLength - 1 ? '首报' : `续报${reportLength - 1 - index}`
+}
+
+const formatDisposalMeasures = (value) => {
+  if (!value) return '-'
+  return String(value)
+    .split(/[，,]/)
+    .map((item) => item.trim())
+    .filter(Boolean)
+    .join('、')
+}
+
+const formatUnitValue = (value, unit) => {
+  if (value === null || value === undefined || value === '') return '-'
+  return `${value}${unit}`
+}
+
+const getMaterialUsageText = (item) => {
+  return item.usageAmount + ' ' + item.materialUnit
+}
+
+const getHasStrandedVehiclesText = (report) => {
+  const value = report?.hasStrandedVehicles ?? report?.traffic?.hasStrandedVehicles
+  if (value === 1 || value === true || value === '1' || value === '是' || value === '有') return '有'
+  if (value === 0 || value === false || value === '0' || value === '否' || value === '无') return '无'
+
+  const count = report?.strandedVehicleCount ?? report?.traffic?.strandedVehicleCount
+  if (count === null || count === undefined || count === '') return '-'
+  return Number(count) > 0 ? '有' : '无'
+}
+
 // 获取灾毁详情
 const getDisasterDetail = async () => {
   const id = route.query.id
@@ -137,27 +273,27 @@ const getDisasterDetail = async () => {
 
     if (result?.data) {
       const data = result.data
-      console.log('🚀 ~ getDisasterDetail ~ data:', data)
       detailData.value = {
         event: data.event || null,
-        report: data.report || [],
+        report: data.reportList?.reverse(),
         fileList: data.fileList || [],
         lossList: data.lossList || [],
-        occurLocation: data.occurLocation || '',
+        occurLocation: data.occurLocation || data.event?.roadConditionLocation || '',
-        occurTime: data.occurTime || '',
+        occurTime: data.occurTime || data.event?.occurTime || '',
         roadConditionType: data.roadConditionType || '',
-        routeNo: data.routeNo || ''
+        routeNo: data.routeNo || data.event?.routeNo || ''
       }
-      eventStatus.value = data.eventStatus || 0
 
       if (isEdit.value) {
         const newFormData = {
           ...data,
-          lossList: null,
           report: {},
-          fileList: null
+          yhzMaterialList: [],
+          fileList: []
         }
-        continueReport.value?.initFormData(newFormData)
+        nextTick(()=>{
+          continueReport.value?.initFormData(newFormData)
+        })
       }
     } else {
       ElMessage.warning(result.message || '获取详情失败')
@@ -168,18 +304,13 @@ const getDisasterDetail = async () => {
   }
 }
 
-// 点击返回
-const handleClickBack = () => {
-  router.push('/disasterManagement')
-}
-
 onMounted(() => {
   getDisasterDetail()
 })
 </script>
 
 <style scoped lang="scss">
-.web-detail-container {
+.page-container {
   padding: 20px;
   background: #f5f7fa;
   height: 100%;
@@ -187,27 +318,6 @@ onMounted(() => {
   padding-bottom: 100px;
 }
 
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding: 0 20px;
-
-  .header-left {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    .page-title {
-      margin: 0;
-      font-size: 20px;
-      font-weight: 600;
-      color: #303133;
-    }
-  }
-}
-
 .info-card {
   margin-bottom: 20px;
   border-radius: 8px;
@@ -227,6 +337,41 @@ onMounted(() => {
   }
 }
 
+.stake-panel {
+  padding: 8px 12px 4px;
+}
+
+.stake-center {
+  padding: 18px 12px 4px;
+}
+
+.stake-point-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  margin: 0 auto 18px;
+  color: #409eff;
+  font-size: 40px;
+}
+
+.stake-mileage-item {
+  margin-bottom: 10px;
+  justify-content: center;
+
+  &.info-item  .info-value {
+    flex: initial;
+  }
+}
+
+.stake-mileage-line {
+  width: 200px;
+  height: 2px;
+  margin: 0 4px;
+  background: #2f3136;
+}
+
 .info-row {
   margin-bottom: 16px;
 
@@ -244,10 +389,6 @@ onMounted(() => {
     margin-top: 10px;
   }
 
-  &.margin {
-    margin-top: 10px;
-  }
-
   .info-label {
     white-space: nowrap;
     flex-shrink: 0;
@@ -295,88 +436,37 @@ onMounted(() => {
   }
 }
 
-.attachment-wrapper {
-  margin-top: 12px;
-  padding-top: 8px;
-  border-top: 1px dashed #ebeef5;
-
-  .attachment-item {
-    .attachment-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 16px;
-
-      .attachment-link {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
-        background: #f5f7fa;
-        border-radius: 4px;
-        cursor: pointer;
-
-        &:hover {
-          background: #ecf5ff;
-          color: #409eff;
-        }
-
-        .file-name {
-          font-size: 13px;
-          max-width: 200px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-}
-
-.footer-buttons {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  padding: 16px 24px;
-  background: #fff;
-  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
-  z-index: 100;
-
-  .footer-btn {
-    width: 200px;
-    height: 44px;
-    font-size: 16px;
-    border-radius: 22px;
-  }
-}
 .content-container {
   display: flex;
+
   .left-panel {
     flex: 1;
     margin-right: 10px;
   }
+
   .right-panel {
-    width: 300px;
+    width: 400px;
   }
 }
+
 .content-wrapper {
   display: flex;
   flex-direction: column;
 }
+
 .basic-info-wrapper {
   display: flex;
+  align-items: flex-start;
+  gap: 24px;
 }
-.detal-info-wrapper {
+
-  margin-top: 10px;
-  border-top: 1px solid #efefef;
-  padding-top: 10px;
-}
 .info-list {
   flex: 1;
   overflow: hidden;
 }
+
 .file-list {
+  width: 260px;
+  flex-shrink: 0;
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="disaster-form-page">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="disaster-form" @submit.prevent>
+    <el-form ref="formRef" :model="formData" :rules="formRules"  class="disaster-form" @submit.prevent>
       <el-card class="form-section" shadow="never">
         <template #header>
           <div class="section-header">
@@ -11,18 +11,18 @@
         <BlockItem title="填报人员信息">
           <el-row :gutter="24">
             <el-col :span="8">
-              <el-form-item label="填报单位" prop="event.reporterUnit">
+              <el-form-item label="填报单位" prop="event.reportUnit">
-                <el-input v-model="formData.event.reporterUnit" disabled />
+                <el-input v-model="formData.event.reportUnit" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="联系人员" prop="event.contactPerson">
+              <el-form-item label="联系人员" prop="event.reporterName">
-                <el-input v-model="formData.event.contactPerson" placeholder="请填写" />
+                <el-input v-model="formData.event.reporterName" placeholder="请填写" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="联系电话" prop="event.contactPhone">
+              <el-form-item label="联系电话" prop="event.reporterPhone">
-                <el-input v-model="formData.event.contactPhone" maxlength="11" placeholder="请填写" />
+                <el-input v-model="formData.event.reporterPhone" maxlength="11" placeholder="请填写" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -97,13 +97,13 @@
 
           <el-row :gutter="24">
             <el-col :span="8">
-              <el-form-item label="起点桩经度" prop="event.startStakeLongitude">
+              <el-form-item label="起点桩经度" prop="event.startStakeLng">
-                <el-input v-model="formData.event.startStakeLongitude" placeholder="请填写" />
+                <NumberInput v-model="formData.event.startStakeLng" :precision="6" placeholder="请填写" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="起点桩纬度" prop="event.startStakeLatitude">
+              <el-form-item label="起点桩纬度" prop="event.startStakeLat">
-                <el-input v-model="formData.event.startStakeLatitude" placeholder="请填写" />
+                <NumberInput v-model="formData.event.startStakeLat" :precision="6" placeholder="请填写" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
@@ -117,20 +117,20 @@
 
           <el-row :gutter="24">
             <el-col :span="8">
-              <el-form-item label="止点桩经度" prop="event.endStakeLongitude">
+              <el-form-item label="止点桩经度" prop="event.endStakeLng">
-                <el-input v-model="formData.event.endStakeLongitude" placeholder="请填写" />
+                <NumberInput v-model="formData.event.endStakeLng" :precision="6" placeholder="请填写" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="止点桩纬度" prop="event.endStakeLatitude">
+              <el-form-item label="止点桩纬度" prop="event.endStakeLat">
-                <el-input v-model="formData.event.endStakeLatitude" placeholder="请填写" />
+                <NumberInput v-model="formData.event.endStakeLat" :precision="6" placeholder="请填写" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="受灾里程" prop="event.disasterMileage">
-                <el-input v-model="formData.event.disasterMileage" placeholder="请填写">
+                <NumberInput v-model="formData.event.disasterMileage" :precision="2" placeholder="请填写">
                   <template #append>公里</template>
-                </el-input>
+                </NumberInput>
               </el-form-item>
             </el-col>
           </el-row>
@@ -179,49 +179,41 @@
 
           <el-row :gutter="24">
             <el-col :span="8">
-              <el-form-item label="投入人力" prop="material.inputManpower">
+              <el-form-item label="投入人力" prop="report.inputManpower">
-                <el-input-number v-model="formData.material.inputManpower" :min="0" :step="1" :controls="false" placeholder="请填写" style="width: 100%">
+                <NumberInput v-model="formData.report.inputManpower" :precision="0" placeholder="请填写" style="width: 100%">
-                  <template #suffix>
+                  <template #append>人次</template>
-                    <span class="unit-text">人次</span>
+                </NumberInput>
-                  </template>
-                </el-input-number>
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="投入资金" prop="material.inputFunds">
+              <el-form-item label="投入资金" prop="report.inputFunds">
-                <el-input-number v-model="formData.material.inputFunds" :min="0" :precision="2" :controls="false" placeholder="请填写" style="width: 100%">
+                <NumberInput v-model="formData.report.inputFunds" :precision="2" placeholder="请填写" style="width: 100%">
-                  <template #suffix>
+                  <template #append>万元</template>
-                    <span class="unit-text">万元</span>
+                </NumberInput>
-                  </template>
-                </el-input-number>
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="投入设备" prop="material.inputEquipment">
+              <el-form-item label="投入设备" prop="report.inputEquipment">
-                <el-input-number v-model="formData.material.inputEquipment" :min="0" :precision="1" :controls="false" placeholder="请填写" style="width: 100%">
+                <NumberInput v-model="formData.report.inputEquipment" :precision="1" placeholder="请填写" style="width: 100%">
-                  <template #suffix>
+                  <template #append>台班</template>
-                    <span class="unit-text">台班</span>
+                </NumberInput>
-                  </template>
-                </el-input-number>
               </el-form-item>
             </el-col>
           </el-row>
 
           <el-row :gutter="24">
             <el-col :span="8">
-              <el-form-item label="有无滞留车辆" prop="traffic.hasStrandedVehicles">
+              <el-form-item label="有无滞留车辆" prop="report.hasStrandedVehicles">
-                <el-select v-model="formData.traffic.hasStrandedVehicles" placeholder="请选择" style="width: 100%" @change="handleHasStrandedVehiclesChange">
+                <el-select v-model="formData.report.hasStrandedVehicles" placeholder="请选择" style="width: 100%" @change="handleHasStrandedVehiclesChange">
                   <el-option v-for="option in strandedVehicleOptions" :key="option.value" :label="option.label" :value="option.value" />
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="滞留车辆" prop="traffic.strandedVehicleCount">
+              <el-form-item label="滞留车辆" prop="report.strandedVehicleCount">
-                <el-input-number v-model="formData.traffic.strandedVehicleCount" :min="0" :step="1" :controls="false" placeholder="请填写" style="width: 100%">
+                <NumberInput v-model="formData.report.strandedVehicleCount" :precision="0" placeholder="请填写" style="width: 100%">
-                  <template #suffix>
+                  <template #append>辆</template>
-                    <span class="unit-text">辆</span>
+                </NumberInput>
-                  </template>
-                </el-input-number>
               </el-form-item>
             </el-col>
           </el-row>
@@ -259,6 +251,7 @@
 import { LocationFilled } from '@element-plus/icons-vue'
 import BlockItem from '@/component/BlockItem.vue'
 import FileUpload from '@/component/FileUpload/FileUpload.vue'
+import NumberInput from '@/component/NumberInput/NumberInput.vue'
 import RoadRoutesSelect from '../components/RoadRoutesSelect.vue'
 import YHZSelect from '../components/YHZSelect.vue'
 import MaterialList from '../components/MaterialList.vue'

packages/screen/src/views/DisasterManagement/IceDisasterReport/useIceDisasterReport.js

@@ -11,36 +11,49 @@ const createDefaultFormData = () => ({
   occurTime: '',
   routeNo: '',
   event: {
-    contactPerson: '',
+    actualRecoverTime: '',
-    contactPhone: '',
     disasterMileage: null,
+    disposalMeasures: '',
     district: '',
-    endStakeLatitude: null,
+    endStakeLat: null,
-    endStakeLongitude: null,
+    endStakeLng: null,
     endStakeNo: '',
+    expectRecoverTime: '',
+    id: null,
     occurLocation: '',
-    reporterUnit: DEFAULT_REPORTER_UNIT,
+    occurTime: '',
+    reporterName: '',
+    reporterPhone: '',
+    reportTime: '',
+    reportUnit: DEFAULT_REPORTER_UNIT,
+    roadConditionLocation: '',
+    routeNo: '',
+    routeType: '',
     serviceStationId: '',
-    startStakeLatitude: null,
+    startStakeLat: null,
-    startStakeLongitude: null,
+    startStakeLng: null,
     startStakeNo: ''
   },
-  material: {
-    inputEquipment: null,
-    inputFunds: null,
-    inputManpower: null
-  },
   report: {
     actualRecoverTime: '',
+    antiSlipSand: null,
     disposalMeasures: '',
     expectRecoverTime: '',
-    siteDescription: ''
-  },
-  traffic: {
     hasStrandedVehicles: null,
+    industrialSalt: null,
+    inputEquipment: null,
+    inputFunds: null,
+    inputManpower: null,
+    reporterName: '',
+    reporterPhone: '',
+    reportTime: '',
+    sandbags: null,
+    siteDescription: '',
     strandedVehicleCount: null
   },
-  fileList: []
+  fileList: [],
+  lossList: [],
+  yhzMaterialList: []
 })
 
 const mergeFormData = (source = {}) => {
@@ -52,24 +65,18 @@ const mergeFormData = (source = {}) => {
       ...defaults.event,
       ...(source.event || {})
     },
-    material: {
-      ...defaults.material,
-      ...(source.material || {})
-    },
     report: {
       ...defaults.report,
       ...(source.report || {})
-    },
-    traffic: {
-      ...defaults.traffic,
-      ...(source.traffic || {})
     }
   }
 
   merged.fileList = Array.isArray(source.fileList) ? source.fileList : defaults.fileList
+  merged.lossList = Array.isArray(source.lossList) ? source.lossList : defaults.lossList
+  merged.yhzMaterialList = Array.isArray(source.yhzMaterialList) ? source.yhzMaterialList : defaults.yhzMaterialList
 
-  if (!merged.event.reporterUnit) {
+  if (!merged.event.reportUnit) {
-    merged.event.reporterUnit = DEFAULT_REPORTER_UNIT
+    merged.event.reportUnit = DEFAULT_REPORTER_UNIT
   }
 
   return merged
@@ -127,8 +134,8 @@ export const useIceDisasterReport = () => {
   })
 
   const formRules = {
-    'event.contactPerson': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
+    'event.reporterName': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
-    'event.contactPhone': [
+    'event.reporterPhone': [
       { required: true, message: '请输入联系电话', trigger: 'blur' },
       { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的联系电话', trigger: 'blur' }
     ],
@@ -139,11 +146,11 @@ export const useIceDisasterReport = () => {
     'event.occurLocation': [{ required: true, message: '请输入发生地点', trigger: 'blur' }],
     occurLocation: [{ required: true, message: '请选择路况位置', trigger: 'blur' }],
     'event.startStakeNo': [{ required: true, message: '请输入起点桩号', trigger: 'blur' }],
-    'event.startStakeLongitude': [{ required: true, message: '请输入起点桩经度', trigger: 'blur' }],
+    'event.startStakeLng': [{ required: true, message: '请输入起点桩经度', trigger: 'blur' }],
-    'event.startStakeLatitude': [{ required: true, message: '请输入起点桩纬度', trigger: 'blur' }],
+    'event.startStakeLat': [{ required: true, message: '请输入起点桩纬度', trigger: 'blur' }],
     'event.endStakeNo': [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
-    'event.endStakeLongitude': [{ required: true, message: '请输入止点桩经度', trigger: 'blur' }],
+    'event.endStakeLng': [{ required: true, message: '请输入止点桩经度', trigger: 'blur' }],
-    'event.endStakeLatitude': [{ required: true, message: '请输入止点桩纬度', trigger: 'blur' }],
+    'event.endStakeLat': [{ required: true, message: '请输入止点桩纬度', trigger: 'blur' }],
     'event.disasterMileage': [{ required: true, message: '请输入受灾里程', trigger: 'blur' }],
     'report.disposalMeasures': [{ required: true, message: '请选择处理措施', trigger: 'change' }],
     'report.siteDescription': [{ required: true, message: '请输入现场情况描述', trigger: 'blur' }],
@@ -172,13 +179,14 @@ export const useIceDisasterReport = () => {
   }
 
   const handleDistrictChange = () => {
-    formData.routeNo = ''
+    // 暂时不处理区县变化
-    formData.event.startStakeNo = ''
+    // formData.routeNo = ''
-    formData.event.endStakeNo = ''
+    // formData.event.startStakeNo = ''
-    formData.event.startStakeLongitude = null
+    // formData.event.endStakeNo = ''
-    formData.event.startStakeLatitude = null
+    // formData.event.startStakeLng = null
-    formData.event.endStakeLongitude = null
+    // formData.event.startStakeLat = null
-    formData.event.endStakeLatitude = null
+    // formData.event.endStakeLng = null
+    // formData.event.endStakeLat = null
   }
 
   const handleRouteNoChange = (item = {}) => {
@@ -189,28 +197,52 @@ export const useIceDisasterReport = () => {
     const startPoint = parsePointValue(item.startPoint ?? item.startpoint)
     const endPoint = parsePointValue(item.endPoint ?? item.endpoint)
 
-    formData.event.startStakeLongitude = startPoint.longitude
+    formData.event.startStakeLng = startPoint.longitude
-    formData.event.startStakeLatitude = startPoint.latitude
+    formData.event.startStakeLat = startPoint.latitude
-    formData.event.endStakeLongitude = endPoint.longitude
+    formData.event.endStakeLng = endPoint.longitude
-    formData.event.endStakeLatitude = endPoint.latitude
+    formData.event.endStakeLat = endPoint.latitude
   }
 
   const handleHasStrandedVehiclesChange = (value) => {
     if (value !== 1) {
-      formData.traffic.strandedVehicleCount = null
+      formData.report.strandedVehicleCount = null
     }
   }
 
+  const getCurrentTime = () => {
+    const currentDate = new Date()
+    const year = currentDate.getFullYear()
+    const month = String(currentDate.getMonth() + 1).padStart(2, '0')
+    const day = String(currentDate.getDate()).padStart(2, '0')
+    const hours = String(currentDate.getHours()).padStart(2, '0')
+    const minutes = String(currentDate.getMinutes()).padStart(2, '0')
+    const seconds = String(currentDate.getSeconds()).padStart(2, '0')
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  }
+
   const buildSubmitData = () => {
     const payload = mergeFormData(formData)
+    const reportTime = payload.report.reportTime || payload.event.reportTime || getCurrentTime()
+
     payload.event.routeNo = payload.routeNo
     payload.event.occurTime = payload.occurTime
-    payload.event.eventType = eventType.value
+    payload.event.reportTime = reportTime
-    payload.event.roadType = filterForm.routeType
+    payload.event.reportUnit = payload.event.reportUnit || DEFAULT_REPORTER_UNIT
+    payload.event.disposalMeasures = payload.report.disposalMeasures
+    payload.event.expectRecoverTime = payload.report.expectRecoverTime
+    payload.event.actualRecoverTime = payload.report.actualRecoverTime || null
     payload.event.roadConditionLocation = payload.occurLocation
-    if (payload.traffic.hasStrandedVehicles !== 1) {
+    payload.event.routeType = filterForm.routeType
-      payload.traffic.strandedVehicleCount = null
+    payload.event.eventType = eventType.value
+
+    payload.report.reporterName = payload.report.reporterName || payload.event.reporterName
+    payload.report.reporterPhone = payload.report.reporterPhone || payload.event.reporterPhone
+    payload.report.reportTime = reportTime
+
+    if (payload.report.hasStrandedVehicles !== 1) {
+      payload.report.strandedVehicleCount = null
     }
+
     return payload
   }
 
@@ -272,22 +304,42 @@ export const useIceDisasterReport = () => {
 
       if (result?.data) {
         const data = result.data
+        const baseReport = data.report || data.reportList?.[data.reportList.length - 1] || {}
+        filterForm.routeType = data.event?.routeType || data.event?.roadType || filterForm.routeType
         initFormData({
           occurLocation: data.occurLocation || data.event?.roadConditionLocation || '',
           occurTime: data.occurTime || data.event?.occurTime || '',
           routeNo: data.routeNo || data.event?.routeNo || '',
           event: {
-            ...(data.event || {})
+            ...(data.event || {}),
-          },
+            reporterName: data.event?.reporterName || data.event?.contactPerson || '',
-          material: {
+            reporterPhone: data.event?.reporterPhone || data.event?.contactPhone || '',
-            ...(data.material || {})
+            reportUnit: data.event?.reportUnit || data.event?.reporterUnit || DEFAULT_REPORTER_UNIT,
+            startStakeLat: data.event?.startStakeLat ?? data.event?.startStakeLatitude ?? null,
+            startStakeLng: data.event?.startStakeLng ?? data.event?.startStakeLongitude ?? null,
+            endStakeLat: data.event?.endStakeLat ?? data.event?.endStakeLatitude ?? null,
+            endStakeLng: data.event?.endStakeLng ?? data.event?.endStakeLongitude ?? null
           },
           report: {
-            ...(data.report || {})
+            ...baseReport,
+            disposalMeasures: baseReport.disposalMeasures || data.event?.disposalMeasures || '',
+            expectRecoverTime: baseReport.expectRecoverTime || data.event?.expectRecoverTime || '',
+            actualRecoverTime: baseReport.actualRecoverTime || data.event?.actualRecoverTime || '',
+            inputEquipment: baseReport.inputEquipment ?? data.material?.inputEquipment ?? baseReport.investedMachinery ?? null,
+            inputFunds: baseReport.inputFunds ?? data.material?.inputFunds ?? baseReport.investedFunds ?? null,
+            inputManpower: baseReport.inputManpower ?? data.material?.inputManpower ?? baseReport.investedManpower ?? null,
+            hasStrandedVehicles: baseReport.hasStrandedVehicles ?? data.traffic?.hasStrandedVehicles ?? null,
+            strandedVehicleCount: baseReport.strandedVehicleCount ?? data.traffic?.strandedVehicleCount ?? null,
+            industrialSalt: baseReport.industrialSalt ?? null,
+            antiSlipSand: baseReport.antiSlipSand ?? null,
+            sandbags: baseReport.sandbags ?? null,
+            reporterName: baseReport.reporterName || data.event?.reporterName || data.event?.contactPerson || '',
+            reporterPhone: baseReport.reporterPhone || data.event?.reporterPhone || data.event?.contactPhone || '',
+            reportTime: baseReport.reportTime || data.event?.reportTime || ''
           },
-          traffic: {
+          fileList: data.fileList || [],
-            ...(data.traffic || {})
+          lossList: data.lossList || [],
-          }
+          yhzMaterialList: data.yhzMaterialList || baseReport.yhzMaterialList || []
         })
       } else {
         ElMessage.warning(result?.message || '获取详情失败')

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

@@ -1,130 +1,136 @@
 <template>
   <div class="water-disaster-pc">
     <!-- 合并后的单个卡片 -->
-    <el-card class="form-card" shadow="never">
+    <el-card class="info-card" shadow="never">
-      <div slot="header" class="card-header">
+      <template #header>
-        <span>续报信息</span>
+        <div class="card-header">
-      </div>
+          <span class="card-title">续报信息</span>
+        </div>
+      </template>
 
       <!-- 所有表单项合并到一个区域，每行一个 -->
-      <el-form :model="formData" label-width="120px" size="small">
+      <el-form :model="formData" >
-        <!-- 处置措施 -->
+        <BlockItem title="处置情况">
-        <el-form-item label="处置措施">
+          <!-- 处置措施 -->
-          <el-select v-model="formData.report.disposalMeasures">
+          <el-form-item label="处置措施">
-            <el-option label="半幅封闭" value="半幅封闭" />
+            <el-select v-model="formData.report.disposalMeasures">
-            <el-option label="全副封闭" value="全副封闭" />
+              <el-option label="半幅封闭" value="半幅封闭" />
-            <el-option label="便道通行" value="便道通行" />
+              <el-option label="全副封闭" value="全副封闭" />
-            <el-option label="正常通行" value="正常通行" />
+              <el-option label="便道通行" value="便道通行" />
-          </el-select>
+              <el-option label="正常通行" value="正常通行" />
-        </el-form-item>
+            </el-select>
+          </el-form-item>
 
-        <!-- 预计恢复时间 -->
+          <!-- 预计恢复时间 -->
-        <el-form-item label="预计恢复时间">
+          <el-form-item label="预计恢复时间">
-          <el-date-picker
+            <el-date-picker
-            v-model="formData.report.expectRecoverTime"
+              v-model="formData.report.expectRecoverTime"
-            type="datetime"
+              type="datetime"
-            placeholder="请选择时间"
+              placeholder="请选择时间"
-            value-format="yyyy-MM-dd HH:mm"
+              value-format="YYYY-MM-DD HH:mm:ss"
-            :picker-options="pickerOptions"
+              :picker-options="pickerOptions"
-            style="width: 100%"
+              style="width: 100%"
-          />
+            />
-        </el-form-item>
+          </el-form-item>
 
-        <!-- 实际恢复时间 -->
+          <!-- 实际恢复时间 -->
-        <el-form-item label="实际恢复时间">
+          <el-form-item label="实际恢复时间">
-          <el-date-picker
+            <el-date-picker
-            v-model="formData.report.actualRecoverTime"
+              v-model="formData.report.actualRecoverTime"
-            type="datetime"
+              type="datetime"
-            placeholder="请选择时间"
+              placeholder="请选择时间"
-            value-format="yyyy-MM-dd HH:mm"
+              value-format="YYYY-MM-DD HH:mm:ss"
-            :picker-options="pickerOptions"
+              :picker-options="pickerOptions"
-            style="width: 100%"
+              style="width: 100%"
-          />
+            />
-        </el-form-item>
+          </el-form-item>
+        </BlockItem>
+
+        <BlockItem title="实施情况"> </BlockItem>
 
         <!-- 受伤人员 -->
         <el-form-item label="受伤人员">
-          <el-input-number v-model="formData.report.injuredCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+          <NumberInput v-model="formData.report.injuredCount" :precision="0" placeholder="请填写" style="width: 300px">
-            <template slot="append">人</template>
+            <template #append>人</template>
-          </el-input-number>
+          </NumberInput>
         </el-form-item>
 
         <!-- 死亡人员 -->
         <el-form-item label="死亡人员">
-          <el-input-number v-model="formData.report.deadCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+          <NumberInput v-model="formData.report.deadCount" :precision="0" placeholder="请填写" style="width: 300px">
-            <template slot="append">人</template>
+            <template #append>人</template>
-          </el-input-number>
+          </NumberInput>
         </el-form-item>
 
         <!-- 滞留人员 -->
         <el-form-item label="滞留人员">
-          <el-input-number v-model="formData.report.strandedPersonCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+          <NumberInput v-model="formData.report.strandedPersonCount" :precision="0" placeholder="请填写" style="width: 300px">
-            <template slot="append">人</template>
+            <template #append>人</template>
-          </el-input-number>
+          </NumberInput>
         </el-form-item>
 
         <!-- 损坏车辆 -->
         <el-form-item label="损坏车辆">
-          <el-input-number v-model="formData.report.damagedVehicleCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+          <NumberInput v-model="formData.report.damagedVehicleCount" :precision="0" placeholder="请填写" style="width: 300px">
-            <template slot="append">辆</template>
+            <template #append>辆</template>
-          </el-input-number>
+          </NumberInput>
         </el-form-item>
 
         <!-- 滞留车辆 -->
         <el-form-item label="滞留车辆">
-          <el-input-number v-model="formData.report.strandedVehicleCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+          <NumberInput v-model="formData.report.strandedVehicleCount" :precision="0" placeholder="请填写" style="width: 300px">
-            <template slot="append">辆</template>
+            <template #append>辆</template>
-          </el-input-number>
+          </NumberInput>
         </el-form-item>
 
         <!-- 损失列表组件 -->
         <loss-list :col-span="24" v-model="formData.lossList" />
 
-        <!-- 处理情况 -->
-        <el-form-item label="处理情况">
-          <el-input v-model="formData.report.remark" type="textarea" :rows="2" placeholder="请填写（选填）" style="width: 60%" />
-        </el-form-item>
-
-        <!-- 损失总金额 -->
-        <el-form-item label="损失总金额">
-          <el-input v-model="formData.report.totalLossAmount" placeholder="请填写（选填）" style="width: 300px">
-            <template slot="append">万元</template>
-          </el-input>
-        </el-form-item>
-
         <!-- 已投机械 -->
-        <el-form-item label="已投机械">
+        <el-form-item label="投入机械">
-          <el-input v-model="formData.report.investedMachinery" placeholder="请填写" style="width: 300px">
+          <NumberInput v-model="formData.report.investedMachinery" :precision="1" placeholder="请填写" style="width: 300px">
-            <template slot="append">台/班</template>
+            <template #append>台/班</template>
-          </el-input>
+          </NumberInput>
         </el-form-item>
 
         <!-- 投入人力 -->
         <el-form-item label="投入人力">
-          <el-input-number v-model="formData.report.investedManpower" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+          <NumberInput v-model="formData.report.investedManpower" :precision="0" placeholder="请填写" style="width: 300px">
-            <template slot="append">人次</template>
+            <template #append>人次</template>
-          </el-input-number>
+          </NumberInput>
         </el-form-item>
 
         <!-- 投入资金 -->
         <el-form-item label="投入资金">
-          <el-input v-model="formData.report.investedFunds" placeholder="请填写" style="width: 300px">
+          <NumberInput v-model="formData.report.investedFunds" :precision="2" placeholder="请填写" style="width: 300px">
-            <template slot="append">万元</template>
+            <template #append>万元</template>
-          </el-input>
+          </NumberInput>
+        </el-form-item>
+
+        <!-- 处理情况 -->
+        <el-form-item label="处理情况">
+          <el-input v-model="formData.report.remark" type="textarea" :rows="2" placeholder="请填写（选填）" />
+        </el-form-item>
+
+        <!-- 损失总金额 -->
+        <el-form-item label="损失总金额">
+          <NumberInput v-model="formData.report.totalLossAmount" :precision="2" placeholder="请填写（选填）" style="width: 300px">
+            <template #append>万元</template>
+          </NumberInput>
         </el-form-item>
 
         <!-- 现场描述 -->
-        <el-form-item label="现场描述">
+        <el-form-item label="现场情况描述">
-          <el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" style="width: 60%" />
+          <el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写"  />
         </el-form-item>
 
         <!-- 是否需要恢复重建 -->
-        <el-form-item label="是否需要恢复重建">
+        <!-- <el-form-item label="是否需要恢复重建">
           <el-radio-group v-model="formData.event.needsRecovery">
             <el-radio :label="true">是</el-radio>
             <el-radio :label="false">否</el-radio>
           </el-radio-group>
-        </el-form-item>
+        </el-form-item> -->
 
         <el-form-item>
           <el-button type="primary" @click="handleSubmit">追加记录</el-button>
@@ -138,6 +144,8 @@
 import { ref, reactive, watch, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { request } from '@shared/utils/request'
+import BlockItem from '@/component/BlockItem.vue'
+import NumberInput from '@/component/NumberInput/NumberInput.vue'
 import LossList from '../WaterDisasterReport/WaterDisasterLossListPC.vue'
 
 // Props 定义
@@ -368,7 +376,7 @@ const handleSubmit = async () => {
     if (res?.code === '00000') {
       ElMessage.success('提交成功')
 
-      emit("refresh")
+      emit('refresh')
     } else {
       ElMessage.error(res.message)
     }
@@ -376,7 +384,6 @@ const handleSubmit = async () => {
     ElMessage.error('提交失败，请重试')
     console.error('提交失败:', error)
   } finally {
-
   }
 }
 
@@ -386,7 +393,7 @@ defineExpose({
   initFormData,
   getFormData,
   resetForm,
-  calibrateTime,
+  calibrateTime
 })
 </script>
 
@@ -395,15 +402,22 @@ defineExpose({
   background-color: #f5f7fa;
   height: 100%;
 
-  .form-card {
+  .info-card {
+    margin-bottom: 20px;
     border-radius: 8px;
 
+    :deep(.el-card__header) {
+      padding: 16px 20px;
+      border-bottom: 1px solid #ebeef5;
+      background: #fafafa;
+    }
+
     .card-header {
-      font-size: 16px;
+      .card-title {
-      font-weight: 600;
+        font-size: 16px;
-      color: #303133;
+        font-weight: 600;
-      border-left: 4px solid #409eff;
+        color: #303133;
-      padding-left: 12px;
+      }
     }
   }
 
@@ -415,14 +429,6 @@ defineExpose({
     padding: 0 10px;
   }
 
-  ::v-deep .el-input-number {
-    width: 300px;
-
-    .el-input-group__append {
-      padding: 0 10px;
-    }
-  }
-
   ::v-deep .el-radio-group {
     .el-radio {
       margin-right: 20px;

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

@@ -1,7 +1,6 @@
 <template>
   <div class="web-detail-container">
-
+    <div class="content-container" v-if="detailData">
-    <div class="content-container">
       <div class="left-panel">
         <!-- 基本信息卡片 -->
         <el-card class="info-card" shadow="never">
@@ -11,122 +10,100 @@
             </div>
           </template>
 
-          <el-row :gutter="20" class="info-row">
+          <div class="base-info-grid">
-            <el-col :span="8">
+            <div class="base-info-column">
               <div class="info-item">
                 <span class="info-label">事件类型：</span>
                 <span class="info-value">水毁事件</span>
               </div>
-            </el-col>
-            <el-col :span="8">
               <div class="info-item">
                 <span class="info-label">路况类别：</span>
                 <span class="info-value">{{ detailData.roadConditionType || '-' }}</span>
               </div>
-            </el-col>
-            <el-col :span="8">
               <div class="info-item">
                 <span class="info-label">是否阻断：</span>
-                <span class="info-value">{{ detailData.event?.isBlocked ? '是' : '否' }}</span>
+                <span class="info-value">{{ formatBooleanValue(detailData.event?.isBlocked) }}</span>
               </div>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="20" class="info-row">
-            <el-col :span="8">
-              <div class="info-item">
-                <span class="info-label">抢险进度：</span>
-                <span class="info-value">{{ detailData.event?.repairProgress || '-' }}</span>
-              </div>
-            </el-col>
-            <el-col :span="8">
-              <div class="info-item">
-                <span class="info-label">处理措施：</span>
-                <span class="info-value">{{ getBaseDisposalMeasures() }}</span>
-              </div>
-            </el-col>
-            <el-col :span="8">
-              <div class="info-item">
-                <span class="info-label">水毁处数：</span>
-                <span class="info-value">{{ detailData.event?.damageCount || 0 }}</span>
-              </div>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="20" class="info-row">
-            <el-col :span="8">
-              <div class="info-item">
-                <span class="info-label">阻断里程：</span>
-                <span class="info-value">{{ detailData.event?.blockedMileage ? detailData.event.blockedMileage + '公里' : '-' }}</span>
-              </div>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="20" class="info-row">
-            <el-col :span="8">
-              <div class="info-item">
-                <span class="info-label">地点路线：</span>
-                <span class="info-value">{{ detailData.occurLocation || '-' }}</span>
-              </div>
-            </el-col>
-            <el-col :span="8">
-              <div class="info-item">
-                <span class="info-label">起点桩号：</span>
-                <span class="info-value">{{ detailData.event?.startStakeNo || '-' }}</span>
-              </div>
-            </el-col>
-            <el-col :span="8">
-              <div class="info-item">
-                <span class="info-label">止点桩号：</span>
-                <span class="info-value">{{ detailData.event?.endStakeNo || '-' }}</span>
-              </div>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="20" class="info-row">
-            <el-col :span="8">
               <div class="info-item">
                 <span class="info-label">路况位置：</span>
-                <span class="info-value">{{ detailData.event?.blockedPointName || detailData.occurLocation || '-' }}</span>
+                <span class="info-value">{{ detailData.occurLocation || '-' }}</span>
               </div>
-            </el-col>
-            <el-col :span="8">
-              <div class="info-item">
-                <span class="info-label">阻断点小地名：</span>
-                <span class="info-value">{{ detailData.event?.blockedPointName || '-' }}</span>
-              </div>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="20" class="info-row">
-            <el-col :span="8">
               <div class="info-item">
                 <span class="info-label">所属区县：</span>
                 <span class="info-value">{{ detailData.event?.district || '-' }}</span>
               </div>
-            </el-col>
+              <div class="info-item">
-            <el-col :span="8">
+                <span class="info-label">起点桩经度：</span>
+                <span class="info-value">{{ detailData.event?.startStakeLongitude || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">止点桩经度：</span>
+                <span class="info-value">{{ detailData.event?.endStakeLongitude || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">是否需要恢复重建：</span>
+                <span class="info-value">{{ formatBooleanValue(detailData.event?.needsRecovery) }}</span>
+              </div>
+            </div>
+
+            <div class="base-info-column">
+              <div class="info-item">
+                <span class="info-label">填报站点：</span>
+                <span class="info-value">{{ detailData.stationName || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">抢险进度：</span>
+                <span class="info-value">{{ detailData.event?.repairProgress || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">地点路线：</span>
+                <span class="info-value">{{ detailData.routeNo }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">阻断点小地名：</span>
+                <span class="info-value">{{ detailData.event?.blockedPointName || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">起点桩号：</span>
+                <span class="info-value">{{ detailData.event?.startStakeNo || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">止点桩号：</span>
+                <span class="info-value">{{ detailData.event?.endStakeNo || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">受灾里程：</span>
+                <span class="info-value">{{ formatUnitValue(detailData.event?.blockedMileage, '公里') }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">恢复重建预估费用（万元）：</span>
+                <span class="info-value">{{ detailData.event?.estimatedRecoveryCost ?? '-' }}</span>
+              </div>
+            </div>
+
+            <div class="base-info-column">
               <div class="info-item">
                 <span class="info-label">发生时间：</span>
                 <span class="info-value">{{ detailData.occurTime || '-' }}</span>
               </div>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="20" class="info-row">
-            <el-col :span="8">
               <div class="info-item">
-                <span class="info-label">是否恢复重建：</span>
+                <span class="info-label">处理措施：</span>
-                <span class="info-value">{{ detailData.event?.needsRecovery ? '是' : '否' }}</span>
+                <span class="info-value">{{ getBaseDisposalMeasures() }}</span>
               </div>
-            </el-col>
-            <el-col :span="16" v-if="detailData.event?.needsRecovery">
               <div class="info-item">
-                <span class="info-label">恢复重建预估费用：</span>
+                <span class="info-label">水毁处数：</span>
-                <span class="info-value">{{ detailData.event?.estimatedRecoveryCost ? detailData.event.estimatedRecoveryCost + '万元' : '-' }}</span>
+                <span class="info-value">{{ detailData.event?.damageCount ?? '-' }}</span>
               </div>
-            </el-col>
+              <div class="info-item">
-          </el-row>
+                <span class="info-label">起点桩纬度：</span>
+                <span class="info-value">{{ detailData.event?.startStakeLatitude || '-' }}</span>
+              </div>
+              <div class="info-item">
+                <span class="info-label">止点桩纬度：</span>
+                <span class="info-value">{{ detailData.event?.endStakeLatitude || '-' }}</span>
+              </div>
+            </div>
+          </div>
         </el-card>
 
         <!-- 填报信息卡片 -->
@@ -185,19 +162,19 @@
                       <el-col :span="8">
                         <div class="info-item margin">
                           <span class="info-label">投入机械：</span>
-                          <span class="info-value">{{ report.investedMachinery ? report.investedMachinery + '台/班' : '-'}}</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-value">{{ report.investedManpower ? report.investedManpower + '人次' : '-'}}</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-value">{{ report.investedFunds ? report.investedFunds + '万元' : '-'}}</span>
+                          <span class="info-value">{{ report.investedFunds ? report.investedFunds + '万元' : '-' }}</span>
                         </div>
                       </el-col>
                     </el-row>
@@ -213,10 +190,6 @@
           <el-empty v-else description="暂无填报信息" :image-size="100" />
         </el-card>
 
-        <!-- 底部按钮 -->
-        <!-- <div class="footer-buttons">
-          <el-button type="primary" size="large" @click="handleContinueReport" class="footer-btn"> 续报 </el-button>
-        </div> -->
       </div>
       <div class="right-panel" v-if="isEdit">
         <ContinueReport ref="continueReport" @refresh="getDisasterDetail" />
@@ -226,33 +199,19 @@
 </template>
 
 <script setup>
-import { onMounted, ref, computed } from 'vue'
+import { onMounted, ref, computed, nextTick } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { ArrowLeft, Picture, VideoCamera } from '@element-plus/icons-vue'
 import ContinueReport from './WaterDisasterContinueReportPC.vue'
 import { request } from '@shared/utils/request'
 import LossListDetail from './WaterDisasterLossListDetailPC.vue'
 import FileUpload from '@/component/FileUpload/FileUpload.vue'
 import mockData from '../WaterDisasterReport/waterMockJson.json'
 
-const router = useRouter()
 const route = useRoute()
 
 // 详情数据
-const detailData = ref({
+const detailData = ref(null)
-  event: null,
-  report: [],
-  fileList: [],
-  lossList: [],
-  occurLocation: '',
-  occurTime: '',
-  roadConditionType: '',
-  routeNo: ''
-})
-
-// 事件状态
-const eventStatus = ref(0)
 
 // 是否为编辑
 const isEdit = computed(() => {
@@ -264,7 +223,7 @@ const continueReport = ref(null)
 // 所有填报记录（首报 + 续报）
 const allReports = computed(() => {
   const reports =
-    detailData.value.report?.map((item, index) => {
+    detailData.value?.report?.map((item, index) => {
       if (index === detailData.value.report.length - 1) {
         item.title = '首报'
       } else {
@@ -287,6 +246,17 @@ const getBaseDisposalMeasures = () => {
   return formatDisposalMeasures(firstItem.disposalMeasures || '') || '-'
 }
 
+const formatBooleanValue = (value) => {
+  if (value === true || value === 1 || value === '1') return '是'
+  if (value === false || value === 0 || value === '0') return '否'
+  return '-'
+}
+
+const formatUnitValue = (value, unit) => {
+  if (value === null || value === undefined || value === '') return '-'
+  return `${value}${unit}`
+}
+
 // 格式化处置措施
 const formatDisposalMeasures = (measures) => {
   if (!measures) return ''
@@ -302,27 +272,6 @@ const formatDisposalMeasures = (measures) => {
     .join('、')
 }
 
-// 获取损失描述
-const getLossDescription = (report) => {
-  const lossList = report?.lossList
-  if (!lossList || lossList.length === 0) return '-'
-
-  const totalVolume = lossList.reduce((sum, loss) => {
-    const volume = (loss.length || 0) * (loss.width || 0) * (loss.height || 0)
-    return sum + volume
-  }, 0)
-
-  const totalAmount = lossList.reduce((sum, loss) => sum + (loss.totalAmount || 0), 0)
-
-  return `${totalVolume}方，共损失${totalAmount}万元`
-}
-
-// 获取车辆滞留文本
-const getVehicleStrandedText = (report) => {
-  const count = report?.strandedVehicleCount || 0
-  return count > 0 ? `有车滞留，共${count}辆` : '无车滞留'
-}
-
 // 获取灾毁详情
 const getDisasterDetail = async () => {
   const id = route.query.id
@@ -340,7 +289,6 @@ const getDisasterDetail = async () => {
 
     if (result?.data) {
       const data = result.data
-      console.log('🚀 ~ getDisasterDetail ~ data:', data)
       detailData.value = {
         event: data.event || null,
         report: data.report || [],
@@ -349,9 +297,9 @@ const getDisasterDetail = async () => {
         occurLocation: data.occurLocation || '',
         occurTime: data.occurTime || '',
         roadConditionType: data.roadConditionType || '',
-        routeNo: data.routeNo || ''
+        routeNo: data.routeNo || '',
+        routeName: data.routeName || ''
       }
-      eventStatus.value = data.eventStatus || 0
 
       if (isEdit.value) {
         const newFormData = {
@@ -360,7 +308,9 @@ const getDisasterDetail = async () => {
           report: route.query.mock ? mockData.report : {},
           fileList: null
         }
-        continueReport.value?.initFormData(newFormData)
+        nextTick(() => {
+          continueReport.value?.initFormData(newFormData)
+        })
       }
     } else {
       ElMessage.warning(result.message || '获取详情失败')
@@ -371,11 +321,6 @@ const getDisasterDetail = async () => {
   }
 }
 
-// 点击返回
-const handleClickBack = () => {
-  router.push('/disasterManagement')
-}
-
 onMounted(() => {
   getDisasterDetail()
 })
@@ -390,27 +335,6 @@ onMounted(() => {
   padding-bottom: 100px;
 }
 
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding: 0 20px;
-
-  .header-left {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    .page-title {
-      margin: 0;
-      font-size: 20px;
-      font-weight: 600;
-      color: #303133;
-    }
-  }
-}
-
 .info-card {
   margin-bottom: 20px;
   border-radius: 8px;
@@ -430,12 +354,10 @@ onMounted(() => {
   }
 }
 
-.info-row {
+.base-info-grid {
-  margin-bottom: 16px;
+  display: grid;
-
+  grid-template-columns: repeat(3, minmax(0, 1fr));
-  &:last-child {
+  gap: 24px;
-    margin-bottom: 0;
-  }
 }
 
 .info-item {
@@ -466,6 +388,10 @@ onMounted(() => {
   }
 }
 
+.base-info-column {
+  min-width: 0;
+}
+
 .report-section {
   margin-bottom: 32px;
   padding-bottom: 24px;
@@ -498,62 +424,6 @@ onMounted(() => {
   }
 }
 
-.attachment-wrapper {
-  margin-top: 12px;
-  padding-top: 8px;
-  border-top: 1px dashed #ebeef5;
-
-  .attachment-item {
-    .attachment-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 16px;
-
-      .attachment-link {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
-        background: #f5f7fa;
-        border-radius: 4px;
-        cursor: pointer;
-
-        &:hover {
-          background: #ecf5ff;
-          color: #409eff;
-        }
-
-        .file-name {
-          font-size: 13px;
-          max-width: 200px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-}
-
-.footer-buttons {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  padding: 16px 24px;
-  background: #fff;
-  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
-  z-index: 100;
-
-  .footer-btn {
-    width: 200px;
-    height: 44px;
-    font-size: 16px;
-    border-radius: 22px;
-  }
-}
 .content-container {
   display: flex;
   .left-panel {
@@ -561,7 +431,7 @@ onMounted(() => {
     margin-right: 10px;
   }
   .right-panel {
-    width: 300px;
+    width: 400px;
   }
 }
 .content-wrapper {
@@ -581,6 +451,5 @@ onMounted(() => {
   overflow: hidden;
 }
 .file-list {
-  
 }
 </style>

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

@@ -3,11 +3,9 @@
     <template v-for="(item, index) in configs" :key="index">
       <el-col :span="colSpan">
         <el-form-item :label="item.lossTypeName">
-          <el-input :modelValue="getValue(item)" @update:modelValue="(event) => changeValue(item, event)">
+          <NumberInput :model-value="getValue(item)" :precision="2" @update:model-value="(value) => changeValue(item, value)">
-            <template #suffix>
+             <template #append>{{ item.unit }}</template>
-              <span>{{ item.unit }}</span>
+          </NumberInput>
-            </template>
-          </el-input>
         </el-form-item>
       </el-col>
       <el-col :span="24" v-if="item.lossTypeCode == 'OTHER_LOSS'">
@@ -20,12 +18,10 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Delete, Plus } from '@element-plus/icons-vue'
 import { request } from '@shared/utils/request'
-
+import NumberInput from '@/component/NumberInput/NumberInput.vue'
-const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
   modelValue: {
@@ -68,9 +64,9 @@ const getLossDict = async () => {
   }
 }
 
-const changeValue = (config, event) => {
+const changeValue = (config, value) => {
   const item = getValueItem(config)
-  item.totalAmount = event
+  item.totalAmount = value
 }
 
 onMounted(async () => {
@@ -81,88 +77,5 @@ onMounted(async () => {
 <style scoped lang="scss">
 .loss-list-pc {
   width: 100%;
-
-  .loss-table {
-    margin-bottom: 16px;
-
-    :deep(.el-table) {
-      .amount-cell {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .unit-text {
-          color: #909399;
-          font-size: 14px;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-
-  .add-button-wrapper {
-    display: flex;
-    justify-content: flex-start;
-  }
-
-  .calculate-form {
-    padding: 8px 0;
-
-    :deep(.el-form-item) {
-      margin-bottom: 20px;
-    }
-  }
-
-  .calculation-preview {
-    background-color: #f5f7fa;
-    border-radius: 8px;
-    padding: 16px;
-    margin-top: 16px;
-
-    .preview-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .preview-label {
-        color: #606266;
-        font-size: 14px;
-      }
-
-      .preview-value {
-        color: #f56c6c;
-        font-size: 16px;
-        font-weight: 500;
-      }
-    }
-  }
-
-  .loss-picker-content {
-    max-height: 400px;
-    overflow-y: auto;
-    padding: 8px 0;
-
-    .loss-radio-group {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      width: 100%;
-
-      .loss-radio-item {
-        margin: 0;
-        padding: 10px 12px;
-        border-radius: 6px;
-        width: 100%;
-        box-sizing: border-box;
-
-        :deep(.el-radio__label) {
-          width: calc(100% - 22px);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="disaster-form-page">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="disaster-form" @submit.prevent>
+    <el-form ref="formRef" :model="formData" :rules="formRules" class="disaster-form" @submit.prevent>
       <el-card class="form-section" shadow="never">
         <template #header>
           <div class="section-header">
@@ -76,16 +76,16 @@
           <el-row :gutter="24">
             <el-col :span="8">
               <el-form-item label="受灾里程" prop="event.blockedMileage">
-                <el-input v-model="formData.event.blockedMileage" placeholder="请填写">
+                <NumberInput v-model="formData.event.blockedMileage" :precision="2" placeholder="请填写">
                   <template #append>公里</template>
-                </el-input>
+                </NumberInput>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="水毁处数" prop="event.damageCount">
-                <el-input v-model="formData.event.damageCount" placeholder="请填写">
+                <NumberInput v-model="formData.event.damageCount" :precision="0" placeholder="请填写">
                   <template #append>处</template>
-                </el-input>
+                </NumberInput>
               </el-form-item>
             </el-col>
           </el-row>
@@ -139,12 +139,12 @@
           <el-row :gutter="24">
             <el-col :span="8">
               <el-form-item label="起点桩经度" prop="event.startStakeLongitude">
-                <el-input v-model="formData.event.startStakeLongitude" placeholder="请填写" />
+                <NumberInput v-model="formData.event.startStakeLongitude" :precision="6" placeholder="请填写" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="起点桩纬度" prop="event.startStakeLatitude">
-                <el-input v-model="formData.event.startStakeLatitude" placeholder="请填写" />
+                <NumberInput v-model="formData.event.startStakeLatitude" :precision="6" placeholder="请填写" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
@@ -159,12 +159,12 @@
           <el-row :gutter="24">
             <el-col :span="8">
               <el-form-item label="止点桩经度" prop="event.endStakeLongitude">
-                <el-input v-model="formData.event.endStakeLongitude" placeholder="请填写" />
+                <NumberInput v-model="formData.event.endStakeLongitude" :precision="6" placeholder="请填写" />
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="止点桩纬度" prop="event.endStakeLatitude">
-                <el-input v-model="formData.event.endStakeLatitude" placeholder="请填写" />
+                <NumberInput v-model="formData.event.endStakeLatitude" :precision="6" placeholder="请填写" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -212,29 +212,23 @@
           <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%">
+                <NumberInput v-model="formData.report.injuredCount" :precision="0" style="width: 100%">
-                  <template #suffix>
+                  <template #append>人</template>
-                    <span class="unit-text">人</span>
+                </NumberInput>
-                  </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%">
+                <NumberInput v-model="formData.report.deadCount" :precision="0" style="width: 100%">
-                  <template #suffix>
+                  <template #append>人</template>
-                    <span class="unit-text">人</span>
+                </NumberInput>
-                  </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%">
+                <NumberInput v-model="formData.report.strandedPersonCount" :precision="0" style="width: 100%">
-                  <template #suffix>
+                  <template #append>人</template>
-                    <span class="unit-text">人</span>
+                </NumberInput>
-                  </template>
-                </el-input-number>
               </el-form-item>
             </el-col>
           </el-row>
@@ -242,20 +236,16 @@
           <el-row :gutter="24">
             <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%">
+                <NumberInput v-model="formData.report.damagedVehicleCount" :precision="0" style="width: 100%">
-                  <template #suffix>
+                  <template #append>辆</template>
-                    <span class="unit-text">辆</span>
+                </NumberInput>
-                  </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%">
+                <NumberInput v-model="formData.report.strandedVehicleCount" :precision="0" style="width: 100%">
-                  <template #suffix>
+                  <template #append>辆</template>
-                    <span class="unit-text">辆</span>
+                </NumberInput>
-                  </template>
-                </el-input-number>
               </el-form-item>
             </el-col>
           </el-row>
@@ -267,25 +257,23 @@
           <el-row :gutter="24">
             <el-col :span="8">
               <el-form-item label="投入机械" prop="report.investedMachinery">
-                <el-input v-model="formData.report.investedMachinery" placeholder="请填写">
+                <NumberInput v-model="formData.report.investedMachinery" :precision="1" placeholder="请填写">
                   <template #append>台/班</template>
-                </el-input>
+                </NumberInput>
               </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%">
+                <NumberInput v-model="formData.report.investedManpower" :precision="0" style="width: 100%">
-                  <template #suffix>
+                  <template #append>人次</template>
-                    <span class="unit-text">人次</span>
+                </NumberInput>
-                  </template>
-                </el-input-number>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="投入资金" prop="report.investedFunds">
-                <el-input v-model="formData.report.investedFunds" placeholder="请填写">
+                <NumberInput v-model="formData.report.investedFunds" :precision="2" placeholder="请填写">
                   <template #append>万元</template>
-                </el-input>
+                </NumberInput>
               </el-form-item>
             </el-col>
           </el-row>
@@ -318,9 +306,9 @@
             </el-col>
             <el-col v-if="showEstimatedRecoveryCost" :span="8">
               <el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
-                <el-input v-model="formData.event.estimatedRecoveryCost" placeholder="请填写">
+                <NumberInput v-model="formData.event.estimatedRecoveryCost" :precision="2" placeholder="请填写">
                   <template #append>万元</template>
-                </el-input>
+                </NumberInput>
               </el-form-item>
             </el-col>
           </el-row>
@@ -339,6 +327,7 @@
 import { LocationFilled } from '@element-plus/icons-vue'
 import BlockItem from '@/component/BlockItem.vue'
 import FileUpload from '@/component/FileUpload/FileUpload.vue'
+import NumberInput from '@/component/NumberInput/NumberInput.vue'
 import RoadRoutesSelect from '../components/RoadRoutesSelect.vue'
 import YHZSelect from '../components/YHZSelect.vue'
 import LossList from './WaterDisasterLossListPC.vue'

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

@@ -1,742 +0,0 @@
-<template>
-  <div class="disaster-form-page">
-    <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="事件类型">
-                <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="roadConditionType">
-                <el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="(option, idx) in options['waterRoadConditionType']" :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.isBlocked">
-                <el-select v-model="formData.event.isBlocked" 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-row>
-          <el-row :gutter="24">
-            <!-- 抢险进度 -->
-            <el-col :span="8">
-              <el-form-item label="抢险进度" prop="event.repairProgress">
-                <el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="(option, idx) in options['repairProgress']" :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-col :span="8">
-              <el-form-item label="水毁处数" prop="event.damageCount">
-                <el-input-number v-model="formData.event.damageCount" :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-row>
-          <el-row :gutter="24">
-            <!-- 阻断里程 -->
-            <el-col :span="8">
-              <el-form-item label="阻断里程" prop="event.blockedMileage">
-                <el-input-number v-model="formData.event.blockedMileage" :min="0" :precision="3" style="width: 100%" placeholder="请填写">
-                  <template #suffix>
-                    <span class="unit-text">公里</span>
-                  </template>
-                </el-input-number>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <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="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-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-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 #append>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 #append>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 mockData from './waterMockJson.json'
-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, // 联系电话
-    damageCount: null, // 水毁处数
-    district: null, // 上报区县
-    endStakeNo: null, // 止点桩号
-    estimatedRecoveryCost: null, // 恢复重建预估费用
-    inspectionMileage: null, // 巡查里程
-    isBlocked: null, // 是否阻断
-    needsRecovery: null, // 是否需要恢复重建
-    repairProgress: null, // 抢险进度
-    reporterUnit: null, // 填报单位
-    startStakeNo: 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: '/iceDisasterReport' })
-}
-
-// 监听处置措施数组变化，转换为逗号分隔的字符串存到 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' }],
-  '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' }]
-  // '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 () => {
-  if (route.query.mock) {
-    initFormData(mockData)
-  } else {
-    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/components/MaterialList.vue

@@ -1,13 +1,13 @@
 <template>
-  <el-row class="material-list-pc" :gutter="24">
+  <el-row class="material-list-pc">
     <template v-for="(item, index) in configs" :key="index">
       <el-col :span="colSpan">
         <el-form-item :label="item.wzmc">
-          <el-input :modelValue="getValue(item)" :placeholder="`余额: ${item.ye} `" @update:modelValue="(event) => changeValue(item, event)">
+          <NumberInput :model-value="getValue(item)" :precision="2" :placeholder="`余额: ${item.ye} `" @update:model-value="(value) => changeValue(item, value)">
-            <template #suffix>
+            <template #append>
-              <span>{{ item.dw }}</span>
+              {{ item.dw }}
             </template>
-          </el-input>
+          </NumberInput>
         </el-form-item>
       </el-col>
     </template>
@@ -15,10 +15,9 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
-import { ElMessage } from 'element-plus'
-import { Delete, Plus } from '@element-plus/icons-vue'
 import { request } from '@shared/utils/request'
+import NumberInput from '@/component/NumberInput/NumberInput.vue'
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -37,14 +36,17 @@ const props = defineProps({
   }
 })
 
-watch(()=> props.yhzId, ()=> {
+watch(
-  emit('update:modelValue', [])
+  () => props.yhzId,
-  getDict()
+  () => {
-})
+    emit('update:modelValue', [])
+    getDict()
+  }
+)
 
 const getValue = (config) => {
   const item = getValueItem(config)
-  return item?.usageAmount || 0
+  return item?.usageAmount || null
 }
 
 const getValueItem = (config) => {
@@ -67,7 +69,7 @@ const configs = ref([])
 
 // 获取字典
 const getDict = async () => {
-  if(!props.yhzId) return []
+  if (!props.yhzId) return []
   try {
     const res = await request({
       url: `/snow-ops-platform/yjwz/list?yhzid=${props.yhzId}&pageNum=1&pageSize=9999`,
@@ -78,93 +80,14 @@ const getDict = async () => {
     console.error('获取物质列表失败:', error)
   }
 }
+
+onMounted(() => {
+  getDict()
+})
 </script>
 
 <style scoped lang="scss">
 .material-list-pc {
   width: 100%;
-
-  .loss-table {
-    margin-bottom: 16px;
-
-    :deep(.el-table) {
-      .amount-cell {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .unit-text {
-          color: #909399;
-          font-size: 14px;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-
-  .add-button-wrapper {
-    display: flex;
-    justify-content: flex-start;
-  }
-
-  .calculate-form {
-    padding: 8px 0;
-
-    :deep(.el-form-item) {
-      margin-bottom: 20px;
-    }
-  }
-
-  .calculation-preview {
-    background-color: #f5f7fa;
-    border-radius: 8px;
-    padding: 16px;
-    margin-top: 16px;
-
-    .preview-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .preview-label {
-        color: #606266;
-        font-size: 14px;
-      }
-
-      .preview-value {
-        color: #f56c6c;
-        font-size: 16px;
-        font-weight: 500;
-      }
-    }
-  }
-
-  .loss-picker-content {
-    max-height: 400px;
-    overflow-y: auto;
-    padding: 8px 0;
-
-    .loss-radio-group {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      width: 100%;
-
-      .loss-radio-item {
-        margin: 0;
-        padding: 10px 12px;
-        border-radius: 6px;
-        width: 100%;
-        box-sizing: border-box;
-
-        :deep(.el-radio__label) {
-          width: calc(100% - 22px);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
 }
 </style>

packages/shared/composables/useOptions.js

@@ -50,6 +50,7 @@ export function useOptions() {
 
   // 冰灾 处理措施
   options.value['iceDisposalMeasures'] = [
+    { label: '正常通行', value: '正常通行' },
     { label: '封闭交通', value: '封闭交通' },
     { label: '限速通行', value: '限速通行' },
   ]