432 lines
16 KiB
Vue
432 lines
16 KiB
Vue
<template>
|
|
<div class="disaster-form-page">
|
|
<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>
|
|
</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" 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" 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="事件类型">
|
|
<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']" :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.repairProgress">
|
|
<el-select v-model="formData.event.repairProgress" placeholder="请选择" style="width: 100%">
|
|
<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="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 v-model="formData.event.damageCount" placeholder="请填写">
|
|
<template #append>处</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</BlockItem>
|
|
|
|
<BlockItem title="位置信息">
|
|
<el-row :gutter="24">
|
|
<el-col :span="8">
|
|
<el-form-item label="路线类型">
|
|
<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']" :key="idx" :label="option.label" :value="option.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<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="请选择">
|
|
<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-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="起点桩经度" 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="event.endStakeLongitude">
|
|
<el-input v-model="formData.event.endStakeLongitude" placeholder="请填写" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="止点桩纬度" prop="event.endStakeLatitude">
|
|
<el-input v-model="formData.event.endStakeLatitude" placeholder="请填写" />
|
|
</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>
|
|
<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%">
|
|
<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-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%">
|
|
<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.lossList" />
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="8">
|
|
<el-form-item label="投入机械" prop="report.investedMachinery">
|
|
<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%">
|
|
<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 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']" :key="idx" :label="option.label" :value="option.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col v-if="showEstimatedRecoveryCost" :span="8">
|
|
<el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
|
|
<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" :loading="submitting" @click="handleSubmit">提交</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { LocationFilled } from '@element-plus/icons-vue'
|
|
import BlockItem from '@/component/BlockItem.vue'
|
|
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
|
import RoadRoutesSelect from '../components/RoadRoutesSelect.vue'
|
|
import YHZSelect from '../components/YHZSelect.vue'
|
|
import LossList from './WaterDisasterLossListPC.vue'
|
|
import { useWaterDisasterReport } from './useWaterDisasterReport'
|
|
|
|
const {
|
|
eventType,
|
|
filterForm,
|
|
formData,
|
|
formRef,
|
|
formRules,
|
|
handleBack,
|
|
handleDistrictChange,
|
|
handleEventTypeChange,
|
|
handleRouteNoChange,
|
|
handleSubmit,
|
|
initFormData,
|
|
getFormData,
|
|
options,
|
|
routeTypeLabel,
|
|
showEstimatedRecoveryCost,
|
|
submitting,
|
|
validate
|
|
} = useWaterDisasterReport()
|
|
|
|
defineExpose({
|
|
validate,
|
|
initFormData,
|
|
getFormData
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.disaster-form-page {
|
|
padding: 20px;
|
|
background-color: #f5f7fa;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.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-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>
|