From c54f37313cfa74e385b384814952b89e4a9aa4f4 Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Thu, 16 Apr 2026 14:05:24 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E6=8E=92=E7=8F=AD=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../law/dutyManagement/addDialog.vue          | 240 ++++++++++++++++--
 .../law/dutyManagement/index.js               |  27 +-
 .../src/views/WarningManagement/law/index.js  |  49 ++++
 .../src/views/WarningManagement/law/index.vue |   2 +-
 4 files changed, 288 insertions(+), 30 deletions(-)

diff --git a/packages/screen/src/views/WarningManagement/law/dutyManagement/addDialog.vue b/packages/screen/src/views/WarningManagement/law/dutyManagement/addDialog.vue
index 5d9bb1c..e1f08fd 100644
--- a/packages/screen/src/views/WarningManagement/law/dutyManagement/addDialog.vue
+++ b/packages/screen/src/views/WarningManagement/law/dutyManagement/addDialog.vue
@@ -11,24 +11,45 @@
               children: 'children',
               label: 'orgName'
             }" node-key="orgId" :expand-on-click-node="false" :default-expand-all="false" highlight-current
-              style="height: 400px; overflow-y: auto;"
-              @node-click="handleNodeClick">
-              <template #default="{ node, data }">
+              style="height: 400px; overflow-y: auto;" @node-click="handleNodeClick">
+              <template #default="{ node: _node }">
                 <span class="custom-tree-node">
-                  <span>{{ node.label }}</span>
+                  <span>{{ _node.label }}</span>
                 </span>
               </template>
             </el-tree>
           </div>
-          
-          <!-- 中间空白区域 -->
+
+          <!-- 中间用户列表 -->
           <div class="middle-panel">
-            <!-- 暂留空，后续使用 -->
+            <div class="panel-title">用户列表</div>
+            <div class="user-list">
+              <div v-for="user in currentUsers" :key="user.userId" class="user-item"
+                :class="{ 'selected': isUserSelected(user) }" @click="toggleUserSelection(user)">
+                <span class="user-name">{{ user.realName || user.nickName || user.account }}</span>
+                <span class="user-position">{{ user.positionName }}</span>
+              </div>
+            </div>
           </div>
-          
-          <!-- 右侧空白区域 -->
+
+          <!-- 右侧已选择用户 -->
           <div class="right-panel">
-            <!-- 暂留空，后续使用 -->
+            <div class="panel-title">已选择用户 ({{ selectedUsers.length }})</div>
+            <div class="selected-user-list">
+              <div v-for="user in selectedUsers" :key="user.userId" class="selected-user-item">
+                <div class="user-info">
+                  <span class="user-name">{{ user.realName || user.nickName || user.account }}</span>
+                  <span class="user-position">{{ user.positionName }}</span>
+                </div>
+                <div class="time-picker-container">
+                  <el-date-picker v-model="user.timeRange" type="datetimerange" range-separator="至"
+                    start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
+                    value-format="YYYY-MM-DD HH:mm:ss" size="small" :shortcuts="dateShortcuts"
+                    @change="handleTimeChange(user)" />
+                </div>
+                <el-button type="danger" size="small" icon="Delete" circle @click.stop="removeSelectedUser(user)" />
+              </div>
+            </div>
           </div>
         </div>
       </el-form-item>
@@ -38,13 +59,31 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, watch } from "vue";
 import { request } from "@/utils/request";
 import { ElMessage } from 'element-plus';
 
 const formRef = ref(null);
-defineExpose({ formRef });
+// 获取保存用的用户数据（格式化后的数据）
+const getFormattedSelectedUsers = () => {
+  return selectedUsers.value.map(user => ({
+    userId: user.userId,
+    userName: user.realName || user.nickName || user.account,
+    orgId: user.orgId,
+    startTime: user.timeRange ? user.timeRange[0] : '',
+    endTime: user.timeRange ? user.timeRange[1] : ''
+  }));
+}
 
+// 当前显示的用户列表
+const currentUsers = ref([]);
+// 已选择的用户列表
+const selectedUsers = ref([]);
+
+defineExpose({
+  formRef,
+  getFormattedSelectedUsers
+});
 const props = defineProps({
   form: {
     type: Object,
@@ -52,6 +91,13 @@ const props = defineProps({
   },
 });
 
+// 监听已选择用户变化，实时保存到form中
+watch(selectedUsers, (newSelectedUsers) => {
+  // 格式化数据并保存到form
+  props.form.schedules = getFormattedSelectedUsers();
+}, { deep: true, immediate: true });
+
+
 
 
 const rules = computed(() => {
@@ -122,14 +168,14 @@ const buildOrgTree = (orgList) => {
           // 取最后一个ID作为直接父级（排除-1）
           const parentIds = pidMatches.filter(id => id !== '-1');
           if (parentIds.length > 0) {
-            parentId = parseInt(parentIds[parentIds.length - 1]);
+            parentId = parentIds[parentIds.length - 1]; // 保持字符串类型，不转成数字
           }
         }
       }
 
-      // 方法2：如果无法从orgPids解析，使用orgParentId
+      // 方法2：如果无法从orgPids解析，使用orgParentId（转换为字符串）
       if (parentId === null && org.orgParentId && org.orgParentId !== -1) {
-        parentId = org.orgParentId;
+        parentId = String(org.orgParentId);
       }
 
       // 添加到父节点的children中
@@ -156,15 +202,66 @@ const buildOrgTree = (orgList) => {
   return sortTree(tree);
 }
 
-// 树节点点击事件
-const handleNodeClick = (data, node) => {
-  // 判断是否为叶子节点（没有子节点）
-  if (!node.childNodes || node.childNodes.length === 0) {
-    // 叶子节点，调用获取用户列表方法
-    getUsersByOrgId(data.orgId);
+// 检查用户是否已被选择
+const isUserSelected = (user) => {
+  return selectedUsers.value.some(selected => selected.userId === user.userId);
+};
+
+// 切换用户选择状态
+const toggleUserSelection = (user) => {
+  if (isUserSelected(user)) {
+    removeSelectedUser(user);
+  } else {
+    // 添加用户时初始化时间范围和orgId
+    selectedUsers.value.push({
+      ...user,
+      orgId: user.orgId, // 确保包含orgId
+      timeRange: null
+    });
   }
+};
+
+// 移除已选择的用户
+const removeSelectedUser = (user) => {
+  const index = selectedUsers.value.findIndex(selected => selected.userId === user.userId);
+  if (index > -1) {
+    selectedUsers.value.splice(index, 1);
+  }
+};
+
+// 树节点点击事件
+const handleNodeClick = async (_data) => {
+  // 获取该组织的用户列表
+  await getUsersByOrgId(_data.orgId);
 }
 
+// 日期时间范围快捷选项
+const dateShortcuts = [
+  {
+    text: '今天',
+    value: [new Date(), new Date()],
+  },
+  {
+    text: '明天',
+    value: [
+      new Date(new Date().getTime() + 86400000),
+      new Date(new Date().getTime() + 86400000)
+    ],
+  },
+  {
+    text: '最近一周',
+    value: [new Date(), new Date(new Date().getTime() + 604800000)],
+  },
+];
+
+// 处理时间范围变化
+const handleTimeChange = (user) => {
+  // 时间变化时的处理逻辑可以在这里添加
+  console.log('时间范围变化:', user.userId, user.timeRange);
+};
+
+
+
 // 根据组织ID查询用户列表
 const getUsersByOrgId = async (orgId) => {
   try {
@@ -176,7 +273,8 @@ const getUsersByOrgId = async (orgId) => {
       }
     })
     if (res.code === '00000') {
-      console.log('@@@@@@用户列表',res.data);
+      currentUsers.value = res.data || [];
+      // console.log('@@@@@', res.data);
     } else {
       throw new Error(res.message)
     }
@@ -215,16 +313,14 @@ onMounted(() => {
   background-color: #fff;
 }
 
-.empty-panel {
-
-}
-
 .middle-panel {
   flex: 2;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
   padding: 10px;
   background-color: #fff;
+  display: flex;
+  flex-direction: column;
 }
 
 .right-panel {
@@ -233,6 +329,98 @@ onMounted(() => {
   border-radius: 4px;
   padding: 10px;
   background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #303133;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.user-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.user-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid transparent;
+}
+
+.user-item:hover {
+  background-color: #f5f7fa;
+}
+
+.user-item.selected {
+  background-color: #409eff;
+  color: white;
+  border-color: #409eff;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.user-position {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.selected-user-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.selected-user-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  background-color: #f0f9ff;
+  border: 1px solid #e1f5fe;
+  gap: 12px;
+}
+
+.time-picker-container {
+  flex: 1.2;
+  min-width: 280px;
+}
+
+.time-picker-container :deep(.el-date-editor) {
+  width: 100%;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  flex: 0.8;
+}
+
+.selected-user-item .user-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.selected-user-item .user-position {
+  font-size: 12px;
+  color: #606266;
 }
 
 .custom-tree-node {
diff --git a/packages/screen/src/views/WarningManagement/law/dutyManagement/index.js b/packages/screen/src/views/WarningManagement/law/dutyManagement/index.js
index bcca8fb..0d06e1d 100644
--- a/packages/screen/src/views/WarningManagement/law/dutyManagement/index.js
+++ b/packages/screen/src/views/WarningManagement/law/dutyManagement/index.js
@@ -68,7 +68,7 @@ const pagination = reactive({
     },
 });
 
-// 获取预警列表
+// 获取值班列表
 const getTableData = async (filterData = {}) => {
     try {
         // 过滤空字符串属性
@@ -100,7 +100,28 @@ const getTableData = async (filterData = {}) => {
     }
 }
 
-// 打开发布预警弹窗
+// 排班提交
+const addSchedule = async (form) => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/law-duty/schedule',
+            method: "POST",
+            data: form
+        })
+        if (res.code === '00000') {
+            ElMessage.success('排班成功');
+            modelVisible.value = false;
+            getTableData(filterData)
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error('排班失败');
+        console.error('排班失败:', error);
+    }
+}
+
+// 打开排班弹窗
 const openAddDialog = () => {
     model.title = '立即排班';
     Object.assign(form, INIT_FORM);
@@ -113,7 +134,7 @@ const openAddDialog = () => {
     };
     model.onConfirm = async () => {
         await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(async () => {
-            console.log('@@@@@立即排班', form);
+            await addSchedule(form)
             // await publishWarning(form)
         })
             .catch((err) => {
diff --git a/packages/screen/src/views/WarningManagement/law/index.js b/packages/screen/src/views/WarningManagement/law/index.js
index 02ed2e6..2f731a6 100644
--- a/packages/screen/src/views/WarningManagement/law/index.js
+++ b/packages/screen/src/views/WarningManagement/law/index.js
@@ -2,6 +2,7 @@ import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
 import { request } from "@/utils/request";
 import { useRoute, useRouter } from 'vue-router'
 import AddDialog from "./addDialog.vue";
+import ScheduleDiaog from "../law/dutyManagement/addDialog.vue"
 import DetailDrawer from "./detailDrawer.vue";
 
 const tableData = ref([]); // 表格数据
@@ -305,6 +306,53 @@ const uploadFile = async (file) => {
     }
 }
 
+const form2 = reactive({});
+const INIT_FORM2 = {};
+
+// 排班提交
+const addSchedule = async (form) => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/law-duty/schedule',
+            method: "POST",
+            data: form
+        })
+        if (res.code === '00000') {
+            ElMessage.success('排班成功');
+            modelVisible.value = false;
+            getTableData(filterData)
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error('排班失败');
+        console.error('排班失败:', error);
+    }
+}
+
+const openScheduleDiaog = () => {
+    model.title = '立即排班';
+    Object.assign(form2, INIT_FORM2);
+    model.props = {
+        form: form2,
+    };
+    model.content = ScheduleDiaog;
+    model.onCancel = () => {
+        modelVisible.value = false;
+    };
+    model.onConfirm = async () => {
+        await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(async () => {
+            await addSchedule(form)
+            // await publishWarning(form)
+        })
+            .catch((err) => {
+                ElMessage.error('请处理表单中的错误项');
+            });
+    };
+    model.width = "70%"
+    modelVisible.value = true;
+}
+
 
 
 
@@ -356,6 +404,7 @@ export default () => {
         dialogRef,
         drawerRef,
         openAddDialog,
+        openScheduleDiaog,
 
         uploadFile,
     }
diff --git a/packages/screen/src/views/WarningManagement/law/index.vue b/packages/screen/src/views/WarningManagement/law/index.vue
index d3c5acd..5bb49f2 100644
--- a/packages/screen/src/views/WarningManagement/law/index.vue
+++ b/packages/screen/src/views/WarningManagement/law/index.vue
@@ -15,7 +15,7 @@
             <el-button type="primary" @click="script.openAddDialog">发布预警</el-button>
             <el-button type="primary" @click="triggerFileSelect">上传线下帮扶</el-button>
             <el-button type="primary" @click="script.gotoLedgerPage">线下帮扶台账</el-button>
-            <el-button type="primary" @click="">立即排班</el-button>
+            <el-button type="primary" @click="script.openScheduleDiaog">立即排班</el-button>
             <el-button type="primary" @click="script.gotoDutyPage">值班管理</el-button>
             <el-button type="primary" color="#952DE6" @click="">导出</el-button>
             <input type="file" ref="fileInput" style="display: none" @change="handleFileSelect" accept=".*"></input>

From c7011564d3ee51707afa13af21a671296b09555f Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Thu, 16 Apr 2026 14:50:18 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E8=A7=A3=E5=BC=80=E8=BF=9B?=
 =?UTF-8?q?=E5=85=A5=E9=A1=B5=E9=9D=A2=E7=82=B9=E5=87=BB=E7=AC=AC=E4=B8=80?=
 =?UTF-8?q?=E9=A1=B9=E7=9A=84=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/screen/src/component/MenuBar/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/screen/src/component/MenuBar/index.js b/packages/screen/src/component/MenuBar/index.js
index 6dbf541..848c275 100644
--- a/packages/screen/src/component/MenuBar/index.js
+++ b/packages/screen/src/component/MenuBar/index.js
@@ -46,7 +46,7 @@ export default () => {
             const firstMenuItem = menuList.value[0]?.children?.[0];
             if (firstMenuItem) {
                 // 注释掉进入页面点击第一项的逻辑 后续记得打开
-                // handleMenuClick(firstMenuItem);
+                handleMenuClick(firstMenuItem);
             }
         }
     }, { immediate: true });

From 923a4ed2ba99c51d91c73da99e5f8b04c5caa9f7 Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Thu, 16 Apr 2026 15:16:20 +0800
Subject: [PATCH 3/5] =?UTF-8?q?style:=20=E6=8E=92=E7=8F=AD=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WarningManagement/law/dutyManagement/addDialog.vue    | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/screen/src/views/WarningManagement/law/dutyManagement/addDialog.vue b/packages/screen/src/views/WarningManagement/law/dutyManagement/addDialog.vue
index e1f08fd..bc0da20 100644
--- a/packages/screen/src/views/WarningManagement/law/dutyManagement/addDialog.vue
+++ b/packages/screen/src/views/WarningManagement/law/dutyManagement/addDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="detail-container">
     <el-form ref="formRef" :model="form" label-position="right" label-width="auto"
-      style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules">
+      style="max-height: 60vh; overflow-y: hidden; padding-right: 50px" :rules="rules">
 
       <el-form-item label="" prop="schedules">
         <div class="tree-transfer-container">
@@ -11,7 +11,7 @@
               children: 'children',
               label: 'orgName'
             }" node-key="orgId" :expand-on-click-node="false" :default-expand-all="false" highlight-current
-              style="height: 400px; overflow-y: auto;" @node-click="handleNodeClick">
+              style="height: 100%; overflow-y: auto;" @node-click="handleNodeClick">
               <template #default="{ node: _node }">
                 <span class="custom-tree-node">
                   <span>{{ _node.label }}</span>
@@ -303,6 +303,7 @@ onMounted(() => {
   display: flex;
   gap: 20px;
   width: 100%;
+  height: 60vh;
 }
 
 .tree-panel {
@@ -311,6 +312,7 @@ onMounted(() => {
   border-radius: 4px;
   padding: 10px;
   background-color: #fff;
+  height: 100%;
 }
 
 .middle-panel {
@@ -321,6 +323,7 @@ onMounted(() => {
   background-color: #fff;
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .right-panel {
@@ -331,6 +334,7 @@ onMounted(() => {
   background-color: #fff;
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .panel-title {

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

---
 .../WaterDisaster/WaterDisaster.vue           |   1 -
 .../WaterDisasterDetail.vue                   |   6 -
 .../waterDisasterFormData.json                |   1 -
 .../src/component/DynamicForm/DynamicForm.vue |   2 +-
 packages/screen/src/directive/index.js        |   5 +
 .../src/directive/permission/hasPermi.js      |  27 +
 packages/screen/src/store/userStore.js        |  13 +
 .../IceDisasterContinueReportPC.vue           |   2 -
 .../IceDisasterDetail/IceDisasterDetailPC.vue |  64 +-
 .../IceDisasterDetail/detailConfig.js         | 111 ---
 .../IceDisasterReport/IceDisasterReportPC.vue | 792 +++++-------------
 .../IceDisasterReport/useIceDisasterReport.js | 336 ++++++++
 .../WaterDisasterContinueReportPC.vue         |   2 -
 .../WaterDisasterLossListPC.vue               |   5 +
 .../WaterDisasterReportPC.vue                 | 729 +++++-----------
 .../WaterDisasterReport/copy.vue              | 742 ++++++++++++++++
 .../useWaterDisasterReport.js                 | 292 +++++++
 .../WaterDisasterReport/waterMockJson.json    |   1 -
 .../components/MaterialList.vue               | 170 ++++
 .../components/RoadRoutesSelect.vue           |   2 +-
 .../components/YHZSelect.vue                  | 253 ++++++
 packages/shared/composables/useOptions.js     |   6 +
 22 files changed, 2346 insertions(+), 1216 deletions(-)
 create mode 100644 packages/screen/src/directive/index.js
 create mode 100644 packages/screen/src/directive/permission/hasPermi.js
 create mode 100644 packages/screen/src/store/userStore.js
 delete mode 100644 packages/screen/src/views/DisasterManagement/IceDisasterDetail/detailConfig.js
 create mode 100644 packages/screen/src/views/DisasterManagement/IceDisasterReport/useIceDisasterReport.js
 create mode 100644 packages/screen/src/views/DisasterManagement/WaterDisasterReport/copy.vue
 create mode 100644 packages/screen/src/views/DisasterManagement/WaterDisasterReport/useWaterDisasterReport.js
 create mode 100644 packages/screen/src/views/DisasterManagement/components/MaterialList.vue
 create mode 100644 packages/screen/src/views/DisasterManagement/components/YHZSelect.vue

diff --git a/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue b/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue
index 6ec2805..6baae9e 100644
--- a/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue
+++ b/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue
@@ -190,7 +190,6 @@ const formData = ref({
     district: '', // 上报区县
     endStakeNo: '', // 止点桩号
     estimatedRecoveryCost: '', // 恢复重建预估费用
-    inspectionMileage: '', // 巡查里程
     isBlocked: '', // 是否阻断
     needsRecovery: '', // 是否需要恢复重建
     repairProgress: '', // 抢险进度
diff --git a/packages/mobile/src/views/DisasterManagement/WaterDisasterDetail.vue b/packages/mobile/src/views/DisasterManagement/WaterDisasterDetail.vue
index 3a321bd..3ac6b69 100644
--- a/packages/mobile/src/views/DisasterManagement/WaterDisasterDetail.vue
+++ b/packages/mobile/src/views/DisasterManagement/WaterDisasterDetail.vue
@@ -102,12 +102,6 @@
         <span class="info-value">{{ detailData.event?.district || '-' }}</span>
       </div>
 
-      <!-- 巡查里程 -->
-      <div class="info-row">
-        <span class="info-label">巡查里程：</span>
-        <span class="info-value">{{ detailData.event?.inspectionMileage ? detailData.event.inspectionMileage + '公里' : '-' }}</span>
-      </div>
-
       <!-- 是否恢复重建 -->
       <div class="info-row">
         <span class="info-label">是否恢复重建：</span>
diff --git a/packages/mobile/src/views/DisasterManagement/waterDisasterFormData.json b/packages/mobile/src/views/DisasterManagement/waterDisasterFormData.json
index 03532ea..61153f4 100644
--- a/packages/mobile/src/views/DisasterManagement/waterDisasterFormData.json
+++ b/packages/mobile/src/views/DisasterManagement/waterDisasterFormData.json
@@ -12,7 +12,6 @@
     "district": "武侯区",
     "endStakeNo": "K2251+200",
     "estimatedRecoveryCost": 120.5,
-    "inspectionMileage": 25.6,
     "isBlocked": true,
     "needsRecovery": true,
     "repairProgress": "抢险中",
diff --git a/packages/screen/src/component/DynamicForm/DynamicForm.vue b/packages/screen/src/component/DynamicForm/DynamicForm.vue
index c0991e5..d919656 100644
--- a/packages/screen/src/component/DynamicForm/DynamicForm.vue
+++ b/packages/screen/src/component/DynamicForm/DynamicForm.vue
@@ -8,7 +8,7 @@
   </div>
 </template>
 <script setup>
-import { onMounted, watch, ref, provide } from 'vue'
+import { onMounted, watch, ref, provide, computed } from 'vue'
 import DynamicFormItem from './DynamicFormItem.vue'
 const props = defineProps({
   configList: {
diff --git a/packages/screen/src/directive/index.js b/packages/screen/src/directive/index.js
new file mode 100644
index 0000000..a755ab3
--- /dev/null
+++ b/packages/screen/src/directive/index.js
@@ -0,0 +1,5 @@
+import hasPermi from './permission/hasPermi'
+
+export default function directive(app){
+  app.directive('hasPermi', hasPermi)
+}
\ No newline at end of file
diff --git a/packages/screen/src/directive/permission/hasPermi.js b/packages/screen/src/directive/permission/hasPermi.js
new file mode 100644
index 0000000..d4aee4d
--- /dev/null
+++ b/packages/screen/src/directive/permission/hasPermi.js
@@ -0,0 +1,27 @@
+ /**
+ * v-hasPermi 操作权限处理
+ * Copyright (c) 2019 ruoyi
+ */
+import useUserStore from '@flightweb/store/modules/user'
+
+export default {
+  mounted(el, binding, vnode) {
+    const { value } = binding
+    const all_permission = "*:*:*"
+    const permissions = useUserStore().permissions
+
+    if (value && value instanceof Array && value.length > 0) {
+      const permissionFlag = value
+
+      const hasPermissions = permissions.some(permission => {
+        return all_permission === permission || permissionFlag.includes(permission)
+      })
+
+      if (!hasPermissions) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else {
+      throw new Error(`请设置操作权限标签值`)
+    }
+  }
+}
diff --git a/packages/screen/src/store/userStore.js b/packages/screen/src/store/userStore.js
new file mode 100644
index 0000000..91c9863
--- /dev/null
+++ b/packages/screen/src/store/userStore.js
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+  state: {
+
+  },
+  getters: {
+
+  },
+  actions: {
+    
+  }
+})
\ No newline at end of file
diff --git a/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterContinueReportPC.vue b/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterContinueReportPC.vue
index a031a06..055f6ea 100644
--- a/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterContinueReportPC.vue
+++ b/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterContinueReportPC.vue
@@ -166,7 +166,6 @@ const formData = reactive({
     district: '',
     endStakeNo: '',
     estimatedRecoveryCost: '',
-    inspectionMileage: '',
     isBlocked: '',
     needsRecovery: '',
     repairProgress: '',
@@ -325,7 +324,6 @@ const resetForm = () => {
       district: '',
       endStakeNo: '',
       estimatedRecoveryCost: '',
-      inspectionMileage: '',
       isBlocked: '',
       needsRecovery: '',
       repairProgress: '',
diff --git a/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue b/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue
index 08cb86a..8764f6d 100644
--- a/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue
+++ b/packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue
@@ -1,9 +1,64 @@
 <template>
   <div class="web-detail-container">
-
     <div class="content-container">
       <div class="left-panel">
-        <DynamicDetail v-model="detailData" :config-list="detailConfig" />
+        <!-- 基本信息卡片 -->
+        <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">{{}}</span>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="info-item">
+                <span class="info-label">线路编号：</span>
+                <span class="info-value">{{}}</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">冰雪事件</span>
+              </div>
+            </el-col>
+            <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">{{}}</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>
+        </el-card>
       </div>
       <!-- <div class="right-panel" v-if="isEdit">
         <ContinueReport ref="continueReport" @refresh="getDisasterDetail" />
@@ -20,8 +75,6 @@ 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'
-import detailConfig from './detailConfig'
-import DynamicDetail from '@/component/DynamicDetail/DynamicDetail.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -68,7 +121,6 @@ const hasReportData = computed(() => {
   return allReports.value.length > 0
 })
 
-
 // 获取灾毁详情
 const getDisasterDetail = async () => {
   const id = route.query.id
@@ -80,7 +132,7 @@ const getDisasterDetail = async () => {
   try {
     const result = await request({
       url: `/snow-ops-platform/event/getById?id=${route.query.id}`,
-      method: 'get',
+      method: 'get'
     })
 
     if (result?.data) {
diff --git a/packages/screen/src/views/DisasterManagement/IceDisasterDetail/detailConfig.js b/packages/screen/src/views/DisasterManagement/IceDisasterDetail/detailConfig.js
deleted file mode 100644
index d6035af..0000000
--- a/packages/screen/src/views/DisasterManagement/IceDisasterDetail/detailConfig.js
+++ /dev/null
@@ -1,111 +0,0 @@
-export default [
-  {
-    type: 'card',
-    label: '基础信息',
-    children: [
-      {
-        type: 'row',
-        children: [
-          {
-            span: 8,
-            label: '事件类型',
-            value: '冰雪事件',
-          },
-          {
-            span: 8,
-            label: '路况类别',
-            prop: 'event.routeNo'
-          },
-          {
-            span: 8,
-            label: '处理措施',
-            prop: 'event.disposalMeasures'
-          }
-        ]
-      },
-      {
-        type: 'row',
-        children: [
-          {
-            span: 8,
-            label: '地点路线',
-            prop: 'event.occurLocation'
-          },
-          {
-            span: 8,
-            label: '起点桩号',
-            prop: 'event.startStakeNo'
-          },
-          {
-            span: 8,
-            label: '止点桩号',
-            prop: 'event.endStakeNo'
-          }
-        ]
-      },
-      {
-        type: 'row',
-        children: [
-          {
-            span: 8,
-            label: '路况位置',
-            prop: 'event.occurLocation'
-          },
-          {
-            span: 8,
-            label: '阻断点小地名',
-            prop: 'event.occurLocation'
-          },
-          {
-            span: 8,
-            label: '地点路线',
-            prop: 'event.occurLocation'
-          }
-        ]
-      },
-      {
-        type: 'row',
-        children: [
-          {
-            span: 24,
-            label: '受灾里程',
-            prop: 'event.disasterMileage'
-          }
-        ]
-      },
-      {
-        type: 'row',
-        children: [
-          {
-            span: 8,
-            label: '所属区县',
-            prop: 'event.district'
-          },
-          {
-            span: 8,
-            label: '发现时间',
-            prop: 'event.occurTime'
-          }
-        ]
-      },
-      {
-        type: 'row',
-        children: [
-          {
-            span: 8,
-            label: '是否需要恢复重建',
-            prop: 'event.actualRecoverTime'
-          },
-          {
-            show: (formData) => {
-              return formData.event?.actualRecoverTime
-            },
-            span: 8,
-            label: '恢复重建预估费用（万元）',
-            prop: 'event.estimatedRecoveryCost'
-          }
-        ]
-      }
-    ]
-  }
-]
\ No newline at end of file
diff --git a/packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue b/packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue
index c9fb246..d2b9fe0 100644
--- a/packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue
+++ b/packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue
@@ -1,83 +1,50 @@
 <template>
   <div class="disaster-form-page">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" class="disaster-form" @submit.prevent>
-      <!-- 基本信息区块 -->
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="disaster-form" @submit.prevent>
       <el-card class="form-section" shadow="never">
         <template #header>
           <div class="section-header">
-            <span class="section-title">基本信息</span>
+            <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-input v-model="formData.event.reporterUnit" disabled />
               </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-input v-model="formData.event.contactPhone" maxlength="11" placeholder="请填写" />
               </el-form-item>
             </el-col>
           </el-row>
         </BlockItem>
 
         <BlockItem title="路况事件信息">
-          <el-row :gutter="24">
-            <!-- 发生时间 -->
-            <el-col :span="8">
-              <el-form-item label="发生时间" prop="occurTime">
-                <el-date-picker v-model="formData.occurTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
-              </el-form-item>
-            </el-col>
-            <!-- 路况类别 -->
-            <el-col :span="8">
-              <el-form-item label="路况类别" prop="roadConditionType">
-                <el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="(option, idx) in options['iceRoadConditionType']" :label="option.label" :value="option.value" :key="idx" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <!-- 处理措施-->
-            <el-col :span="8">
-              <el-form-item label="处理措施" prop="report.disposalMeasures">
-                <el-select v-model="formData.report.disposalMeasures" placeholder="请选择" style="width: 100%">
-                  <el-option v-for="(option, idx) in options['disposalMeasures']" :label="option.label" :value="option.value" :key="idx" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
           <el-row :gutter="24">
             <el-col :span="8">
               <el-form-item label="事件类型">
-                <el-select v-model="eventType" placeholder="请选择" style="width: 100%" @change="handleEventTypeChange">
-                  <el-option v-for="(option, idx) in options['eventType']" :label="option.label" :value="option.value" :key="idx" />
+                <el-select v-model="eventType" style="width: 100%" @change="handleEventTypeChange">
+                  <el-option v-for="(option, idx) in options['eventType']" :key="idx" :label="option.label" :value="option.value" />
                 </el-select>
               </el-form-item>
             </el-col>
-            <!-- 预计恢复时间 -->
             <el-col :span="8">
-              <el-form-item label="预计恢复时间" prop="report.expectRecoverTime">
-                <el-date-picker v-model="formData.report.expectRecoverTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
+              <el-form-item label="填报站点" prop="event.serviceStationId">
+                <YHZSelect v-model="formData.event.serviceStationId" />
               </el-form-item>
             </el-col>
-          </el-row>
-          <el-row :gutter="24"> </el-row>
-          <el-row :gutter="24">
-            <!-- 现场描述 -->
-            <el-col :span="16">
-              <el-form-item label="现场描述(绕行方案)" prop="report.siteDescription">
-                <el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" />
+            <el-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-row>
@@ -85,90 +52,85 @@
 
         <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-input :model-value="routeTypeLabel" readonly />
               </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-option v-for="(option, idx) in options['area']" :key="idx" :label="option.label" :value="option.value" />
                 </el-select>
               </el-form-item>
             </el-col>
-            <!-- 受灾里程 -->
             <el-col :span="8">
-              <el-form-item label="受灾里程" prop="event.disasterMileage">
-                <el-input v-model="formData.event.disasterMileage" placeholder="请填写" />
+              <el-form-item label="线路编号" prop="routeNo">
+                <RoadRoutesSelect v-model="formData.routeNo" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" @change="handleRouteNoChange" />
               </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 label="发生地点" prop="event.occurLocation">
+                <el-input v-model="formData.event.occurLocation" placeholder="请填写" />
               </el-form-item>
             </el-col>
-            <!-- 起点桩号 -->
             <el-col :span="8">
-              <el-form-item label="起点桩号(K)" prop="event.startStakeNo">
+              <el-form-item label="路况位置" prop="occurLocation">
+                <el-input v-model="formData.occurLocation" placeholder="请选择">
+                  <template #suffix>
+                    <el-icon class="location-icon"><LocationFilled /></el-icon>
+                  </template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="起点桩号" prop="event.startStakeNo">
                 <el-input v-model="formData.event.startStakeNo" placeholder="请填写">
                   <template #prepend>K</template>
                 </el-input>
               </el-form-item>
             </el-col>
-            <!-- 止点桩号 -->
+          </el-row>
+
+          <el-row :gutter="24">
             <el-col :span="8">
-              <el-form-item label="止点桩号(K)" prop="event.endStakeNo">
+              <el-form-item label="起点桩经度" prop="event.startStakeLongitude">
+                <el-input v-model="formData.event.startStakeLongitude" 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="请填写" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="止点桩号" prop="event.endStakeNo">
                 <el-input v-model="formData.event.endStakeNo" placeholder="请填写">
                   <template #prepend>K</template>
                 </el-input>
               </el-form-item>
             </el-col>
           </el-row>
-          <el-row :gutter="24">
-            <!-- 路况位置 -->
-            <el-col :span="8">
-              <el-form-item label="路况位置" prop="occurLocation">
-                <el-input v-model="formData.occurLocation" placeholder="请填写" />
-              </el-form-item>
-            </el-col>
-            <!-- 阻断点小地名 -->
-            <el-col :span="8">
-              <el-form-item label="阻断点小地名" prop="event.blockedPointName">
-                <el-input v-model="formData.event.blockedPointName" placeholder="请填写" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="24">
-            <!-- 经度 -->
-            <el-col :span="8">
-              <el-form-item label="经度" prop="event.longitude">
-                <el-input v-model="formData.event.longitude" placeholder="经度"> </el-input>
-              </el-form-item>
-            </el-col>
 
-            <!-- 纬度 -->
-            <el-col :span="8">
-              <el-form-item label="纬度" prop="event.latitude">
-                <el-input v-model="formData.event.latitude" placeholder="纬度"> </el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
           <el-row :gutter="24">
             <el-col :span="8">
-              <el-form-item label="图片上传" prop="fileList">
-                <FileUpload type="image" :limit="9" v-model="formData.fileList" />
+              <el-form-item label="止点桩经度" prop="event.endStakeLongitude">
+                <el-input v-model="formData.event.endStakeLongitude" placeholder="请填写" />
               </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 label="止点桩纬度" prop="event.endStakeLatitude">
+                <el-input v-model="formData.event.endStakeLatitude" 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="请填写">
+                  <template #append>公里</template>
+                </el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -178,440 +140,151 @@
       <el-card class="form-section" shadow="never">
         <template #header>
           <div class="section-header">
-            <span class="section-title">灾毁损失</span>
+            <span class="section-title">处置情况</span>
           </div>
         </template>
-        <BlockItem title="路况事件信息">
+
+        <BlockItem>
           <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-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['iceDisposalMeasures']" :key="idx" :label="option.label" :value="option.value" />
                 </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-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-col :span="8">
+              <el-form-item label="实际预计恢复时间" prop="report.actualRecoverTime">
+                <el-date-picker v-model="formData.report.actualRecoverTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
+              </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>
+          <MaterialList v-model="formData.yhzMaterialList" :yhzId="formData.event.serviceStationId" />
+
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="投入人力" prop="material.inputManpower">
+                <el-input-number v-model="formData.material.inputManpower" :min="0" :step="1" :controls="false" placeholder="请填写" 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="material.inputFunds">
+                <el-input-number v-model="formData.material.inputFunds" :min="0" :precision="2" :controls="false" placeholder="请填写" 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="material.inputEquipment">
+                <el-input-number v-model="formData.material.inputEquipment" :min="0" :precision="1" :controls="false" placeholder="请填写" style="width: 100%">
+                  <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="traffic.hasStrandedVehicles">
+                <el-select v-model="formData.traffic.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-input-number v-model="formData.traffic.strandedVehicleCount" :min="0" :step="1" :controls="false" placeholder="请填写" style="width: 100%">
+                  <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="18">
+              <el-form-item label="现场情况描述" prop="report.siteDescription">
+                <el-input v-model="formData.report.siteDescription" type="textarea" :rows="3" placeholder="请填写" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="16">
+              <el-form-item label="附件上传" prop="fileList">
+                <div class="upload-wrapper">
+                  <div class="upload-title">图片上传</div>
+                  <FileUpload v-model="formData.fileList" type="image" :limit="9" />
+                </div>
               </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>
+        <el-button type="primary" :loading="submitting" @click="handleSubmit">提交</el-button>
       </div>
     </el-form>
-
-    <!-- 图片预览对话框 -->
-    <el-dialog v-model="previewDialogVisible" title="图片预览" width="600px">
-      <img :src="previewImageUrl" style="width: 100%" alt="预览图片" />
-    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, watch, onMounted } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { Plus, Upload } from '@element-plus/icons-vue'
-import { request } from '@/utils/request'
+import { LocationFilled } from '@element-plus/icons-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'
+import YHZSelect from '../components/YHZSelect.vue'
+import MaterialList from '../components/MaterialList.vue'
+import { useIceDisasterReport } from './useIceDisasterReport'
 
-const router = useRouter()
-const route = useRoute()
-const { options, getAreaOptions } = useOptions()
-const formRef = ref(null)
-const submitting = ref(false)
+const {
+  eventType,
+  filterForm,
+  formData,
+  formRef,
+  formRules,
+  handleBack,
+  handleDistrictChange,
+  handleEventTypeChange,
+  handleRouteNoChange,
+  handleSubmit,
+  initFormData,
+  getFormData,
+  options,
+  routeTypeLabel,
+  strandedVehicleOptions,
+  submitting,
+  handleHasStrandedVehiclesChange,
+  validate
+} = useIceDisasterReport()
 
-// 是否为续报
-const isContinue = computed(() => route.query.isContinue === 'true')
-
-// 处置措施数组（用于多选框组，需要转换为逗号分隔的字符串）
-const disposalMeasuresArray = ref([])
-
-// 附件列表
-const imageFileList = ref([])
-const videoFileList = ref([])
-
-const eventType = ref('冰雪事件')
-
-const filterForm = reactive({
-  routeType: ''
-})
-
-const formData = reactive({
-  // 顶层字段
-  occurLocation: null, // 发生地点/路况位置
-  occurTime: null, // 发生时间
-  roadConditionType: null, // 路况类别
-  routeNo: null, // 线路编号
-
-  // event 对象
-  event: {
-    blockedMileage: null, // 阻断里程
-    blockedPointName: null, // 阻断点小地名
-    contactPerson: null, // 联系人
-    contactPhone: null, // 联系电话
-    district: null, // 上报区县
-    endStakeNo: null, // 止点桩号
-    estimatedRecoveryCost: null, // 恢复重建预估费用
-    inspectionMileage: null, // 巡查里程
-    needsRecovery: null, // 是否需要恢复重建
-    reporterUnit: null, // 填报单位
-    startStakeNo: null, // 起点桩号
-    disasterMileage: null // 受灾里程
-  },
-
-  // report 对象
-  report: {
-    actualRecoverTime: null, // 实际恢复时间
-    damagedVehicleCount: null, // 损坏车辆
-    deadCount: null, // 死亡人员
-    disposalMeasures: null, // 处置措施（逗号分隔）
-    expectRecoverTime: null, // 预计恢复时间
-    injuredCount: null, // 受伤人员
-    investedFunds: null, // 已投资金
-    investedMachinery: null, // 已投机械
-    investedManpower: null, // 已投人力
-    remark: null, // 处理情况/备注
-    siteDescription: null, // 现场描述
-    strandedPersonCount: null, // 滞留人员
-    strandedVehicleCount: null, // 滞留车辆
-    totalLossAmount: null // 损失总金额
-  },
-
-  // lossList 数组
-  lossList: [],
-
-  // fileList 数组
-  fileList: []
-})
-
-const handleEventTypeChange = () => {
-  router.replace({ path: '/waterDisasterReport' })
-}
-
-// 监听处置措施数组变化，转换为逗号分隔的字符串存到 report.disposalMeasures
-watch(
-  disposalMeasuresArray,
-  (newVal) => {
-    formData.report.disposalMeasures = newVal.length ? newVal.join(',') : null
-  },
-  { deep: true }
-)
-
-// 监听图片附件变化，同步到 fileList
-watch(
-  imageFileList,
-  () => {
-    syncFileList()
-  },
-  { deep: true }
-)
-
-// 监听视频附件变化，同步到 fileList
-watch(
-  videoFileList,
-  () => {
-    syncFileList()
-  },
-  { deep: true }
-)
-
-// 同步附件到 fileList
-const syncFileList = () => {
-  formData.fileList = [
-    ...imageFileList.value.map((f) => ({
-      fileName: f.name || '',
-      fileSize: f.size || 0,
-      fileType: 1, // 1-图片
-      fileUrl: f.url || f.content || ''
-    })),
-    ...videoFileList.value.map((f) => ({
-      fileName: f.name || '',
-      fileSize: f.size || 0,
-      fileType: 2, // 2-视频
-      fileUrl: f.url || f.content || ''
-    }))
-  ]
-}
-
-// 从 report.disposalMeasures 初始化处置措施数组
-watch(
-  () => formData.report.disposalMeasures,
-  (newVal) => {
-    if (newVal && typeof newVal === 'string') {
-      disposalMeasuresArray.value = newVal.split(',').filter(Boolean)
-    } else {
-      disposalMeasuresArray.value = []
-    }
-  },
-  { immediate: true }
-)
-
-// 表单校验规则
-const formRules = {
-  roadConditionType: [{ required: true, message: '请选择路况类别', trigger: 'change' }],
-  'report.disposalMeasures': [{ required: true, message: '请选择处置措施', trigger: 'change' }],
-  'event.blockedMileage': [{ required: true, message: '请输入阻断里程', trigger: 'blur' }],
-  occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
-  'report.expectRecoverTime': [{ required: true, message: '请输入预计恢复时间', trigger: 'blur' }],
-  routeNo: [{ required: true, message: '请输入线路编号', trigger: 'blur' }],
-  'event.startStakeNo': [{ required: true, message: '请输入起点桩号', trigger: 'blur' }],
-  'event.endStakeNo': [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
-  occurLocation: [{ required: true, message: '请输入路况位置', trigger: 'blur' }],
-  'event.blockedPointName': [{ required: true, message: '请输入阻断点小地名', trigger: 'blur' }],
-  'event.longitude': [{ required: true, message: '请输入经度', trigger: 'blur' }],
-  'event.latitude': [{ required: true, message: '请输入纬度', trigger: 'blur' }],
-  'event.needsRecovery': [{ required: true, message: '请选择是否需要恢复重建', trigger: 'change' }],
-  'event.estimatedRecoveryCost': [{ required: true, message: '请输入恢复重建预估费用', trigger: 'blur' }]
-  // 'event.reporterUnit': [{ required: true, message: '请输入填报单位', trigger: 'blur' }],
-  // 'event.contactPerson': [{ required: true, message: '请输入联系人', trigger: 'blur' }],
-  // 'event.contactPhone': [
-  //   { required: true, message: '请输入联系电话', trigger: 'blur' },
-  //   { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
-  // ]
-}
-
-// 图片上传前校验
-const beforeImageUpload = (file) => {
-  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
-  const isLt500k = file.size / 1024 < 500
-
-  if (!isJpgOrPng) {
-    ElMessage.error('只能上传 JPG/PNG 格式的图片!')
-    return false
-  }
-  if (!isLt500k) {
-    ElMessage.error('图片大小不能超过 500KB!')
-    return false
-  }
-  return false // 返回false阻止自动上传，由提交时统一处理
-}
-
-// 视频上传前校验
-const beforeVideoUpload = (file) => {
-  const isLt20M = file.size / 1024 / 1024 < 20
-  if (!isLt20M) {
-    ElMessage.error('视频大小不能超过 20MB!')
-    return false
-  }
-  return false
-}
-
-// 图片预览
-const previewDialogVisible = ref(false)
-const previewImageUrl = ref('')
-
-const handlePicturePreview = (file) => {
-  previewImageUrl.value = file.url
-  previewDialogVisible.value = true
-}
-
-const handlePictureRemove = (file, fileList) => {
-  imageFileList.value = fileList
-}
-
-// 返回上一页
-const handleBack = () => {
-  router.back()
-}
-
-// 初始化表单数据（用于编辑/续报）
-const initFormData = (data) => {
-  Object.assign(formData, data)
-}
-
-const handleDistrictChange = () => {
-  formData.routeNo = null
-}
-
-const handleRouteNoChange = (item) => {
-  formData.event.startStakeNo = item.startStakeNo
-  formData.event.endStakeNo = item.endStakeNo
-}
-
-// 获取表单数据
-const getFormData = () => {
-  return { ...formData }
-}
-
-// 表单验证
-const validate = async () => {
-  if (!formRef.value) return false
-  try {
-    await formRef.value.validate()
-    return true
-  } catch (error) {
-    ElMessage.warning('请完善表单信息')
-    return false
-  }
-}
-
-// 提交表单
-const handleSubmit = async () => {
-  // 验证表单
-  if (!(await validate())) {
-    return
-  }
-
-  submitting.value = true
-  try {
-    // 获取表单数据
-
-    // 添加事件类型和站点信息
-    const submitData = {
-      ...formData
-      // 可以在这里添加站点信息等其他数据
-    }
-
-    const res = await request({
-      url: '/snow-ops-platform/water-damage/addOrUpdate',
-      method: 'post',
-      data: submitData
-    })
-
-    if (res?.code === '00000') {
-      ElMessage.success('提交成功')
-    } else {
-      ElMessage.error(res.message)
-    }
-
-    // 提交成功后返回列表页
-    setTimeout(() => {
-      router.replace('/disasterManagement')
-    }, 1000)
-  } catch (error) {
-    ElMessage.error('提交失败，请重试')
-    console.error('提交失败:', error)
-  } finally {
-    submitting.value = false
-  }
-}
-
-// 加载编辑数据
-const loadEditData = async () => {
-  initFormData({})
-}
-
-onMounted(() => {
-  // 获取区县下拉列表
-  getAreaOptions()
-
-  loadEditData()
-})
-
-// 暴露方法给父组件
 defineExpose({
   validate,
   initFormData,
@@ -625,74 +298,65 @@ defineExpose({
   background-color: #f5f7fa;
   height: 100%;
   overflow: auto;
+}
 
-  .disaster-form {
-    .form-section {
-      margin-bottom: 20px;
+.form-section {
+  margin-bottom: 20px;
 
-      :deep(.el-card__header) {
-        padding: 12px 20px;
-        background-color: #fafafa;
-        border-bottom: 1px solid #ebeef5;
-      }
+  :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;
-    }
+  :deep(.el-card__body) {
+    padding: 20px;
   }
 }
+
+.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;
+    border-radius: 2px;
+    background-color: #409eff;
+  }
+}
+
+.location-icon {
+  color: #909399;
+}
+
+.unit-text {
+  color: #606266;
+  font-size: 14px;
+}
+
+.upload-wrapper {
+  width: 100%;
+}
+
+.upload-title {
+  margin-bottom: 12px;
+  color: #303133;
+  font-size: 14px;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding: 8px 0 32px;
+}
 </style>
diff --git a/packages/screen/src/views/DisasterManagement/IceDisasterReport/useIceDisasterReport.js b/packages/screen/src/views/DisasterManagement/IceDisasterReport/useIceDisasterReport.js
new file mode 100644
index 0000000..cd5992b
--- /dev/null
+++ b/packages/screen/src/views/DisasterManagement/IceDisasterReport/useIceDisasterReport.js
@@ -0,0 +1,336 @@
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { request } from '@/utils/request'
+import { useOptions } from '@shared/composables/useOptions'
+
+const DEFAULT_REPORTER_UNIT = '万州区公路中心'
+
+const createDefaultFormData = () => ({
+  occurLocation: '',
+  occurTime: '',
+  routeNo: '',
+  event: {
+    contactPerson: '',
+    contactPhone: '',
+    disasterMileage: null,
+    district: '',
+    endStakeLatitude: null,
+    endStakeLongitude: null,
+    endStakeNo: '',
+    occurLocation: '',
+    reporterUnit: DEFAULT_REPORTER_UNIT,
+    serviceStationId: '',
+    startStakeLatitude: null,
+    startStakeLongitude: null,
+    startStakeNo: ''
+  },
+  material: {
+    inputEquipment: null,
+    inputFunds: null,
+    inputManpower: null
+  },
+  report: {
+    actualRecoverTime: '',
+    disposalMeasures: '',
+    expectRecoverTime: '',
+    siteDescription: ''
+  },
+  traffic: {
+    hasStrandedVehicles: null,
+    strandedVehicleCount: null
+  },
+  fileList: []
+})
+
+const mergeFormData = (source = {}) => {
+  const defaults = createDefaultFormData()
+  const merged = {
+    ...defaults,
+    ...source,
+    event: {
+      ...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
+
+  if (!merged.event.reporterUnit) {
+    merged.event.reporterUnit = DEFAULT_REPORTER_UNIT
+  }
+
+  return merged
+}
+
+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 }
+}
+
+export const useIceDisasterReport = () => {
+  const router = useRouter()
+  const route = useRoute()
+  const { options, getAreaOptions } = useOptions()
+
+  const formRef = ref(null)
+  const submitting = ref(false)
+  const eventType = ref('冰雪事件')
+  const filterForm = reactive({
+    routeType: ''
+  })
+  const formData = reactive(createDefaultFormData())
+  const strandedVehicleOptions = [
+    { label: '有', value: 1 },
+    { label: '无', value: 0 }
+  ]
+
+  const routeTypeLabel = computed(() => {
+    const matched = options.value.roadType?.find((item) => item.value === filterForm.routeType)
+    return matched?.label || '国省道'
+  })
+
+  const formRules = {
+    'event.contactPerson': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
+    'event.contactPhone': [
+      { required: true, message: '请输入联系电话', trigger: 'blur' },
+      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的联系电话', trigger: 'blur' }
+    ],
+    'event.serviceStationId': [{ required: true, message: '请选择填报站点', trigger: 'change' }],
+    occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
+    'event.district': [{ required: true, message: '请选择所属区县', trigger: 'change' }],
+    routeNo: [{ required: true, message: '请选择线路编号', trigger: 'change' }],
+    '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.startStakeLatitude': [{ required: true, message: '请输入起点桩纬度', trigger: 'blur' }],
+    'event.endStakeNo': [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
+    'event.endStakeLongitude': [{ required: true, message: '请输入止点桩经度', trigger: 'blur' }],
+    'event.endStakeLatitude': [{ 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' }],
+    fileList: [
+      {
+        validator: (_rule, value, callback) => {
+          if (!Array.isArray(value) || value.length === 0) {
+            callback(new Error('请上传附件'))
+            return
+          }
+          callback()
+        },
+        trigger: 'change'
+      }
+    ]
+  }
+
+  const initFormData = (data = {}) => {
+    Object.assign(formData, mergeFormData(data))
+  }
+
+  const handleEventTypeChange = (value) => {
+    if (value === '水毁事件') {
+      router.replace({ path: '/waterDisasterReport' })
+    }
+  }
+
+  const handleDistrictChange = () => {
+    formData.routeNo = ''
+    formData.event.startStakeNo = ''
+    formData.event.endStakeNo = ''
+    formData.event.startStakeLongitude = null
+    formData.event.startStakeLatitude = null
+    formData.event.endStakeLongitude = null
+    formData.event.endStakeLatitude = null
+  }
+
+  const handleRouteNoChange = (item = {}) => {
+    formData.routeNo = item.routeCode || formData.routeNo
+    formData.event.startStakeNo = item.startStakeNo
+    formData.event.endStakeNo = item.endStakeNo
+
+    const startPoint = parsePointValue(item.startPoint ?? item.startpoint)
+    const endPoint = parsePointValue(item.endPoint ?? item.endpoint)
+
+    formData.event.startStakeLongitude = startPoint.longitude
+    formData.event.startStakeLatitude = startPoint.latitude
+    formData.event.endStakeLongitude = endPoint.longitude
+    formData.event.endStakeLatitude = endPoint.latitude
+  }
+
+  const handleHasStrandedVehiclesChange = (value) => {
+    if (value !== 1) {
+      formData.traffic.strandedVehicleCount = null
+    }
+  }
+
+  const buildSubmitData = () => {
+    const payload = mergeFormData(formData)
+    payload.event.routeNo = payload.routeNo
+    payload.event.occurTime = payload.occurTime
+    payload.event.eventType = eventType.value
+    payload.event.roadType = filterForm.routeType
+    payload.event.roadConditionLocation = payload.occurLocation
+    if (payload.traffic.hasStrandedVehicles !== 1) {
+      payload.traffic.strandedVehicleCount = null
+    }
+    return payload
+  }
+
+  const getFormData = () => buildSubmitData()
+
+  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 res = await request({
+        url: '/snow-ops-platform/event/addOrUpdate',
+        method: 'post',
+        data: buildSubmitData()
+      })
+
+      if (res?.code === '00000') {
+        ElMessage.success('提交成功')
+        setTimeout(() => {
+          router.replace('/disasterManagement')
+        }, 500)
+      } else {
+        ElMessage.error(res?.message || '提交失败')
+      }
+    } catch (error) {
+      console.error('提交失败:', error)
+      ElMessage.error('提交失败，请重试')
+    } finally {
+      submitting.value = false
+    }
+  }
+
+  const getDisasterDetail = async () => {
+    if (!route.query.id) {
+      return
+    }
+
+    try {
+      const result = await request({
+        url: `/snow-ops-platform/event/getById?id=${route.query.id}`,
+        method: 'get'
+      })
+
+      if (result?.data) {
+        const data = result.data
+        initFormData({
+          occurLocation: data.occurLocation || data.event?.roadConditionLocation || '',
+          occurTime: data.occurTime || data.event?.occurTime || '',
+          routeNo: data.routeNo || data.event?.routeNo || '',
+          event: {
+            ...(data.event || {})
+          },
+          material: {
+            ...(data.material || {})
+          },
+          report: {
+            ...(data.report || {})
+          },
+          traffic: {
+            ...(data.traffic || {})
+          }
+        })
+      } else {
+        ElMessage.warning(result?.message || '获取详情失败')
+      }
+    } catch (error) {
+      console.error('获取冰雪详情失败:', error)
+      ElMessage.error('获取详情失败，请稍后重试')
+    }
+  }
+
+  const handleBack = () => {
+    router.back()
+  }
+
+  onMounted(async () => {
+    await getAreaOptions()
+
+    if (route.query.id) {
+      await getDisasterDetail()
+      return
+    }
+
+    initFormData({})
+  })
+
+  return {
+    eventType,
+    filterForm,
+    formData,
+    formRef,
+    formRules,
+    handleBack,
+    handleDistrictChange,
+    handleEventTypeChange,
+    handleHasStrandedVehiclesChange,
+    handleRouteNoChange,
+    handleSubmit,
+    initFormData,
+    getFormData,
+    options,
+    routeTypeLabel,
+    strandedVehicleOptions,
+    submitting,
+    validate
+  }
+}
diff --git a/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue b/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue
index a19d11a..400497f 100644
--- a/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue
+++ b/packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue
@@ -166,7 +166,6 @@ const formData = reactive({
     district: '',
     endStakeNo: '',
     estimatedRecoveryCost: '',
-    inspectionMileage: '',
     isBlocked: '',
     needsRecovery: '',
     repairProgress: '',
@@ -317,7 +316,6 @@ const resetForm = () => {
       district: '',
       endStakeNo: '',
       estimatedRecoveryCost: '',
-      inspectionMileage: '',
       isBlocked: '',
       needsRecovery: '',
       repairProgress: '',
diff --git a/packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterLossListPC.vue b/packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterLossListPC.vue
index 18a3ad8..f96d0ca 100644
--- a/packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterLossListPC.vue
+++ b/packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterLossListPC.vue
@@ -68,6 +68,11 @@ const getLossDict = async () => {
   }
 }
 
+const changeValue = (config, event) => {
+  const item = getValueItem(config)
+  item.totalAmount = event
+}
+
 onMounted(async () => {
   await getLossDict()
 })
diff --git a/packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue b/packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue
index 2b4c4e7..632f293 100644
--- a/packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue
+++ b/packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue
@@ -1,32 +1,28 @@
 <template>
   <div class="disaster-form-page">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" class="disaster-form" @submit.prevent>
-      <!-- 基本信息区块 -->
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="disaster-form" @submit.prevent>
       <el-card class="form-section" shadow="never">
         <template #header>
           <div class="section-header">
-            <span class="section-title">基本信息</span>
+            <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-input v-model="formData.event.reporterUnit" disabled />
               </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-input v-model="formData.event.contactPhone" maxlength="11" placeholder="请填写" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -36,87 +32,60 @@
           <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 v-model="eventType" style="width: 100%" @change="handleEventTypeChange">
+                  <el-option v-for="(option, idx) in options['eventType']" :key="idx" :label="option.label" :value="option.value" />
                 </el-select>
               </el-form-item>
             </el-col>
-            <!-- 路况类别 -->
+            <el-col :span="8">
+              <el-form-item label="填报站点" prop="event.serviceStationId">
+                <YHZSelect v-model="formData.event.serviceStationId" />
+              </el-form-item>
+            </el-col>
+            <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-row>
+
+          <el-row :gutter="24">
             <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-option v-for="(option, idx) in options['waterRoadConditionType']" :key="idx" :label="option.label" :value="option.value" />
                 </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-option v-for="(option, idx) in options['repairProgress']" :key="idx" :label="option.label" :value="option.value" />
                 </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-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']" :key="idx" :label="option.label" :value="option.value" />
                 </el-select>
               </el-form-item>
             </el-col>
-            <!-- 水毁处数 -->
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="受灾里程" prop="event.blockedMileage">
+                <el-input v-model="formData.event.blockedMileage" placeholder="请填写">
+                  <template #append>公里</template>
+                </el-input>
+              </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-input v-model="formData.event.damageCount" placeholder="请填写">
+                  <template #append>处</template>
+                </el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -124,84 +93,78 @@
 
         <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-input :model-value="routeTypeLabel" readonly />
               </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-option v-for="(option, idx) in options['area']" :key="idx" :label="option.label" :value="option.value" />
                 </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 label="线路编号" prop="routeNo">
+                <RoadRoutesSelect v-model="formData.routeNo" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" @change="handleRouteNoChange" />
               </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-input v-model="formData.occurLocation" placeholder="请选择">
+                  <template #suffix>
+                    <el-icon class="location-icon"><LocationFilled /></el-icon>
+                  </template>
+                </el-input>
               </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 label="起点桩号" prop="event.startStakeNo">
+                <el-input v-model="formData.event.startStakeNo" placeholder="请填写">
+                  <template #prepend>K</template>
+                </el-input>
               </el-form-item>
             </el-col>
+          </el-row>
 
-            <!-- 纬度 -->
+          <el-row :gutter="24">
             <el-col :span="8">
-              <el-form-item label="纬度" prop="event.latitude">
-                <el-input v-model="formData.event.latitude" placeholder="纬度"> </el-input>
+              <el-form-item label="起点桩经度" prop="event.startStakeLongitude">
+                <el-input v-model="formData.event.startStakeLongitude" 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="请填写" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="止点桩号" prop="event.endStakeNo">
+                <el-input v-model="formData.event.endStakeNo" placeholder="请填写">
+                  <template #prepend>K</template>
+                </el-input>
               </el-form-item>
             </el-col>
           </el-row>
+
           <el-row :gutter="24">
             <el-col :span="8">
-              <el-form-item label="图片上传" prop="fileList">
-                <FileUpload type="image" :limit="9" v-model="formData.fileList" />
+              <el-form-item label="止点桩经度" prop="event.endStakeLongitude">
+                <el-input v-model="formData.event.endStakeLongitude" placeholder="请填写" />
               </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 label="止点桩纬度" prop="event.endStakeLatitude">
+                <el-input v-model="formData.event.endStakeLatitude" placeholder="请填写" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -211,12 +174,42 @@
       <el-card class="form-section" shadow="never">
         <template #header>
           <div class="section-header">
-            <span class="section-title">灾毁损失</span>
+            <span class="section-title">处置情况</span>
           </div>
         </template>
-        <BlockItem title="路况事件信息">
+
+        <BlockItem>
+          <el-row :gutter="24">
+            <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']" :key="idx" :label="option.label" :value="option.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="预计恢复时间" prop="report.expectRecoverTime">
+                <el-date-picker v-model="formData.report.expectRecoverTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="实际恢复时间" prop="report.actualRecoverTime">
+                <el-date-picker v-model="formData.report.actualRecoverTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
+              </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%">
@@ -226,8 +219,6 @@
                 </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%">
@@ -237,8 +228,6 @@
                 </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%">
@@ -248,8 +237,9 @@
                 </el-input-number>
               </el-form-item>
             </el-col>
+          </el-row>
 
-            <!-- 损坏车辆 -->
+          <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%">
@@ -259,8 +249,6 @@
                 </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%">
@@ -272,390 +260,110 @@
             </el-col>
           </el-row>
         </BlockItem>
-        <BlockItem title="道路损失及其他">
-          <LossList v-model:model-value="formData.report.lossList" />
+
+        <BlockItem title="灾毁损失">
+          <LossList v-model:model-value="formData.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-input v-model="formData.report.investedMachinery" placeholder="请填写">
+                  <template #append>台/班</template>
+                </el-input>
               </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="请填写">
+                <el-input-number v-model="formData.report.investedManpower" :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.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-input v-model="formData.report.investedFunds" placeholder="请填写">
+                  <template #append>万元</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="现场情况描述" prop="report.siteDescription">
+                <el-input v-model="formData.report.siteDescription" type="textarea" :rows="3" placeholder="请填写" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="16">
+              <el-form-item label="附件">
+                <FileUpload v-model="formData.fileList" type="image" :limit="9" />
               </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-option v-for="(option, idx) in options['yesNoBool']" :key="idx" :label="option.label" :value="option.value" />
                 </el-select>
               </el-form-item>
             </el-col>
-
-            <!-- 恢复重建预估费用 -->
-            <el-col :span="8" v-if="formData?.event.needsRecovery">
+            <el-col v-if="showEstimatedRecoveryCost" :span="8">
               <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-input v-model="formData.event.estimatedRecoveryCost" placeholder="请填写">
+                  <template #append>万元</template>
+                </el-input>
               </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>
+        <el-button type="primary" :loading="submitting" @click="handleSubmit">提交</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 { LocationFilled } from '@element-plus/icons-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'
+import YHZSelect from '../components/YHZSelect.vue'
+import LossList from './WaterDisasterLossListPC.vue'
+import { useWaterDisasterReport } from './useWaterDisasterReport'
 
-const router = useRouter()
-const route = useRoute()
-const { options, getAreaOptions } = useOptions()
-const formRef = ref(null)
-const submitting = ref(false)
+const {
+  eventType,
+  filterForm,
+  formData,
+  formRef,
+  formRules,
+  handleBack,
+  handleDistrictChange,
+  handleEventTypeChange,
+  handleRouteNoChange,
+  handleSubmit,
+  initFormData,
+  getFormData,
+  options,
+  routeTypeLabel,
+  showEstimatedRecoveryCost,
+  submitting,
+  validate
+} = useWaterDisasterReport()
 
-// 是否为续报
-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,
@@ -669,74 +377,55 @@ defineExpose({
   background-color: #f5f7fa;
   height: 100%;
   overflow: auto;
+}
 
-  .disaster-form {
-    .form-section {
-      margin-bottom: 20px;
+.form-section {
+  margin-bottom: 20px;
 
-      :deep(.el-card__header) {
-        padding: 12px 20px;
-        background-color: #fafafa;
-        border-bottom: 1px solid #ebeef5;
-      }
+  :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;
-    }
+  :deep(.el-card__body) {
+    padding: 20px;
   }
 }
+
+.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;
+    border-radius: 2px;
+    background-color: #409eff;
+  }
+}
+
+.location-icon {
+  color: #909399;
+}
+
+.unit-text {
+  color: #909399;
+  font-size: 12px;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding: 8px 0 32px;
+}
 </style>
diff --git a/packages/screen/src/views/DisasterManagement/WaterDisasterReport/copy.vue b/packages/screen/src/views/DisasterManagement/WaterDisasterReport/copy.vue
new file mode 100644
index 0000000..2b4c4e7
--- /dev/null
+++ b/packages/screen/src/views/DisasterManagement/WaterDisasterReport/copy.vue
@@ -0,0 +1,742 @@
+<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>
diff --git a/packages/screen/src/views/DisasterManagement/WaterDisasterReport/useWaterDisasterReport.js b/packages/screen/src/views/DisasterManagement/WaterDisasterReport/useWaterDisasterReport.js
new file mode 100644
index 0000000..84e36a8
--- /dev/null
+++ b/packages/screen/src/views/DisasterManagement/WaterDisasterReport/useWaterDisasterReport.js
@@ -0,0 +1,292 @@
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { request } from '@/utils/request'
+import { useOptions } from '@shared/composables/useOptions'
+import mockData from './waterMockJson.json'
+
+const DEFAULT_REPORTER_UNIT = '万州区公路中心'
+
+const createDefaultFormData = () => ({
+  occurLocation: '',
+  occurTime: '',
+  roadConditionType: '',
+  routeNo: '',
+  event: {
+    blockedMileage: null,
+    blockedPointName: '',
+    contactPerson: '',
+    contactPhone: '',
+    damageCount: null,
+    district: '',
+    endStakeLatitude: null,
+    endStakeLongitude: null,
+    endStakeNo: '',
+    estimatedRecoveryCost: null,
+    isBlocked: null,
+    latitude: null,
+    longitude: null,
+    needsRecovery: null,
+    repairProgress: '抢险中',
+    reportSite: '',
+    reporterUnit: DEFAULT_REPORTER_UNIT,
+    serviceStationId: '',
+    startStakeLatitude: null,
+    startStakeLongitude: null,
+    startStakeNo: ''
+  },
+  report: {
+    actualRecoverTime: '',
+    damagedVehicleCount: null,
+    deadCount: null,
+    disposalMeasures: '',
+    expectRecoverTime: '',
+    injuredCount: null,
+    investedFunds: null,
+    investedMachinery: null,
+    investedManpower: null,
+    remark: '',
+    siteDescription: '',
+    strandedPersonCount: null,
+    strandedVehicleCount: null,
+    totalLossAmount: null
+  },
+  lossList: [],
+  fileList: []
+})
+
+const mergeFormData = (source = {}) => {
+  const defaults = createDefaultFormData()
+  const merged = {
+    ...defaults,
+    ...source,
+    event: {
+      ...defaults.event,
+      ...(source.event || {})
+    },
+    report: {
+      ...defaults.report,
+      ...(source.report || {})
+    },
+    lossList: Array.isArray(source.lossList) ? source.lossList : defaults.lossList,
+    fileList: Array.isArray(source.fileList) ? source.fileList : defaults.fileList
+  }
+
+  if (!merged.event.reporterUnit) {
+    merged.event.reporterUnit = DEFAULT_REPORTER_UNIT
+  }
+  if (!merged.event.repairProgress) {
+    merged.event.repairProgress = '抢险中'
+  }
+  if (!merged.event.serviceStationId && merged.event.reportSite) {
+    merged.event.serviceStationId = merged.event.reportSite
+  }
+
+  return merged
+}
+
+export const useWaterDisasterReport = () => {
+  const router = useRouter()
+  const route = useRoute()
+  const { options, getAreaOptions } = useOptions()
+
+  const formRef = ref(null)
+  const submitting = ref(false)
+  const eventType = ref('水毁事件')
+  const filterForm = reactive({
+    routeType: ''
+  })
+  const formData = reactive(createDefaultFormData())
+
+  const routeTypeLabel = computed(() => {
+    const matched = options.value.roadType?.find((item) => item.value === filterForm.routeType)
+    return matched?.label || '国省道'
+  })
+
+  const showEstimatedRecoveryCost = computed(() => formData.event.needsRecovery === true)
+
+  const formRules = {
+    'event.contactPerson': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
+    'event.contactPhone': [
+      { required: true, message: '请输入联系电话', trigger: 'blur' },
+      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的联系电话', trigger: 'blur' }
+    ],
+    'event.serviceStationId': [{ required: true, message: '请选择填报站点', trigger: 'change' }],
+    occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
+    roadConditionType: [{ required: true, message: '请选择路况类别', trigger: 'change' }],
+    'event.repairProgress': [{ required: true, message: '请选择抢险进度', trigger: 'change' }],
+    'event.isBlocked': [{ required: true, message: '请选择是否阻断', trigger: 'change' }],
+    'event.blockedMileage': [{ required: true, message: '请输入受灾里程', trigger: 'blur' }],
+    'event.damageCount': [{ required: true, message: '请输入水毁处数', trigger: 'blur' }],
+    'event.district': [{ required: true, message: '请选择所属区县', trigger: 'change' }],
+    routeNo: [{ required: true, message: '请选择线路编号', trigger: 'change' }],
+    occurLocation: [{ required: true, message: '请输入路况位置', trigger: 'blur' }],
+    'event.blockedPointName': [{ required: true, message: '请输入阻断点小地名', trigger: 'blur' }],
+    'event.startStakeNo': [{ required: true, message: '请输入起点桩号', trigger: 'blur' }],
+    'event.startStakeLongitude': [{ required: true, message: '请输入起点桩经度', trigger: 'blur' }],
+    'event.startStakeLatitude': [{ required: true, message: '请输入起点桩纬度', trigger: 'blur' }],
+    'event.endStakeNo': [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
+    'event.endStakeLongitude': [{ required: true, message: '请输入止点桩经度', trigger: 'blur' }],
+    'event.endStakeLatitude': [{ required: true, message: '请输入止点桩纬度', trigger: 'blur' }],
+    'report.disposalMeasures': [{ required: true, message: '请选择处置措施', trigger: 'change' }],
+    'report.expectRecoverTime': [{ required: true, message: '请选择预计恢复时间', trigger: 'change' }],
+    'event.needsRecovery': [{ required: true, message: '请选择是否需要恢复重建', trigger: 'change' }],
+    'event.estimatedRecoveryCost': [
+      {
+        validator: (_rule, value, callback) => {
+          if (showEstimatedRecoveryCost.value && (value === '' || value === null || value === undefined)) {
+            callback(new Error('请输入恢复重建预估费用'))
+            return
+          }
+          callback()
+        },
+        trigger: 'blur'
+      }
+    ]
+  }
+
+  const initFormData = (data = {}) => {
+    Object.assign(formData, mergeFormData(data))
+  }
+
+  const handleEventTypeChange = (value) => {
+    if (value === '冰雪事件') {
+      router.replace({ path: '/iceDisasterReport' })
+    }
+  }
+
+  const handleDistrictChange = () => {
+    // formData.routeNo = ''
+    // formData.occurLocation = ''
+    // formData.event.startStakeNo = ''
+    // formData.event.endStakeNo = ''
+  }
+
+  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.routeNo = item.routeCode 
+    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
+  }
+
+  const buildSubmitData = () => {
+    const payload = mergeFormData(formData)
+    if (!payload.event.reportSite && payload.event.serviceStationId) {
+      payload.event.reportSite = payload.event.serviceStationId
+    }
+
+    return payload
+  }
+
+  const getFormData = () => buildSubmitData()
+
+  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 res = await request({
+        url: '/snow-ops-platform/water-damage/addOrUpdate',
+        method: 'post',
+        data: buildSubmitData()
+      })
+
+      if (res?.code === '00000') {
+        ElMessage.success('提交成功')
+        setTimeout(() => {
+          router.replace('/disasterManagement')
+        }, 500)
+      } else {
+        ElMessage.error(res?.message || '提交失败')
+      }
+    } catch (error) {
+      console.error('提交失败:', error)
+      ElMessage.error('提交失败，请重试')
+    } finally {
+      submitting.value = false
+    }
+  }
+
+
+  const handleBack = () => {
+    router.back()
+  }
+
+  onMounted(async () => {
+    await getAreaOptions()
+
+    initFormData(route.query.mock ? mockData : {})
+  })
+
+  return {
+    eventType,
+    filterForm,
+    formData,
+    formRef,
+    formRules,
+    handleBack,
+    handleDistrictChange,
+    handleEventTypeChange,
+    handleRouteNoChange,
+    handleSubmit,
+    initFormData,
+    getFormData,
+    options,
+    routeTypeLabel,
+    showEstimatedRecoveryCost,
+    submitting,
+    validate
+  }
+}
diff --git a/packages/screen/src/views/DisasterManagement/WaterDisasterReport/waterMockJson.json b/packages/screen/src/views/DisasterManagement/WaterDisasterReport/waterMockJson.json
index b4b555f..a69aea3 100644
--- a/packages/screen/src/views/DisasterManagement/WaterDisasterReport/waterMockJson.json
+++ b/packages/screen/src/views/DisasterManagement/WaterDisasterReport/waterMockJson.json
@@ -12,7 +12,6 @@
     "district": "武侯区",
     "endStakeNo": "K2251+200",
     "estimatedRecoveryCost": 120.5,
-    "inspectionMileage": 25.6,
     "isBlocked": true,
     "needsRecovery": true,
     "repairProgress": "抢险中",
diff --git a/packages/screen/src/views/DisasterManagement/components/MaterialList.vue b/packages/screen/src/views/DisasterManagement/components/MaterialList.vue
new file mode 100644
index 0000000..429f788
--- /dev/null
+++ b/packages/screen/src/views/DisasterManagement/components/MaterialList.vue
@@ -0,0 +1,170 @@
+<template>
+  <el-row class="material-list-pc" :gutter="24">
+    <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)">
+            <template #suffix>
+              <span>{{ item.dw }}</span>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-col>
+    </template>
+  </el-row>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Delete, Plus } from '@element-plus/icons-vue'
+import { request } from '@shared/utils/request'
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  yhzId: {
+    type: [Number, null, String],
+    default: null
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  colSpan: {
+    type: Number,
+    default: 8
+  }
+})
+
+watch(()=> props.yhzId, ()=> {
+  emit('update:modelValue', [])
+  getDict()
+})
+
+const getValue = (config) => {
+  const item = getValueItem(config)
+  return item?.usageAmount || 0
+}
+
+const getValueItem = (config) => {
+  let item = props.modelValue.find((v) => v.yhzid === config.yhzid)
+  if (item == null) {
+    item = { ...config }
+    props.modelValue.push(item)
+  }
+  return item
+}
+
+const changeValue = (item, value) => {
+  const index = props.modelValue.findIndex((v) => v.yhzid === item.yhzid)
+  if (index > -1) {
+    props.modelValue[index].usageAmount = value
+  }
+}
+
+const configs = ref([])
+
+// 获取字典
+const getDict = async () => {
+  if(!props.yhzId) return []
+  try {
+    const res = await request({
+      url: `/snow-ops-platform/yjwz/list?yhzid=${props.yhzId}&pageNum=1&pageSize=9999`,
+      method: 'get'
+    })
+    configs.value = res.data?.records
+  } catch (error) {
+    console.error('获取物质列表失败:', error)
+  }
+}
+</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>
diff --git a/packages/screen/src/views/DisasterManagement/components/RoadRoutesSelect.vue b/packages/screen/src/views/DisasterManagement/components/RoadRoutesSelect.vue
index 9fc1342..030ea7a 100644
--- a/packages/screen/src/views/DisasterManagement/components/RoadRoutesSelect.vue
+++ b/packages/screen/src/views/DisasterManagement/components/RoadRoutesSelect.vue
@@ -6,7 +6,7 @@
       </template>
     </el-input>
 
-    <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" :append-to-body="true" :modal="true" @close="handleDialogClose">
+    <el-dialog v-model="dialogVisible" :header="dialogTitle" :width="dialogWidth" :append-to-body="true" :modal="true" @close="handleDialogClose">
       <div class="dialog-content">
         <div class="title">已选择地点路线：{{ tempSelectedItem?.routeCode }}</div>
 
diff --git a/packages/screen/src/views/DisasterManagement/components/YHZSelect.vue b/packages/screen/src/views/DisasterManagement/components/YHZSelect.vue
new file mode 100644
index 0000000..b74bc6c
--- /dev/null
+++ b/packages/screen/src/views/DisasterManagement/components/YHZSelect.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="selector-component">
+    <el-input :modelValue="tempSelectedItem?.mc" :placeholder="placeholder" readonly @click="openDialog">
+      <template #suffix>
+        <el-icon><ArrowDown /></el-icon>
+      </template>
+    </el-input>
+
+    <el-dialog v-model="dialogVisible" :header="dialogTitle" :width="dialogWidth" :append-to-body="true" :modal="true" @close="handleDialogClose">
+      <div class="dialog-content">
+        <div class="title">已选择养护站：{{ tempSelectedItem?.mc }}</div>
+
+        <el-input v-model="searchKeyword" :placeholder="searchPlaceholder" clearable @input="handleSearch" />
+
+        <el-table :data="dataList" v-loading="loading" height="350" @row-click="handleRowClick" highlight-current-row>
+          <el-table-column prop="mc" label="服务站名称" />
+          <el-table-column prop="qxmc" label="区县名称" />
+        </el-table>
+
+        <div class="pagination-wrapper" v-if="total > 0">
+          <el-pagination
+            v-model:current-page="currentPage"
+            :page-size="pageSize"
+            :total="total"
+            :page-sizes="pageSizes"
+            layout="prev, pager, next, sizes"
+            @current-change="handlePageChange"
+            @size-change="handleSizeChange"
+          />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onUnmounted, watch } from 'vue'
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { request } from '@shared/utils/request'
+
+// ==================== Props ====================
+const props = defineProps({
+  // v-model 绑定的值
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  // 占位符文本
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  // 弹窗标题
+  dialogTitle: {
+    type: String,
+    default: '选择地点路线'
+  },
+  // 弹窗宽度
+  dialogWidth: {
+    type: String,
+    default: '500px'
+  },
+  // 搜索框占位符
+  searchPlaceholder: {
+    type: String,
+    default: '请输入关键词搜索'
+  },
+  // 请求接口地址
+  apiUrl: {
+    type: String,
+    default: '/snow-ops-platform/yhz/list'
+  },
+  // 每页大小
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  // 每页大小选项
+  pageSizes: {
+    type: Array,
+    default: () => [10, 20, 50]
+  },
+  // 额外请求参数
+  extraParams: {
+    type: Object,
+    default: () => ({})
+  },
+  // 搜索防抖延迟时间(ms)
+  searchDelay: {
+    type: Number,
+    default: 1000
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// ==================== 状态 ====================
+const dialogVisible = ref(false)
+const searchKeyword = ref('')
+const dataList = ref([])
+const loading = ref(false)
+const currentPage = ref(1)
+const pageSize = ref(props.pageSize)
+const total = ref(0)
+
+// 临时选中的数据（确定前暂存）
+const tempSelectedItem = ref(null)
+
+// 防抖定时器
+let searchTimer = null
+
+// 已确认选中的值
+const selectedValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+watch(() => props.modelValue, () => {
+  if(props.modelValue != tempSelectedItem.value?.id) {
+    tempSelectedItem.value = null
+  }
+})
+
+// ==================== API 请求 ====================
+const fetchData = async () => {
+  loading.value = true
+
+  try {
+    const params = {
+      pageNum: currentPage.value,
+      pageSize: pageSize.value,
+    }
+
+    // 如果有搜索关键词，添加到参数中
+    if (searchKeyword.value) {
+      params.mc = searchKeyword.value
+    }
+
+    const response = await request({
+      url: props.apiUrl,
+      method: 'get',
+      params
+    })
+
+    if (response?.code === '00000') {
+      const records = response.data.records || []
+      total.value = response.data.total || 0
+
+      // 统一格式化数据，便于内部使用
+      dataList.value = records
+    } else {
+      ElMessage.error(response.message || '加载失败')
+      dataList.value = []
+      total.value = 0
+    }
+  } catch (error) {
+    console.error('请求失败:', error)
+    ElMessage.error('加载失败，请重试')
+    dataList.value = []
+    total.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 带防抖的搜索函数
+const debouncedSearch = () => {
+  // 清除之前的定时器
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+  }
+  
+  // 设置新的定时器
+  searchTimer = setTimeout(() => {
+    currentPage.value = 1
+    fetchData()
+  }, props.searchDelay)
+}
+
+// ==================== 事件处理 ====================
+const openDialog = () => {
+  dialogVisible.value = true
+  // 重置状态
+  searchKeyword.value = tempSelectedItem.value?.mc || ''
+  currentPage.value = 1
+  fetchData()
+}
+
+const handleDialogClose = () => {
+  dialogVisible.value = false
+  // 关闭弹窗时清除防抖定时器
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+  }
+}
+
+const handleSearch = () => {
+  // 使用防抖处理搜索
+  debouncedSearch()
+}
+
+const handlePageChange = (page) => {
+  currentPage.value = page
+  fetchData()
+}
+
+const handleSizeChange = (size) => {
+  pageSize.value = size
+  currentPage.value = 1
+  fetchData()
+}
+
+const handleRowClick = (row) => {
+  tempSelectedItem.value = row
+  selectedValue.value = tempSelectedItem.value.id
+  dialogVisible.value = false
+  emit('change', tempSelectedItem.value)
+}
+
+// ==================== 清理定时器 ====================
+onUnmounted(() => {
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.selector-component {
+  width: 100%;
+
+  :deep(.el-input__wrapper) {
+    cursor: pointer;
+
+    .el-input__inner {
+      cursor: pointer;
+    }
+  }
+}
+
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .pagination-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 8px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/shared/composables/useOptions.js b/packages/shared/composables/useOptions.js
index d50d0bc..a1a3c09 100644
--- a/packages/shared/composables/useOptions.js
+++ b/packages/shared/composables/useOptions.js
@@ -48,6 +48,12 @@ export function useOptions() {
     { label: '限制通行', value: '限制通行' }
   ]
 
+  // 冰灾 处理措施
+  options.value['iceDisposalMeasures'] = [
+    { label: '封闭交通', value: '封闭交通' },
+    { label: '限速通行', value: '限速通行' },
+  ]
+
   // 路线类型
   options.value['roadType'] = [
     { label: '国道', value: 'G' },

From 1a4041cb492cab4308ece8ad92c63be3b6bca73e Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Fri, 17 Apr 2026 14:37:53 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=E6=B6=88=E6=81=AF=E6=8E=A8?=
 =?UTF-8?q?=E9=80=81=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/screen/src/router/index.js           |  11 +
 .../src/views/WarningManagement/law/index.js  |   7 +
 .../src/views/WarningManagement/law/index.vue |   1 +
 .../law/messageManagement/addDialog.vue       | 267 ++++++++++++++++++
 .../law/messageManagement/index.js            | 224 +++++++++++++++
 .../law/messageManagement/index.vue           | 121 ++++++++
 6 files changed, 631 insertions(+)
 create mode 100644 packages/screen/src/views/WarningManagement/law/messageManagement/addDialog.vue
 create mode 100644 packages/screen/src/views/WarningManagement/law/messageManagement/index.js
 create mode 100644 packages/screen/src/views/WarningManagement/law/messageManagement/index.vue

diff --git a/packages/screen/src/router/index.js b/packages/screen/src/router/index.js
index 13d592b..5992040 100644
--- a/packages/screen/src/router/index.js
+++ b/packages/screen/src/router/index.js
@@ -190,6 +190,17 @@ const routes = [
       parentRoute: 'warningManagement3'
     }
   },
+  {
+    path: '/messageManagement',
+    name: 'messageManagement',
+    component: () => import('../views/WarningManagement/law/messageManagement/index.vue'),
+    meta: {
+      title: '消息推送设置',
+      breadcrumb: true,
+      parentRoute: 'warningManagement3'
+    }
+  },
+
 
   // 项目管理 - 区县
   {
diff --git a/packages/screen/src/views/WarningManagement/law/index.js b/packages/screen/src/views/WarningManagement/law/index.js
index 2f731a6..5453d4b 100644
--- a/packages/screen/src/views/WarningManagement/law/index.js
+++ b/packages/screen/src/views/WarningManagement/law/index.js
@@ -372,6 +372,12 @@ export default () => {
             path: '/dutyManagement'
         });
     };
+    // 跳转到消息推送设置
+    const gotoMessagePage = () => {
+        router.push({
+            path: '/messageManagement'
+        });
+    }
 
     onMounted(() => {
         getTableData();
@@ -396,6 +402,7 @@ export default () => {
         columns,
         gotoLedgerPage,
         gotoDutyPage,
+        gotoMessagePage,
 
         modelVisible,
         model,
diff --git a/packages/screen/src/views/WarningManagement/law/index.vue b/packages/screen/src/views/WarningManagement/law/index.vue
index 5bb49f2..1677d54 100644
--- a/packages/screen/src/views/WarningManagement/law/index.vue
+++ b/packages/screen/src/views/WarningManagement/law/index.vue
@@ -17,6 +17,7 @@
             <el-button type="primary" @click="script.gotoLedgerPage">线下帮扶台账</el-button>
             <el-button type="primary" @click="script.openScheduleDiaog">立即排班</el-button>
             <el-button type="primary" @click="script.gotoDutyPage">值班管理</el-button>
+            <el-button type="primary" @click="script.gotoMessagePage">消息推送设置</el-button>
             <el-button type="primary" color="#952DE6" @click="">导出</el-button>
             <input type="file" ref="fileInput" style="display: none" @change="handleFileSelect" accept=".*"></input>
             <!-- <el-button type="primary" @click="script.gotoLedgerPage">驻地台账</el-button> -->
diff --git a/packages/screen/src/views/WarningManagement/law/messageManagement/addDialog.vue b/packages/screen/src/views/WarningManagement/law/messageManagement/addDialog.vue
new file mode 100644
index 0000000..bac4316
--- /dev/null
+++ b/packages/screen/src/views/WarningManagement/law/messageManagement/addDialog.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="detail-container">
+    <el-form ref="formRef" :model="form" label-position="right" label-width="auto"
+      style="max-height: 60vh; overflow-y: hidden; padding-right: 50px" :rules="rules">
+
+      <el-form-item label="" prop="schedules">
+        <div class="user-select-container">
+          <!-- 左侧用户列表 -->
+          <div class="user-list-panel">
+            <div class="panel-title">用户列表</div>
+            <div class="user-list">
+              <div v-for="user in currentUsers" :key="user.userId" class="user-item"
+                :class="{ 'selected': isUserSelected(user) }" @click="toggleUserSelection(user)">
+                <span class="user-name">{{ user.realName || user.nickName || user.account }}</span>
+                <span class="user-position">{{ user.positionName }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 右侧已选择用户 -->
+          <div class="selected-panel">
+            <div class="panel-title">已选择用户 ({{ selectedUsers.length }})</div>
+            <div class="selected-user-list">
+              <div v-for="user in selectedUsers" :key="user.userId" class="selected-user-item">
+                <div class="user-info">
+                  <span class="user-name">{{ user.realName || user.nickName || user.account }}</span>
+                  <span class="user-position">{{ user.positionName }}</span>
+                </div>
+                <el-button type="danger" size="small" icon="Delete" circle @click.stop="removeSelectedUser(user)" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-form-item>
+
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from "vue";
+import { request } from "@/utils/request";
+import { ElMessage } from 'element-plus';
+
+const formRef = ref(null);
+
+// 当前显示的用户列表
+const currentUsers = ref([]);
+// 已选择的用户列表
+const selectedUsers = ref([]);
+
+defineExpose({
+  formRef,
+});
+const props = defineProps({
+  form: {
+    type: Object,
+    default: () => ({}),
+  },
+  orgId: {
+    type: String,
+    default: ''
+  },
+  orgName: {
+    type: String,
+    default: ''
+  }
+});
+
+
+const rules = computed(() => {
+  return {
+
+  };
+});
+
+// 检查用户是否已被选择
+const isUserSelected = (user) => {
+  return selectedUsers.value.some(selected => selected.userId === user.userId);
+};
+
+// 切换用户选择状态
+const toggleUserSelection = (user) => {
+  if (isUserSelected(user)) {
+    removeSelectedUser(user);
+  } else {
+    // 添加用户时初始化时间范围和orgId
+    selectedUsers.value.push({
+      // ...user,
+      // orgId: user.orgId, // 确保包含orgId
+      // timeRange: null
+      ...user,
+      orgId: user.orgId,
+      orgName: props.orgName,
+      userId: user.userId,
+      userAccount: user.account,
+      userPhone: user.phone
+    });
+  }
+};
+
+// 移除已选择的用户
+const removeSelectedUser = (user) => {
+  const index = selectedUsers.value.findIndex(selected => selected.userId === user.userId);
+  if (index > -1) {
+    selectedUsers.value.splice(index, 1);
+  }
+};
+
+// 根据组织ID查询用户列表
+const getUsersByOrgId = async (orgId) => {
+  // console.log('@@@@@', orgId);
+  try {
+    const res = await request({
+      url: '/snow-ops-platform/user/orgUsers',
+      method: 'GET',
+      params: {
+        orgId
+      }
+    })
+    if (res.code === '00000') {
+      currentUsers.value = res.data || [];
+      // console.log('@@@@@', res.data);
+    } else {
+      throw new Error(res.message)
+    }
+  } catch (error) {
+    ElMessage.error('获取用户失败');
+    console.error('获取用户失败:', error);
+  }
+}
+
+onMounted(() => {
+  getUsersByOrgId(props.orgId);
+})
+
+watch(selectedUsers.value, (val) => {
+  props.form.data = val;
+}, { deep: true })
+
+</script>
+
+<style scoped>
+.form-part {
+  padding: 20px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.user-select-container {
+  display: flex;
+  gap: 20px;
+  width: 100%;
+  height: 60vh;
+}
+
+.user-list-panel {
+  flex: 1;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: #fff;
+  height: 100%;
+}
+
+.selected-panel {
+  flex: 1;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.user-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.user-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid transparent;
+}
+
+.user-item:hover {
+  background-color: #f5f7fa;
+}
+
+.user-item.selected {
+  background-color: #409eff;
+  color: white;
+  border-color: #409eff;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.user-position {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.selected-user-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.selected-user-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  background-color: #f0f9ff;
+  border: 1px solid #e1f5fe;
+  gap: 12px;
+}
+
+.time-picker-container {
+  flex: 1.2;
+  min-width: 280px;
+}
+
+.time-picker-container :deep(.el-date-editor) {
+  width: 100%;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  flex: 0.8;
+}
+
+.selected-user-item .user-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.selected-user-item .user-position {
+  font-size: 12px;
+  color: #606266;
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/packages/screen/src/views/WarningManagement/law/messageManagement/index.js b/packages/screen/src/views/WarningManagement/law/messageManagement/index.js
new file mode 100644
index 0000000..bd41e74
--- /dev/null
+++ b/packages/screen/src/views/WarningManagement/law/messageManagement/index.js
@@ -0,0 +1,224 @@
+import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
+import { request } from "@/utils/request";
+import { useRoute, useRouter } from 'vue-router'
+import AddDialog from "./addDialog.vue";
+
+const modelVisible = ref(false); // 弹窗状态
+const drawerVisible = ref(false); // 抽屉状态
+// 弹窗内容
+const model = reactive({
+
+});
+const form = reactive({
+
+});
+const INIT_FORM = {
+
+};
+// 抽屉内容
+const drawer = reactive({
+    title: '',
+    content: null,
+    props: {},
+    onCancel: null,
+    onConfirm: null,
+    direction: 'rtl',
+    size: '50%'
+});
+const dialogRef = ref(null); // 弹窗实例
+const drawerRef = ref(null); // 抽屉实例
+
+// 消息推送组织列表（固定六个），增加personList存储该组织的人员数组
+const messageOrgList = ref([
+    { title: '中心领导', orgName: '中心领导', personList: [] },
+    { title: '法规处', orgName: '法规处', personList: [] },
+    { title: '养护处', orgName: '养护处', personList: [] },
+    { title: '农村公路处', orgName: '农村公路处', personList: [] },
+    { title: '建设处', orgName: '建设处', personList: [] },
+    { title: '市公路应急中心/管理段', orgName: '公路管理段', personList: [] },
+])
+
+const messagePushPerson = ref([])
+const userOrgsList = ref([])
+
+// 查询所有消息推送人员
+const getAllMessagePushPerson = async () => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/messagePushPerson/listAll',
+            method: 'GET',
+        })
+        if (res.code === '00000') {
+            messagePushPerson.value = res.data
+
+            // 按orgId分组填充人员数据到对应组织
+            messageOrgList.value.forEach(org => {
+                org.personList = messagePushPerson.value.filter(person => person.orgId === org.orgId)
+            });
+
+            // console.log('@@@@@@', messageOrgList.value);
+
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error('获取消息推送人员失败');
+        console.error('获取消息推送人员失败:', error);
+    }
+}
+
+
+// 查询所有组织
+const getUserOrgs = async () => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/user/userOrgs',
+            method: 'GET',
+        })
+        if (res.code === '00000') {
+            userOrgsList.value = res.data.data
+
+            // 遍历后端返回的组织数据，与固定组织列表匹配并赋值orgId
+            messageOrgList.value.forEach(fixedOrg => {
+                const matchedOrg = userOrgsList.value.find(org =>
+                    org.orgName === fixedOrg.orgName
+                );
+                if (matchedOrg) {
+                    fixedOrg.orgId = matchedOrg.orgId;
+                }
+            });
+
+            // 在获取到orgId后，立即根据orgId填充对应的人员数据
+            messageOrgList.value.forEach(org => {
+                org.personList = messagePushPerson.value.filter(person => person.orgId === org.orgId)
+            });
+
+            // console.log('@@@@',messageOrgList.value);
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error('获取组织失败');
+        console.error('获取组织失败:', error);
+    }
+}
+
+// 添加消息推送人
+const handelAdd = async (data) => {
+    try {
+        const loading = ElLoading.service({
+            lock: true,
+            text: '操作中',
+            background: 'rgba(0, 0, 0, 0.7)',
+        })
+        const res = await request({
+            url: '/snow-ops-platform/messagePushPerson/add',
+            method: 'POST',
+            data: data
+        })
+        loading.close();
+        if (res.code === '00000') {
+            ElMessage.success('添加成功');
+            modelVisible.value = false;
+            await getAllMessagePushPerson();
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        ElMessage.error('添加失败');
+        console.error('添加失败:', error);
+    }
+}
+
+
+// 打开添加人员弹窗
+const openAddDialog = (orgId, orgName) => {
+    model.title = '添加人员';
+    Object.assign(form, INIT_FORM);
+    model.props = {
+        orgId: orgId,
+        orgName: orgName,
+        form: form,
+    };
+    model.content = AddDialog;
+    model.onCancel = () => {
+        modelVisible.value = false;
+    };
+    model.onConfirm = async () => {
+        await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(async () => {
+            // console.log('@@@@@@form',form);
+            await handelAdd(form.data)
+            // await addSchedule(form)
+            // await publishWarning(form)
+        })
+            .catch((err) => {
+                ElMessage.error('请处理表单中的错误项');
+            });
+    };
+    model.width = "70%"
+    modelVisible.value = true;
+}
+
+// 删除消息推送人
+const deletePushPerson = async (person) => {
+    try {
+        await ElMessageBox.confirm(
+            `确定要删除【${person.realName}】吗？`,
+            '删除确认',
+            {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        )
+        const loading = ElLoading.service({
+            lock: true,
+            text: '操作中',
+            background: 'rgba(0, 0, 0, 0.7)',
+        })
+        const res = await request({
+            url: '/snow-ops-platform/messagePushPerson/deleteByUserId',
+            method: 'POST',
+            data: {
+                userId: person.userId
+            }
+        })
+        loading.close();
+        if (res.code === '00000') {
+            ElMessage.success('删除成功');
+            await getAllMessagePushPerson();
+        } else {
+            throw new Error(res.message)
+        }
+    } catch (error) {
+        if (error !== 'cancel') {
+            ElMessage.error('删除失败');
+            console.error('删除失败:', error);
+        }
+    }
+}
+
+export default () => {
+
+    const router = useRouter();
+
+    onMounted(async () => {
+        await getUserOrgs();
+        await getAllMessagePushPerson();
+
+    })
+
+    return {
+        modelVisible,
+        model,
+        drawerVisible,
+        drawer,
+        dialogRef,
+        drawerRef,
+        openAddDialog,
+        deletePushPerson,
+
+        messageOrgList,
+
+    }
+}
\ No newline at end of file
diff --git a/packages/screen/src/views/WarningManagement/law/messageManagement/index.vue b/packages/screen/src/views/WarningManagement/law/messageManagement/index.vue
new file mode 100644
index 0000000..2920ca2
--- /dev/null
+++ b/packages/screen/src/views/WarningManagement/law/messageManagement/index.vue
@@ -0,0 +1,121 @@
+<template>
+    <div class="root">
+        <div class="content-box">
+            <el-card shadow="never" v-for="org in script.messageOrgList.value" class="org-box">
+                <template #header>
+                    <div class="card-header">
+                        <span>{{ org.title }}</span>
+                        <el-button type="primary" size="small" text
+                            @click="script.openAddDialog(org.orgId, org.orgName)">添加</el-button>
+                    </div>
+                </template>
+                <!-- 人员列表 -->
+                <div class="person-list">
+                    <div v-if="org.personList.length === 0" class="empty-text">暂无人员</div>
+                    <div v-else class="person-item" v-for="person in org.personList" :key="person.userId">
+                        <div class="person-info">
+                            <span class="name">{{ person.realName }}</span>
+                            <!-- <span class="account">({{ person.userAccount }})</span> -->
+                            <span class="phone" v-if="person.userPhone">{{ person.userPhone }}</span>
+                        </div>
+                        <el-button type="danger" size="small" text @click="script.deletePushPerson(person)">删除</el-button>
+                    </div>
+                </div>
+            </el-card>
+        </div>
+        <div class="model-box">
+            <MyDialog v-model="script.modelVisible.value" :title="script.model?.title"
+                :dynamicComponent="script.model?.content" :component-props="script.model?.props"
+                :onConfirm="script.model?.onConfirm" :onCancel="script.model?.onCancel" ref="dialogRef"
+                :width="script.model?.width">
+            </MyDialog>
+            <MyDrawer v-model="script.drawerVisible.value" :title="script.drawer?.title"
+                :dynamicComponent="script.drawer?.content" :component-props="script.drawer?.props"
+                :onConfirm="script.drawer?.onConfirm" :onCancel="script.drawer?.onCancel" ref="drawerRef"
+                :direction="script.drawer?.direction" :size="script.drawer?.size">
+            </MyDrawer>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import DynamicTable from "@/component/DynamicTable/index.js";
+import { Search, ArrowDown } from "@element-plus/icons-vue";
+import MyDialog from "@/component/MyDialog/index.js";
+import MyDrawer from "@/component/MyDrawer/index.js";
+import scriptFn from "./index.js";
+const script = scriptFn();
+const { dialogRef, drawerRef } = script;
+
+</script>
+
+<style scoped>
+.root {
+    height: 100%;
+    padding: 25px;
+}
+
+.content-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.org-box {
+    flex: 1;
+    height: 100%;
+    min-width: fit-content;
+}
+
+.card-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    white-space: nowrap;
+    align-items: center;
+}
+
+.person-list {
+    margin-top: 10px;
+}
+
+.empty-text {
+    color: #999;
+    text-align: center;
+    padding: 20px 0;
+}
+
+.person-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.person-item:last-child {
+    border-bottom: none;
+}
+
+.person-info {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.name {
+    font-weight: bold;
+}
+
+.account {
+    color: #666;
+    font-size: 0.9em;
+}
+
+.phone {
+    color: #666;
+    font-size: 0.9em;
+}
+</style>
\ No newline at end of file