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

feat: 水毁接口联调

Browse Source
This commit is contained in:
niedongsheng 2026-04-08 11:12:41 +08:00
parent 922e2b0c09
commit 5a20821e32
7 changed files with 413 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/mobile/src/components/BasePicker.vue
View File

@ -34,7 +34,7 @@ import { Field, Popup, Picker } from 'vant'
const props = defineProps({
// 双向绑定值 (v-model)
modelValue: {
type: [String, Number],
type: [String, Number, Boolean],
default: null
},
// 选项数据，默认格式 [{ label: '显示名', value: '值' }]

63
packages/mobile/src/views/DisasterManagement/DisasterManagement.vue
View File

@ -34,7 +34,7 @@
<EmptyBox v-if="!loading && list.length === 0" :placeholder="emptyText" />
</div>
<van-button type="primary" class="footer-btn" icon="plus" @click="handleAdd"> 冰雪填报 </van-button>
<van-button type="primary" class="footer-btn" @click="handleAdd"> 灾害填报 </van-button>
<!-- 筛选组件：v-model 绑定选中的值，visible 控制显示隐藏 -->
<TagFilter
@ -56,7 +56,7 @@ import CardItem from '@/components/CardItem.vue'
import EmptyBox from '@/components/EmptyBox.vue'
import CurrentSite from '@/components/CurrentSite.vue'
import TagFilter from '@/components/TagFilter.vue'
import mockDataJSON from './mockData.json'
import { request } from "@shared/utils/request";
const router = useRouter()
@ -111,54 +111,21 @@ const getDisasterList = async (keyword = '', disasterType = 'all') => {
loading.value = true
try {
// TODO: 替换为实际的后端接口地址
// const response = await fetch('/api/disaster/list', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({
// keyword: keyword.trim(),
// disasterType: disasterType === 'all' ? '' : disasterType
// })
// })
// const result = await response.json()
// if (result.code === 200) {
// list.value = result.data
// } else {
// showToast(result.message || '获取数据失败')
// list.value = []
// }
// ========== 模拟数据 ==========
await new Promise((resolve) => setTimeout(resolve, 500))
const mockData = mockDataJSON
let filteredData = [...mockData]
if (keyword) {
filteredData = filteredData.filter((item) =>
item.title.toLowerCase().includes(keyword.toLowerCase())
)
}
if (disasterType !== 'all') {
filteredData = filteredData.filter((item) =>
item.disasterType === disasterType
)
}
list.value = filteredData
if (keyword && filteredData.length === 0) {
emptyText.value = '未搜索到相关灾毁信息'
} else if (disasterType !== 'all' && filteredData.length === 0) {
const typeLabel = disasterTypes.find(t => t.value === disasterType)?.label || disasterType
emptyText.value = `暂无${typeLabel}类型灾毁信息`
const result = await request({
url: '/snow-ops-platform/water-damage/list',
method: 'get',
params: {
keyword: keyword.trim(),
disasterType: disasterType === 'all' ? '' : disasterType
}
})
if (result?.data?.records) {
list.value = result.data.records
} else {
emptyText.value = '暂无相关灾毁信息'
showToast(result.message || '获取数据失败')
list.value = []
}
// ========== 模拟数据结束 ==========
} catch (error) {
console.error('获取灾毁列表失败:', error)
showToast('获取数据失败，请稍后重试')

19
packages/mobile/src/views/DisasterManagement/DisasterReport.vue
View File

@ -15,7 +15,6 @@
<WaterDisaster
v-if="eventType === 'water'"
ref="waterDisasterRef"
v-model="waterDisasterData"
/>
<!-- 冰雪灾害表单（待实现） -->
@ -31,13 +30,15 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast, showFailToast } from 'vant'
import PageContainer from '@/components/PageContainer.vue'
import CurrentSite from '@/components/CurrentSite.vue'
import PanelItem from '@/components/PanelItem.vue'
import WaterDisaster from './WaterDisaster/WaterDisaster.vue'
import { request } from "@shared/utils/request";
import mockFormData from './waterDisasterFormData.json'
const router = useRouter()
@ -45,7 +46,7 @@ const router = useRouter()
const eventType = ref('water')
// 表单数据
const waterDisasterData = ref({})
const formData = ref(mockFormData)
const waterDisasterRef = ref(null)
const submitting = ref(false)
@ -73,12 +74,16 @@ const handleSubmit = async () => {
// 添加事件类型和站点信息
const submitData = {
eventType: eventType.value,
...formData,
// 可以在这里添加站点信息等其他数据
}
const res = await request({
url: '/snow-ops-platform/water-damage/addOrUpdate',
method: 'post',
data: submitData
})
console.log('提交数据:', submitData)
// 模拟提交接口
await new Promise(resolve => setTimeout(resolve, 1000))
@ -95,6 +100,10 @@ const handleSubmit = async () => {
submitting.value = false
}
}
onMounted(() => {
waterDisasterRef.value.initFormData(formData.value)
})
</script>
<style lang="scss" scoped>

60
packages/mobile/src/views/DisasterManagement/WaterDisaster/LossList.vue
View File

@ -1,20 +1,25 @@
<template>
<div class="loss-list">
<template v-for="item in modelValue">
<van-field v-model="item.value" label="塌方及损失" placeholder="请填写" type="digit" @click="cubeCalculateDialog.show()">
<van-field v-model="item.totalAmount" :label="getItemLabel(item)" placeholder="请填写" type="digit" @click="cubeCalculateDialog.show()">
<template #button>
<span class="field-unit">方/万元</span>
</template>
</van-field>
</template>
<van-button size="small" block type="primary" plain @click="addLoss">添加损失</van-button>
<CubeCalculateDialog ref="cubeCalculateDialog" />
<LossPicker ref="lossPicker" :options="options" @confirm="confirmAddLoss" />
</div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import CubeCalculateDialog from './CubeCalculateDialog.vue';
import { ref, reactive, computed, onMounted } from 'vue'
import CubeCalculateDialog from './CubeCalculateDialog.vue'
import { request } from '@shared/utils/request'
import LossPicker from './LossPicker.vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
modelValue: {
@ -23,8 +28,43 @@ const props = defineProps({
}
})
const lossPicker = ref(null)
const options = ref({})
// 添加损失项
const addLoss = () => {
lossPicker.value?.show()
}
const confirmAddLoss = (item) => {
emit('update:modelValue', [...props.modelValue, item])
}
const cubeCalculateDialog = ref(null)
const getItemLabel = (item) => {
const loss = options.value.loss?.find((loss) => loss.value === item.lossTypeId)
return loss?.text
}
const getLossDict = async (params) => {
const res = await request({
url: '/snow-ops-platform/water-damage/loss/typeAndInfo',
method: 'get',
params
})
options.value.loss = res.data.records.map((item)=>{
return {
text: item.lossTypeName,
value: item.lossTypeId,
item
}
})
}
onMounted(async () => {
await getLossDict()
})
</script>
<style scoped lang="scss">
@ -36,7 +76,7 @@ const cubeCalculateDialog = ref(null)
.loss-dialog-content {
padding: 16px;
:deep(.van-field) {
margin-bottom: 12px;
}
@ -47,21 +87,21 @@ const cubeCalculateDialog = ref(null)
border-radius: 8px;
padding: 12px;
margin-top: 12px;
.preview-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
.preview-label {
color: #646566;
font-size: 14px;
}
.preview-value {
color: #ee0a24;
font-size: 14px;
@ -69,4 +109,4 @@ const cubeCalculateDialog = ref(null)
}
}
}
</style>
</style>

47
packages/mobile/src/views/DisasterManagement/WaterDisaster/LossPicker.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<van-popup v-model:show="showPicker" position="bottom" round>
<van-picker :columns="columns" :title="pickerTitle" show-toolbar @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
</template>
<script setup>
import { onMounted, ref, computed } from 'vue'
const emit = defineEmits(['confirm'])
const props = defineProps({
options: {
type: Object,
default: () => ({})
}
})
const pickerTitle = ref("请选择损失类型")
const columns = computed(() => {
return props.options.loss || []
})
const showPicker = ref(false)
const show = () => {
showPicker.value = true
}
const clsoe = () => {
showPicker.value = false
}
const onConfirm = ({ selectedValues, selectedOptions }) => {
emit('confirm', selectedOptions[0].item)
showPicker.value = false
}
defineExpose({
show,
clsoe
})
</script>
<style scoped lang="scss"></style>

372
packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue
View File

@ -4,74 +4,74 @@
<PanelItem title="基本信息">
<van-form>
<!-- 路况类别 -->
<BasePicker v-model="formData.roadCondition" :options="roadConditionOptions" label="路况类别" placeholder="请选择" />
<BasePicker v-model="formData.roadConditionType" :options="roadConditionOptions" label="路况类别" placeholder="请选择" />
<!-- 是否阻断 -->
<BasePicker v-model="formData.isBlocked" :options="blockedOptions" label="是否阻断" placeholder="请选择" />
<!-- 是否阻断 (event.isBlocked) -->
<BasePicker v-model="formData.event.isBlocked" :options="blockedOptions" label="是否阻断" placeholder="请选择" />
<!-- 抢修进度 -->
<BasePicker v-model="formData.repairProgress" :options="repairProgressOptions" label="抢修进度" placeholder="请选择" />
<!-- 抢修进度 (event.repairProgress) -->
<BasePicker v-model="formData.event.repairProgress" :options="repairProgressOptions" label="抢修进度" placeholder="请选择" />
<!-- 水毁处数 -->
<van-field v-model="formData.waterDamageCount" label="水毁处数" placeholder="请填写" type="number" />
<!-- 水毁处数 (event.damageCount) -->
<van-field v-model="formData.event.damageCount" label="水毁处数" placeholder="请填写" type="number" />
<!-- 阻断里程 -->
<van-field v-model="formData.blockedMileage" label="阻断里程" placeholder="请填写" type="digit">
<!-- 阻断里程 (event.blockedMileage) -->
<van-field v-model="formData.event.blockedMileage" label="阻断里程" placeholder="请填写" type="digit">
<template #button>
<span class="field-unit">公里</span>
</template>
</van-field>
<!-- 发生时间 -->
<!-- 发生时间 (顶层 occurTime) -->
<BaseDatePicker v-model="formData.occurTime" label="发生时间" placeholder="请选择时间" :columnsType="['year', 'month', 'day', 'hour', 'minute']" />
<div class="calibrate-time-btn" @click="calibrateTime">
<van-icon name="replay" />
<span>校准时间</span>
</div>
<!-- 线路编号 -->
<van-field v-model="formData.lineCode" label="线路编号" placeholder="请填写" />
<!-- 线路编号 (顶层 routeNo) -->
<van-field v-model="formData.routeNo" label="线路编号" placeholder="请填写" />
<!-- 起点桩号 -->
<van-field v-model="formData.startPileNo" label="起点桩号(K)" placeholder="请填写" />
<!-- 起点桩号 (event.startStakeNo) -->
<van-field v-model="formData.event.startStakeNo" label="起点桩号(K)" placeholder="请填写" />
<!-- 起点桩经纬度 -->
<!-- 起点桩经纬度 (event.startStakeLng / startStakeLat) -->
<div class="coordinate-row">
<van-field v-model="formData.startLongitude" label="起点桩经度" placeholder="经度" class="coordinate-field" />
<van-field v-model="formData.startLatitude" label="起点桩纬度" placeholder="纬度" class="coordinate-field" />
<van-field v-model="formData.event.startStakeLng" label="起点桩经度" placeholder="经度" class="coordinate-field" />
<van-field v-model="formData.event.startStakeLat" label="起点桩纬度" placeholder="纬度" class="coordinate-field" />
</div>
<div class="calibrate-coord-btn" @click="calibrateStartCoord">
<van-icon name="location-o" />
<span>校准经纬度</span>
</div>
<!-- 止点桩号 -->
<van-field v-model="formData.endPileNo" label="止点桩号(K)" placeholder="请填写" />
<!-- 止点桩号 (event.endStakeNo) -->
<van-field v-model="formData.event.endStakeNo" label="止点桩号(K)" placeholder="请填写" />
<!-- 止点桩经纬度 -->
<!-- 止点桩经纬度 (event.endStakeLng / endStakeLat) -->
<div class="coordinate-row">
<van-field v-model="formData.endLongitude" label="止点桩经度" placeholder="经度" class="coordinate-field" />
<van-field v-model="formData.endLatitude" label="止点桩纬度" placeholder="纬度" class="coordinate-field" />
<van-field v-model="formData.event.endStakeLng" label="止点桩经度" placeholder="经度" class="coordinate-field" />
<van-field v-model="formData.event.endStakeLat" label="止点桩纬度" placeholder="纬度" class="coordinate-field" />
</div>
<div class="calibrate-coord-btn" @click="calibrateEndCoord">
<van-icon name="location-o" />
<span>校准经纬度</span>
</div>
<!-- 路况位置 -->
<van-field v-model="formData.roadLocation" label="路况位置" placeholder="请填写" />
<!-- 路况位置 (event.endStakeNo) -->
<van-field v-model="formData.occurLocation" label="路况位置" placeholder="请填写" />
<!-- 阻断点小地名 -->
<van-field v-model="formData.smallPlaceName" label="阻断点小地名" placeholder="请填写" />
<!-- 阻断点小地名 (event.blockedPointName) -->
<van-field v-model="formData.event.blockedPointName" label="阻断点小地名" placeholder="请填写" />
</van-form>
</PanelItem>
<!-- 处置情况 -->
<!-- 处置情况 (report) -->
<PanelItem title="处置情况">
<div class="disposal-measures">
<span class="measures-label">处置措施</span>
<div class="measures-options">
<van-checkbox-group v-model="formData.disposalMeasures" direction="horizontal">
<van-checkbox-group v-model="disposalMeasuresArray" direction="horizontal">
<van-checkbox name="halfClose">半幅封闭</van-checkbox>
<van-checkbox name="fullClose">全副封闭</van-checkbox>
<van-checkbox name="bypass">便道通行</van-checkbox>
@ -80,37 +80,37 @@
</div>
</div>
<!-- 预计恢复时间 -->
<BaseDatePicker v-model="formData.estimatedRecoverTime" label="预计恢复时间" placeholder="请选择时间" :min-date="minDate" :max-date="maxDate" type="datetime" />
<!-- 预计恢复时间 (report.expectRecoverTime) -->
<BaseDatePicker v-model="formData.report.expectRecoverTime" label="预计恢复时间" placeholder="请选择时间" :min-date="minDate" :max-date="maxDate" type="datetime" />
<!-- 实际恢复时间 -->
<BaseDatePicker v-model="formData.actualRecoverTime" label="实际恢复时间" placeholder="请选择时间" :min-date="minDate" :max-date="maxDate" type="datetime" />
<!-- 实际恢复时间 (report.actualRecoverTime) -->
<BaseDatePicker v-model="formData.report.actualRecoverTime" label="实际恢复时间" placeholder="请选择时间" :min-date="minDate" :max-date="maxDate" type="datetime" />
</PanelItem>
<!-- 人员车辆 -->
<!-- 人员车辆 (report) -->
<PanelItem title="人员车辆">
<van-form>
<van-field v-model="formData.injuredCount" label="受伤人员" placeholder="请填写" type="number">
<van-field v-model="formData.report.injuredCount" label="受伤人员" placeholder="请填写" type="number">
<template #button>
<span class="field-unit">个</span>
<span class="field-unit">人</span>
</template>
</van-field>
<van-field v-model="formData.deathCount" label="死亡人员" placeholder="请填写" type="number">
<van-field v-model="formData.report.deadCount" label="死亡人员" placeholder="请填写" type="number">
<template #button>
<span class="field-unit">个</span>
<span class="field-unit">人</span>
</template>
</van-field>
<van-field v-model="formData.strandedPeople" label="滞留人员" placeholder="请填写" type="number">
<van-field v-model="formData.report.strandedPersonCount" label="滞留人员" placeholder="请填写" type="number">
<template #button>
<span class="field-unit">个</span>
<span class="field-unit">人</span>
</template>
</van-field>
<van-field v-model="formData.damagedVehicles" label="损坏车辆" placeholder="请填写" type="number">
<van-field v-model="formData.report.damagedVehicleCount" label="损坏车辆" placeholder="请填写" type="number">
<template #button>
<span class="field-unit">辆</span>
</template>
</van-field>
<van-field v-model="formData.strandedVehicles" label="滞留车辆" placeholder="请填写" type="number">
<van-field v-model="formData.report.strandedVehicleCount" label="滞留车辆" placeholder="请填写" type="number">
<template #button>
<span class="field-unit">辆</span>
</template>
@ -118,70 +118,69 @@
</van-form>
</PanelItem>
<!-- 灾毁损失 -->
<!-- 灾毁损失 (lossList) -->
<PanelItem title="灾毁损失">
<LossList v-model="formData.lossList" />
<van-button size="small" block type="primary" plain>添加损失</van-button>
<van-field v-model="formData.handlingSituation" label="处理情况" placeholder="请填写（选填）" />
<van-field v-model="formData.totalLossAmount" label="损失总金额" placeholder="请填写（选填）" type="digit">
<van-field v-model="formData.report.remark" label="处理情况" placeholder="请填写（选填）" />
<van-field v-model="formData.report.totalLossAmount" label="损失总金额" placeholder="请填写（选填）" type="digit">
<template #button>
<span class="field-unit">万元</span>
</template>
</van-field>
</PanelItem>
<!-- 投入资源 (report) -->
<PanelItem>
<van-field v-model="formData.machineryInput" label="已投机械" placeholder="请填写" type="digit">
<van-field v-model="formData.report.investedMachinery" label="已投机械" placeholder="请填写" type="digit">
<template #button>
<span class="field-unit">台/班</span>
</template>
</van-field>
<van-field v-model="formData.laborInput" label="已投入力" placeholder="请填写" type="number">
<van-field v-model="formData.report.investedManpower" label="已投入力" placeholder="请填写" type="number">
<template #button>
<span class="field-unit">人次</span>
</template>
</van-field>
<van-field v-model="formData.fundsInput" label="已投资金" placeholder="请填写" type="digit">
<van-field v-model="formData.report.investedFunds" label="已投资金" placeholder="请填写" type="digit">
<template #button>
<span class="field-unit">万元</span>
</template>
</van-field>
<van-field v-model="formData.siteDescription" label="现场描述" placeholder="请填写" type="textarea" rows="2" autosize />
<van-field label="附件">
<template #input> </template>
</van-field>
<van-field v-model="formData.report.siteDescription" label="现场描述" placeholder="请填写" type="textarea" rows="2" autosize />
</PanelItem>
<!-- 附件 -->
<!-- 附件 (fileList) -->
<!-- <PanelItem title="附件">
<div class="attachment-tip">图片只能上传jpg/png文件，且不超过500kb；视频仅支持20s内的视频</div>
<div class="upload-area">
<van-uploader
v-model="formData.imageFiles"
:after-read="afterImageRead"
accept="image/jpeg,image/png"
:max-size="500 * 1024"
@oversize="onOversize"
multiple
:max-count="9"
>
<van-uploader v-model="imageFileList" :after-read="afterImageRead" accept="image/jpeg,image/png" :max-size="500 * 1024" @oversize="onOversize" multiple :max-count="9">
<div class="upload-btn">
<van-icon name="photo-o" size="24" />
<span>上传图片</span>
</div>
</van-uploader>
<van-uploader v-model="formData.videoFile" :after-read="afterVideoRead" accept="video/*" :max-size="20 * 1024 * 1024" @oversize="onVideoOversize">
<van-uploader v-model="videoFileList" :after-read="afterVideoRead" accept="video/*" :max-size="20 * 1024 * 1024" @oversize="onVideoOversize">
<div class="upload-btn">
<van-icon name="video-o" size="24" />
<span>上传视频</span>
</div>
</van-uploader>
</div>
<div v-if="formData.videoFile.length > 0 && formData.videoFile[0].content" class="video-preview">
<video :src="formData.videoFile[0].content" controls style="width: 100%; max-height: 200px"></video>
<div v-if="videoFileList.length > 0 && videoFileList[0].content" class="video-preview">
<video :src="videoFileList[0].content" controls style="width: 100%; max-height: 200px"></video>
</div>
</PanelItem> -->
<PanelItem>
<!-- 是否需要恢复重建 (event.needsRecovery) -->
<BasePicker v-model="formData.event.needsRecovery" :options="needsRecoveryOptions" label="是否需要恢复重建" placeholder="请选择" />
<!-- 恢复重建预估费用 (event.estimatedRecoveryCost) -->
<van-field v-model="formData.event.estimatedRecoveryCost" label="恢复重建预估费用" placeholder="请填写" type="digit">
<template #button>
<span class="field-unit">万元</span>
</template>
</van-field>
</PanelItem>
</div>
</template>
@ -193,54 +192,133 @@ import BasePicker from '@/components/BasePicker.vue'
import BaseDatePicker from '@/components/BaseDatePicker.vue'
import LossList from './LossList.vue'
// 定义 props
const props = defineProps({
modelValue: {
type: Object,
default: () => ({})
}
})
// 定义 emits
const emit = defineEmits(['update:modelValue', 'submit'])
// 处置措施数组（用于多选框组，需要转换为逗号分隔的字符串）
const disposalMeasuresArray = ref([])
// 表单数据
// 附件列表
const imageFileList = ref([])
const videoFileList = ref([])
// 表单数据 - 按 Request 接口结构定义
const formData = reactive({
roadCondition: '',
isBlocked: '',
repairProgress: '',
waterDamageCount: '',
blockedMileage: '',
occurTime: '',
lineCode: '',
startPileNo: '',
startLongitude: '',
startLatitude: '',
endPileNo: '',
endLongitude: '',
endLatitude: '',
roadLocation: '',
smallPlaceName: '',
disposalMeasures: [],
estimatedRecoverTime: '',
actualRecoverTime: '',
injuredCount: '',
deathCount: '',
strandedPeople: '',
damagedVehicles: '',
strandedVehicles: '',
collapseLoss: [],
handlingSituation: '',
totalLossAmount: '',
machineryInput: '',
laborInput: '',
fundsInput: '',
siteDescription: '',
imageFiles: [],
videoFile: [],
lossList: [{ value: '' }]
// 顶层字段
occurLocation: '', // 发生地点
occurTime: '', // 发生时间
roadConditionType: '', // 路况类别
routeNo: '', // 线路编号
// event 对象
event: {
blockedMileage: '', // 阻断里程
blockedPointName: '', // 阻断点小地名
contactPerson: '', // 联系人
contactPhone: '', // 联系电话
damageCount: '', // 水毁处数
district: '', // 上报区县
endStakeLat: '', // 止点纬度
endStakeLng: '', // 止点经度
endStakeNo: '', // 止点桩号
estimatedRecoveryCost: '', // 恢复重建预估费用
inspectionMileage: '', // 巡查里程
isBlocked: '', // 是否阻断
needsRecovery: '', // 是否需要恢复重建
repairProgress: '', // 抢修进度
reporterUnit: '', // 填报单位
startStakeLat: '', // 起点纬度
startStakeLng: '', // 起点经度
startStakeNo: '' // 起点桩号
},
// report 对象
report: {
actualRecoverTime: '', // 实际恢复时间
damagedVehicleCount: '', // 损坏车辆
deadCount: '', // 死亡人员
disposalMeasures: '', // 处置措施（逗号分隔）
expectRecoverTime: '', // 预计恢复时间
injuredCount: '', // 受伤人员
investedFunds: '', // 已投资金
investedMachinery: '', // 已投机械
investedManpower: '', // 已投人力
remark: '', // 处理情况/备注
siteDescription: '', // 现场描述
strandedPersonCount: '', // 滞留人员
strandedVehicleCount: '', // 滞留车辆
totalLossAmount: '' // 损失总金额
},
// lossList 数组
lossList: [],
// fileList 数组
fileList: []
})
// 监听处置措施数组变化，转换为逗号分隔的字符串存到 report.disposalMeasures
watch(
disposalMeasuresArray,
(newVal) => {
formData.report.disposalMeasures = newVal.join(',')
},
{ deep: true }
)
// 监听附件变化，同步到 fileList
watch(
imageFileList,
(newVal) => {
// 转换为接口需要的格式
formData.fileList = [
...imageFileList.value.map((f) => ({
fileName: f.file?.name || '',
fileSize: f.file?.size || 0,
fileType: 1, // 1-图片
fileUrl: f.content || ''
})),
...videoFileList.value.map((f) => ({
fileName: f.file?.name || '',
fileSize: f.file?.size || 0,
fileType: 2, // 2-视频
fileUrl: f.content || ''
}))
]
},
{ deep: true }
)
watch(
videoFileList,
(newVal) => {
formData.fileList = [
...imageFileList.value.map((f) => ({
fileName: f.file?.name || '',
fileSize: f.file?.size || 0,
fileType: 1,
fileUrl: f.content || ''
})),
...newVal.map((f) => ({
fileName: f.file?.name || '',
fileSize: f.file?.size || 0,
fileType: 2,
fileUrl: f.content || ''
}))
]
},
{ deep: true }
)
// 从 report.disposalMeasures 初始化处置措施数组
watch(
() => formData.report.disposalMeasures,
(newVal) => {
if (newVal && typeof newVal === 'string') {
disposalMeasuresArray.value = newVal.split(',').filter(Boolean)
}
},
{ immediate: true }
)
// BasePicker 选项数据
const roadConditionOptions = [
{ label: '高速公路', value: '高速公路' },
@ -252,40 +330,45 @@ const roadConditionOptions = [
]
const blockedOptions = [
{ label: '是', value: '是' },
{ label: '否', value: '否' }
{ label: '是', value: true },
{ label: '否', value: false }
]
const repairProgressOptions = [
{ label: '未开始', value: '未开始' },
{ label: '进行中', value: '进行中' },
{ label: '已抢通', value: '已抢通' },
{ label: '已修复', value: '已修复' }
{ label: '未抢修', value: '未抢修' },
{ label: '抢修中', value: '抢修中' },
{ label: '已完成', value: '已完成' },
]
const needsRecoveryOptions = [
{ label: '是', value: true },
{ label: '否', value: false }
]
// 时间选择器范围
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2030, 11, 31)
// 监听父组件传入的数据
watch(
() => props.modelValue,
(newVal) => {
if (newVal && Object.keys(newVal).length > 0) {
Object.assign(formData, newVal)
}
},
{ immediate: true, deep: true }
)
const initFormData = (newVal) => {
if (newVal && Object.keys(newVal).length > 0) {
// 深度合并数据
Object.assign(formData, {
occurLocation: newVal.occurLocation || '',
occurTime: newVal.occurTime || '',
roadConditionType: newVal.roadConditionType || '',
routeNo: newVal.routeNo || '',
event: { ...formData.event, ...(newVal.event || {}) },
report: { ...formData.report, ...(newVal.report || {}) },
lossList: newVal.lossList || [],
fileList: newVal.fileList || []
})
// 监听表单数据变化，同步到父组件
watch(
formData,
() => {
emit('update:modelValue', { ...formData })
},
{ deep: true }
)
// 初始化处置措施数组
if (newVal.report?.disposalMeasures) {
disposalMeasuresArray.value = newVal.report.disposalMeasures.split(',').filter(Boolean)
}
}
}
// 校准时间
const calibrateTime = () => {
@ -297,15 +380,15 @@ const calibrateTime = () => {
// 校准起点经纬度
const calibrateStartCoord = () => {
formData.startLongitude = '108.41763025'
formData.startLatitude = '108.41763025'
formData.event.startStakeLng = '108.41763025'
formData.event.startStakeLat = '108.41763025'
showToast('起点经纬度已校准')
}
// 校准止点经纬度
const calibrateEndCoord = () => {
formData.endLongitude = '108.41763025'
formData.endLatitude = '108.41763025'
formData.event.endStakeLng = '108.41763025'
formData.event.endStakeLat = '108.41763025'
showToast('止点经纬度已校准')
}
@ -332,7 +415,7 @@ const validate = () => {
showToast('请填写发生时间')
return false
}
if (!formData.lineCode) {
if (!formData.routeNo) {
showToast('请填写线路编号')
return false
}
@ -347,6 +430,7 @@ const getFormData = () => {
// 暴露方法给父组件
defineExpose({
validate,
initFormData,
getFormData
})
</script>
@ -433,18 +517,8 @@ defineExpose({
margin-top: 12px;
}
.loss-dialog-content {
padding: 8px 16px 16px;
.loss-calc-result {
font-size: 14px;
color: #1989fa;
margin-top: 12px;
text-align: center;
}
}
:deep(.van-field__label) {
width: 90px;
width: 110px;
}
}
</style>

63
packages/mobile/src/views/DisasterManagement/waterDisasterFormData.json Normal file
View File

@ -0,0 +1,63 @@
{
"occurLocation": "G108国道 K2250+300处",
"occurTime": "2024-07-15 14:30:00",
"roadConditionType": "国道",
"routeNo": "G108",
"event": {
"blockedMileage": 1.5,
"blockedPointName": "磨盘山隧道口",
"contactPerson": "张明",
"contactPhone": "13812345678",
"damageCount": 3,
"district": "武侯区",
"endStakeLat": "30.658712",
"endStakeLng": "104.082356",
"endStakeNo": "K2251+200",
"estimatedRecoveryCost": 120.5,
"inspectionMileage": 25.6,
"isBlocked": true,
"needsRecovery": true,
"repairProgress": "抢修中",
"reporterUnit": "武侯区交通运输局",
"startStakeLat": "30.652145",
"startStakeLng": "104.075632",
"startStakeNo": "K2250+300"
},
"report": {
"damagedVehicleCount": 2,
"strandedPersonCount": 12,
"deadCount": 0,
"strandedVehicleCount": 12,
"disposalMeasures": "halfClose,bypass",
"actualRecoverTime": "2024-07-17 12:00:00",
"expectRecoverTime": "2024-07-18 18:00:00",
"injuredCount": 1,
"investedFunds": 35.8,
"investedMachinery": 6,
"investedManpower": 45,
"remark": "已组织抢险队伍进行抢通，便道已修建完成",
"siteDescription": "因持续强降雨导致山体滑坡，掩埋路面约50米，边坡垮塌严重",
"totalLossAmount": 85.6
},
"lossList": [
{
"length": 50,
"width": 8.5,
"height": 2.5,
"unitPrice": 380,
"totalAmount": 38.9,
"lossCategory": "路面损毁",
"remark": "沥青路面严重损坏"
},
{
"length": 30,
"width": 2.5,
"height": 6,
"unitPrice": 520,
"totalAmount": 23.4,
"lossCategory": "挡墙损毁",
"remark": "浆砌片石挡墙垮塌"
}
],
"fileList": []
}