Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev
This commit is contained in:
commit
0badc69fa2
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="card-item">
|
||||
<slot name="header">
|
||||
<slot name="header" v-if="title">
|
||||
<div class="header" :style="{marginBottom: titleGap + 'px'}">
|
||||
<div class="header-title">{{ title }}</div>
|
||||
<div class="header-extra" v-if="$slots.headerExtra">
|
||||
|
||||
@ -52,7 +52,7 @@ const eventTypeOptions = [
|
||||
|
||||
// 返回上一页
|
||||
const handleClickBack = () => {
|
||||
router.replace('/disasterManagement')
|
||||
router.go(-1)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -3,13 +3,15 @@
|
||||
<div class="content">
|
||||
<PanelItem title="基本信息">
|
||||
<van-form class="IceEventAddForm" label-align="left" colon>
|
||||
<van-field v-model="form.event.occurTime" label="发生时间" center>
|
||||
<van-field v-model="form.occurTime" label="发生时间" center>
|
||||
<template #button>
|
||||
<van-button plain round type="primary" size="mini" @click="getCurrentTime">校准时间</van-button>
|
||||
</template>
|
||||
</van-field>
|
||||
<!-- 线路编号 (顶层 routeNo) -->
|
||||
<RoadRoutesPicker v-model="form.routeNo" label="线路编号" placeholder="请线路" @change="handleRouteNoChange" />
|
||||
<van-field v-model="form.event.occurLocation" label="发生地点" center placeholder="请填写" />
|
||||
<van-field v-model="form.event.routeNo" label="线路编号" center placeholder="请填写" />
|
||||
<van-field v-model="form.occurLocation" label="路况位置" center placeholder="请填写" />
|
||||
<van-field v-model="form.event.startStakeNo" label="起点桩号" center placeholder="请填写" />
|
||||
<van-field v-model="form.event.endStakeNo" label="止点桩号" center placeholder="请填写" />
|
||||
<van-field v-model="form.event.disasterMileage" label="受灾里程" center type="number" placeholder="请填写" />
|
||||
@ -21,16 +23,20 @@
|
||||
<van-field label="处置措施" center>
|
||||
<template #input>
|
||||
<div class="disposal-buttons">
|
||||
<van-button plain :type="form.event.disposalMeasures === '限速通行' ? 'primary' : 'default'" size="small" @click="toggleDisposal('限速通行')">
|
||||
限速通行
|
||||
</van-button>
|
||||
<van-button plain :type="form.event.disposalMeasures === '封闭交通' ? 'primary' : 'default'" size="small" @click="toggleDisposal('封闭交通')" class="last-button">
|
||||
封闭交通
|
||||
<van-button
|
||||
v-for="item in options['iceDisposalMeasures'] || []"
|
||||
:key="item.value"
|
||||
plain
|
||||
:type="form.report.disposalMeasures === item.value ? 'primary' : 'default'"
|
||||
size="small"
|
||||
@click="toggleDisposal(item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field v-model="form.event.expectRecoverTime" label="预计恢复时间" center placeholder="请选择" readonly clickable @click="showExpectPicker = true" />
|
||||
<van-field v-model="form.report.expectRecoverTime" label="预计恢复时间" center placeholder="请选择" readonly clickable @click="showExpectPicker = true" />
|
||||
<van-popup :show="showExpectPicker" round position="bottom" close-on-click-overlay @close="showExpectPicker = false">
|
||||
<van-picker-group title="选择日期时间" :tabs="['选择日期', '选择时间']" @confirm="handleConfirmExpectTime" @cancel="showExpectPicker = false">
|
||||
<van-date-picker v-model="expectDate" :min-date="minDate" :max-date="maxDate" />
|
||||
@ -42,13 +48,13 @@
|
||||
|
||||
<PanelItem title="实施情况">
|
||||
<van-form class="IceEventAddForm" label-align="left" colon>
|
||||
<van-field v-model="form.material.inputManpower" type="number" label="投入人力" center placeholder="请填写">
|
||||
<van-field v-model="form.report.inputManpower" type="number" label="投入人力" center placeholder="请填写">
|
||||
<template #extra> 人次 </template>
|
||||
</van-field>
|
||||
<van-field v-model="form.material.inputFunds" type="number" label="投入资金" center placeholder="请填写">
|
||||
<van-field v-model="form.report.inputFunds" type="number" label="投入资金" center placeholder="请填写">
|
||||
<template #extra> 万元 </template>
|
||||
</van-field>
|
||||
<van-field v-model="form.material.inputEquipment" type="number" label="投入设备" center placeholder="请填写">
|
||||
<van-field v-model="form.report.inputEquipment" type="number" label="投入设备" center placeholder="请填写">
|
||||
<template #extra> 台班 </template>
|
||||
</van-field>
|
||||
|
||||
@ -96,32 +102,20 @@
|
||||
<van-button type="primary" block @click="addSelectedMaterials" style="margin-top: 10px"> 确认添加 </van-button>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<van-field label="当前通行情况" center>
|
||||
<template #input>
|
||||
<div class="disposal-buttons">
|
||||
<van-button plain :type="form.traffic.currentStatus === 1 ? 'primary' : 'default'" size="small" @click="form.traffic.currentStatus = 1"> 正常通行 </van-button>
|
||||
<van-button plain :type="form.traffic.currentStatus === 2 ? 'primary' : 'default'" size="small" @click="form.traffic.currentStatus = 2"> 限速通行 </van-button>
|
||||
<van-button plain :type="form.traffic.currentStatus === 3 ? 'primary' : 'default'" size="small" @click="form.traffic.currentStatus = 3" class="last-button">
|
||||
封闭交通
|
||||
</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field label="有无车辆滞留" center>
|
||||
<template #input>
|
||||
<div class="disposal-buttons">
|
||||
<van-button plain :type="form.traffic.hasStrandedVehicles === 1 ? 'primary' : 'default'" size="small" @click="form.traffic.hasStrandedVehicles = 1">
|
||||
<van-button plain :type="form.report.hasStrandedVehicles === 1 ? 'primary' : 'default'" size="small" @click="form.report.hasStrandedVehicles = 1">
|
||||
有滞留
|
||||
</van-button>
|
||||
<van-button
|
||||
plain
|
||||
:type="form.traffic.hasStrandedVehicles === 0 ? 'primary' : 'default'"
|
||||
:type="form.report.hasStrandedVehicles === 0 ? 'primary' : 'default'"
|
||||
size="small"
|
||||
@click="
|
||||
() => {
|
||||
form.traffic.hasStrandedVehicles = 0
|
||||
form.traffic.strandedVehicleCount = null
|
||||
form.report.hasStrandedVehicles = 0
|
||||
form.report.strandedVehicleCount = null
|
||||
}
|
||||
"
|
||||
class="last-button"
|
||||
@ -131,9 +125,9 @@
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field v-if="form.traffic.hasStrandedVehicles === 1" v-model="form.traffic.strandedVehicleCount" type="number" label="滞留车辆数" center placeholder="请填写" />
|
||||
<van-field v-if="form.report.hasStrandedVehicles === 1" v-model="form.report.strandedVehicleCount" type="number" label="滞留车辆数" center placeholder="请填写" />
|
||||
|
||||
<van-field v-model="form.traffic.actualRecoverTime" label="实际恢复时间" center placeholder="请选择" readonly clickable @click="showActualPicker = true" />
|
||||
<van-field v-model="form.report.actualRecoverTime" label="实际恢复时间" center placeholder="请选择" readonly clickable @click="showActualPicker = true" />
|
||||
<van-popup :show="showActualPicker" round position="bottom" close-on-click-overlay @close="showActualPicker = false">
|
||||
<van-picker-group title="选择日期时间" :tabs="['选择日期', '选择时间']" @confirm="handleConfirmActualTime" @cancel="showActualPicker = false">
|
||||
<van-date-picker v-model="actualDate" :min-date="minDate" :max-date="maxDate" />
|
||||
@ -141,17 +135,18 @@
|
||||
</van-picker-group>
|
||||
</van-popup>
|
||||
|
||||
<van-field v-model="form.report.siteDescription" label="现场情况描述" type="textarea" rows="2" autosize center placeholder="请填写" />
|
||||
|
||||
<van-field label="附件" center>
|
||||
<template #input>
|
||||
<van-uploader
|
||||
v-model="fileList"
|
||||
@delete="handleDelete"
|
||||
:modelValue="getFileList()"
|
||||
name="photos"
|
||||
:file-list="fileList"
|
||||
:file-type="['image/jpeg', 'image/png']"
|
||||
:after-read="afterRead"
|
||||
multiple
|
||||
:max-count="6"
|
||||
@delete="removeFile"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
@ -164,57 +159,80 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive, toRaw, watch, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ref, onMounted, reactive, watch, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast, showLoadingToast } from 'vant'
|
||||
import PanelItem from '@/components/PanelItem.vue'
|
||||
import { request } from '../../../../shared/utils/request'
|
||||
import { useYHZStore } from '@/stores/yhzStore';
|
||||
import { useYHZStore } from '@/stores/yhzStore'
|
||||
import RoadRoutesPicker from './RoadRoutesPicker.vue'
|
||||
import { useOptions } from '@shared/composables/useOptions'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const yhzStore = useYHZStore()
|
||||
const { options } = useOptions()
|
||||
const DEFAULT_REPORTER_UNIT = '万州区公路中心'
|
||||
|
||||
// 组件挂载时获取数据
|
||||
const INIT_FORM = reactive({
|
||||
occurLocation: '',
|
||||
occurTime: '',
|
||||
routeNo: '',
|
||||
event: {
|
||||
occurLocation: '', // 发生地点
|
||||
routeNo: '', // 线路编号
|
||||
occurTime: '', // 发生时间
|
||||
startStakeNo: '', // 起点桩号
|
||||
endStakeNo: '', // 止点桩号
|
||||
startStakeLng: null,
|
||||
startStakeLat: null,
|
||||
endStakeLng: null,
|
||||
endStakeLat: null,
|
||||
disasterMileage: '', // 受灾里程
|
||||
expectRecoverTime: '', // 预计恢复时间
|
||||
actualRecoverTime: '', // 实际恢复时间
|
||||
serviceStationId: '', // 养护站ID
|
||||
district: '', // 所属区县
|
||||
reporterName: '',
|
||||
reportTime: '', // 填报时间
|
||||
reporterPhone: '', // 填报人手机号
|
||||
disposalMeasures: '', // 处置措施
|
||||
reportUnit: DEFAULT_REPORTER_UNIT,
|
||||
routeNo: '',
|
||||
occurTime: '',
|
||||
roadConditionLocation: '',
|
||||
routeType: '',
|
||||
createTime: '', // 创建时间
|
||||
updateTime: '', // 更新时间
|
||||
isDeleted: '' // 是否删除 0-未删除 1-已删除
|
||||
},
|
||||
material: {
|
||||
report: {
|
||||
inputManpower: null, // 投入人力
|
||||
inputFunds: null, // 投入资金
|
||||
inputEquipment: null, // 投入设备
|
||||
createTime: '', // 创建时间
|
||||
updateTime: '' // 更新时间
|
||||
},
|
||||
traffic: {
|
||||
currentStatus: 0, // 当前通行情况 1-正常通行 2-限速通行 3-封闭交通
|
||||
hasStrandedVehicles: 0, // 是否有车辆滞留 0-无 1-有
|
||||
strandedVehicleCount: null, // 车辆滞留数量
|
||||
actualRecoverTime: '', // 实际恢复时间
|
||||
disposalMeasures: '',
|
||||
expectRecoverTime: '',
|
||||
actualRecoverTime: '',
|
||||
hasStrandedVehicles: 0,
|
||||
strandedVehicleCount: null,
|
||||
siteDescription: '',
|
||||
reporterName: '',
|
||||
reporterPhone: '',
|
||||
reportTime: '',
|
||||
industrialSalt: null,
|
||||
antiSlipSand: null,
|
||||
sandbags: null,
|
||||
createTime: '', // 创建时间
|
||||
updateTime: '' // 更新时间
|
||||
},
|
||||
yhzMaterialList: [], // 养护站物资列表
|
||||
photos: []
|
||||
fileList: []
|
||||
})
|
||||
const form = reactive({ ...INIT_FORM })
|
||||
const fileList = ref([])
|
||||
|
||||
const getFileList = () => {
|
||||
return (
|
||||
form.fileList?.map((item) => ({
|
||||
url: item.fileUrl,
|
||||
name: item.fileName
|
||||
})) || []
|
||||
)
|
||||
}
|
||||
|
||||
// 日期格式化
|
||||
const formatTime = (date = new Date()) => {
|
||||
@ -223,16 +241,16 @@ const formatTime = (date = new Date()) => {
|
||||
}
|
||||
|
||||
const getCurrentTime = () => {
|
||||
form.event.occurTime = formatTime()
|
||||
form.occurTime = formatTime()
|
||||
}
|
||||
|
||||
const toggleDisposal = (type) => {
|
||||
form.event.disposalMeasures = form.event.disposalMeasures === type ? '' : type
|
||||
form.report.disposalMeasures = form.report.disposalMeasures === type ? '' : type
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
form.event.occurTime = formatTime() // 初始化为当前时间
|
||||
form.occurTime = formatTime() // 初始化为当前时间
|
||||
})
|
||||
|
||||
// 添加物资相关
|
||||
@ -286,7 +304,6 @@ const checkMaterialAmount = (material, index) => {
|
||||
type: 'fail',
|
||||
message: '输入数量不能超过物资余额'
|
||||
})
|
||||
// 设置为最大值
|
||||
form.yhzMaterialList[index].usageAmount = material.ye
|
||||
}
|
||||
}
|
||||
@ -331,14 +348,37 @@ const handleAdd = async () => {
|
||||
forbidClick: true,
|
||||
duration: 0 // 设置为0表示不会自动关闭
|
||||
})
|
||||
form.event.serviceStationId = yhzStore.getYHZInfo.id
|
||||
form.event.district = yhzStore.getYHZInfo.qxmc
|
||||
console.log('yhzDetail', toRaw(yhzStore.getYHZInfo))
|
||||
console.log('form', toRaw(form))
|
||||
form.event.serviceStationId = yhzStore.getYHZInfo?.id || ''
|
||||
form.event.district = yhzStore.getYHZInfo?.qxmc || ''
|
||||
const reportTime = form.report.reportTime || form.event.reportTime || formatTime()
|
||||
const submitData = {
|
||||
...form,
|
||||
event: {
|
||||
...form.event,
|
||||
routeNo: form.routeNo,
|
||||
occurTime: form.occurTime,
|
||||
reportTime,
|
||||
reportUnit: form.event.reportUnit || DEFAULT_REPORTER_UNIT,
|
||||
disposalMeasures: form.report.disposalMeasures,
|
||||
expectRecoverTime: form.report.expectRecoverTime,
|
||||
actualRecoverTime: form.report.actualRecoverTime || null,
|
||||
roadConditionLocation: form.occurLocation,
|
||||
eventType: '冰雪事件'
|
||||
},
|
||||
report: {
|
||||
...form.report,
|
||||
reporterName: form.report.reporterName || form.event.reporterName,
|
||||
reporterPhone: form.report.reporterPhone || form.event.reporterPhone,
|
||||
reportTime
|
||||
}
|
||||
}
|
||||
if (submitData.report.hasStrandedVehicles !== 1) {
|
||||
submitData.report.strandedVehicleCount = null
|
||||
}
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/event/add',
|
||||
url: '/snow-ops-platform/event/addOrUpdate',
|
||||
method: 'POST',
|
||||
data: form
|
||||
data: submitData
|
||||
})
|
||||
if (res.code === '00000') {
|
||||
toast.close()
|
||||
@ -373,7 +413,7 @@ const maxDate = new Date(2050, 11, 31)
|
||||
const handleConfirmExpectTime = () => {
|
||||
const [year, month, day] = expectDate.value
|
||||
const [hour, minute] = expectTime.value
|
||||
form.event.expectRecoverTime =
|
||||
form.report.expectRecoverTime =
|
||||
`${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ` + `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:00`
|
||||
showExpectPicker.value = false
|
||||
}
|
||||
@ -382,7 +422,7 @@ const showActualPicker = ref(false)
|
||||
const handleConfirmActualTime = () => {
|
||||
const [year, month, day] = actualDate.value
|
||||
const [hour, minute] = actualTime.value
|
||||
form.traffic.actualRecoverTime =
|
||||
form.report.actualRecoverTime =
|
||||
`${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ` + `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:00`
|
||||
showActualPicker.value = false
|
||||
}
|
||||
@ -390,19 +430,62 @@ const handleConfirmActualTime = () => {
|
||||
// 在打开选择器时设置初始值
|
||||
watch(showExpectPicker, (val) => {
|
||||
if (val) {
|
||||
const current = form.event.expectRecoverTime ? new Date(form.event.expectRecoverTime) : new Date()
|
||||
const current = form.report.expectRecoverTime ? new Date(form.report.expectRecoverTime) : new Date()
|
||||
expectDate.value = [current.getFullYear(), current.getMonth() + 1, current.getDate()]
|
||||
expectTime.value = [current.getHours(), current.getMinutes()]
|
||||
}
|
||||
})
|
||||
watch(showActualPicker, (val) => {
|
||||
if (val) {
|
||||
const current = form.traffic.actualRecoverTime ? new Date(form.traffic.actualRecoverTime) : new Date()
|
||||
const current = form.report.actualRecoverTime ? new Date(form.report.actualRecoverTime) : new Date()
|
||||
actualDate.value = [current.getFullYear(), current.getMonth() + 1, current.getDate()]
|
||||
actualTime.value = [current.getHours(), current.getMinutes()]
|
||||
}
|
||||
})
|
||||
|
||||
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) => {
|
||||
form.routeNo = item.routeCode
|
||||
form.event.startStakeNo = item.startStakeNo
|
||||
form.event.endStakeNo = item.endStakeNo
|
||||
|
||||
const startPoint = parsePointValue(item.startPoint ?? item.startpoint)
|
||||
const endPoint = parsePointValue(item.endPoint ?? item.endpoint)
|
||||
|
||||
form.event.startStakeLng = startPoint.longitude
|
||||
form.event.startStakeLat = startPoint.latitude
|
||||
form.event.endStakeLng = endPoint.longitude
|
||||
form.event.endStakeLat = endPoint.latitude
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
const afterRead = async (file) => {
|
||||
try {
|
||||
@ -420,14 +503,12 @@ const afterRead = async (file) => {
|
||||
})
|
||||
toast.close()
|
||||
if (res.code === '00000') {
|
||||
form.photos.push({ photoUrl: res.data })
|
||||
const index = fileList.value.findIndex((f) => f.file === file.file)
|
||||
if (index !== -1) {
|
||||
fileList.value[index].serverUrl = res.data
|
||||
}
|
||||
|
||||
console.log('form.photos', toRaw(form.photos))
|
||||
console.log('fileList.value', fileList.value)
|
||||
form.fileList.push({
|
||||
fileName: file.file.name,
|
||||
fileUrl: res.data,
|
||||
fileType: 1,
|
||||
fileSize: file.file.size
|
||||
})
|
||||
} else {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
@ -441,13 +522,8 @@ const afterRead = async (file) => {
|
||||
}
|
||||
|
||||
// 文件删除
|
||||
const handleDelete = (file) => {
|
||||
if (file.serverUrl) {
|
||||
const index = form.photos.findIndex((p) => p.photoUrl === file.serverUrl)
|
||||
if (index !== -1) {
|
||||
form.photos.splice(index, 1)
|
||||
}
|
||||
}
|
||||
const removeFile = (file, index) => {
|
||||
form.fileList.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -295,9 +295,47 @@ const isVideoFile = (file) => {
|
||||
if (file.fileUrl && videoExtensions.test(file.fileUrl)) return true
|
||||
}
|
||||
|
||||
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.value.event.startStakeNo = item.startStakeNo
|
||||
formData.value.event.endStakeNo = item.endStakeNo
|
||||
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
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,93 +1,130 @@
|
||||
<template>
|
||||
<PageContainer title="气象预警" @click-back="handleClickBack">
|
||||
<SearchInput v-model="searchValue" />
|
||||
<SearchInput v-model="searchValue" @update:modelValue="handleSearch" />
|
||||
|
||||
<CurrentSite />
|
||||
|
||||
<div class="list-panel">
|
||||
<CardItem v-for="(item, index) in list" :key="index" :title="item.area" @click="handleClickItem(item)">
|
||||
<CardItem
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:class="['card-item', item.status]"
|
||||
:title="item.title"
|
||||
@click="handleClickItem(item)"
|
||||
>
|
||||
<template #headerExtra>
|
||||
<span class="red-ball"></span>
|
||||
<span v-if="item.status === 'unread'" class="red-ball"></span>
|
||||
</template>
|
||||
|
||||
<!-- 发布时间 block -->
|
||||
<div class="time-block">
|
||||
<div class="time-box">
|
||||
<span class="time-label-text">发布时间：</span>
|
||||
<span class="time-value-text">{{ item.publishTime }}</span>
|
||||
<span class="time-value-text">{{ item.onset }}</span>
|
||||
</div>
|
||||
<van-icon class="jump-icon" name="arrow" />
|
||||
</div>
|
||||
</CardItem>
|
||||
|
||||
<div v-if="loading" class="loading-wrapper">
|
||||
<van-loading size="24px" vertical>加载中...</van-loading>
|
||||
</div>
|
||||
|
||||
<!-- 空状态提示 -->
|
||||
<EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" />
|
||||
<EmptyBox v-if="!loading && list.length === 0" placeholder="暂无相关预警信息" />
|
||||
</div>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import PageContainer from '@/components/PageContainer.vue'
|
||||
import SearchInput from '@/components/SearchInput.vue'
|
||||
import CurrentSite from '@/components/CurrentSite.vue'
|
||||
import CardItem from '@/components/CardItem.vue'
|
||||
import EmptyBox from '@/components/EmptyBox.vue'
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import PageContainer from '@/components/PageContainer.vue';
|
||||
import SearchInput from '@/components/SearchInput.vue';
|
||||
import CurrentSite from '@/components/CurrentSite.vue';
|
||||
import CardItem from '@/components/CardItem.vue';
|
||||
import EmptyBox from '@/components/EmptyBox.vue';
|
||||
import warningMessageMock from './mock.json';
|
||||
import { request } from '@shared/utils/request';
|
||||
import { showToast } from 'vant';
|
||||
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
getData();
|
||||
});
|
||||
|
||||
// 搜索关键词
|
||||
const searchValue = ref('')
|
||||
|
||||
watch(
|
||||
() => searchValue.value,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal !== oldVal) {
|
||||
getData(newVal)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const searchValue = ref('');
|
||||
|
||||
const handleSearch = value => {
|
||||
getData(value);
|
||||
};
|
||||
|
||||
// 预警列表数据
|
||||
const list = ref([
|
||||
{
|
||||
area: '合川区',
|
||||
level: '红色气象预警',
|
||||
publishTime: '2026/01/10 20:29'
|
||||
},
|
||||
{
|
||||
area: '万州区',
|
||||
level: '红色气象预警',
|
||||
publishTime: '2025/10/10 20:29'
|
||||
},
|
||||
{
|
||||
area: '涪陵区',
|
||||
level: '红色气象预警',
|
||||
publishTime: '2025/10/10 20:29'
|
||||
}
|
||||
])
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const getData = async () => {
|
||||
const getData = async (keyword = '') => {
|
||||
const normalizedKeyword = keyword.trim();
|
||||
loading.value = true;
|
||||
|
||||
if (route.query.mock) {
|
||||
list.value = warningMessageMock.filter(item => {
|
||||
if (!normalizedKeyword) return true;
|
||||
return item.title.includes(normalizedKeyword);
|
||||
});
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const handleClickItem = (item) => {
|
||||
try {
|
||||
const result = await request({
|
||||
url: '/snow-ops-platform/weather-warning/notice',
|
||||
method: 'get',
|
||||
params: {
|
||||
pageSize: 999,
|
||||
keyword: normalizedKeyword,
|
||||
},
|
||||
});
|
||||
list.value = result.data;
|
||||
} catch (_error) {
|
||||
showToast('获取数据失败，请稍后重试');
|
||||
list.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const markNoticeRead = async id => {
|
||||
await request({
|
||||
url: `/snow-ops-platform/weather-warning/notice/${id}/_read`,
|
||||
method: 'put',
|
||||
});
|
||||
};
|
||||
|
||||
const handleClickItem = async item => {
|
||||
try {
|
||||
await markNoticeRead(item.id);
|
||||
item.status = 'read';
|
||||
} catch (_error) {
|
||||
showToast('更新已读状态失败');
|
||||
}
|
||||
|
||||
window.warningMessageDetail = item;
|
||||
router.push({
|
||||
path: '/warningMessage-detail',
|
||||
|
||||
})
|
||||
}
|
||||
name: 'WarningMessageDetail',
|
||||
query: {
|
||||
id: item.id,
|
||||
mock: route.query.mock,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleClickBack = () => {
|
||||
router.push('/')
|
||||
}
|
||||
router.push('/');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -98,8 +135,10 @@ const handleClickBack = () => {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
padding-right: 15px;
|
||||
.loading-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
/* ==================== Block 层级 ==================== */
|
||||
@ -126,9 +165,13 @@ const handleClickBack = () => {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.jump-icon {
|
||||
font-size: 16px;
|
||||
color: rgb(102, 102, 102, .4);
|
||||
color: rgb(102, 102, 102, 0.4);
|
||||
}
|
||||
|
||||
.time-label-text {
|
||||
|
||||
@ -4,92 +4,149 @@
|
||||
|
||||
<PanelHeader title="气象预警" />
|
||||
<div class="list-panel margin">
|
||||
<CardItem class="card-item" v-for="(item, index) in list" :key="index" :title="item.area" titleGap="10">
|
||||
<CardItem class="card-item" :title="detail?.title">
|
||||
<template #content>
|
||||
<div class="time-block">
|
||||
<div class="time-box">
|
||||
<span class="time-label-text">发布时间：</span>
|
||||
<span class="time-value-text">{{ item.publishTime }}</span>
|
||||
<span class="time-value-text">{{ detail?.onset }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc-block">
|
||||
<div class="desc-text">{{ item.content }}</div>
|
||||
<div class="desc-text">{{ detail?.warningContent }}</div>
|
||||
</div>
|
||||
|
||||
<van-icon class="jump-icon" name="arrow" />
|
||||
</template>
|
||||
</CardItem>
|
||||
|
||||
<!-- 空状态提示 -->
|
||||
<EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" />
|
||||
<EmptyBox v-if="!detail?.warningContent" placeholder="暂无相关预警信息" />
|
||||
</div>
|
||||
|
||||
<PanelHeader title="防御措施" />
|
||||
<div class="list-panel">
|
||||
<CardItem v-for="(item, index) in list" :key="index" :title="item.area">
|
||||
<div class="method-block">
|
||||
<div class="method-text">{{ item.method }}</div>
|
||||
</div>
|
||||
<van-icon class="jump-icon" name="arrow" />
|
||||
<PanelHeader title="工作建议" v-if="detail?.workSuggestion" />
|
||||
<div class="list-panel margin">
|
||||
<CardItem class="card-item">
|
||||
<template #content>{{ detail?.workSuggestion }}</template>
|
||||
</CardItem>
|
||||
|
||||
<!-- 空状态提示 -->
|
||||
<EmptyBox v-if="list.length === 0" placeholder="暂无相关防御措施" />
|
||||
</div>
|
||||
|
||||
<PanelHeader title="影响范围" />
|
||||
<CardItem class="card-item impact-card">
|
||||
<template #content>
|
||||
<div class="impact-tab-block">
|
||||
<div
|
||||
class="impact-tab-item"
|
||||
:class="{ active: activeImpactTab === item.value }"
|
||||
v-for="item in impactTabs"
|
||||
:key="item.value"
|
||||
@click="activeImpactTab = item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="impact-table" v-if="currentImpactList.length">
|
||||
<div class="impact-table-header" :class="`cols-${currentImpactColumns.length}`">
|
||||
<div class="impact-table-cell" v-for="column in currentImpactColumns" :key="column.key">
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="impact-table-body">
|
||||
<div class="impact-table-row" :class="`cols-${currentImpactColumns.length}`" v-for="(item, index) in currentImpactList" :key="index">
|
||||
<div class="impact-table-cell" v-for="column in currentImpactColumns" :key="column.key">
|
||||
{{ item[column.key] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EmptyBox v-else placeholder="暂无相关影响范围" />
|
||||
</template>
|
||||
</CardItem>
|
||||
|
||||
<div class="footer-panel">
|
||||
<van-button block type="primary" @click="handleClickBack()">我已知晓</van-button>
|
||||
<!-- <van-button block type="primary" @click="handleClickBack()">我已知晓</van-button> -->
|
||||
<van-button block type="primary" @click="goToHandle()">我要响应</van-button>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import PageContainer from '@/components/PageContainer.vue'
|
||||
import CurrentSite from '@/components/CurrentSite.vue'
|
||||
import PanelHeader from '@/components/PanelHeader.vue'
|
||||
import CardItem from '@/components/CardItem.vue'
|
||||
import EmptyBox from '@/components/EmptyBox.vue'
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import PageContainer from '@/components/PageContainer.vue';
|
||||
import CurrentSite from '@/components/CurrentSite.vue';
|
||||
import PanelHeader from '@/components/PanelHeader.vue';
|
||||
import CardItem from '@/components/CardItem.vue';
|
||||
import EmptyBox from '@/components/EmptyBox.vue';
|
||||
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
|
||||
const detail = ref({
|
||||
id: null,
|
||||
status: '',
|
||||
title: '',
|
||||
onset: '',
|
||||
warningContent: '',
|
||||
workSuggestion: '',
|
||||
affectedPoints: [],
|
||||
affectedProjects: [],
|
||||
});
|
||||
const activeImpactTab = ref('point');
|
||||
const impactTabs = [
|
||||
{ label: '影响点', value: 'point' },
|
||||
{ label: '影响项目', value: 'project' },
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
getData();
|
||||
});
|
||||
|
||||
// 列表数据
|
||||
const list = ref([
|
||||
{
|
||||
area: '合川区',
|
||||
level: '红色气象预警',
|
||||
content: '今天，北京将进入大雪，请做好',
|
||||
publishTime: '2026/01/10 20:29',
|
||||
method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
|
||||
},
|
||||
{
|
||||
area: '万州区',
|
||||
level: '红色气象预警',
|
||||
publishTime: '2025/10/10 20:29',
|
||||
method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
|
||||
},
|
||||
{
|
||||
area: '涪陵区',
|
||||
level: '红色气象预警',
|
||||
publishTime: '2025/10/10 20:29',
|
||||
method: '立即启动防汛Ⅰ级应急响应，立即转移危险区'
|
||||
const impactColumnsMap = {
|
||||
point: [
|
||||
{ label: '序号', key: 'index' },
|
||||
{ label: '影响区域', key: 'affectedCounty' },
|
||||
{ label: '线路编号', key: 'roadCode' },
|
||||
{ label: '类型', key: 'type' },
|
||||
{ label: '桩号', key: 'station' },
|
||||
],
|
||||
project: [
|
||||
{ label: '序号', key: 'index' },
|
||||
{ label: '影响区域', key: 'affectedCounty' },
|
||||
{ label: '项目名称', key: 'projectName' },
|
||||
{ label: '驻地名称', key: 'siteName' },
|
||||
{ label: '线路编号', key: 'roadCode' },
|
||||
],
|
||||
};
|
||||
|
||||
const currentImpactColumns = computed(() => impactColumnsMap[activeImpactTab.value] || []);
|
||||
const impactListMap = computed(() => ({
|
||||
point: detail.value.affectedPoints,
|
||||
project: detail.value.affectedProjects,
|
||||
}));
|
||||
|
||||
const currentImpactList = computed(() => {
|
||||
return impactListMap.value[activeImpactTab.value].map((item, index) => ({
|
||||
index: index + 1,
|
||||
...item,
|
||||
}));
|
||||
});
|
||||
|
||||
const getData = async () => {
|
||||
if (!window.warningMessageDetail) {
|
||||
return;
|
||||
}
|
||||
])
|
||||
|
||||
const getData = async () => {}
|
||||
detail.value = window.warningMessageDetail;
|
||||
};
|
||||
|
||||
const handleClickBack = () => {
|
||||
router.go(-1)
|
||||
}
|
||||
router.go(-1);
|
||||
};
|
||||
const goToHandle = () => {
|
||||
router.push({path: '/warningMessageHandle'})
|
||||
}
|
||||
router.push({ path: '/disasterReport' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -164,7 +221,7 @@ const goToHandle = () => {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.method-text {
|
||||
font-weight: 500;
|
||||
@ -172,4 +229,75 @@ const goToHandle = () => {
|
||||
color: #4a4a4a;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.impact-card {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.impact-tab-block {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #d9d9d9;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.impact-tab-item {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #4a4a4a;
|
||||
background: #ffffff;
|
||||
|
||||
& + .impact-tab-item {
|
||||
border-left: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(180deg, #2f79f6 0%, #1f66e0 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.impact-table {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.impact-table-header,
|
||||
.impact-table-row {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cols-5 {
|
||||
grid-template-columns: 52px 1fr 1fr 1fr 1.2fr;
|
||||
}
|
||||
|
||||
.impact-table-header {
|
||||
background: linear-gradient(180deg, #e5e5e5 0%, #d8d8d8 100%);
|
||||
}
|
||||
|
||||
.impact-table-row {
|
||||
background: #ffffff;
|
||||
|
||||
& + .impact-table-row {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.impact-table-cell {
|
||||
min-height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 6px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #4a4a4a;
|
||||
line-height: 20px;
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
62
packages/mobile/src/views/WarningMessage/mock.json
Normal file
62
packages/mobile/src/views/WarningMessage/mock.json
Normal file
@ -0,0 +1,62 @@
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"status": "unread",
|
||||
"title": "潼南区气象台发布暴雨蓝色预警[Ⅳ级/一般]",
|
||||
"onset": "2026/01/10 20:29",
|
||||
"warningContent": "区气象台发布暴雨红色预警，按照相关要求，启动I级防御响应，并请及时关注地质、水文等风险提示信息，落实主动封闭管控/“关停撤转”措施。",
|
||||
"workSuggestion": "立即启动防汛Ⅰ级应急响应，立即转移危险区，加强沿线桥梁、隧道及在建项目巡查。",
|
||||
"affectedPoints": [
|
||||
{
|
||||
"affectedCounty": "巫溪县",
|
||||
"roadCode": "G242",
|
||||
"type": "桥梁",
|
||||
"station": "336.800-336.850"
|
||||
},
|
||||
{
|
||||
"affectedCounty": "万州区",
|
||||
"roadCode": "G242",
|
||||
"type": "隧道",
|
||||
"station": "336.800-336.850"
|
||||
}
|
||||
],
|
||||
"affectedProjects": [
|
||||
{
|
||||
"affectedCounty": "巫溪县",
|
||||
"projectName": "G242灾害防治工程",
|
||||
"siteName": "巫溪驻地",
|
||||
"roadCode": "G242"
|
||||
},
|
||||
{
|
||||
"affectedCounty": "万州区",
|
||||
"projectName": "G242改扩建工程",
|
||||
"siteName": "万州驻地",
|
||||
"roadCode": "G242"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"status": "read",
|
||||
"title": "潼南区气象台发布暴雨蓝色预警[Ⅳ级/一般]",
|
||||
"onset": "2026/01/09 07:10",
|
||||
"warningContent": "预计未来12小时局地将出现能见度小于500米的大雾天气，请注意行车安全并做好道路巡查。",
|
||||
"workSuggestion": "加强重点路段值守，及时发布诱导信息，视情采取限速、分流等措施。",
|
||||
"affectedPoints": [
|
||||
{
|
||||
"affectedCounty": "涪陵区",
|
||||
"roadCode": "S105",
|
||||
"type": "高边坡",
|
||||
"station": "K12+300-K13+100"
|
||||
}
|
||||
],
|
||||
"affectedProjects": [
|
||||
{
|
||||
"affectedCounty": "涪陵区",
|
||||
"projectName": "S105养护提升工程",
|
||||
"siteName": "涪陵驻地",
|
||||
"roadCode": "S105"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
71
packages/screen/src/component/NumberInput/NumberInput.vue
Normal file
71
packages/screen/src/component/NumberInput/NumberInput.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<el-input
|
||||
v-bind="$attrs"
|
||||
:model-value="displayValue"
|
||||
@update:modelValue="handleUpdate"
|
||||
@change="handleChange"
|
||||
@blur="handleBlur"
|
||||
@focus="handleFocus"
|
||||
>
|
||||
<template v-if="$slots.prepend" #prepend>
|
||||
<slot name="prepend" />
|
||||
</template>
|
||||
<template v-if="$slots.prefix" #prefix>
|
||||
<slot name="prefix" />
|
||||
</template>
|
||||
<template v-if="$slots.suffix" #suffix>
|
||||
<slot name="suffix" />
|
||||
</template>
|
||||
<template v-if="$slots.append" #append>
|
||||
<slot name="append" />
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { updateValueForNumber } from '@/utils/math'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
precision: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'input', 'change', 'blur', 'focus'])
|
||||
|
||||
const displayValue = computed(() => props.modelValue ?? '')
|
||||
|
||||
const normalizeValue = (value) => {
|
||||
const target = { value: props.modelValue }
|
||||
updateValueForNumber(target, 'value', value, props.precision)
|
||||
return target.value
|
||||
}
|
||||
|
||||
const handleUpdate = (value) => {
|
||||
const normalizedValue = normalizeValue(value)
|
||||
emit('update:modelValue', normalizedValue)
|
||||
emit('input', normalizedValue)
|
||||
}
|
||||
|
||||
const handleChange = (value) => {
|
||||
emit('change', normalizeValue(value))
|
||||
}
|
||||
|
||||
const handleBlur = (event) => {
|
||||
emit('blur', event)
|
||||
}
|
||||
|
||||
const handleFocus = (event) => {
|
||||
emit('focus', event)
|
||||
}
|
||||
</script>
|
||||
18
packages/screen/src/utils/math.js
Normal file
18
packages/screen/src/utils/math.js
Normal file
@ -0,0 +1,18 @@
|
||||
export const updateValueForNumber = (obj, key, value, precision = 2) => {
|
||||
let normalizedValue = String(value ?? '').replace(/[^\d.]/g, '')
|
||||
normalizedValue = normalizedValue.replace(/^\./, '')
|
||||
|
||||
if (precision <= 0) {
|
||||
obj[key] = normalizedValue.replace(/\./g, '')
|
||||
return
|
||||
}
|
||||
|
||||
const firstDotIndex = normalizedValue.indexOf('.')
|
||||
if (firstDotIndex !== -1) {
|
||||
const integerPart = normalizedValue.slice(0, firstDotIndex)
|
||||
const decimalPart = normalizedValue.slice(firstDotIndex + 1).replace(/\./g, '').slice(0, precision)
|
||||
normalizedValue = decimalPart ? `${integerPart}.${decimalPart}` : `${integerPart}.`
|
||||
}
|
||||
|
||||
obj[key] = normalizedValue
|
||||
}
|
||||
@ -1,131 +1,89 @@
|
||||
<template>
|
||||
<div class="water-disaster-pc">
|
||||
<!-- 合并后的单个卡片 -->
|
||||
<el-card class="form-card" shadow="never">
|
||||
<div slot="header" class="card-header">
|
||||
<span>续报信息</span>
|
||||
<div class="ice-disaster-pc">
|
||||
<el-card class="info-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">续报信息</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 所有表单项合并到一个区域，每行一个 -->
|
||||
<el-form :model="formData" label-width="120px" size="small">
|
||||
<!-- 处置措施 -->
|
||||
<el-form-item label="处置措施">
|
||||
<el-select v-model="formData.report.disposalMeasures">
|
||||
<el-option label="半幅封闭" value="半幅封闭" />
|
||||
<el-option label="全副封闭" value="全副封闭" />
|
||||
<el-option label="便道通行" value="便道通行" />
|
||||
<el-option label="正常通行" value="正常通行" />
|
||||
<el-form :model="formData" v-if="formData.report">
|
||||
<BlockItem title="处置情况">
|
||||
<el-form-item label="处理措施">
|
||||
<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-form-item label="预计恢复时间">
|
||||
<el-date-picker
|
||||
v-model="formData.report.expectRecoverTime"
|
||||
type="datetime"
|
||||
placeholder="请选择时间"
|
||||
value-format="yyyy-MM-dd HH:mm"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:picker-options="pickerOptions"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
{{ formData.report.expectRecoverTime }}
|
||||
|
||||
<!-- 实际恢复时间 -->
|
||||
<el-form-item label="实际恢复时间">
|
||||
<el-form-item label="实际预计恢复时间">
|
||||
<el-date-picker
|
||||
v-model="formData.report.actualRecoverTime"
|
||||
type="datetime"
|
||||
placeholder="请选择时间"
|
||||
value-format="yyyy-MM-dd HH:mm"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:picker-options="pickerOptions"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</BlockItem>
|
||||
|
||||
<!-- 受伤人员 -->
|
||||
<el-form-item label="受伤人员">
|
||||
<el-input-number v-model="formData.report.injuredCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">人</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 死亡人员 -->
|
||||
<el-form-item label="死亡人员">
|
||||
<el-input-number v-model="formData.report.deadCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">人</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 滞留人员 -->
|
||||
<el-form-item label="滞留人员">
|
||||
<el-input-number v-model="formData.report.strandedPersonCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">人</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 损坏车辆 -->
|
||||
<el-form-item label="损坏车辆">
|
||||
<el-input-number v-model="formData.report.damagedVehicleCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">辆</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 滞留车辆 -->
|
||||
<el-form-item label="滞留车辆">
|
||||
<el-input-number v-model="formData.report.strandedVehicleCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">辆</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 损失列表组件 -->
|
||||
<loss-list :col-span="24" v-model="formData.lossList" />
|
||||
|
||||
<!-- 处理情况 -->
|
||||
<el-form-item label="处理情况">
|
||||
<el-input v-model="formData.report.remark" type="textarea" :rows="2" placeholder="请填写（选填）" style="width: 60%" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 损失总金额 -->
|
||||
<el-form-item label="损失总金额">
|
||||
<el-input v-model="formData.report.totalLossAmount" placeholder="请填写（选填）" style="width: 300px">
|
||||
<template slot="append">万元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 已投机械 -->
|
||||
<el-form-item label="已投机械">
|
||||
<el-input v-model="formData.report.investedMachinery" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">台/班</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 投入人力 -->
|
||||
<el-form-item label="投入人力">
|
||||
<el-input-number v-model="formData.report.investedManpower" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">人次</template>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 投入资金 -->
|
||||
<BlockItem title="实施情况">
|
||||
<MaterialList v-model="formData.yhzMaterialList" :yhzId="formData.event.serviceStationId" :col-span="24" />
|
||||
<el-form-item label="投入资金">
|
||||
<el-input v-model="formData.report.investedFunds" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">万元</template>
|
||||
</el-input>
|
||||
<NumberInput v-model="formData.report.inputFunds" :precision="2" placeholder="请填写" style="width: 300px">
|
||||
<template #append>万元</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 现场描述 -->
|
||||
<el-form-item label="现场描述">
|
||||
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" style="width: 60%" />
|
||||
<el-form-item label="投入人力">
|
||||
<NumberInput v-model="formData.report.inputManpower" :precision="0" placeholder="请填写" style="width: 300px">
|
||||
<template #append>人次</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 是否需要恢复重建 -->
|
||||
<el-form-item label="是否需要恢复重建">
|
||||
<el-radio-group v-model="formData.event.needsRecovery">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
<el-form-item label="投入设备">
|
||||
<NumberInput v-model="formData.report.inputEquipment" :precision="1" placeholder="请填写" style="width: 300px">
|
||||
<template #append>台/班</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="有无滞留车辆">
|
||||
<el-select v-model="formData.report.hasStrandedVehicles" placeholder="请选择" style="width: 300px" @change="handleHasStrandedVehiclesChange">
|
||||
<el-option label="有" :value="1" />
|
||||
<el-option label="无" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="滞留车辆">
|
||||
<NumberInput v-model="formData.report.strandedVehicleCount" :precision="0" placeholder="请填写" style="width: 300px">
|
||||
<template #append>辆</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="现场情况描述">
|
||||
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="3" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="附件">
|
||||
<div class="upload-wrapper">
|
||||
<FileUpload v-model="formData.fileList" type="image" :limit="6" />
|
||||
<div class="upload-tip">只能上传jpg/png文件，且不超过500kb 最多上传6张照片</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</BlockItem>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">追加记录</el-button>
|
||||
</el-form-item>
|
||||
@ -135,12 +93,15 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, computed } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { request } from '@shared/utils/request'
|
||||
import LossList from '../WaterDisasterReport/WaterDisasterLossListPC.vue'
|
||||
import BlockItem from '@/component/BlockItem.vue'
|
||||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||||
import NumberInput from '@/component/NumberInput/NumberInput.vue'
|
||||
import MaterialList from '../components/MaterialList.vue'
|
||||
import { useOptions } from '@shared/composables/useOptions'
|
||||
|
||||
// Props 定义
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
@ -148,137 +109,55 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
// Emits 定义
|
||||
const emit = defineEmits(['input', 'change', 'submit'])
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
occurLocation: '',
|
||||
occurTime: '',
|
||||
roadConditionType: '',
|
||||
routeNo: '',
|
||||
event: {
|
||||
blockedMileage: '',
|
||||
blockedPointName: '',
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
damageCount: '',
|
||||
district: '',
|
||||
endStakeNo: '',
|
||||
estimatedRecoveryCost: '',
|
||||
isBlocked: '',
|
||||
needsRecovery: '',
|
||||
repairProgress: '',
|
||||
reporterUnit: '',
|
||||
startStakeNo: ''
|
||||
},
|
||||
report: {
|
||||
actualRecoverTime: '',
|
||||
damagedVehicleCount: '',
|
||||
deadCount: '',
|
||||
disposalMeasures: '',
|
||||
expectRecoverTime: '',
|
||||
injuredCount: '',
|
||||
investedFunds: '',
|
||||
investedMachinery: '',
|
||||
investedManpower: '',
|
||||
remark: '',
|
||||
siteDescription: '',
|
||||
strandedPersonCount: '',
|
||||
strandedVehicleCount: '',
|
||||
totalLossAmount: ''
|
||||
},
|
||||
lossList: [],
|
||||
fileList: []
|
||||
})
|
||||
const { options } = useOptions()
|
||||
|
||||
// 处置措施单选值
|
||||
const disposalMeasureValue = ref('')
|
||||
|
||||
// 下拉选项
|
||||
const roadConditionOptions = [
|
||||
{ label: '高速公路', value: '高速公路' },
|
||||
{ label: '国道', value: '国道' },
|
||||
{ label: '省道', value: '省道' },
|
||||
{ label: '县道', value: '县道' },
|
||||
{ label: '乡道', value: '乡道' },
|
||||
{ label: '村道', value: '村道' }
|
||||
]
|
||||
const formData = ref({})
|
||||
|
||||
const blockedOptions = [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false }
|
||||
]
|
||||
|
||||
const repairProgressOptions = [
|
||||
{ label: '未抢险', value: '未抢险' },
|
||||
{ label: '抢险中', value: '抢险中' },
|
||||
{ label: '已完成', value: '已完成' }
|
||||
]
|
||||
|
||||
// 日期选择器配置
|
||||
const pickerOptions = {
|
||||
disabledDate(time) {
|
||||
return time.getTime() < new Date(2020, 0, 1) || time.getTime() > new Date(2030, 11, 31)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听处置措施单选值变化
|
||||
watch(disposalMeasureValue, (newVal) => {
|
||||
formData.report.disposalMeasures = newVal
|
||||
})
|
||||
|
||||
// 监听外部传入的值
|
||||
watch(
|
||||
() => props.value,
|
||||
(newVal) => {
|
||||
if (newVal && Object.keys(newVal).length > 0) {
|
||||
initFormData(newVal)
|
||||
const initFormData = (data = {}) => {
|
||||
formData.value = data
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
// 监听表单数据变化，向外传递
|
||||
watch(
|
||||
() => formData,
|
||||
(newVal) => {
|
||||
emit('input', newVal)
|
||||
emit('change', newVal)
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
// 从 report.disposalMeasures 初始化处置措施单选值
|
||||
watch(
|
||||
() => formData.report.disposalMeasures,
|
||||
(newVal) => {
|
||||
if (newVal && typeof newVal === 'string') {
|
||||
disposalMeasureValue.value = newVal
|
||||
const validate = () => {
|
||||
const form = formData.value
|
||||
if (!form.report.disposalMeasures) {
|
||||
ElMessage.warning('请选择处理措施')
|
||||
return false
|
||||
}
|
||||
if (!form.report.expectRecoverTime) {
|
||||
ElMessage.warning('请选择预计恢复时间')
|
||||
return false
|
||||
}
|
||||
if (!form.report.siteDescription) {
|
||||
ElMessage.warning('请填写现场情况描述')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 初始化表单数据
|
||||
const initFormData = (data) => {
|
||||
Object.assign(formData, {
|
||||
occurLocation: data.occurLocation || '',
|
||||
occurTime: data.occurTime || '',
|
||||
roadConditionType: data.roadConditionType || '',
|
||||
routeNo: data.routeNo || '',
|
||||
event: { ...formData.event, ...(data.event || {}) },
|
||||
report: { ...formData.report, ...(data.report || {}) },
|
||||
lossList: data.lossList || [],
|
||||
fileList: data.fileList || []
|
||||
})
|
||||
|
||||
if (data.report?.disposalMeasures) {
|
||||
disposalMeasureValue.value = data.report.disposalMeasures
|
||||
const getFormData = () => {
|
||||
const submitData = {
|
||||
...formData.value,
|
||||
report: {
|
||||
...formData.value.report
|
||||
}
|
||||
}
|
||||
|
||||
// 校准时间
|
||||
if (submitData.report.hasStrandedVehicles !== 1) {
|
||||
submitData.report.strandedVehicleCount = null
|
||||
}
|
||||
|
||||
return submitData
|
||||
}
|
||||
|
||||
const calibrateTime = () => {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
@ -286,162 +165,89 @@ const calibrateTime = () => {
|
||||
const day = String(now.getDate()).padStart(2, '0')
|
||||
const hours = String(now.getHours()).padStart(2, '0')
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0')
|
||||
formData.occurTime = `${year}-${month}-${day} ${hours}:${minutes}`
|
||||
formData.value.occurTime = `${year}-${month}-${day} ${hours}:${minutes}`
|
||||
ElMessage.success('时间已校准为当前时间')
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
const validate = () => {
|
||||
if (!formData.occurTime) {
|
||||
ElMessage.warning('请填写发生时间')
|
||||
return false
|
||||
}
|
||||
if (!formData.routeNo) {
|
||||
ElMessage.warning('请填写线路编号')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 获取表单数据
|
||||
const getFormData = () => {
|
||||
return { ...formData }
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.assign(formData, {
|
||||
occurLocation: '',
|
||||
occurTime: '',
|
||||
roadConditionType: '',
|
||||
routeNo: '',
|
||||
event: {
|
||||
blockedMileage: '',
|
||||
blockedPointName: '',
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
damageCount: '',
|
||||
district: '',
|
||||
endStakeNo: '',
|
||||
estimatedRecoveryCost: '',
|
||||
isBlocked: '',
|
||||
needsRecovery: '',
|
||||
repairProgress: '',
|
||||
reporterUnit: '',
|
||||
startStakeNo: ''
|
||||
},
|
||||
report: {
|
||||
actualRecoverTime: '',
|
||||
damagedVehicleCount: '',
|
||||
deadCount: '',
|
||||
disposalMeasures: '',
|
||||
expectRecoverTime: '',
|
||||
injuredCount: '',
|
||||
investedFunds: '',
|
||||
investedMachinery: '',
|
||||
investedManpower: '',
|
||||
remark: '',
|
||||
siteDescription: '',
|
||||
strandedPersonCount: '',
|
||||
strandedVehicleCount: '',
|
||||
totalLossAmount: ''
|
||||
},
|
||||
lossList: [],
|
||||
fileList: []
|
||||
})
|
||||
disposalMeasureValue.value = ''
|
||||
}
|
||||
|
||||
// 提交方法
|
||||
const submit = () => {
|
||||
if (validate()) {
|
||||
emit('submit', getFormData())
|
||||
const handleHasStrandedVehiclesChange = (value) => {
|
||||
if (value !== 1) {
|
||||
formData.value.report.strandedVehicleCount = null
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// 验证表单
|
||||
if (!validate()) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 获取表单数据
|
||||
|
||||
// 添加事件类型和站点信息
|
||||
const submitData = {
|
||||
...formData
|
||||
// 可以在这里添加站点信息等其他数据
|
||||
}
|
||||
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/water-damage/addOrUpdate',
|
||||
url: '/snow-ops-platform/event/addOrUpdate',
|
||||
method: 'post',
|
||||
data: submitData
|
||||
data: getFormData()
|
||||
})
|
||||
|
||||
if (res?.code === '00000') {
|
||||
ElMessage.success('提交成功')
|
||||
|
||||
emit("refresh")
|
||||
emit('refresh')
|
||||
} else {
|
||||
ElMessage.error(res.message)
|
||||
ElMessage.error(res?.message || '提交失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('提交失败，请重试')
|
||||
console.error('提交失败:', error)
|
||||
} finally {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
validate,
|
||||
initFormData,
|
||||
getFormData,
|
||||
resetForm,
|
||||
calibrateTime,
|
||||
calibrateTime
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.water-disaster-pc {
|
||||
.ice-disaster-pc {
|
||||
background-color: #f5f7fa;
|
||||
height: 100%;
|
||||
|
||||
.form-card {
|
||||
.info-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
border-left: 4px solid #409eff;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
padding: 0 10px;
|
||||
// :deep(.el-input-group__append) {
|
||||
// padding: 0 10px;
|
||||
// }
|
||||
|
||||
.upload-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-input-number {
|
||||
width: 300px;
|
||||
|
||||
.el-input-group__append {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-radio-group {
|
||||
.el-radio {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.upload-tip {
|
||||
margin-top: 8px;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="web-detail-container">
|
||||
<div class="content-container">
|
||||
<div class="page-container">
|
||||
<div class="content-container" v-if="detailData">
|
||||
<div class="left-panel">
|
||||
<!-- 基本信息卡片 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
@ -20,13 +20,13 @@
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">所属服务站：</span>
|
||||
<span class="info-value">{{}}</span>
|
||||
<span class="info-value">{{ detailData.event?.stationName || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">线路编号：</span>
|
||||
<span class="info-value">{{}}</span>
|
||||
<span class="info-value">{{ detailData.routeNo || detailData.event?.routeNo || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -34,22 +34,66 @@
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">发现时间：</span>
|
||||
<span class="info-value">冰雪事件</span>
|
||||
<span class="info-value">{{ detailData.occurTime || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">路况位置：</span>
|
||||
<span class="info-value">{{}}</span>
|
||||
<span class="info-value">{{ detailData.occurLocation || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">发生地点：</span>
|
||||
<span class="info-value">{{}}</span>
|
||||
<span class="info-value">{{ detailData.event?.occurLocation || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="info-row">
|
||||
<div class="stake-panel">
|
||||
<el-icon class="stake-point-icon">
|
||||
<LocationFilled />
|
||||
</el-icon>
|
||||
<div class="info-item">
|
||||
<span class="info-label">起点桩号：</span>
|
||||
<span class="info-value">{{ formatStakeNo(detailData.event?.startStakeNo) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">纬度：</span>
|
||||
<span class="info-value">{{ formatValue(detailData.event?.startStakeLat ?? detailData.event?.startStakeLatitude) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">经度：</span>
|
||||
<span class="info-value">{{ formatValue(detailData.event?.startStakeLng ?? detailData.event?.startStakeLongitude) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stake-center">
|
||||
<div class="info-item stake-mileage-item">
|
||||
<span class="info-label">受灾里程：</span>
|
||||
<span class="info-value">{{ formatMileage(detailData.event?.disasterMileage) }}</span>
|
||||
</div>
|
||||
<div class="stake-mileage-line"></div>
|
||||
</div>
|
||||
<div class="stake-panel">
|
||||
<el-icon class="stake-point-icon">
|
||||
<LocationFilled />
|
||||
</el-icon>
|
||||
<div class="info-item">
|
||||
<span class="info-label">止点桩号：</span>
|
||||
<span class="info-value">{{ formatStakeNo(detailData.event?.endStakeNo) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">纬度：</span>
|
||||
<span class="info-value">{{ formatValue(detailData.event?.endStakeLat ?? detailData.event?.endStakeLatitude) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">经度：</span>
|
||||
<span class="info-value">{{ formatValue(detailData.event?.endStakeLng ?? detailData.event?.endStakeLongitude) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<!-- 填报情况 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
@ -58,41 +102,94 @@
|
||||
<span class="card-title">填报情况</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="hasReportData">
|
||||
<div v-for="(report, index) in allReports" :key="'report' + index" class="report-section">
|
||||
<div class="report-header">
|
||||
<span class="report-title">{{ getReportTitle(index) }}</span>
|
||||
<span class="report-meta">时间：{{ formatValue(report.createTime) }}</span>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="basic-info-wrapper">
|
||||
<div class="info-list">
|
||||
<div class="info-item">
|
||||
<span class="info-label">处理措施：</span>
|
||||
<span class="info-value">{{ formatDisposalMeasures(report.disposalMeasures) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">预计恢复时间：</span>
|
||||
<span class="info-value">{{ formatValue(report.expectRecoverTime) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">实际恢复时间：</span>
|
||||
<span class="info-value">{{ formatValue(report.actualRecoverTime) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">填报人：</span>
|
||||
<span class="info-value">{{ formatValue(report.reporterName || report.reportUserName || report.createByName) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">联系电话：</span>
|
||||
<span class="info-value">{{ formatValue(report.reporterPhone || report.phone || report.reportPhone || report.contactPhone) }}</span>
|
||||
</div>
|
||||
<div class="info-item" v-for="(item, index) in report.materialUsageList" :key="index">
|
||||
<span class="info-label">{{item.materialName}}：</span>
|
||||
<span class="info-value">{{ getMaterialUsageText(item) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">投入资金：</span>
|
||||
<span class="info-value">{{ formatUnitValue(report.inputFunds ?? report.material?.inputFunds ?? report.investedFunds, '万元') }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">投入人力：</span>
|
||||
<span class="info-value">{{ formatUnitValue(report.inputManpower ?? report.material?.inputManpower ?? report.investedManpower, '人次') }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">投入设备：</span>
|
||||
<span class="info-value">{{ formatUnitValue(report.inputEquipment ?? report.material?.inputEquipment ?? report.investedMachinery, '台') }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">有无车辆滞留：</span>
|
||||
<span class="info-value">{{ getHasStrandedVehiclesText(report) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">滞留车辆：</span>
|
||||
<span class="info-value">{{ formatUnitValue(report.strandedVehicleCount ?? report.traffic?.strandedVehicleCount, '辆') }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">现场情况描述：</span>
|
||||
<span class="info-value">{{ formatValue(report.siteDescription) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-list">
|
||||
<FileUpload v-model="report.fileList" :readonly="!isEdit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="暂无填报情况" :image-size="100" />
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- <div class="right-panel" v-if="isEdit">
|
||||
<div class="right-panel" v-if="isEdit">
|
||||
<ContinueReport ref="continueReport" @refresh="getDisasterDetail" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { onMounted, ref, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ArrowLeft, Picture, VideoCamera } from '@element-plus/icons-vue'
|
||||
import ContinueReport from './IceDisasterContinueReportPC.vue'
|
||||
import { LocationFilled } from '@element-plus/icons-vue'
|
||||
import { request } from '@shared/utils/request'
|
||||
import ContinueReport from './IceDisasterContinueReportPC.vue'
|
||||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// 详情数据
|
||||
const detailData = ref({
|
||||
event: null,
|
||||
report: [],
|
||||
fileList: [],
|
||||
lossList: [],
|
||||
occurLocation: '',
|
||||
occurTime: '',
|
||||
roadConditionType: '',
|
||||
routeNo: ''
|
||||
})
|
||||
|
||||
// 事件状态
|
||||
const eventStatus = ref(0)
|
||||
const detailData = ref(null)
|
||||
|
||||
// 是否为编辑
|
||||
const isEdit = computed(() => {
|
||||
@ -101,19 +198,25 @@ const isEdit = computed(() => {
|
||||
|
||||
const continueReport = ref(null)
|
||||
|
||||
const formatValue = (value) => {
|
||||
return value || value === 0 ? value : '-'
|
||||
}
|
||||
|
||||
const formatStakeNo = (value) => {
|
||||
if (!value && value !== 0) return '-'
|
||||
const text = String(value).trim()
|
||||
if (!text) return '-'
|
||||
return /^k/i.test(text) ? text.toUpperCase() : `K${text}`
|
||||
}
|
||||
|
||||
const formatMileage = (value) => {
|
||||
if (!value && value !== 0) return '-'
|
||||
return `${value}公里`
|
||||
}
|
||||
|
||||
// 所有填报记录（首报 + 续报）
|
||||
const allReports = computed(() => {
|
||||
const reports =
|
||||
detailData.value.report?.map((item, index) => {
|
||||
if (index === detailData.value.report.length - 1) {
|
||||
item.title = '首报'
|
||||
} else {
|
||||
item.title = '续报' + (detailData.value.report.length - 1 - index)
|
||||
}
|
||||
return item
|
||||
}) || []
|
||||
return reports
|
||||
// return reports.reverse()
|
||||
return detailData.value.report || []
|
||||
})
|
||||
|
||||
// 是否有填报数据
|
||||
@ -121,6 +224,39 @@ const hasReportData = computed(() => {
|
||||
return allReports.value.length > 0
|
||||
})
|
||||
|
||||
const getReportTitle = (index) => {
|
||||
const reportLength = allReports.value.length
|
||||
return index === reportLength - 1 ? '首报' : `续报${reportLength - 1 - index}`
|
||||
}
|
||||
|
||||
const formatDisposalMeasures = (value) => {
|
||||
if (!value) return '-'
|
||||
return String(value)
|
||||
.split(/[，,]/)
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
.join('、')
|
||||
}
|
||||
|
||||
const formatUnitValue = (value, unit) => {
|
||||
if (value === null || value === undefined || value === '') return '-'
|
||||
return `${value}${unit}`
|
||||
}
|
||||
|
||||
const getMaterialUsageText = (item) => {
|
||||
return item.usageAmount + ' ' + item.materialUnit
|
||||
}
|
||||
|
||||
const getHasStrandedVehiclesText = (report) => {
|
||||
const value = report?.hasStrandedVehicles ?? report?.traffic?.hasStrandedVehicles
|
||||
if (value === 1 || value === true || value === '1' || value === '是' || value === '有') return '有'
|
||||
if (value === 0 || value === false || value === '0' || value === '否' || value === '无') return '无'
|
||||
|
||||
const count = report?.strandedVehicleCount ?? report?.traffic?.strandedVehicleCount
|
||||
if (count === null || count === undefined || count === '') return '-'
|
||||
return Number(count) > 0 ? '有' : '无'
|
||||
}
|
||||
|
||||
// 获取灾毁详情
|
||||
const getDisasterDetail = async () => {
|
||||
const id = route.query.id
|
||||
@ -137,27 +273,27 @@ const getDisasterDetail = async () => {
|
||||
|
||||
if (result?.data) {
|
||||
const data = result.data
|
||||
console.log('🚀 ~ getDisasterDetail ~ data:', data)
|
||||
detailData.value = {
|
||||
event: data.event || null,
|
||||
report: data.report || [],
|
||||
report: data.reportList?.reverse(),
|
||||
fileList: data.fileList || [],
|
||||
lossList: data.lossList || [],
|
||||
occurLocation: data.occurLocation || '',
|
||||
occurTime: data.occurTime || '',
|
||||
occurLocation: data.occurLocation || data.event?.roadConditionLocation || '',
|
||||
occurTime: data.occurTime || data.event?.occurTime || '',
|
||||
roadConditionType: data.roadConditionType || '',
|
||||
routeNo: data.routeNo || ''
|
||||
routeNo: data.routeNo || data.event?.routeNo || ''
|
||||
}
|
||||
eventStatus.value = data.eventStatus || 0
|
||||
|
||||
if (isEdit.value) {
|
||||
const newFormData = {
|
||||
...data,
|
||||
lossList: null,
|
||||
report: {},
|
||||
fileList: null
|
||||
yhzMaterialList: [],
|
||||
fileList: []
|
||||
}
|
||||
nextTick(()=>{
|
||||
continueReport.value?.initFormData(newFormData)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
ElMessage.warning(result.message || '获取详情失败')
|
||||
@ -168,18 +304,13 @@ const getDisasterDetail = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 点击返回
|
||||
const handleClickBack = () => {
|
||||
router.push('/disasterManagement')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDisasterDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.web-detail-container {
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
height: 100%;
|
||||
@ -187,27 +318,6 @@ onMounted(() => {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 20px;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
@ -227,6 +337,41 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.stake-panel {
|
||||
padding: 8px 12px 4px;
|
||||
}
|
||||
|
||||
.stake-center {
|
||||
padding: 18px 12px 4px;
|
||||
}
|
||||
|
||||
.stake-point-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 auto 18px;
|
||||
color: #409eff;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.stake-mileage-item {
|
||||
margin-bottom: 10px;
|
||||
justify-content: center;
|
||||
|
||||
&.info-item .info-value {
|
||||
flex: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.stake-mileage-line {
|
||||
width: 200px;
|
||||
height: 2px;
|
||||
margin: 0 4px;
|
||||
background: #2f3136;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
margin-bottom: 16px;
|
||||
|
||||
@ -244,10 +389,6 @@ onMounted(() => {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&.margin {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
@ -295,88 +436,37 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-wrapper {
|
||||
margin-top: 12px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #ebeef5;
|
||||
|
||||
.attachment-item {
|
||||
.attachment-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
.attachment-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 13px;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-buttons {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
|
||||
z-index: 100;
|
||||
|
||||
.footer-btn {
|
||||
width: 200px;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
}
|
||||
.content-container {
|
||||
display: flex;
|
||||
|
||||
.left-panel {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
width: 300px;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.basic-info-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
.detal-info-wrapper {
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #efefef;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="disaster-form-page">
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="disaster-form" @submit.prevent>
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" class="disaster-form" @submit.prevent>
|
||||
<el-card class="form-section" shadow="never">
|
||||
<template #header>
|
||||
<div class="section-header">
|
||||
@ -11,18 +11,18 @@
|
||||
<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 label="填报单位" prop="event.reportUnit">
|
||||
<el-input v-model="formData.event.reportUnit" 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 label="联系人员" prop="event.reporterName">
|
||||
<el-input v-model="formData.event.reporterName" 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 label="联系电话" prop="event.reporterPhone">
|
||||
<el-input v-model="formData.event.reporterPhone" maxlength="11" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -97,13 +97,13 @@
|
||||
|
||||
<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 label="起点桩经度" prop="event.startStakeLng">
|
||||
<NumberInput v-model="formData.event.startStakeLng" :precision="6" 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 label="起点桩纬度" prop="event.startStakeLat">
|
||||
<NumberInput v-model="formData.event.startStakeLat" :precision="6" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
@ -117,20 +117,20 @@
|
||||
|
||||
<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 label="止点桩经度" prop="event.endStakeLng">
|
||||
<NumberInput v-model="formData.event.endStakeLng" :precision="6" 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 label="止点桩纬度" prop="event.endStakeLat">
|
||||
<NumberInput v-model="formData.event.endStakeLat" :precision="6" 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="请填写">
|
||||
<NumberInput v-model="formData.event.disasterMileage" :precision="2" placeholder="请填写">
|
||||
<template #append>公里</template>
|
||||
</el-input>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -179,49 +179,41 @@
|
||||
|
||||
<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 label="投入人力" prop="report.inputManpower">
|
||||
<NumberInput v-model="formData.report.inputManpower" :precision="0" placeholder="请填写" style="width: 100%">
|
||||
<template #append>人次</template>
|
||||
</NumberInput>
|
||||
</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 label="投入资金" prop="report.inputFunds">
|
||||
<NumberInput v-model="formData.report.inputFunds" :precision="2" placeholder="请填写" style="width: 100%">
|
||||
<template #append>万元</template>
|
||||
</NumberInput>
|
||||
</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 label="投入设备" prop="report.inputEquipment">
|
||||
<NumberInput v-model="formData.report.inputEquipment" :precision="1" placeholder="请填写" style="width: 100%">
|
||||
<template #append>台班</template>
|
||||
</NumberInput>
|
||||
</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-form-item label="有无滞留车辆" prop="report.hasStrandedVehicles">
|
||||
<el-select v-model="formData.report.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 label="滞留车辆" prop="report.strandedVehicleCount">
|
||||
<NumberInput v-model="formData.report.strandedVehicleCount" :precision="0" placeholder="请填写" style="width: 100%">
|
||||
<template #append>辆</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -259,6 +251,7 @@
|
||||
import { LocationFilled } from '@element-plus/icons-vue'
|
||||
import BlockItem from '@/component/BlockItem.vue'
|
||||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||||
import NumberInput from '@/component/NumberInput/NumberInput.vue'
|
||||
import RoadRoutesSelect from '../components/RoadRoutesSelect.vue'
|
||||
import YHZSelect from '../components/YHZSelect.vue'
|
||||
import MaterialList from '../components/MaterialList.vue'
|
||||
|
||||
@ -11,36 +11,49 @@ const createDefaultFormData = () => ({
|
||||
occurTime: '',
|
||||
routeNo: '',
|
||||
event: {
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
actualRecoverTime: '',
|
||||
disasterMileage: null,
|
||||
disposalMeasures: '',
|
||||
district: '',
|
||||
endStakeLatitude: null,
|
||||
endStakeLongitude: null,
|
||||
endStakeLat: null,
|
||||
endStakeLng: null,
|
||||
endStakeNo: '',
|
||||
expectRecoverTime: '',
|
||||
id: null,
|
||||
occurLocation: '',
|
||||
reporterUnit: DEFAULT_REPORTER_UNIT,
|
||||
occurTime: '',
|
||||
reporterName: '',
|
||||
reporterPhone: '',
|
||||
reportTime: '',
|
||||
reportUnit: DEFAULT_REPORTER_UNIT,
|
||||
roadConditionLocation: '',
|
||||
routeNo: '',
|
||||
routeType: '',
|
||||
serviceStationId: '',
|
||||
startStakeLatitude: null,
|
||||
startStakeLongitude: null,
|
||||
startStakeLat: null,
|
||||
startStakeLng: null,
|
||||
startStakeNo: ''
|
||||
},
|
||||
material: {
|
||||
inputEquipment: null,
|
||||
inputFunds: null,
|
||||
inputManpower: null
|
||||
},
|
||||
report: {
|
||||
actualRecoverTime: '',
|
||||
antiSlipSand: null,
|
||||
disposalMeasures: '',
|
||||
expectRecoverTime: '',
|
||||
siteDescription: ''
|
||||
},
|
||||
traffic: {
|
||||
hasStrandedVehicles: null,
|
||||
industrialSalt: null,
|
||||
inputEquipment: null,
|
||||
inputFunds: null,
|
||||
inputManpower: null,
|
||||
reporterName: '',
|
||||
reporterPhone: '',
|
||||
reportTime: '',
|
||||
sandbags: null,
|
||||
siteDescription: '',
|
||||
strandedVehicleCount: null
|
||||
},
|
||||
fileList: []
|
||||
fileList: [],
|
||||
lossList: [],
|
||||
yhzMaterialList: []
|
||||
})
|
||||
|
||||
const mergeFormData = (source = {}) => {
|
||||
@ -52,24 +65,18 @@ const mergeFormData = (source = {}) => {
|
||||
...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
|
||||
merged.lossList = Array.isArray(source.lossList) ? source.lossList : defaults.lossList
|
||||
merged.yhzMaterialList = Array.isArray(source.yhzMaterialList) ? source.yhzMaterialList : defaults.yhzMaterialList
|
||||
|
||||
if (!merged.event.reporterUnit) {
|
||||
merged.event.reporterUnit = DEFAULT_REPORTER_UNIT
|
||||
if (!merged.event.reportUnit) {
|
||||
merged.event.reportUnit = DEFAULT_REPORTER_UNIT
|
||||
}
|
||||
|
||||
return merged
|
||||
@ -127,8 +134,8 @@ export const useIceDisasterReport = () => {
|
||||
})
|
||||
|
||||
const formRules = {
|
||||
'event.contactPerson': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
|
||||
'event.contactPhone': [
|
||||
'event.reporterName': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
|
||||
'event.reporterPhone': [
|
||||
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的联系电话', trigger: 'blur' }
|
||||
],
|
||||
@ -139,11 +146,11 @@ export const useIceDisasterReport = () => {
|
||||
'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.startStakeLng': [{ required: true, message: '请输入起点桩经度', trigger: 'blur' }],
|
||||
'event.startStakeLat': [{ 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.endStakeLng': [{ required: true, message: '请输入止点桩经度', trigger: 'blur' }],
|
||||
'event.endStakeLat': [{ 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' }],
|
||||
@ -172,13 +179,14 @@ export const useIceDisasterReport = () => {
|
||||
}
|
||||
|
||||
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
|
||||
// 暂时不处理区县变化
|
||||
// formData.routeNo = ''
|
||||
// formData.event.startStakeNo = ''
|
||||
// formData.event.endStakeNo = ''
|
||||
// formData.event.startStakeLng = null
|
||||
// formData.event.startStakeLat = null
|
||||
// formData.event.endStakeLng = null
|
||||
// formData.event.endStakeLat = null
|
||||
}
|
||||
|
||||
const handleRouteNoChange = (item = {}) => {
|
||||
@ -189,28 +197,52 @@ export const useIceDisasterReport = () => {
|
||||
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
|
||||
formData.event.startStakeLng = startPoint.longitude
|
||||
formData.event.startStakeLat = startPoint.latitude
|
||||
formData.event.endStakeLng = endPoint.longitude
|
||||
formData.event.endStakeLat = endPoint.latitude
|
||||
}
|
||||
|
||||
const handleHasStrandedVehiclesChange = (value) => {
|
||||
if (value !== 1) {
|
||||
formData.traffic.strandedVehicleCount = null
|
||||
formData.report.strandedVehicleCount = null
|
||||
}
|
||||
}
|
||||
|
||||
const getCurrentTime = () => {
|
||||
const currentDate = new Date()
|
||||
const year = currentDate.getFullYear()
|
||||
const month = String(currentDate.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(currentDate.getDate()).padStart(2, '0')
|
||||
const hours = String(currentDate.getHours()).padStart(2, '0')
|
||||
const minutes = String(currentDate.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(currentDate.getSeconds()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
}
|
||||
|
||||
const buildSubmitData = () => {
|
||||
const payload = mergeFormData(formData)
|
||||
const reportTime = payload.report.reportTime || payload.event.reportTime || getCurrentTime()
|
||||
|
||||
payload.event.routeNo = payload.routeNo
|
||||
payload.event.occurTime = payload.occurTime
|
||||
payload.event.eventType = eventType.value
|
||||
payload.event.roadType = filterForm.routeType
|
||||
payload.event.reportTime = reportTime
|
||||
payload.event.reportUnit = payload.event.reportUnit || DEFAULT_REPORTER_UNIT
|
||||
payload.event.disposalMeasures = payload.report.disposalMeasures
|
||||
payload.event.expectRecoverTime = payload.report.expectRecoverTime
|
||||
payload.event.actualRecoverTime = payload.report.actualRecoverTime || null
|
||||
payload.event.roadConditionLocation = payload.occurLocation
|
||||
if (payload.traffic.hasStrandedVehicles !== 1) {
|
||||
payload.traffic.strandedVehicleCount = null
|
||||
payload.event.routeType = filterForm.routeType
|
||||
payload.event.eventType = eventType.value
|
||||
|
||||
payload.report.reporterName = payload.report.reporterName || payload.event.reporterName
|
||||
payload.report.reporterPhone = payload.report.reporterPhone || payload.event.reporterPhone
|
||||
payload.report.reportTime = reportTime
|
||||
|
||||
if (payload.report.hasStrandedVehicles !== 1) {
|
||||
payload.report.strandedVehicleCount = null
|
||||
}
|
||||
|
||||
return payload
|
||||
}
|
||||
|
||||
@ -272,22 +304,42 @@ export const useIceDisasterReport = () => {
|
||||
|
||||
if (result?.data) {
|
||||
const data = result.data
|
||||
const baseReport = data.report || data.reportList?.[data.reportList.length - 1] || {}
|
||||
filterForm.routeType = data.event?.routeType || data.event?.roadType || filterForm.routeType
|
||||
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 || {})
|
||||
...(data.event || {}),
|
||||
reporterName: data.event?.reporterName || data.event?.contactPerson || '',
|
||||
reporterPhone: data.event?.reporterPhone || data.event?.contactPhone || '',
|
||||
reportUnit: data.event?.reportUnit || data.event?.reporterUnit || DEFAULT_REPORTER_UNIT,
|
||||
startStakeLat: data.event?.startStakeLat ?? data.event?.startStakeLatitude ?? null,
|
||||
startStakeLng: data.event?.startStakeLng ?? data.event?.startStakeLongitude ?? null,
|
||||
endStakeLat: data.event?.endStakeLat ?? data.event?.endStakeLatitude ?? null,
|
||||
endStakeLng: data.event?.endStakeLng ?? data.event?.endStakeLongitude ?? null
|
||||
},
|
||||
report: {
|
||||
...(data.report || {})
|
||||
...baseReport,
|
||||
disposalMeasures: baseReport.disposalMeasures || data.event?.disposalMeasures || '',
|
||||
expectRecoverTime: baseReport.expectRecoverTime || data.event?.expectRecoverTime || '',
|
||||
actualRecoverTime: baseReport.actualRecoverTime || data.event?.actualRecoverTime || '',
|
||||
inputEquipment: baseReport.inputEquipment ?? data.material?.inputEquipment ?? baseReport.investedMachinery ?? null,
|
||||
inputFunds: baseReport.inputFunds ?? data.material?.inputFunds ?? baseReport.investedFunds ?? null,
|
||||
inputManpower: baseReport.inputManpower ?? data.material?.inputManpower ?? baseReport.investedManpower ?? null,
|
||||
hasStrandedVehicles: baseReport.hasStrandedVehicles ?? data.traffic?.hasStrandedVehicles ?? null,
|
||||
strandedVehicleCount: baseReport.strandedVehicleCount ?? data.traffic?.strandedVehicleCount ?? null,
|
||||
industrialSalt: baseReport.industrialSalt ?? null,
|
||||
antiSlipSand: baseReport.antiSlipSand ?? null,
|
||||
sandbags: baseReport.sandbags ?? null,
|
||||
reporterName: baseReport.reporterName || data.event?.reporterName || data.event?.contactPerson || '',
|
||||
reporterPhone: baseReport.reporterPhone || data.event?.reporterPhone || data.event?.contactPhone || '',
|
||||
reportTime: baseReport.reportTime || data.event?.reportTime || ''
|
||||
},
|
||||
traffic: {
|
||||
...(data.traffic || {})
|
||||
}
|
||||
fileList: data.fileList || [],
|
||||
lossList: data.lossList || [],
|
||||
yhzMaterialList: data.yhzMaterialList || baseReport.yhzMaterialList || []
|
||||
})
|
||||
} else {
|
||||
ElMessage.warning(result?.message || '获取详情失败')
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
<template>
|
||||
<div class="water-disaster-pc">
|
||||
<!-- 合并后的单个卡片 -->
|
||||
<el-card class="form-card" shadow="never">
|
||||
<div slot="header" class="card-header">
|
||||
<span>续报信息</span>
|
||||
<el-card class="info-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">续报信息</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 所有表单项合并到一个区域，每行一个 -->
|
||||
<el-form :model="formData" label-width="120px" size="small">
|
||||
<el-form :model="formData" >
|
||||
<BlockItem title="处置情况">
|
||||
<!-- 处置措施 -->
|
||||
<el-form-item label="处置措施">
|
||||
<el-select v-model="formData.report.disposalMeasures">
|
||||
@ -24,7 +27,7 @@
|
||||
v-model="formData.report.expectRecoverTime"
|
||||
type="datetime"
|
||||
placeholder="请选择时间"
|
||||
value-format="yyyy-MM-dd HH:mm"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:picker-options="pickerOptions"
|
||||
style="width: 100%"
|
||||
/>
|
||||
@ -36,95 +39,98 @@
|
||||
v-model="formData.report.actualRecoverTime"
|
||||
type="datetime"
|
||||
placeholder="请选择时间"
|
||||
value-format="yyyy-MM-dd HH:mm"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:picker-options="pickerOptions"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</BlockItem>
|
||||
|
||||
<BlockItem title="实施情况"> </BlockItem>
|
||||
|
||||
<!-- 受伤人员 -->
|
||||
<el-form-item label="受伤人员">
|
||||
<el-input-number v-model="formData.report.injuredCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">人</template>
|
||||
</el-input-number>
|
||||
<NumberInput v-model="formData.report.injuredCount" :precision="0" placeholder="请填写" style="width: 300px">
|
||||
<template #append>人</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 死亡人员 -->
|
||||
<el-form-item label="死亡人员">
|
||||
<el-input-number v-model="formData.report.deadCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">人</template>
|
||||
</el-input-number>
|
||||
<NumberInput v-model="formData.report.deadCount" :precision="0" placeholder="请填写" style="width: 300px">
|
||||
<template #append>人</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 滞留人员 -->
|
||||
<el-form-item label="滞留人员">
|
||||
<el-input-number v-model="formData.report.strandedPersonCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">人</template>
|
||||
</el-input-number>
|
||||
<NumberInput v-model="formData.report.strandedPersonCount" :precision="0" placeholder="请填写" style="width: 300px">
|
||||
<template #append>人</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 损坏车辆 -->
|
||||
<el-form-item label="损坏车辆">
|
||||
<el-input-number v-model="formData.report.damagedVehicleCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">辆</template>
|
||||
</el-input-number>
|
||||
<NumberInput v-model="formData.report.damagedVehicleCount" :precision="0" placeholder="请填写" style="width: 300px">
|
||||
<template #append>辆</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 滞留车辆 -->
|
||||
<el-form-item label="滞留车辆">
|
||||
<el-input-number v-model="formData.report.strandedVehicleCount" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">辆</template>
|
||||
</el-input-number>
|
||||
<NumberInput v-model="formData.report.strandedVehicleCount" :precision="0" placeholder="请填写" style="width: 300px">
|
||||
<template #append>辆</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 损失列表组件 -->
|
||||
<loss-list :col-span="24" v-model="formData.lossList" />
|
||||
|
||||
<!-- 处理情况 -->
|
||||
<el-form-item label="处理情况">
|
||||
<el-input v-model="formData.report.remark" type="textarea" :rows="2" placeholder="请填写（选填）" style="width: 60%" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 损失总金额 -->
|
||||
<el-form-item label="损失总金额">
|
||||
<el-input v-model="formData.report.totalLossAmount" placeholder="请填写（选填）" style="width: 300px">
|
||||
<template slot="append">万元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 已投机械 -->
|
||||
<el-form-item label="已投机械">
|
||||
<el-input v-model="formData.report.investedMachinery" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">台/班</template>
|
||||
</el-input>
|
||||
<el-form-item label="投入机械">
|
||||
<NumberInput v-model="formData.report.investedMachinery" :precision="1" placeholder="请填写" style="width: 300px">
|
||||
<template #append>台/班</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 投入人力 -->
|
||||
<el-form-item label="投入人力">
|
||||
<el-input-number v-model="formData.report.investedManpower" :min="0" :controls="false" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">人次</template>
|
||||
</el-input-number>
|
||||
<NumberInput v-model="formData.report.investedManpower" :precision="0" placeholder="请填写" style="width: 300px">
|
||||
<template #append>人次</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 投入资金 -->
|
||||
<el-form-item label="投入资金">
|
||||
<el-input v-model="formData.report.investedFunds" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">万元</template>
|
||||
</el-input>
|
||||
<NumberInput v-model="formData.report.investedFunds" :precision="2" placeholder="请填写" style="width: 300px">
|
||||
<template #append>万元</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 处理情况 -->
|
||||
<el-form-item label="处理情况">
|
||||
<el-input v-model="formData.report.remark" type="textarea" :rows="2" placeholder="请填写（选填）" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 损失总金额 -->
|
||||
<el-form-item label="损失总金额">
|
||||
<NumberInput v-model="formData.report.totalLossAmount" :precision="2" placeholder="请填写（选填）" style="width: 300px">
|
||||
<template #append>万元</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 现场描述 -->
|
||||
<el-form-item label="现场描述">
|
||||
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" style="width: 60%" />
|
||||
<el-form-item label="现场情况描述">
|
||||
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="2" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 是否需要恢复重建 -->
|
||||
<el-form-item label="是否需要恢复重建">
|
||||
<!-- <el-form-item label="是否需要恢复重建">
|
||||
<el-radio-group v-model="formData.event.needsRecovery">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">追加记录</el-button>
|
||||
@ -138,6 +144,8 @@
|
||||
import { ref, reactive, watch, computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { request } from '@shared/utils/request'
|
||||
import BlockItem from '@/component/BlockItem.vue'
|
||||
import NumberInput from '@/component/NumberInput/NumberInput.vue'
|
||||
import LossList from '../WaterDisasterReport/WaterDisasterLossListPC.vue'
|
||||
|
||||
// Props 定义
|
||||
@ -368,7 +376,7 @@ const handleSubmit = async () => {
|
||||
if (res?.code === '00000') {
|
||||
ElMessage.success('提交成功')
|
||||
|
||||
emit("refresh")
|
||||
emit('refresh')
|
||||
} else {
|
||||
ElMessage.error(res.message)
|
||||
}
|
||||
@ -376,7 +384,6 @@ const handleSubmit = async () => {
|
||||
ElMessage.error('提交失败，请重试')
|
||||
console.error('提交失败:', error)
|
||||
} finally {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -386,7 +393,7 @@ defineExpose({
|
||||
initFormData,
|
||||
getFormData,
|
||||
resetForm,
|
||||
calibrateTime,
|
||||
calibrateTime
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -395,15 +402,22 @@ defineExpose({
|
||||
background-color: #f5f7fa;
|
||||
height: 100%;
|
||||
|
||||
.form-card {
|
||||
.info-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
border-left: 4px solid #409eff;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -415,14 +429,6 @@ defineExpose({
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-input-number {
|
||||
width: 300px;
|
||||
|
||||
.el-input-group__append {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-radio-group {
|
||||
.el-radio {
|
||||
margin-right: 20px;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="web-detail-container">
|
||||
|
||||
<div class="content-container">
|
||||
<div class="content-container" v-if="detailData">
|
||||
<div class="left-panel">
|
||||
<!-- 基本信息卡片 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
@ -11,122 +10,100 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" class="info-row">
|
||||
<el-col :span="8">
|
||||
<div class="base-info-grid">
|
||||
<div class="base-info-column">
|
||||
<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">{{ detailData.roadConditionType || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">是否阻断：</span>
|
||||
<span class="info-value">{{ detailData.event?.isBlocked ? '是' : '否' }}</span>
|
||||
<span class="info-value">{{ formatBooleanValue(detailData.event?.isBlocked) }}</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">{{ detailData.event?.repairProgress || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">处理措施：</span>
|
||||
<span class="info-value">{{ getBaseDisposalMeasures() }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">水毁处数：</span>
|
||||
<span class="info-value">{{ detailData.event?.damageCount || 0 }}</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">{{ detailData.event?.blockedMileage ? detailData.event.blockedMileage + '公里' : '-' }}</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">{{ detailData.occurLocation || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">起点桩号：</span>
|
||||
<span class="info-value">{{ detailData.event?.startStakeNo || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">止点桩号：</span>
|
||||
<span class="info-value">{{ detailData.event?.endStakeNo || '-' }}</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">{{ detailData.event?.blockedPointName || detailData.occurLocation || '-' }}</span>
|
||||
<span class="info-value">{{ detailData.occurLocation || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">阻断点小地名：</span>
|
||||
<span class="info-value">{{ detailData.event?.blockedPointName || '-' }}</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">{{ detailData.event?.district || '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">起点桩经度：</span>
|
||||
<span class="info-value">{{ detailData.event?.startStakeLongitude || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">止点桩经度：</span>
|
||||
<span class="info-value">{{ detailData.event?.endStakeLongitude || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">是否需要恢复重建：</span>
|
||||
<span class="info-value">{{ formatBooleanValue(detailData.event?.needsRecovery) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="base-info-column">
|
||||
<div class="info-item">
|
||||
<span class="info-label">填报站点：</span>
|
||||
<span class="info-value">{{ detailData.stationName || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">抢险进度：</span>
|
||||
<span class="info-value">{{ detailData.event?.repairProgress || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">地点路线：</span>
|
||||
<span class="info-value">{{ detailData.routeNo }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">阻断点小地名：</span>
|
||||
<span class="info-value">{{ detailData.event?.blockedPointName || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">起点桩号：</span>
|
||||
<span class="info-value">{{ detailData.event?.startStakeNo || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">止点桩号：</span>
|
||||
<span class="info-value">{{ detailData.event?.endStakeNo || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">受灾里程：</span>
|
||||
<span class="info-value">{{ formatUnitValue(detailData.event?.blockedMileage, '公里') }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">恢复重建预估费用（万元）：</span>
|
||||
<span class="info-value">{{ detailData.event?.estimatedRecoveryCost ?? '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="base-info-column">
|
||||
<div class="info-item">
|
||||
<span class="info-label">发生时间：</span>
|
||||
<span class="info-value">{{ detailData.occurTime || '-' }}</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">{{ detailData.event?.needsRecovery ? '是' : '否' }}</span>
|
||||
<span class="info-label">处理措施：</span>
|
||||
<span class="info-value">{{ getBaseDisposalMeasures() }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16" v-if="detailData.event?.needsRecovery">
|
||||
<div class="info-item">
|
||||
<span class="info-label">恢复重建预估费用：</span>
|
||||
<span class="info-value">{{ detailData.event?.estimatedRecoveryCost ? detailData.event.estimatedRecoveryCost + '万元' : '-' }}</span>
|
||||
<span class="info-label">水毁处数：</span>
|
||||
<span class="info-value">{{ detailData.event?.damageCount ?? '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">起点桩纬度：</span>
|
||||
<span class="info-value">{{ detailData.event?.startStakeLatitude || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">止点桩纬度：</span>
|
||||
<span class="info-value">{{ detailData.event?.endStakeLatitude || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 填报信息卡片 -->
|
||||
@ -213,10 +190,6 @@
|
||||
<el-empty v-else description="暂无填报信息" :image-size="100" />
|
||||
</el-card>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<!-- <div class="footer-buttons">
|
||||
<el-button type="primary" size="large" @click="handleContinueReport" class="footer-btn"> 续报 </el-button>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="right-panel" v-if="isEdit">
|
||||
<ContinueReport ref="continueReport" @refresh="getDisasterDetail" />
|
||||
@ -226,33 +199,19 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { onMounted, ref, computed, nextTick } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ArrowLeft, Picture, VideoCamera } from '@element-plus/icons-vue'
|
||||
import ContinueReport from './WaterDisasterContinueReportPC.vue'
|
||||
import { request } from '@shared/utils/request'
|
||||
import LossListDetail from './WaterDisasterLossListDetailPC.vue'
|
||||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||||
import mockData from '../WaterDisasterReport/waterMockJson.json'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// 详情数据
|
||||
const detailData = ref({
|
||||
event: null,
|
||||
report: [],
|
||||
fileList: [],
|
||||
lossList: [],
|
||||
occurLocation: '',
|
||||
occurTime: '',
|
||||
roadConditionType: '',
|
||||
routeNo: ''
|
||||
})
|
||||
|
||||
// 事件状态
|
||||
const eventStatus = ref(0)
|
||||
const detailData = ref(null)
|
||||
|
||||
// 是否为编辑
|
||||
const isEdit = computed(() => {
|
||||
@ -264,7 +223,7 @@ const continueReport = ref(null)
|
||||
// 所有填报记录（首报 + 续报）
|
||||
const allReports = computed(() => {
|
||||
const reports =
|
||||
detailData.value.report?.map((item, index) => {
|
||||
detailData.value?.report?.map((item, index) => {
|
||||
if (index === detailData.value.report.length - 1) {
|
||||
item.title = '首报'
|
||||
} else {
|
||||
@ -287,6 +246,17 @@ const getBaseDisposalMeasures = () => {
|
||||
return formatDisposalMeasures(firstItem.disposalMeasures || '') || '-'
|
||||
}
|
||||
|
||||
const formatBooleanValue = (value) => {
|
||||
if (value === true || value === 1 || value === '1') return '是'
|
||||
if (value === false || value === 0 || value === '0') return '否'
|
||||
return '-'
|
||||
}
|
||||
|
||||
const formatUnitValue = (value, unit) => {
|
||||
if (value === null || value === undefined || value === '') return '-'
|
||||
return `${value}${unit}`
|
||||
}
|
||||
|
||||
// 格式化处置措施
|
||||
const formatDisposalMeasures = (measures) => {
|
||||
if (!measures) return ''
|
||||
@ -302,27 +272,6 @@ const formatDisposalMeasures = (measures) => {
|
||||
.join('、')
|
||||
}
|
||||
|
||||
// 获取损失描述
|
||||
const getLossDescription = (report) => {
|
||||
const lossList = report?.lossList
|
||||
if (!lossList || lossList.length === 0) return '-'
|
||||
|
||||
const totalVolume = lossList.reduce((sum, loss) => {
|
||||
const volume = (loss.length || 0) * (loss.width || 0) * (loss.height || 0)
|
||||
return sum + volume
|
||||
}, 0)
|
||||
|
||||
const totalAmount = lossList.reduce((sum, loss) => sum + (loss.totalAmount || 0), 0)
|
||||
|
||||
return `${totalVolume}方，共损失${totalAmount}万元`
|
||||
}
|
||||
|
||||
// 获取车辆滞留文本
|
||||
const getVehicleStrandedText = (report) => {
|
||||
const count = report?.strandedVehicleCount || 0
|
||||
return count > 0 ? `有车滞留，共${count}辆` : '无车滞留'
|
||||
}
|
||||
|
||||
// 获取灾毁详情
|
||||
const getDisasterDetail = async () => {
|
||||
const id = route.query.id
|
||||
@ -340,7 +289,6 @@ const getDisasterDetail = async () => {
|
||||
|
||||
if (result?.data) {
|
||||
const data = result.data
|
||||
console.log('🚀 ~ getDisasterDetail ~ data:', data)
|
||||
detailData.value = {
|
||||
event: data.event || null,
|
||||
report: data.report || [],
|
||||
@ -349,9 +297,9 @@ const getDisasterDetail = async () => {
|
||||
occurLocation: data.occurLocation || '',
|
||||
occurTime: data.occurTime || '',
|
||||
roadConditionType: data.roadConditionType || '',
|
||||
routeNo: data.routeNo || ''
|
||||
routeNo: data.routeNo || '',
|
||||
routeName: data.routeName || ''
|
||||
}
|
||||
eventStatus.value = data.eventStatus || 0
|
||||
|
||||
if (isEdit.value) {
|
||||
const newFormData = {
|
||||
@ -360,7 +308,9 @@ const getDisasterDetail = async () => {
|
||||
report: route.query.mock ? mockData.report : {},
|
||||
fileList: null
|
||||
}
|
||||
nextTick(() => {
|
||||
continueReport.value?.initFormData(newFormData)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
ElMessage.warning(result.message || '获取详情失败')
|
||||
@ -371,11 +321,6 @@ const getDisasterDetail = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 点击返回
|
||||
const handleClickBack = () => {
|
||||
router.push('/disasterManagement')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDisasterDetail()
|
||||
})
|
||||
@ -390,27 +335,6 @@ onMounted(() => {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 20px;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
@ -430,12 +354,10 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.base-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
@ -466,6 +388,10 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.base-info-column {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.report-section {
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 24px;
|
||||
@ -498,62 +424,6 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-wrapper {
|
||||
margin-top: 12px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #ebeef5;
|
||||
|
||||
.attachment-item {
|
||||
.attachment-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
.attachment-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 13px;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-buttons {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
|
||||
z-index: 100;
|
||||
|
||||
.footer-btn {
|
||||
width: 200px;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
}
|
||||
.content-container {
|
||||
display: flex;
|
||||
.left-panel {
|
||||
@ -561,7 +431,7 @@ onMounted(() => {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.right-panel {
|
||||
width: 300px;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.content-wrapper {
|
||||
@ -581,6 +451,5 @@ onMounted(() => {
|
||||
overflow: hidden;
|
||||
}
|
||||
.file-list {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,11 +3,9 @@
|
||||
<template v-for="(item, index) in configs" :key="index">
|
||||
<el-col :span="colSpan">
|
||||
<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>
|
||||
<NumberInput :model-value="getValue(item)" :precision="2" @update:model-value="(value) => changeValue(item, value)">
|
||||
<template #append>{{ item.unit }}</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="item.lossTypeCode == 'OTHER_LOSS'">
|
||||
@ -20,12 +18,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted } 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'])
|
||||
import NumberInput from '@/component/NumberInput/NumberInput.vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@ -68,9 +64,9 @@ const getLossDict = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const changeValue = (config, event) => {
|
||||
const changeValue = (config, value) => {
|
||||
const item = getValueItem(config)
|
||||
item.totalAmount = event
|
||||
item.totalAmount = value
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@ -81,88 +77,5 @@ onMounted(async () => {
|
||||
<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>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="disaster-form-page">
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="disaster-form" @submit.prevent>
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" class="disaster-form" @submit.prevent>
|
||||
<el-card class="form-section" shadow="never">
|
||||
<template #header>
|
||||
<div class="section-header">
|
||||
@ -76,16 +76,16 @@
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="受灾里程" prop="event.blockedMileage">
|
||||
<el-input v-model="formData.event.blockedMileage" placeholder="请填写">
|
||||
<NumberInput v-model="formData.event.blockedMileage" :precision="2" placeholder="请填写">
|
||||
<template #append>公里</template>
|
||||
</el-input>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="水毁处数" prop="event.damageCount">
|
||||
<el-input v-model="formData.event.damageCount" placeholder="请填写">
|
||||
<NumberInput v-model="formData.event.damageCount" :precision="0" placeholder="请填写">
|
||||
<template #append>处</template>
|
||||
</el-input>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -139,12 +139,12 @@
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="起点桩经度" prop="event.startStakeLongitude">
|
||||
<el-input v-model="formData.event.startStakeLongitude" placeholder="请填写" />
|
||||
<NumberInput v-model="formData.event.startStakeLongitude" :precision="6" 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="请填写" />
|
||||
<NumberInput v-model="formData.event.startStakeLatitude" :precision="6" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
@ -159,12 +159,12 @@
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="止点桩经度" prop="event.endStakeLongitude">
|
||||
<el-input v-model="formData.event.endStakeLongitude" placeholder="请填写" />
|
||||
<NumberInput v-model="formData.event.endStakeLongitude" :precision="6" 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="请填写" />
|
||||
<NumberInput v-model="formData.event.endStakeLatitude" :precision="6" placeholder="请填写" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -212,29 +212,23 @@
|
||||
<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>
|
||||
<NumberInput v-model="formData.report.injuredCount" :precision="0" style="width: 100%">
|
||||
<template #append>人</template>
|
||||
</NumberInput>
|
||||
</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>
|
||||
<NumberInput v-model="formData.report.deadCount" :precision="0" style="width: 100%">
|
||||
<template #append>人</template>
|
||||
</NumberInput>
|
||||
</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>
|
||||
<NumberInput v-model="formData.report.strandedPersonCount" :precision="0" style="width: 100%">
|
||||
<template #append>人</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -242,20 +236,16 @@
|
||||
<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>
|
||||
<NumberInput v-model="formData.report.damagedVehicleCount" :precision="0" style="width: 100%">
|
||||
<template #append>辆</template>
|
||||
</NumberInput>
|
||||
</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>
|
||||
<NumberInput v-model="formData.report.strandedVehicleCount" :precision="0" style="width: 100%">
|
||||
<template #append>辆</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -267,25 +257,23 @@
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="投入机械" prop="report.investedMachinery">
|
||||
<el-input v-model="formData.report.investedMachinery" placeholder="请填写">
|
||||
<NumberInput v-model="formData.report.investedMachinery" :precision="1" placeholder="请填写">
|
||||
<template #append>台/班</template>
|
||||
</el-input>
|
||||
</NumberInput>
|
||||
</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>
|
||||
<NumberInput v-model="formData.report.investedManpower" :precision="0" style="width: 100%">
|
||||
<template #append>人次</template>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="投入资金" prop="report.investedFunds">
|
||||
<el-input v-model="formData.report.investedFunds" placeholder="请填写">
|
||||
<NumberInput v-model="formData.report.investedFunds" :precision="2" placeholder="请填写">
|
||||
<template #append>万元</template>
|
||||
</el-input>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -318,9 +306,9 @@
|
||||
</el-col>
|
||||
<el-col v-if="showEstimatedRecoveryCost" :span="8">
|
||||
<el-form-item label="恢复重建预估费用" prop="event.estimatedRecoveryCost">
|
||||
<el-input v-model="formData.event.estimatedRecoveryCost" placeholder="请填写">
|
||||
<NumberInput v-model="formData.event.estimatedRecoveryCost" :precision="2" placeholder="请填写">
|
||||
<template #append>万元</template>
|
||||
</el-input>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -339,6 +327,7 @@
|
||||
import { LocationFilled } from '@element-plus/icons-vue'
|
||||
import BlockItem from '@/component/BlockItem.vue'
|
||||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||||
import NumberInput from '@/component/NumberInput/NumberInput.vue'
|
||||
import RoadRoutesSelect from '../components/RoadRoutesSelect.vue'
|
||||
import YHZSelect from '../components/YHZSelect.vue'
|
||||
import LossList from './WaterDisasterLossListPC.vue'
|
||||
|
||||
@ -1,742 +0,0 @@
|
||||
<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>
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<el-row class="material-list-pc" :gutter="24">
|
||||
<el-row class="material-list-pc">
|
||||
<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>
|
||||
<NumberInput :model-value="getValue(item)" :precision="2" :placeholder="`余额: ${item.ye} `" @update:model-value="(value) => changeValue(item, value)">
|
||||
<template #append>
|
||||
{{ item.dw }}
|
||||
</template>
|
||||
</el-input>
|
||||
</NumberInput>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
@ -15,10 +15,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Delete, Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { request } from '@shared/utils/request'
|
||||
import NumberInput from '@/component/NumberInput/NumberInput.vue'
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
@ -37,14 +36,17 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
watch(()=> props.yhzId, ()=> {
|
||||
watch(
|
||||
() => props.yhzId,
|
||||
() => {
|
||||
emit('update:modelValue', [])
|
||||
getDict()
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
const getValue = (config) => {
|
||||
const item = getValueItem(config)
|
||||
return item?.usageAmount || 0
|
||||
return item?.usageAmount || null
|
||||
}
|
||||
|
||||
const getValueItem = (config) => {
|
||||
@ -78,93 +80,14 @@ const getDict = async () => {
|
||||
console.error('获取物质列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDict()
|
||||
})
|
||||
</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>
|
||||
|
||||
@ -50,6 +50,7 @@ export function useOptions() {
|
||||
|
||||
// 冰灾 处理措施
|
||||
options.value['iceDisposalMeasures'] = [
|
||||
{ label: '正常通行', value: '正常通行' },
|
||||
{ label: '封闭交通', value: '封闭交通' },
|
||||
{ label: '限速通行', value: '限速通行' },
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user