From c0a2472521ffd5d9114740d2baf06284f8da701e Mon Sep 17 00:00:00 2001
From: niedongsheng <605973111@qq.com>
Date: Wed, 15 Apr 2026 14:22:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=86=B0=E9=9B=AA=E7=81=BE=E5=AE=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/screen/src/router/index.js           |   8 +
 .../DisasterManagementPC.vue                  |  18 +-
 .../IceDisasterContinueReportPC.vue           | 449 +++++++++++++
 .../IceDisasterDetail/IceDisasterDetailPC.vue | 606 ++++++++++++++++++
 .../IceDisasterReport/IceDisasterReportPC.vue |   1 -
 .../WaterDisasterContinueReportPC.vue         |   2 +-
 .../WaterDisasterDetailPC.vue                 |   4 +-
 7 files changed, 1080 insertions(+), 8 deletions(-)
 create mode 100644 packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterContinueReportPC.vue
 create mode 100644 packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue

diff --git a/packages/screen/src/router/index.js b/packages/screen/src/router/index.js
index bb0541e..5a73afc 100644
--- a/packages/screen/src/router/index.js
+++ b/packages/screen/src/router/index.js
@@ -251,6 +251,14 @@ const routes = [
       breadcrumb: true
     }
   },
+  {
+    path: '/iceDisasterDetail',
+    component: () => import('../views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue'),
+    meta: {
+      title: '冰雪灾害详情',
+      breadcrumb: true
+    }
+  },
   {
     path: '/waterDisasterReport',
     component: () => import('../views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue'),
diff --git a/packages/screen/src/views/DisasterManagement/DisasterManagementPC.vue b/packages/screen/src/views/DisasterManagement/DisasterManagementPC.vue
index 107af41..1168264 100644
--- a/packages/screen/src/views/DisasterManagement/DisasterManagementPC.vue
+++ b/packages/screen/src/views/DisasterManagement/DisasterManagementPC.vue
@@ -221,8 +221,8 @@ const buildQueryParams = () => {
   }
 
   if (dateRange.value && dateRange.value.length === 2) {
-    params.startTime = dateRange.value[0] + " 00:00:00"
-    params.endTime = dateRange.value[1] + " 23:59:59"
+    params.startTime = dateRange.value[0] + ' 00:00:00'
+    params.endTime = dateRange.value[1] + ' 23:59:59'
   }
 
   // 过滤空字符串或null的参数
@@ -319,12 +319,22 @@ const resetFilters = () => {
 
 // 查看详情
 const handleDetail = (row) => {
-  router.push({ path: '/waterDisasterDetail', query: { id: row.id } })
+  if (row.disasterType == 'WATER_DAMAGE') {
+    router.push({ path: '/waterDisasterDetail', query: { id: row.id } })
+  }
+  if (row.disasterType == 'ICE_SNOW') {
+    router.push({ path: '/iceDisasterDetail', query: { id: row.id } })
+  }
 }
 
 // 编辑
 const handleEdit = (row) => {
-  router.push({ path: '/waterDisasterDetail', query: { id: row.id, mode: 'edit' } })
+  if (row.disasterType == 'WATER_DAMAGE') {
+    router.push({ path: '/waterDisasterDetail', query: { id: row.id, mode: 'edit' } })
+  }
+  if (row.disasterType == 'ICE_SNOW') {
+    router.push({ path: '/iceDisasterDetail', query: { id: row.id, mode: 'edit' } })
+  }
 }
 
 // 新增跳转
diff --git a/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterContinueReportPC.vue b/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterContinueReportPC.vue
new file mode 100644
index 0000000..a031a06
--- /dev/null
+++ b/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterContinueReportPC.vue
@@ -0,0 +1,449 @@
+<template>
+  <div class="water-disaster-pc">
+    <!-- 合并后的单个卡片 -->
+    <el-card class="form-card" shadow="never">
+      <div slot="header" class="card-header">
+        <span>续报信息</span>
+      </div>
+
+      <!-- 所有表单项合并到一个区域，每行一个 -->
+      <el-form :model="formData" label-width="120px" size="small">
+        <!-- 处置措施 -->
+        <el-form-item label="处置措施">
+          <el-select v-model="formData.report.disposalMeasures">
+            <el-option label="半幅封闭" value="半幅封闭" />
+            <el-option label="全副封闭" value="全副封闭" />
+            <el-option label="便道通行" value="便道通行" />
+            <el-option label="正常通行" value="正常通行" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 预计恢复时间 -->
+        <el-form-item label="预计恢复时间">
+          <el-date-picker
+            v-model="formData.report.expectRecoverTime"
+            type="datetime"
+            placeholder="请选择时间"
+            value-format="yyyy-MM-dd HH:mm"
+            :picker-options="pickerOptions"
+            style="width: 100%"
+          />
+        </el-form-item>
+
+        <!-- 实际恢复时间 -->
+        <el-form-item label="实际恢复时间">
+          <el-date-picker
+            v-model="formData.report.actualRecoverTime"
+            type="datetime"
+            placeholder="请选择时间"
+            value-format="yyyy-MM-dd HH:mm"
+            :picker-options="pickerOptions"
+            style="width: 100%"
+          />
+        </el-form-item>
+
+        <!-- 受伤人员 -->
+        <el-form-item label="受伤人员">
+          <el-input-number v-model="formData.report.injuredCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+            <template slot="append">人</template>
+          </el-input-number>
+        </el-form-item>
+
+        <!-- 死亡人员 -->
+        <el-form-item label="死亡人员">
+          <el-input-number v-model="formData.report.deadCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+            <template slot="append">人</template>
+          </el-input-number>
+        </el-form-item>
+
+        <!-- 滞留人员 -->
+        <el-form-item label="滞留人员">
+          <el-input-number v-model="formData.report.strandedPersonCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+            <template slot="append">人</template>
+          </el-input-number>
+        </el-form-item>
+
+        <!-- 损坏车辆 -->
+        <el-form-item label="损坏车辆">
+          <el-input-number v-model="formData.report.damagedVehicleCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+            <template slot="append">辆</template>
+          </el-input-number>
+        </el-form-item>
+
+        <!-- 滞留车辆 -->
+        <el-form-item label="滞留车辆">
+          <el-input-number v-model="formData.report.strandedVehicleCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
+            <template slot="append">辆</template>
+          </el-input-number>
+        </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-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>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { request } from '@shared/utils/request'
+import LossList from '../WaterDisasterReport/WaterDisasterLossListPC.vue'
+
+// Props 定义
+const props = defineProps({
+  value: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// Emits 定义
+const emit = defineEmits(['input', 'change', 'submit'])
+
+// 表单数据
+const formData = reactive({
+  occurLocation: '',
+  occurTime: '',
+  roadConditionType: '',
+  routeNo: '',
+  event: {
+    blockedMileage: '',
+    blockedPointName: '',
+    contactPerson: '',
+    contactPhone: '',
+    damageCount: '',
+    district: '',
+    endStakeNo: '',
+    estimatedRecoveryCost: '',
+    inspectionMileage: '',
+    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 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)
+  }
+}
+
+// 监听处置措施单选值变化
+watch(disposalMeasureValue, (newVal) => {
+  formData.report.disposalMeasures = newVal
+})
+
+// 监听外部传入的值
+watch(
+  () => props.value,
+  (newVal) => {
+    if (newVal && Object.keys(newVal).length > 0) {
+      initFormData(newVal)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+// 监听表单数据变化，向外传递
+watch(
+  () => formData,
+  (newVal) => {
+    emit('input', newVal)
+    emit('change', newVal)
+  },
+  { deep: true }
+)
+
+// 从 report.disposalMeasures 初始化处置措施单选值
+watch(
+  () => formData.report.disposalMeasures,
+  (newVal) => {
+    if (newVal && typeof newVal === 'string') {
+      disposalMeasureValue.value = newVal
+    }
+  },
+  { 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()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  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}`
+  ElMessage.success('时间已校准为当前时间')
+}
+
+// 表单验证
+const validate = () => {
+  if (!formData.occurTime) {
+    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: '',
+      inspectionMileage: '',
+      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',
+      method: 'post',
+      data: submitData
+    })
+
+    if (res?.code === '00000') {
+      ElMessage.success('提交成功')
+
+      emit("refresh")
+    } else {
+      ElMessage.error(res.message)
+    }
+  } catch (error) {
+    ElMessage.error('提交失败，请重试')
+    console.error('提交失败:', error)
+  } finally {
+
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  validate,
+  initFormData,
+  getFormData,
+  resetForm,
+  calibrateTime,
+})
+</script>
+
+<style lang="scss" scoped>
+.water-disaster-pc {
+  background-color: #f5f7fa;
+  height: 100%;
+
+  .form-card {
+    border-radius: 8px;
+
+    .card-header {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+      border-left: 4px solid #409eff;
+      padding-left: 12px;
+    }
+  }
+
+  ::v-deep .el-form-item {
+    margin-bottom: 22px;
+  }
+
+  ::v-deep .el-input-group__append {
+    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;
+    }
+  }
+}
+</style>
diff --git a/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue b/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue
new file mode 100644
index 0000000..751cdfc
--- /dev/null
+++ b/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue
@@ -0,0 +1,606 @@
+<template>
+  <div class="web-detail-container">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-left">
+        <el-button :icon="ArrowLeft" @click="handleClickBack">返回</el-button>
+        <h2 class="page-title">冰雪事件详情</h2>
+      </div>
+      <div class="header-right">
+        <el-tag :type="getEventStatusType()" size="large">
+          {{ getEventStatusText() }}
+        </el-tag>
+      </div>
+    </div>
+
+    <div class="content-container">
+      <div class="left-panel">
+        <!-- 基本信息卡片 -->
+        <el-card class="info-card" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span class="card-title">基本信息</span>
+            </div>
+          </template>
+
+          <el-row :gutter="20" class="info-row">
+            <el-col :span="8">
+              <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>
+              </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>
+              </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>
+            <el-col :span="8">
+              <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-value">{{ detailData.event?.needsRecovery ? '是' : '否' }}</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-value">{{ detailData.event?.estimatedRecoveryCost ? detailData.event.estimatedRecoveryCost + '万元' : '-' }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <!-- 填报信息卡片 -->
+        <el-card class="info-card" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span class="card-title">填报信息</span>
+            </div>
+          </template>
+
+          <div v-if="hasReportData">
+            <div v-for="(report, index) in allReports" :key="index" class="report-section">
+              <div class="report-header">
+                <span class="report-title">{{ report?.title }}</span>
+                <span class="report-meta">时间：{{ report.reportTime || '-' }}</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">{{ report.siteDescription || '-' }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">处置措施：</span>
+                      <span class="info-value">{{ report.disposalMeasures || '-' }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">实际恢复时间：</span>
+                      <span class="info-value">{{ report.actualRecoverTime || '-' }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">预计恢复时间：</span>
+                      <span class="info-value">{{ report.expectRecoverTime || '-' }}</span>
+                    </div>
+
+                    <div class="info-item">
+                      <span class="info-label">填报人：</span>
+                      <span class="info-value">{{ report.reporterName ? report.reporterName : '-' }}</span>
+                    </div>
+
+                    <div class="info-item">
+                      <span class="info-label">联系电话：</span>
+                      <span class="info-value">{{ report.phone ? report.phone : '-' }}</span>
+                    </div>
+                  </div>
+                  <div class="file-list">
+                    <FileUpload v-model="report.fileList" :readonly="!isEdit" />
+                  </div>
+                </div>
+
+                <div class="detal-info-wrapper">
+                  <template v-if="report.showDetail">
+                    <LossListDetail :modelValue="report.lossList" :col-span="8" />
+                    <el-row :gutter="24">
+                      <el-col :span="8">
+                        <div class="info-item margin">
+                          <span class="info-label">投入机械：</span>
+                          <span class="info-value">{{ report.investedMachinery ? report.investedMachinery + '台/班' : '-'}}</span>
+                        </div>
+                      </el-col>
+                      <el-col :span="8">
+                        <div class="info-item margin">
+                          <span class="info-label">投入人力：</span>
+                          <span class="info-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>
+                        </div>
+                      </el-col>
+                    </el-row>
+                  </template>
+
+                  <el-button style="margin-top: 30px" type="primary" link @click="report.showDetail = !report.showDetail">
+                    {{ report.showDetail ? '点击关闭详情' : '点击查看详情' }}
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <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" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { ArrowLeft, Picture, VideoCamera } from '@element-plus/icons-vue'
+import ContinueReport from './IceDisasterContinueReportPC.vue'
+import { request } from '@shared/utils/request'
+import FileUpload from '@/component/FileUpload/FileUpload.vue'
+
+const router = useRouter()
+const route = useRoute()
+
+// 详情数据
+const detailData = ref({
+  event: null,
+  report: [],
+  fileList: [],
+  lossList: [],
+  occurLocation: '',
+  occurTime: '',
+  roadConditionType: '',
+  routeNo: ''
+})
+
+// 事件状态
+const eventStatus = ref(0)
+
+// 是否为编辑
+const isEdit = computed(() => {
+  return route.query.mode === 'edit'
+})
+
+const continueReport = ref(null)
+
+// 所有填报记录（首报 + 续报）
+const allReports = computed(() => {
+  const reports =
+    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()
+})
+
+// 是否有填报数据
+const hasReportData = computed(() => {
+  return allReports.value.length > 0
+})
+
+// 获取事件状态文本
+const getEventStatusText = () => {
+  return eventStatus.value === 1 ? '已解除' : '未解除'
+}
+
+// 获取事件状态类型
+const getEventStatusType = () => {
+  return eventStatus.value === 1 ? 'success' : 'danger'
+}
+
+const getBaseDisposalMeasures = () => {
+  const firstItem = allReports.value[0]
+  if (!firstItem) return '-'
+  return formatDisposalMeasures(firstItem.disposalMeasures || '') || '-'
+}
+
+// 格式化处置措施
+const formatDisposalMeasures = (measures) => {
+  if (!measures) return ''
+  const measureMap = {
+    半幅封闭: '半幅封闭',
+    全副封闭: '全副封闭',
+    便道通行: '便道通行',
+    正常通行: '正常通行'
+  }
+  return measures
+    .split(',')
+    .map((m) => measureMap[m.trim()] || m.trim())
+    .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
+  if (!id) {
+    ElMessage.warning('缺少灾毁ID')
+    return
+  }
+
+  try {
+    const result = await request({
+      url: `/snow-ops-platform/water-damage/getById`,
+      method: 'get',
+      params: { id }
+    })
+
+    if (result?.data) {
+      const data = result.data
+      console.log('🚀 ~ getDisasterDetail ~ data:', data)
+      detailData.value = {
+        event: data.event || null,
+        report: data.report || [],
+        fileList: data.fileList || [],
+        lossList: data.lossList || [],
+        occurLocation: data.occurLocation || '',
+        occurTime: data.occurTime || '',
+        roadConditionType: data.roadConditionType || '',
+        routeNo: data.routeNo || ''
+      }
+      eventStatus.value = data.eventStatus || 0
+
+      if (isEdit.value) {
+        const newFormData = {
+          ...data,
+          lossList: null,
+          report: {},
+          fileList: null
+        }
+        continueReport.value?.initFormData(newFormData)
+      }
+    } else {
+      ElMessage.warning(result.message || '获取详情失败')
+    }
+  } catch (error) {
+    console.error('获取灾毁详情失败:', error)
+    ElMessage.error('获取详情失败，请稍后重试')
+  }
+}
+
+// 点击返回
+const handleClickBack = () => {
+  router.push('/disasterManagement')
+}
+
+onMounted(() => {
+  getDisasterDetail()
+})
+</script>
+
+<style scoped lang="scss">
+.web-detail-container {
+  padding: 20px;
+  background: #f5f7fa;
+  height: 100%;
+  overflow: auto;
+  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;
+
+  :deep(.el-card__header) {
+    padding: 16px 20px;
+    border-bottom: 1px solid #ebeef5;
+    background: #fafafa;
+  }
+
+  .card-header {
+    .card-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+}
+
+.info-row {
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.info-item {
+  display: flex;
+  align-items: flex-start;
+  line-height: 1.5;
+
+  & + .info-item {
+    margin-top: 10px;
+  }
+
+  &.margin {
+    margin-top: 10px;
+  }
+
+  .info-label {
+    white-space: nowrap;
+    flex-shrink: 0;
+    color: #909399;
+    font-size: 14px;
+  }
+
+  .info-value {
+    flex: 1;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all;
+  }
+}
+
+.report-section {
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #ebeef5;
+
+  &:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+}
+
+.report-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px dashed #dcdfe6;
+
+  .report-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #409eff;
+  }
+
+  .report-meta {
+    font-size: 13px;
+    color: #909399;
+  }
+}
+
+.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;
+  }
+}
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.basic-info-wrapper {
+  display: flex;
+}
+.detal-info-wrapper {
+  margin-top: 10px;
+  border-top: 1px solid #efefef;
+  padding-top: 10px;
+}
+.info-list {
+  flex: 1;
+  overflow: hidden;
+}
+.file-list {
+  
+}
+</style>
diff --git a/packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue b/packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue
index dcb71bd..243d343 100644
--- a/packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue
+++ b/packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue
@@ -328,7 +328,6 @@ import { useRouter, useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Plus, Upload } from '@element-plus/icons-vue'
 import { request } from '@/utils/request'
-import LossList from './WaterDisasterLossListPC.vue'
 import BlockItem from '@/component/BlockItem.vue'
 import FileUpload from '@/component/FileUpload/FileUpload.vue'
 import { useOptions } from '@shared/composables/useOptions'
diff --git a/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue b/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue
index 7da218e..a031a06 100644
--- a/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue
+++ b/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue
@@ -138,7 +138,7 @@
 import { ref, reactive, watch, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { request } from '@shared/utils/request'
-import LossList from '../DisasterReport/WaterDisasterLossListPC.vue'
+import LossList from '../WaterDisasterReport/WaterDisasterLossListPC.vue'
 
 // Props 定义
 const props = defineProps({
diff --git a/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterDetailPC.vue b/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterDetailPC.vue
index 2460f40..736ca85 100644
--- a/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterDetailPC.vue
+++ b/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterDetailPC.vue
@@ -4,7 +4,7 @@
     <div class="page-header">
       <div class="header-left">
         <el-button :icon="ArrowLeft" @click="handleClickBack">返回</el-button>
-        <h2 class="page-title">灾毁详情</h2>
+        <h2 class="page-title">水毁事件详情</h2>
       </div>
       <div class="header-right">
         <el-tag :type="getEventStatusType()" size="large">
@@ -246,7 +246,7 @@ 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 '../DisasterReport/waterMockJson.json'
+import mockData from '../WaterDisasterReport/waterMockJson.json'
 
 const router = useRouter()
 const route = useRoute()