bdzl2/bxztApp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 水毁表单重构

Browse Source
This commit is contained in:
niedongsheng 2026-04-09 14:14:00 +08:00
parent 895741ec4a
commit 1c4e6621d5
5 changed files with 594 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/screen/src/component/BlockItem.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<div class="block-item">
<slot v-if="title" name="header">
<div class="header">
<div class="header-title">{{ title }}</div>
<div class="header-extra" v-if="$slots.headerExtra">
<slot name="headerExtra"></slot>
</div>
</div>
</slot>
<slot />
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
const props = defineProps({
title: {
type: String,
default: ''
},
})
</script>
<style scoped lang="scss">
.block-item {
position: relative;
width: 100%;
& + .block-item {
margin-top: 10px;
}
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.header-title {
font-weight: 500;
font-size: 15px;
color: #4a4a4a;
line-height: 16px;
}
</style>

6
packages/screen/src/views/DisasterManagement/DisasterDetail/ContinueReport.vue
View File

@ -78,9 +78,7 @@
</el-form-item>
<!-- 损失列表组件 -->
<el-form-item label="灾毁损失">
<loss-list v-model="formData.lossList" />
</el-form-item>
<loss-list :col-span="24" v-model="formData.lossList" />
<!-- 处理情况 -->
<el-form-item label="处理情况">
@ -140,7 +138,7 @@
import { ref, reactive, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { request } from '@shared/utils/request'
// import LossList from './LossList.vue'
import LossList from '../DisasterReport/LossList.vue'
// Props 定义
const props = defineProps({

16
packages/screen/src/views/DisasterManagement/DisasterManagement.vue
View File

@ -90,9 +90,9 @@
<el-table-column prop="routeNo" label="所属区县" min-width="120" />
<el-table-column prop="routeNo" label="路线编号" min-width="120" />
<el-table-column prop="routeName" label="路线名称" min-width="150" show-overflow-tooltip />
<el-table-column prop="startPile" label="起点桩号" min-width="110" />
<el-table-column prop="endPile" label="终点桩号" min-width="110" />
<el-table-column prop="occurLocation" label="发生地点" min-width="180" show-overflow-tooltip />
<el-table-column prop="startPile" label="起点桩号" min-width="110" show-overflow-tooltip />
<el-table-column prop="endPile" label="终点桩号" min-width="110" show-overflow-tooltip />
<el-table-column prop="roadConditionLocation" label="路况位置" min-width="150" show-overflow-tooltip />
<el-table-column prop="isBlocked" label="是否阻断" width="90" align="center">
<template #default="{ row }">
<el-tag :type="row.isBlocked === '是' ? 'danger' : 'success'" size="small">
@ -100,8 +100,8 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="disasterType" label="灾害类型" min-width="120" />
<el-table-column prop="roadConditionType" label="路线类别" min-width="110" />
<el-table-column prop="disasterType" label="事件类型" min-width="120" show-overflow-tooltip />
<el-table-column prop="roadConditionType" label="路况类别" min-width="110" show-overflow-tooltip />
<el-table-column prop="eventStatus" label="事件状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="row.eventStatus === 1 ? 'success' : 'danger'" size="small">
@ -109,8 +109,8 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="measure" label="处理措施" min-width="120" show-overflow-tooltip />
<el-table-column prop="occurTime" label="发生时间" width="170" />
<el-table-column prop="measure" label="处理措施" min-width="150" show-overflow-tooltip />
<el-table-column prop="occurTime" label="发现时间" width="170" />
<el-table-column prop="expectRecoverTime" label="预计恢复时间" width="170" />
<el-table-column prop="contactPerson" label="联系人" width="110" />
<el-table-column prop="contactPhone" label="联系电话" width="120" />
@ -400,4 +400,4 @@ onMounted(() => {
border-top: 1px solid #ebeef5;
}
}
</style>
</style>

148
packages/screen/src/views/DisasterManagement/DisasterReport/LossList.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<el-row class="loss-list-pc" :gutter="24">
<el-col :span="colSpan" v-for="(item, index) in configs" :key="index">
<el-form-item :label="item.lossTypeName">
<el-input :modelValue="getValue(item)" @update:modelValue="(event) => changeValue(item, event)">
<template #suffix>
<span>{{ item.unit }}</span>
</template>
</el-input>
</el-form-item>
</el-col>
</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({
modelValue: {
type: Array,
default: () => []
},
colSpan: {
type: Number,
default: 8
}
})
const getValue = (config) => {
const value = props.modelValue.find((v) => v.lossTypeId === config.lossTypeId)
if (value == null) props.modelValue.push({ ...config })
return value?.totalAmount || 0
}
const configs = ref([])
// 获取损失类型字典
const getLossDict = async () => {
try {
const res = await request({
url: '/snow-ops-platform/water-damage/loss/typeAndInfo',
method: 'get'
})
configs.value = res.data?.records
} catch (error) {
console.error('获取损失类型失败:', error)
ElMessage.error('获取损失类型失败')
}
}
onMounted(async () => {
await getLossDict()
})
</script>
<style scoped lang="scss">
.loss-list-pc {
width: 100%;
.loss-table {
margin-bottom: 16px;
:deep(.el-table) {
.amount-cell {
display: flex;
align-items: center;
gap: 8px;
.unit-text {
color: #909399;
font-size: 14px;
white-space: nowrap;
}
}
}
}
.add-button-wrapper {
display: flex;
justify-content: flex-start;
}
.calculate-form {
padding: 8px 0;
:deep(.el-form-item) {
margin-bottom: 20px;
}
}
.calculation-preview {
background-color: #f5f7fa;
border-radius: 8px;
padding: 16px;
margin-top: 16px;
.preview-item {
display: flex;
justify-content: space-between;
align-items: center;
.preview-label {
color: #606266;
font-size: 14px;
}
.preview-value {
color: #f56c6c;
font-size: 16px;
font-weight: 500;
}
}
}
.loss-picker-content {
max-height: 400px;
overflow-y: auto;
padding: 8px 0;
.loss-radio-group {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
.loss-radio-item {
margin: 0;
padding: 10px 12px;
border-radius: 6px;
width: 100%;
box-sizing: border-box;
:deep(.el-radio__label) {
width: calc(100% - 22px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
</style>

825
packages/screen/src/views/DisasterManagement/DisasterReport/WaterDisasterReport.vue
View File

@ -9,405 +9,357 @@
</div>
</template>
<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 label="高速公路" value="高速公路" />
<el-option label="国道" value="国道" />
<el-option label="省道" value="省道" />
<el-option label="县道" value="县道" />
<el-option label="乡道" value="乡道" />
<el-option label="村道" value="村道" />
</el-select>
</el-form-item>
</el-col>
<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>
<!-- 是否阻断 -->
<el-col :span="8">
<el-form-item label="是否阻断" prop="event.isBlocked">
<el-select v-model="formData.event.isBlocked" placeholder="请选择" style="width: 100%">
<el-option label="是" :value="true" />
<el-option label="否" :value="false" />
</el-select>
</el-form-item>
</el-col>
<BlockItem title="路况事件信息">
<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 label="水毁事件" value="水毁事件" />
<el-option label="冰雪事件" value="冰雪事件" />
</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 label="高速公路" value="高速公路" />
<el-option label="国道" value="国道" />
<el-option label="省道" value="省道" />
<el-option label="县道" value="县道" />
<el-option label="乡道" value="乡道" />
<el-option label="村道" value="村道" />
</el-select>
</el-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 label="是" :value="true" />
<el-option label="否" :value="false" />
</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 label="未抢险" value="未抢险" />
<el-option label="抢险中" value="抢险中" />
</el-select>
</el-form-item>
</el-col>
<!-- 处理措施-->
<el-col :span="8">
<el-form-item label="处理措施" prop="event.repairProgress">
<el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
<el-option label="全幅封闭" value="全幅封闭" />
<el-option label="半幅封闭" value="半幅封闭" />
<el-option label="正常通行" value="正常通行" />
<el-option label="限制通行" value="限制通行" />
</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>
<!-- 抢修进度 -->
<el-col :span="8">
<el-form-item label="抢修进度" prop="event.repairProgress">
<el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
<el-option label="未抢修" value="未抢修" />
<el-option label="抢修中" value="抢修中" />
<el-option label="已完成" value="已完成" />
</el-select>
</el-form-item>
</el-col>
<BlockItem title="位置信息">
<el-row :gutter="24">
<!-- 线路编号 -->
<el-col :span="8">
<el-form-item label="路线类型" prop="routeNo">
<el-input v-model="formData.routeNo" placeholder="请填写" />
</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%">
<el-option label="万州区" value="万州区" />
<el-option label="开州区" value="开州区" />
<el-option label="黔江区" value="黔江区" />
<el-option label="涪陵区" value="涪陵区" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="地点路线" prop="routeNo">
<el-input v-model="formData.routeNo" placeholder="请填写" />
</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.startStakeLng">
<el-input v-model="formData.event.startStakeLng" placeholder="经度"> </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="请填写" />
<span class="unit-suffix">处</span>
</el-form-item>
</el-col>
<!-- 阻断里程 -->
<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="请填写" />
<span class="unit-suffix">公里</span>
</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-col :span="8">
<el-form-item label="线路编号" prop="routeNo">
<el-input v-model="formData.routeNo" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 填报单位（新增字段） -->
<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-col :span="8">
<el-form-item label="所属区县" prop="event.district">
<el-select v-model="formData.event.district" placeholder="请选择" style="width: 100%">
<el-option label="万州区" value="万州区" />
<el-option label="开州区" value="开州区" />
<el-option label="黔江区" value="黔江区" />
<el-option label="涪陵区" value="涪陵区" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 位置信息区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">位置信息</span>
</div>
</template>
<el-row :gutter="24">
<!-- 起点桩号 -->
<el-col :span="8">
<el-form-item label="起点桩号(K)" prop="event.startStakeNo">
<el-input v-model="formData.event.startStakeNo" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 起点经度 -->
<el-col :span="8">
<el-form-item label="起点经度" prop="event.startStakeLng">
<el-input v-model="formData.event.startStakeLng" placeholder="经度" />
</el-form-item>
</el-col>
<!-- 起点纬度 -->
<el-col :span="8">
<el-form-item label="起点纬度" prop="event.startStakeLat">
<el-input v-model="formData.event.startStakeLat" placeholder="纬度" />
</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="请填写" />
</el-form-item>
</el-col>
<!-- 止点经度 -->
<el-col :span="8">
<el-form-item label="止点经度" prop="event.endStakeLng">
<el-input v-model="formData.event.endStakeLng" placeholder="经度" />
</el-form-item>
</el-col>
<!-- 止点纬度 -->
<el-col :span="8">
<el-form-item label="止点纬度" prop="event.endStakeLat">
<el-input v-model="formData.event.endStakeLat" placeholder="纬度" />
</el-form-item>
</el-col>
<!-- 路况位置 -->
<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-card>
<!-- 处置情况区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">处置情况</span>
</div>
</template>
<el-row :gutter="24">
<!-- 处置措施（多选） -->
<el-col :span="24">
<el-form-item label="处置措施" prop="report.disposalMeasures">
<el-checkbox-group v-model="disposalMeasuresArray">
<el-checkbox label="halfClose">半幅封闭</el-checkbox>
<el-checkbox label="fullClose">全副封闭</el-checkbox>
<el-checkbox label="bypass">便道通行</el-checkbox>
<el-checkbox label="normal">正常通行</el-checkbox>
</el-checkbox-group>
</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>
</el-card>
<!-- 人员车辆区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">人员车辆</span>
</div>
</template>
<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%" />
<span class="unit-suffix">人</span>
</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%" />
<span class="unit-suffix">人</span>
</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%" />
<span class="unit-suffix">人</span>
</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%" />
<span class="unit-suffix">辆</span>
</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%" />
<span class="unit-suffix">辆</span>
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 灾毁损失区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">灾毁损失</span>
</div>
</template>
<!-- 灾毁损失列表组件（需要根据实际业务实现） -->
<el-row :gutter="24">
<el-col :span="24">
<LossList v-model="formData.lossList" />
</el-col>
<!-- 处理情况 -->
<el-col :span="12">
<el-form-item label="处理情况" prop="report.remark">
<el-input v-model="formData.report.remark" type="textarea" :rows="2" placeholder="请填写（选填）" />
</el-form-item>
</el-col>
<!-- 损失总金额 -->
<el-col :span="12">
<el-form-item label="损失总金额" prop="report.totalLossAmount">
<el-input-number v-model="formData.report.totalLossAmount" :min="0" :precision="2" style="width: 100%" placeholder="请填写（选填）" />
<span class="unit-suffix">万元</span>
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 投入资源区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">投入资源</span>
</div>
</template>
<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%" />
<span class="unit-suffix">台/班</span>
</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%" />
<span class="unit-suffix">人次</span>
</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%" />
<span class="unit-suffix">万元</span>
</el-form-item>
</el-col>
<!-- 现场描述 -->
<el-col :span="24">
<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>
</el-card>
<!-- 附件上传区块 -->
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">附件上传</span>
</div>
</template>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="图片上传" prop="fileList">
<el-upload
v-model:file-list="imageFileList"
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="9"
:on-preview="handlePicturePreview"
:on-remove="handlePictureRemove"
:before-upload="beforeImageUpload"
accept="image/jpeg,image/png"
>
<el-icon><Plus /></el-icon>
</el-upload>
<div class="upload-tip">只能上传jpg/png格式，且不超过500kb</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="视频上传" prop="fileList">
<el-upload v-model:file-list="videoFileList" action="#" :auto-upload="false" :limit="1" :before-upload="beforeVideoUpload" accept="video/*">
<el-button type="primary"
><el-icon><Upload /></el-icon> 选择文件</el-button
<!-- 纬度 -->
<el-col :span="8">
<el-form-item label="纬度" prop="event.startStakeLat">
<el-input v-model="formData.event.startStakeLat" placeholder="纬度"> </el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="图片上传" prop="fileList">
<el-upload
v-model:file-list="imageFileList"
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="9"
:on-preview="handlePicturePreview"
:on-remove="handlePictureRemove"
:before-upload="beforeImageUpload"
accept="image/jpeg,image/png"
>
</el-upload>
<div class="upload-tip">仅支持20s内的视频，不超过20MB</div>
<div v-if="videoFileList.length > 0 && videoFileList[0].url" class="video-preview">
<video :src="videoFileList[0].url" controls style="width: 100%; max-height: 200px"></video>
</div>
</el-form-item>
</el-col>
</el-row>
<el-icon><Plus /></el-icon>
</el-upload>
<div class="upload-tip">只能上传jpg/png格式，且不超过500kb</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="视频上传" prop="fileList">
<el-upload v-model:file-list="videoFileList" action="#" :auto-upload="false" :limit="1" :before-upload="beforeVideoUpload" accept="video/*">
<el-button type="primary"
><el-icon><Upload /></el-icon> 选择文件</el-button
>
</el-upload>
<div class="upload-tip">仅支持20s内的视频，不超过20MB</div>
<div v-if="videoFileList.length > 0 && videoFileList[0].url" class="video-preview">
<video :src="videoFileList[0].url" controls style="width: 100%; max-height: 200px"></video>
</div>
</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>
<el-card title="灾毁损失">
<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-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 label="是" :value="true" />
<el-option label="否" :value="false" />
</el-select>
</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" v-if="!isContinue">
<el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
<el-input-number v-model="formData.event.estimatedRecoveryCost" :min="0" :precision="2" style="width: 100%" />
<span class="unit-suffix">万元</span>
</el-form-item>
</el-col>
</el-row>
<!-- 滞留人员 -->
<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%" />
<span class="unit-suffix">台/班</span>
</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%" />
<span class="unit-suffix">人次</span>
</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%" />
<span class="unit-suffix">万元</span>
</el-form-item>
</el-col>
<!-- 其他损失描述 -->
<el-col :span="24">
<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="是否需要恢复重建" prop="event.needsRecovery">
<el-select v-model="formData.event.needsRecovery" placeholder="请选择" style="width: 100%">
<el-option label="是" :value="true" />
<el-option label="否" :value="false" />
</el-select>
</el-form-item>
</el-col>
<!-- 恢复重建预估费用 -->
<el-col :span="8" v-if="!isContinue">
<el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
<el-input-number v-model="formData.event.estimatedRecoveryCost" :min="0" :precision="2" style="width: 100%">
<template #suffix>
<span class="unit-text">万元</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
</el-row>
</BlockItem>
</el-card>
<!-- 提交按钮 -->
@ -431,7 +383,9 @@ 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 './LossList.vue'
import LossList from './LossList.vue'
import BlockItem from '@/component/BlockItem.vue'
import { el } from 'element-plus/es/locale/index.mjs'
const router = useRouter()
const route = useRoute()
@ -448,52 +402,51 @@ const disposalMeasuresArray = ref([])
const imageFileList = ref([])
const videoFileList = ref([])
// 表单数据 - 按 H5 Request 接口结构定义
const formData = reactive({
// 顶层字段
occurLocation: '', // 发生地点/路况位置
occurTime: '', // 发生时间
roadConditionType: '', // 路况类别
routeNo: '', // 线路编号
occurLocation: null, // 发生地点/路况位置
occurTime: null, // 发生时间
roadConditionType: null, // 路况类别
routeNo: null, // 线路编号
// event 对象
event: {
blockedMileage: '', // 阻断里程
blockedPointName: '', // 阻断点小地名
contactPerson: '', // 联系人
contactPhone: '', // 联系电话
damageCount: '', // 水毁处数
district: '', // 上报区县
endStakeLat: '', // 止点纬度
endStakeLng: '', // 止点经度
endStakeNo: '', // 止点桩号
estimatedRecoveryCost: '', // 恢复重建预估费用
inspectionMileage: '', // 巡查里程
isBlocked: '', // 是否阻断
needsRecovery: '', // 是否需要恢复重建
repairProgress: '', // 抢修进度
reporterUnit: '', // 填报单位
startStakeLat: '', // 起点纬度
startStakeLng: '', // 起点经度
startStakeNo: '' // 起点桩号
blockedMileage: null, // 阻断里程
blockedPointName: null, // 阻断点小地名
contactPerson: null, // 联系人
contactPhone: null, // 联系电话
damageCount: null, // 水毁处数
district: null, // 上报区县
endStakeLat: null, // 止点纬度
endStakeLng: null, // 止点经度
endStakeNo: null, // 止点桩号
estimatedRecoveryCost: null, // 恢复重建预估费用
inspectionMileage: null, // 巡查里程
isBlocked: null, // 是否阻断
needsRecovery: null, // 是否需要恢复重建
repairProgress: null, // 抢修进度
reporterUnit: null, // 填报单位
startStakeLat: null, // 起点纬度
startStakeLng: null, // 起点经度
startStakeNo: null // 起点桩号
},
// report 对象
report: {
actualRecoverTime: '', // 实际恢复时间
damagedVehicleCount: '', // 损坏车辆
deadCount: '', // 死亡人员
disposalMeasures: '', // 处置措施（逗号分隔）
expectRecoverTime: '', // 预计恢复时间
injuredCount: '', // 受伤人员
investedFunds: '', // 已投资金
investedMachinery: '', // 已投机械
investedManpower: '', // 已投人力
remark: '', // 处理情况/备注
siteDescription: '', // 现场描述
strandedPersonCount: '', // 滞留人员
strandedVehicleCount: '', // 滞留车辆
totalLossAmount: '' // 损失总金额
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 数组
@ -507,7 +460,7 @@ const formData = reactive({
watch(
disposalMeasuresArray,
(newVal) => {
formData.report.disposalMeasures = newVal.join(',')
formData.report.disposalMeasures = newVal.length ? newVal.join(',') : null
},
{ deep: true }
)
@ -515,7 +468,7 @@ watch(
// 监听图片附件变化，同步到 fileList
watch(
imageFileList,
(newVal) => {
() => {
syncFileList()
},
{ deep: true }
@ -524,7 +477,7 @@ watch(
// 监听视频附件变化，同步到 fileList
watch(
videoFileList,
(newVal) => {
() => {
syncFileList()
},
{ deep: true }
@ -554,6 +507,8 @@ watch(
(newVal) => {
if (newVal && typeof newVal === 'string') {
disposalMeasuresArray.value = newVal.split(',').filter(Boolean)
} else {
disposalMeasuresArray.value = []
}
},
{ immediate: true }
@ -640,7 +595,7 @@ const validate = async () => {
// 提交表单
const handleSubmit = async () => {
// 验证表单
if (!validate()) {
if (!(await validate())) {
return
}
@ -697,7 +652,6 @@ defineExpose({
<style scoped lang="scss">
.disaster-form-page {
padding: 20px;
background-color: #f5f7fa;
.disaster-form {
@ -746,8 +700,7 @@ defineExpose({
border-left: 3px solid #409eff;
}
.unit-suffix {
margin-left: 8px;
.unit-text {
color: #909399;
font-size: 12px;
}