From 4ab272934c194a86c3c43d03a15889652d7c9c96 Mon Sep 17 00:00:00 2001
From: niedongsheng <605973111@qq.com>
Date: Tue, 7 Apr 2026 17:01:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=81=BE=E5=AE=B3=E5=A1=AB=E6=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mobile/src/components/TagFilter.vue  | 223 ++++++++
 packages/mobile/src/router/index.js           |   5 +
 .../DisasterManagement/DisasterManagement.vue | 159 ++++--
 .../DisasterManagement/DisasterReport.vue     | 139 +++++
 .../DisasterManagement/WaterDisaster.vue      | 532 ++++++++++++++++++
 5 files changed, 1006 insertions(+), 52 deletions(-)
 create mode 100644 packages/mobile/src/components/TagFilter.vue
 create mode 100644 packages/mobile/src/views/DisasterManagement/DisasterReport.vue
 create mode 100644 packages/mobile/src/views/DisasterManagement/WaterDisaster.vue

diff --git a/packages/mobile/src/components/TagFilter.vue b/packages/mobile/src/components/TagFilter.vue
new file mode 100644
index 0000000..8246d0a
--- /dev/null
+++ b/packages/mobile/src/components/TagFilter.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="tag-filter" v-show="visible">
+    <div class="filter-mask" @click="close"></div>
+    <div class="filter-container">
+      <div class="filter-header">
+        <span class="filter-title">类型筛选</span>
+        <van-icon name="close" class="close-icon" @click="close" />
+      </div>
+      <div class="filter-content">
+        <div class="tag-list">
+          <span
+            v-for="tag in tagList"
+            :key="tag.value"
+            class="tag-item"
+            :class="{ active: tempSelectedTag === tag.value }"
+            @click="selectTag(tag.value)"
+          >
+            {{ tag.label }}
+          </span>
+        </div>
+      </div>
+      <div class="filter-footer">
+        <van-button class="reset-btn" size="small" @click="resetFilter">重置</van-button>
+        <van-button type="primary" class="confirm-btn" size="small" @click="confirmFilter">确定</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { Icon as VanIcon, Button as VanButton } from 'vant'
+
+const props = defineProps({
+  // 筛选选中的值（支持 v-model）
+  modelValue: {
+    type: String,
+    default: 'all'
+  },
+  // 控制显示隐藏
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  // 标签列表
+  tags: {
+    type: Array,
+    default: () => [
+      { label: '全部', value: 'all' },
+      { label: '边坡坍塌', value: '边坡坍塌' },
+      { label: '泥石流', value: '泥石流' },
+      { label: '路基沉陷', value: '路基沉陷' },
+      { label: '山体滑坡', value: '山体滑坡' },
+      { label: '行道树倒塌', value: '行道树倒塌' },
+      { label: '积水', value: '积水' },
+      { label: '积雪', value: '积雪' },
+      { label: '其他', value: '其他' }
+    ]
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'update:visible', 'confirm'])
+
+// 临时选中的标签（用于确认前暂存）
+const tempSelectedTag = ref(props.modelValue)
+
+// 标签列表
+const tagList = computed(() => props.tags)
+
+// 监听 modelValue 变化，同步临时选中值
+watch(() => props.modelValue, (newVal) => {
+  tempSelectedTag.value = newVal
+})
+
+// 监听 visible 变化，打开时同步临时选中值
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    tempSelectedTag.value = props.modelValue
+  }
+})
+
+// 选择标签（临时）
+const selectTag = (value) => {
+  tempSelectedTag.value = value
+}
+
+// 重置筛选
+const resetFilter = () => {
+  tempSelectedTag.value = 'all'
+}
+
+// 确认筛选
+const confirmFilter = () => {
+  emit('update:modelValue', tempSelectedTag.value)
+  emit('confirm', tempSelectedTag.value)
+  close()
+}
+
+// 关闭筛选弹窗
+const close = () => {
+  emit('update:visible', false)
+}
+</script>
+
+<style scoped lang="scss">
+.tag-filter {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+}
+
+.filter-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.filter-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  border-radius: 0 0 16px 16px;
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid #ebedf0;
+
+  .filter-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #323233;
+  }
+
+  .close-icon {
+    font-size: 22px;
+    color: #969799;
+    cursor: pointer;
+
+    &:active {
+      opacity: 0.6;
+    }
+  }
+}
+
+.filter-content {
+  padding: 16px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.tag-item {
+  padding: 6px 16px;
+  background-color: #f7f8fa;
+  border-radius: 24px;
+  font-size: 14px;
+  color: #646566;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+
+  &:active {
+    transform: scale(0.96);
+  }
+
+  &.active {
+    background-color: #1989fa;
+    color: #fff;
+  }
+}
+
+.filter-footer {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px 20px;
+  border-top: 1px solid #ebedf0;
+
+  .reset-btn,
+  .confirm-btn {
+    flex: 1;
+    height: 40px;
+    border-radius: 24px;
+    font-size: 14px;
+  }
+
+  .reset-btn {
+    background-color: #f7f8fa;
+    border: none;
+    color: #646566;
+
+    &:active {
+      opacity: 0.8;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/mobile/src/router/index.js b/packages/mobile/src/router/index.js
index c902cb7..7355826 100644
--- a/packages/mobile/src/router/index.js
+++ b/packages/mobile/src/router/index.js
@@ -100,6 +100,11 @@ const routes = [
     path: '/disasterManagement',
     name: 'DisasterManagement',
     component: () => import('../views/DisasterManagement/DisasterManagement.vue')
+  },
+  {
+    path: '/disasterReport',
+    name: 'DisasterReport',
+    component: () => import('../views/DisasterManagement/DisasterReport.vue')
   }
 ]
 
diff --git a/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue b/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue
index 87cd869..bb92888 100644
--- a/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue
+++ b/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue
@@ -1,21 +1,10 @@
 <template>
-  <PageContainer title="灾毁阻断" @click-back="handleClickBack">
-    <SearchInput v-model="searchValue" placeholder="请输入地点关键词" @search="handleSearch">
-      <template #extra>
-        <!-- 全部按钮（激活状态） -->
-        <van-button type="default" size="small" :class="{ active: activeFilter === 'all' }" @click="activeFilter = 'all'"> 全部 </van-button>
-
-        <!-- 筛选按钮（带图标） -->
-        <van-button type="default" size="small" icon="filter-o" @click="showFilter = true"></van-button>
-      </template>
-    </SearchInput>
-
+  <PageContainer title="灾害管理" @click-back="handleClickBack">
     <CurrentSite />
 
     <div class="list-panel">
       <CardItem v-for="(item, index) in list" :key="index" :title="item.title" @click="handleClickItem(item)">
         <template #headerExtra>
-          <!-- 使用 Vant Tag 组件显示状态 -->
           <van-tag :type="item.status === '未解除' ? 'danger' : 'success'" plain size="medium">
             {{ item.status }}
           </van-tag>
@@ -30,27 +19,30 @@
             <span class="info-label">预计恢复时间：</span>
             <span class="info-value">{{ item.estimateRecoverTime }}</span>
           </div>
-          <!-- 使用 Vant Tag 组件显示灾毁类型 -->
           <div class="disaster-type-wrapper">
             <van-tag type="primary" size="medium" plain>{{ item.disasterType }}</van-tag>
           </div>
         </div>
 
-        <!-- 使用绝对定位的箭头 -->
         <van-icon class="jump-icon-absolute" name="arrow" />
       </CardItem>
 
-      <!-- 加载状态 -->
       <div v-if="loading" class="loading-wrapper">
         <van-loading size="24px" vertical>加载中...</van-loading>
       </div>
 
-      <!-- 空状态提示 -->
       <EmptyBox v-if="!loading && list.length === 0" :placeholder="emptyText" />
     </div>
 
-    <!-- 灾毁填报按钮 -->
-    <van-button type="primary" class="fab-btn" icon="plus" @click="handleAdd"> 冰雪填报 </van-button>
+    <van-button type="primary" class="footer-btn" icon="plus" @click="handleAdd"> 冰雪填报 </van-button>
+
+    <!-- 筛选组件：v-model 绑定选中的值，visible 控制显示隐藏 -->
+    <TagFilter 
+      v-model="selectedDisasterType" 
+      :visible="showFilter"
+      @update:visible="showFilter = $event"
+      @confirm="handleFilterConfirm"
+    />
   </PageContainer>
 </template>
 
@@ -63,6 +55,7 @@ import SearchInput from '@/components/SearchInput.vue'
 import CardItem from '@/components/CardItem.vue'
 import EmptyBox from '@/components/EmptyBox.vue'
 import CurrentSite from '@/components/CurrentSite.vue'
+import TagFilter from '@/components/TagFilter.vue'
 import mockDataJSON from './mockData.json'
 
 const router = useRouter()
@@ -79,45 +72,90 @@ const loading = ref(false)
 // 空状态文本
 const emptyText = ref('暂无相关灾毁信息')
 
-// 获取灾毁列表数据（后端接口）
-const getDisasterList = async (keyword = '') => {
+// 筛选弹窗显示状态
+const showFilter = ref(false)
+
+// 当前选中的灾毁类型（通过 v-model 传给 TagFilter）
+const selectedDisasterType = ref('all')
+
+// 灾毁类型列表
+const disasterTypes = [
+  { label: '全部', value: 'all' },
+  { label: '边坡坍塌', value: '边坡坍塌' },
+  { label: '泥石流', value: '泥石流' },
+  { label: '路基沉陷', value: '路基沉陷' },
+  { label: '山体滑坡', value: '山体滑坡' },
+  { label: '行道树倒塌', value: '行道树倒塌' },
+  { label: '积水', value: '积水' },
+  { label: '积雪', value: '积雪' },
+  { label: '其他', value: '其他' }
+]
+
+// 获取简短类型名称
+const getShortTypeName = (type) => {
+  const typeMap = {
+    '边坡坍塌': '边坡',
+    '泥石流': '泥石',
+    '路基沉陷': '路基',
+    '山体滑坡': '滑坡',
+    '行道树倒塌': '树倒',
+    '积水': '积水',
+    '积雪': '积雪',
+    '其他': '其他'
+  }
+  return typeMap[type] || type.substring(0, 2)
+}
+
+// 获取灾毁列表数据
+const getDisasterList = async (keyword = '', disasterType = 'all') => {
   loading.value = true
 
   try {
     // TODO: 替换为实际的后端接口地址
-    const response = await fetch('/api/disaster/list', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        keyword: keyword.trim()
-      })
-    })
-
-    // 模拟接口响应格式，实际使用时根据后端返回结构调整
+    // const response = await fetch('/api/disaster/list', {
+    //   method: 'POST',
+    //   headers: {
+    //     'Content-Type': 'application/json'
+    //   },
+    //   body: JSON.stringify({
+    //     keyword: keyword.trim(),
+    //     disasterType: disasterType === 'all' ? '' : disasterType
+    //   })
+    // })
     // const result = await response.json()
-
-    // 模拟异步请求
     // if (result.code === 200) {
     //   list.value = result.data
-    //   emptyText.value = keyword ? '未搜索到相关灾毁信息' : '暂无相关灾毁信息'
     // } else {
     //   showToast(result.message || '获取数据失败')
     //   list.value = []
     // }
 
-    // ========== 模拟数据（实际开发时删除此部分） ==========
+    // ========== 模拟数据 ==========
     await new Promise((resolve) => setTimeout(resolve, 500))
     const mockData = mockDataJSON
 
-    // 模拟后端搜索过滤（实际由后端完成）
+    let filteredData = [...mockData]
+
     if (keyword) {
-      const filtered = mockData.filter((item) => item.title.toLowerCase().includes(keyword.toLowerCase()))
-      list.value = filtered
-      emptyText.value = filtered.length === 0 ? '未搜索到相关灾毁信息' : '暂无相关灾毁信息'
+      filteredData = filteredData.filter((item) => 
+        item.title.toLowerCase().includes(keyword.toLowerCase())
+      )
+    }
+
+    if (disasterType !== 'all') {
+      filteredData = filteredData.filter((item) => 
+        item.disasterType === disasterType
+      )
+    }
+
+    list.value = filteredData
+    
+    if (keyword && filteredData.length === 0) {
+      emptyText.value = '未搜索到相关灾毁信息'
+    } else if (disasterType !== 'all' && filteredData.length === 0) {
+      const typeLabel = disasterTypes.find(t => t.value === disasterType)?.label || disasterType
+      emptyText.value = `暂无${typeLabel}类型灾毁信息`
     } else {
-      list.value = mockData
       emptyText.value = '暂无相关灾毁信息'
     }
     // ========== 模拟数据结束 ==========
@@ -130,9 +168,23 @@ const getDisasterList = async (keyword = '') => {
   }
 }
 
-// 搜索处理（调用后端接口）
+// 搜索处理
 const handleSearch = () => {
-  getDisasterList(searchValue.value)
+  getDisasterList(searchValue.value, selectedDisasterType.value)
+}
+
+// 点击全部按钮
+const handleAllClick = () => {
+  if (selectedDisasterType.value !== 'all') {
+    selectedDisasterType.value = 'all'
+    getDisasterList(searchValue.value, 'all')
+  }
+}
+
+// 筛选确认
+const handleFilterConfirm = (type) => {
+  // selectedDisasterType 已经通过 v-model 更新，这里只需重新请求数据
+  getDisasterList(searchValue.value, type)
 }
 
 // 点击返回
@@ -140,7 +192,7 @@ const handleClickBack = () => {
   router.push('/')
 }
 
-// 点击列表项，跳转详情
+// 点击列表项
 const handleClickItem = (item) => {
   router.push({
     path: '/disaster-detail',
@@ -157,9 +209,7 @@ const handleClickItem = (item) => {
 
 // 灾毁填报
 const handleAdd = () => {
-  // TODO: 跳转到灾毁填报页面
-  console.log('点击灾毁填报')
-  // router.push('/disaster-report')
+  router.push('/disasterReport')
 }
 
 // 页面初始化加载数据
@@ -176,7 +226,6 @@ onMounted(() => {
   padding-bottom: 80px;
 }
 
-/* CardItem 需要设置相对定位 */
 :deep(.card-item) {
   position: relative;
 }
@@ -185,7 +234,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding-right: 24px; /* 为箭头留出空间 */
+  padding-right: 24px;
 }
 
 .time-box {
@@ -206,7 +255,6 @@ onMounted(() => {
   color: #333333;
 }
 
-/* 使用绝对定位的箭头样式 */
 .jump-icon-absolute {
   position: absolute;
   right: 16px;
@@ -217,12 +265,11 @@ onMounted(() => {
   cursor: pointer;
 }
 
-/* 灾毁类型标签样式 */
 .disaster-type-wrapper {
   margin-top: 4px;
 }
 
-.fab-btn {
+.footer-btn {
   position: fixed;
   bottom: 30px;
   left: 50%;
@@ -249,4 +296,12 @@ onMounted(() => {
   justify-content: center;
   padding: 40px 0;
 }
-</style>
+
+:deep(.van-button) {
+  &.active {
+    background-color: #1989fa;
+    color: #fff;
+    border-color: #1989fa;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/mobile/src/views/DisasterManagement/DisasterReport.vue b/packages/mobile/src/views/DisasterManagement/DisasterReport.vue
new file mode 100644
index 0000000..d2df783
--- /dev/null
+++ b/packages/mobile/src/views/DisasterManagement/DisasterReport.vue
@@ -0,0 +1,139 @@
+<template>
+  <PageContainer title="灾毁填报" @click-back="handleClickBack" class="page-container">
+    <!-- 当前站点信息 -->
+    <CurrentSite />
+
+    <!-- 事件类型 -->
+    <PanelItem title="事件类型">
+      <van-radio-group v-model="eventType" direction="horizontal" class="event-type-group">
+        <van-radio name="water">水毁灾害</van-radio>
+        <van-radio name="ice">冰雪灾害</van-radio>
+      </van-radio-group>
+    </PanelItem>
+
+    <!-- 根据事件类型渲染不同表单 -->
+    <WaterDisaster 
+      v-if="eventType === 'water'"
+      ref="waterDisasterRef"
+      v-model="waterDisasterData"
+    />
+    
+    <!-- 冰雪灾害表单（待实现） -->
+    <div v-else class="coming-soon">
+      <van-empty description="冰雪灾害表单开发中..." />
+    </div>
+
+    <!-- 提交按钮 -->
+    <van-button type="primary" class="footer-btn" @click="handleSubmit" :loading="submitting">
+      提交
+    </van-button>
+  </PageContainer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast, showSuccessToast, showFailToast } from 'vant'
+import PageContainer from '@/components/PageContainer.vue'
+import CurrentSite from '@/components/CurrentSite.vue'
+import PanelItem from '@/components/PanelItem.vue'
+import WaterDisaster from './WaterDisaster.vue'
+
+const router = useRouter()
+
+// 事件类型
+const eventType = ref('water')
+
+// 表单数据
+const waterDisasterData = ref({})
+const waterDisasterRef = ref(null)
+const submitting = ref(false)
+
+// 返回上一页
+const handleClickBack = () => {
+  router.replace('/disasterManagement')
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  // 验证表单
+  if (eventType.value === 'water') {
+    if (!waterDisasterRef.value.validate()) {
+      return
+    }
+  }
+  
+  submitting.value = true
+  try {
+    // 获取表单数据
+    let formData = {}
+    if (eventType.value === 'water') {
+      formData = waterDisasterRef.value.getFormData()
+    }
+    
+    // 添加事件类型和站点信息
+    const submitData = {
+      eventType: eventType.value,
+      ...formData,
+      // 可以在这里添加站点信息等其他数据
+    }
+    
+    console.log('提交数据:', submitData)
+    
+    // 模拟提交接口
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    showSuccessToast('提交成功')
+    
+    // 提交成功后返回列表页
+    setTimeout(() => {
+      router.replace('/disasterManagement')
+    }, 1500)
+  } catch (error) {
+    showFailToast('提交失败，请重试')
+    console.error('提交失败:', error)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  padding-bottom: 80px;
+  background-color: #f5f7fa;
+}
+
+.event-type-group {
+  display: flex;
+  gap: 24px;
+  :deep(.van-radio) {
+    margin-right: 0;
+  }
+}
+
+.coming-soon {
+  padding: 40px 20px;
+}
+
+.footer-btn {
+  position: fixed;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 32px);
+  max-width: 340px;
+  border-radius: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  cursor: pointer;
+  z-index: 10;
+
+  &:active {
+    opacity: 0.9;
+    transform: translateX(-50%) scale(0.98);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/mobile/src/views/DisasterManagement/WaterDisaster.vue b/packages/mobile/src/views/DisasterManagement/WaterDisaster.vue
new file mode 100644
index 0000000..acf7a26
--- /dev/null
+++ b/packages/mobile/src/views/DisasterManagement/WaterDisaster.vue
@@ -0,0 +1,532 @@
+<template>
+  <div class="water-disaster">
+    <!-- 基本信息 -->
+    <PanelItem title="基本信息">
+      <van-form>
+        <!-- 路况类别 -->
+        <BasePicker v-model="formData.roadCondition" :options="roadConditionOptions" label="路况类别" placeholder="请选择" />
+
+        <!-- 是否阻断 -->
+        <BasePicker v-model="formData.isBlocked" :options="blockedOptions" label="是否阻断" placeholder="请选择" />
+
+        <!-- 抢修进度 -->
+        <BasePicker v-model="formData.repairProgress" :options="repairProgressOptions" label="抢修进度" placeholder="请选择" />
+
+        <!-- 水毁处数 -->
+        <van-field v-model="formData.waterDamageCount" label="水毁处数" placeholder="请填写" type="number" />
+
+        <!-- 阻断里程 -->
+        <van-field v-model="formData.blockedMileage" label="阻断里程" placeholder="请填写" type="digit">
+          <template #button>
+            <span class="field-unit">公里</span>
+          </template>
+        </van-field>
+
+        <!-- 发生时间 -->
+        <BaseDatePicker v-model="formData.occurTime" label="发生时间" placeholder="请选择时间" :columnsType="['year', 'month', 'day', 'hour', 'minute']" />
+        <div class="calibrate-time-btn" @click="calibrateTime">
+          <van-icon name="replay" />
+          <span>校准时间</span>
+        </div>
+
+        <!-- 线路编号 -->
+        <van-field v-model="formData.lineCode" label="线路编号" placeholder="请填写" />
+
+        <!-- 起点桩号 -->
+        <van-field v-model="formData.startPileNo" label="起点桩号(K)" placeholder="请填写" />
+
+        <!-- 起点桩经纬度 -->
+        <div class="coordinate-row">
+          <van-field v-model="formData.startLongitude" label="起点桩经度" placeholder="经度" class="coordinate-field" />
+          <van-field v-model="formData.startLatitude" label="起点桩纬度" placeholder="纬度" class="coordinate-field" />
+        </div>
+        <div class="calibrate-coord-btn" @click="calibrateStartCoord">
+          <van-icon name="location-o" />
+          <span>校准经纬度</span>
+        </div>
+
+        <!-- 止点桩号 -->
+        <van-field v-model="formData.endPileNo" label="止点桩号(K)" placeholder="请填写" />
+
+        <!-- 止点桩经纬度 -->
+        <div class="coordinate-row">
+          <van-field v-model="formData.endLongitude" label="止点桩经度" placeholder="经度" class="coordinate-field" />
+          <van-field v-model="formData.endLatitude" label="止点桩纬度" placeholder="纬度" class="coordinate-field" />
+        </div>
+        <div class="calibrate-coord-btn" @click="calibrateEndCoord">
+          <van-icon name="location-o" />
+          <span>校准经纬度</span>
+        </div>
+
+        <!-- 路况位置 -->
+        <van-field v-model="formData.roadLocation" label="路况位置" placeholder="请填写" />
+
+        <!-- 阻断点小地名 -->
+        <van-field v-model="formData.smallPlaceName" label="阻断点小地名" placeholder="请填写" />
+      </van-form>
+    </PanelItem>
+
+    <!-- 处置情况 -->
+    <PanelItem title="处置情况">
+      <div class="disposal-measures">
+        <span class="measures-label">处置措施</span>
+        <div class="measures-options">
+          <van-checkbox-group v-model="formData.disposalMeasures" direction="horizontal">
+            <van-checkbox name="halfClose">半幅封闭</van-checkbox>
+            <van-checkbox name="fullClose">全副封闭</van-checkbox>
+            <van-checkbox name="bypass">便道通行</van-checkbox>
+            <van-checkbox name="normal">正常通行</van-checkbox>
+          </van-checkbox-group>
+        </div>
+      </div>
+
+      <!-- 预计恢复时间 -->
+      <BaseDatePicker v-model="formData.estimatedRecoverTime" label="预计恢复时间" placeholder="请选择时间" :min-date="minDate" :max-date="maxDate" type="datetime" />
+
+      <!-- 实际恢复时间 -->
+      <BaseDatePicker v-model="formData.actualRecoverTime" label="实际恢复时间" placeholder="请选择时间" :min-date="minDate" :max-date="maxDate" type="datetime" />
+    </PanelItem>
+
+    <!-- 人员车辆 -->
+    <PanelItem title="人员车辆">
+      <van-form>
+        <van-field v-model="formData.injuredCount" label="受伤人员" placeholder="请填写" type="number">
+          <template #button>
+            <span class="field-unit">个</span>
+          </template>
+        </van-field>
+        <van-field v-model="formData.deathCount" label="死亡人员" placeholder="请填写" type="number">
+          <template #button>
+            <span class="field-unit">个</span>
+          </template>
+        </van-field>
+        <van-field v-model="formData.strandedPeople" label="滞留人员" placeholder="请填写" type="number">
+          <template #button>
+            <span class="field-unit">个</span>
+          </template>
+        </van-field>
+        <van-field v-model="formData.damagedVehicles" label="损坏车辆" placeholder="请填写" type="number">
+          <template #button>
+            <span class="field-unit">辆</span>
+          </template>
+        </van-field>
+        <van-field v-model="formData.strandedVehicles" label="滞留车辆" placeholder="请填写" type="number">
+          <template #button>
+            <span class="field-unit">辆</span>
+          </template>
+        </van-field>
+      </van-form>
+    </PanelItem>
+
+    <!-- 灾毁损失 -->
+    <PanelItem title="灾毁损失">
+      <div class="loss-row">
+        <span class="loss-label">塌方及损失</span>
+        <span class="loss-value">{{ formData.collapseLoss }}万/万元</span>
+      </div>
+      <van-button size="small" block type="primary" plain @click="showLossDialog = true">添加损失</van-button>
+      <van-field v-model="formData.handlingSituation" label="处理情况" placeholder="请填写（选填）" />
+      <van-field v-model="formData.totalLossAmount" label="损失总金额" placeholder="请填写（选填）" type="digit">
+        <template #button>
+          <span class="field-unit">万元</span>
+        </template>
+      </van-field>
+    </PanelItem>
+
+    <PanelItem>
+      <van-field v-model="formData.machineryInput" label="已投机械" placeholder="请填写" type="digit">
+        <template #button>
+          <span class="field-unit">台/班</span>
+        </template>
+      </van-field>
+      <van-field v-model="formData.laborInput" label="已投入力" placeholder="请填写" type="number">
+        <template #button>
+          <span class="field-unit">人次</span>
+        </template>
+      </van-field>
+      <van-field v-model="formData.fundsInput" label="已投资金" placeholder="请填写" type="digit">
+        <template #button>
+          <span class="field-unit">万元</span>
+        </template>
+      </van-field>
+      <van-field v-model="formData.siteDescription" label="现场描述" placeholder="请填写" type="textarea" rows="2" autosize />
+
+      <van-field label="附件">
+        <template #input>
+        </template>
+      </van-field>
+    </PanelItem>
+
+    <!-- 附件 -->
+    <!-- <PanelItem title="附件">
+      <div class="attachment-tip">图片只能上传jpg/png文件，且不超过500kb；视频仅支持20s内的视频</div>
+      <div class="upload-area">
+        <van-uploader
+          v-model="formData.imageFiles"
+          :after-read="afterImageRead"
+          accept="image/jpeg,image/png"
+          :max-size="500 * 1024"
+          @oversize="onOversize"
+          multiple
+          :max-count="9"
+        >
+          <div class="upload-btn">
+            <van-icon name="photo-o" size="24" />
+            <span>上传图片</span>
+          </div>
+        </van-uploader>
+        <van-uploader v-model="formData.videoFile" :after-read="afterVideoRead" accept="video/*" :max-size="20 * 1024 * 1024" @oversize="onVideoOversize">
+          <div class="upload-btn">
+            <van-icon name="video-o" size="24" />
+            <span>上传视频</span>
+          </div>
+        </van-uploader>
+      </div>
+      <div v-if="formData.videoFile.length > 0 && formData.videoFile[0].content" class="video-preview">
+        <video :src="formData.videoFile[0].content" controls style="width: 100%; max-height: 200px"></video>
+      </div>
+    </PanelItem> -->
+
+    <!-- 损失计算弹窗 -->
+    <van-dialog v-model:show="showLossDialog" title="添加塌方损失" show-cancel-button @confirm="confirmLoss" @cancel="showLossDialog = false">
+      <div class="loss-dialog-content">
+        <van-field v-model="lossForm.length" label="长度(m)" type="number" placeholder="请输入长度" />
+        <van-field v-model="lossForm.width" label="宽度(m)" type="number" placeholder="请输入宽度" />
+        <van-field v-model="lossForm.height" label="高度(m)" type="number" placeholder="请输入高度" />
+        <van-field v-model="lossForm.unitPrice" label="单价(元/m³)" type="number" placeholder="请输入单价" />
+        <div class="loss-calc-result">预估塌方量：{{ calculatedVolume }} m³</div>
+        <div class="loss-calc-result">预估损失：{{ calculatedLoss }} 万元</div>
+      </div>
+    </van-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch } from 'vue'
+import { showToast, showFailToast } from 'vant'
+import PanelItem from '@/components/PanelItem.vue'
+import BasePicker from '@/components/BasePicker.vue'
+import BaseDatePicker from '@/components/BaseDatePicker.vue'
+
+// 定义 props
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// 定义 emits
+const emit = defineEmits(['update:modelValue', 'submit'])
+
+// 表单数据
+const formData = reactive({
+  roadCondition: '',
+  isBlocked: '',
+  repairProgress: '',
+  waterDamageCount: '',
+  blockedMileage: '',
+  occurTime: '',
+  lineCode: '',
+  startPileNo: '',
+  startLongitude: '',
+  startLatitude: '',
+  endPileNo: '',
+  endLongitude: '',
+  endLatitude: '',
+  roadLocation: '',
+  smallPlaceName: '',
+  disposalMeasures: [],
+  estimatedRecoverTime: '',
+  actualRecoverTime: '',
+  injuredCount: '',
+  deathCount: '',
+  strandedPeople: '',
+  damagedVehicles: '',
+  strandedVehicles: '',
+  collapseLoss: '0',
+  handlingSituation: '',
+  totalLossAmount: '',
+  machineryInput: '',
+  laborInput: '',
+  fundsInput: '',
+  siteDescription: '',
+  imageFiles: [],
+  videoFile: []
+})
+
+// 弹窗显示状态
+const showLossDialog = ref(false)
+
+// BasePicker 选项数据
+const roadConditionOptions = [
+  { label: '高速公路', value: '高速公路' },
+  { label: '国道', value: '国道' },
+  { label: '省道', value: '省道' },
+  { label: '县道', value: '县道' },
+  { label: '乡道', value: '乡道' },
+  { label: '村道', value: '村道' }
+]
+
+const blockedOptions = [
+  { label: '是', value: '是' },
+  { label: '否', value: '否' }
+]
+
+const repairProgressOptions = [
+  { label: '未开始', value: '未开始' },
+  { label: '进行中', value: '进行中' },
+  { label: '已抢通', value: '已抢通' },
+  { label: '已修复', value: '已修复' }
+]
+
+// 时间选择器范围
+const minDate = new Date(2020, 0, 1)
+const maxDate = new Date(2030, 11, 31)
+
+// 损失计算表单
+const lossForm = reactive({
+  length: '',
+  width: '',
+  height: '',
+  unitPrice: ''
+})
+
+// 计算塌方量
+const calculatedVolume = computed(() => {
+  const l = parseFloat(lossForm.length) || 0
+  const w = parseFloat(lossForm.width) || 0
+  const h = parseFloat(lossForm.height) || 0
+  return (l * w * h).toFixed(2)
+})
+
+// 计算损失金额（万元）
+const calculatedLoss = computed(() => {
+  const volume = parseFloat(calculatedVolume.value) || 0
+  const price = parseFloat(lossForm.unitPrice) || 0
+  const lossYuan = volume * price
+  return (lossYuan / 10000).toFixed(2)
+})
+
+// 监听父组件传入的数据
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal && Object.keys(newVal).length > 0) {
+      Object.assign(formData, newVal)
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+// 监听表单数据变化，同步到父组件
+watch(
+  formData,
+  () => {
+    emit('update:modelValue', { ...formData })
+  },
+  { deep: true }
+)
+
+// 校准时间
+const calibrateTime = () => {
+  const now = new Date()
+  const formatted = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
+  formData.occurTime = formatted
+  showToast('时间已校准为当前时间')
+}
+
+// 校准起点经纬度
+const calibrateStartCoord = () => {
+  formData.startLongitude = '108.41763025'
+  formData.startLatitude = '108.41763025'
+  showToast('起点经纬度已校准')
+}
+
+// 校准止点经纬度
+const calibrateEndCoord = () => {
+  formData.endLongitude = '108.41763025'
+  formData.endLatitude = '108.41763025'
+  showToast('止点经纬度已校准')
+}
+
+// 确认损失计算
+const confirmLoss = () => {
+  const lossValue = calculatedLoss.value
+  if (parseFloat(lossValue) > 0) {
+    formData.collapseLoss = lossValue
+    if (formData.totalLossAmount) {
+      const currentTotal = parseFloat(formData.totalLossAmount) || 0
+      formData.totalLossAmount = (currentTotal + parseFloat(lossValue)).toFixed(2)
+    } else {
+      formData.totalLossAmount = lossValue
+    }
+  } else {
+    showToast('请填写有效的长宽高和单价')
+  }
+  lossForm.length = ''
+  lossForm.width = ''
+  lossForm.height = ''
+  lossForm.unitPrice = ''
+  showLossDialog.value = false
+}
+
+// 图片上传处理
+const afterImageRead = (file) => {
+  console.log('图片上传:', file)
+}
+
+const onOversize = () => {
+  showFailToast('图片大小不能超过500KB')
+}
+
+const afterVideoRead = (file) => {
+  console.log('视频上传:', file)
+}
+
+const onVideoOversize = () => {
+  showFailToast('视频大小不能超过20MB')
+}
+
+// 暴露验证方法
+const validate = () => {
+  if (!formData.occurTime) {
+    showToast('请填写发生时间')
+    return false
+  }
+  if (!formData.lineCode) {
+    showToast('请填写线路编号')
+    return false
+  }
+  return true
+}
+
+// 获取表单数据
+const getFormData = () => {
+  return { ...formData }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  validate,
+  getFormData
+})
+</script>
+
+<style lang="scss" scoped>
+.water-disaster {
+
+  .coordinate-row {
+    display: flex;
+    gap: 8px;
+    .coordinate-field {
+      flex: 1;
+    }
+  }
+
+  .calibrate-time-btn,
+  .calibrate-coord-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: #1989fa;
+    margin: 8px 0 8px 12px;
+    padding: 4px 8px;
+    background: #f0f7ff;
+    border-radius: 20px;
+    cursor: pointer;
+    width: fit-content;
+  }
+
+  .field-unit {
+    color: #969799;
+    font-size: 14px;
+    margin-left: 4px;
+  }
+
+  .disposal-measures {
+    margin-bottom: 16px;
+    .measures-label {
+      font-size: 14px;
+      color: #323233;
+      display: block;
+      margin-bottom: 8px;
+    }
+    .measures-options {
+      :deep(.van-checkbox-group) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
+      }
+      :deep(.van-checkbox) {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .loss-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #f8f9fa;
+    padding: 10px 12px;
+    border-radius: 8px;
+    margin: 12px 0;
+    .loss-label {
+      font-size: 14px;
+      color: #323233;
+    }
+    .loss-value {
+      font-size: 16px;
+      font-weight: 600;
+      color: #ee0a24;
+    }
+  }
+
+  .attachment-tip {
+    font-size: 12px;
+    color: #969799;
+    margin-bottom: 12px;
+  }
+
+  .upload-area {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    .upload-btn {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 80px;
+      height: 80px;
+      background: #f8f9fa;
+      border: 1px dashed #dcdee0;
+      border-radius: 8px;
+      gap: 4px;
+      font-size: 12px;
+      color: #969799;
+      cursor: pointer;
+    }
+  }
+
+  .video-preview {
+    margin-top: 12px;
+  }
+
+  .loss-dialog-content {
+    padding: 8px 16px 16px;
+    .loss-calc-result {
+      font-size: 14px;
+      color: #1989fa;
+      margin-top: 12px;
+      text-align: center;
+    }
+  }
+
+  :deep(.van-field__label) {
+    width: 90px;
+  }
+}
+</style>