Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev
This commit is contained in:
commit
9bf98c53cd
@ -261,6 +261,14 @@ const routes = [
|
||||
breadcrumb: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/iceDisasterDetail',
|
||||
component: () => import('../views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue'),
|
||||
meta: {
|
||||
title: '冰雪灾害详情',
|
||||
breadcrumb: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/waterDisasterReport',
|
||||
component: () => import('../views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue'),
|
||||
|
||||
@ -221,8 +221,8 @@ const buildQueryParams = () => {
|
||||
}
|
||||
|
||||
if (dateRange.value && dateRange.value.length === 2) {
|
||||
params.startTime = dateRange.value[0] + " 00:00:00"
|
||||
params.endTime = dateRange.value[1] + " 23:59:59"
|
||||
params.startTime = dateRange.value[0] + ' 00:00:00'
|
||||
params.endTime = dateRange.value[1] + ' 23:59:59'
|
||||
}
|
||||
|
||||
// 过滤空字符串或null的参数
|
||||
@ -319,13 +319,23 @@ const resetFilters = () => {
|
||||
|
||||
// 查看详情
|
||||
const handleDetail = (row) => {
|
||||
if (row.disasterType == 'WATER_DAMAGE') {
|
||||
router.push({ path: '/waterDisasterDetail', query: { id: row.id } })
|
||||
}
|
||||
if (row.disasterType == 'ICE_SNOW') {
|
||||
router.push({ path: '/iceDisasterDetail', query: { id: row.id } })
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (row) => {
|
||||
if (row.disasterType == 'WATER_DAMAGE') {
|
||||
router.push({ path: '/waterDisasterDetail', query: { id: row.id, mode: 'edit' } })
|
||||
}
|
||||
if (row.disasterType == 'ICE_SNOW') {
|
||||
router.push({ path: '/iceDisasterDetail', query: { id: row.id, mode: 'edit' } })
|
||||
}
|
||||
}
|
||||
|
||||
// 新增跳转
|
||||
const toReport = () => {
|
||||
|
||||
@ -0,0 +1,449 @@
|
||||
<template>
|
||||
<div class="water-disaster-pc">
|
||||
<!-- 合并后的单个卡片 -->
|
||||
<el-card class="form-card" shadow="never">
|
||||
<div slot="header" class="card-header">
|
||||
<span>续报信息</span>
|
||||
</div>
|
||||
|
||||
<!-- 所有表单项合并到一个区域，每行一个 -->
|
||||
<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-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"
|
||||
:picker-options="pickerOptions"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 实际恢复时间 -->
|
||||
<el-form-item label="实际恢复时间">
|
||||
<el-date-picker
|
||||
v-model="formData.report.actualRecoverTime"
|
||||
type="datetime"
|
||||
placeholder="请选择时间"
|
||||
value-format="yyyy-MM-dd HH:mm"
|
||||
:picker-options="pickerOptions"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 受伤人员 -->
|
||||
<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>
|
||||
|
||||
<!-- 投入资金 -->
|
||||
<el-form-item label="投入资金">
|
||||
<el-input v-model="formData.report.investedFunds" placeholder="请填写" style="width: 300px">
|
||||
<template slot="append">万元</template>
|
||||
</el-input>
|
||||
</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>
|
||||
|
||||
<!-- 是否需要恢复重建 -->
|
||||
<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-button type="primary" @click="handleSubmit">追加记录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { request } from '@shared/utils/request'
|
||||
import LossList from '../WaterDisasterReport/WaterDisasterLossListPC.vue'
|
||||
|
||||
// Props 定义
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
// Emits 定义
|
||||
const emit = defineEmits(['input', 'change', 'submit'])
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
occurLocation: '',
|
||||
occurTime: '',
|
||||
roadConditionType: '',
|
||||
routeNo: '',
|
||||
event: {
|
||||
blockedMileage: '',
|
||||
blockedPointName: '',
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
damageCount: '',
|
||||
district: '',
|
||||
endStakeNo: '',
|
||||
estimatedRecoveryCost: '',
|
||||
inspectionMileage: '',
|
||||
isBlocked: '',
|
||||
needsRecovery: '',
|
||||
repairProgress: '',
|
||||
reporterUnit: '',
|
||||
startStakeNo: ''
|
||||
},
|
||||
report: {
|
||||
actualRecoverTime: '',
|
||||
damagedVehicleCount: '',
|
||||
deadCount: '',
|
||||
disposalMeasures: '',
|
||||
expectRecoverTime: '',
|
||||
injuredCount: '',
|
||||
investedFunds: '',
|
||||
investedMachinery: '',
|
||||
investedManpower: '',
|
||||
remark: '',
|
||||
siteDescription: '',
|
||||
strandedPersonCount: '',
|
||||
strandedVehicleCount: '',
|
||||
totalLossAmount: ''
|
||||
},
|
||||
lossList: [],
|
||||
fileList: []
|
||||
})
|
||||
|
||||
// 处置措施单选值
|
||||
const disposalMeasureValue = ref('')
|
||||
|
||||
// 下拉选项
|
||||
const roadConditionOptions = [
|
||||
{ label: '高速公路', value: '高速公路' },
|
||||
{ label: '国道', value: '国道' },
|
||||
{ label: '省道', value: '省道' },
|
||||
{ label: '县道', value: '县道' },
|
||||
{ label: '乡道', value: '乡道' },
|
||||
{ label: '村道', value: '村道' }
|
||||
]
|
||||
|
||||
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)
|
||||
}
|
||||
},
|
||||
{ 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
|
||||
}
|
||||
},
|
||||
{ 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 calibrateTime = () => {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
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}`
|
||||
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: '',
|
||||
inspectionMileage: '',
|
||||
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 handleSubmit = async () => {
|
||||
// 验证表单
|
||||
if (!validate()) {
|
||||
return
|
||||
}
|
||||
|
||||
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('提交成功')
|
||||
|
||||
emit("refresh")
|
||||
} else {
|
||||
ElMessage.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('提交失败，请重试')
|
||||
console.error('提交失败:', error)
|
||||
} finally {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
validate,
|
||||
initFormData,
|
||||
getFormData,
|
||||
resetForm,
|
||||
calibrateTime,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.water-disaster-pc {
|
||||
background-color: #f5f7fa;
|
||||
height: 100%;
|
||||
|
||||
.form-card {
|
||||
border-radius: 8px;
|
||||
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
border-left: 4px solid #409eff;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,606 @@
|
||||
<template>
|
||||
<div class="web-detail-container">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button :icon="ArrowLeft" @click="handleClickBack">返回</el-button>
|
||||
<h2 class="page-title">冰雪事件详情</h2>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-tag :type="getEventStatusType()" size="large">
|
||||
{{ getEventStatusText() }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<div class="left-panel">
|
||||
<!-- 基本信息卡片 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">基本信息</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" class="info-row">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">事件类型：</span>
|
||||
<span class="info-value">冰雪事件</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="info-label">路况类别：</span>
|
||||
<span class="info-value">{{ 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>
|
||||
</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>
|
||||
</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.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>
|
||||
</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>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 填报信息卡片 -->
|
||||
<el-card class="info-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">填报信息</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="hasReportData">
|
||||
<div v-for="(report, index) in allReports" :key="index" class="report-section">
|
||||
<div class="report-header">
|
||||
<span class="report-title">{{ report?.title }}</span>
|
||||
<span class="report-meta">时间：{{ report.reportTime || '-' }}</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">{{ report.siteDescription || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">处置措施：</span>
|
||||
<span class="info-value">{{ report.disposalMeasures || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">实际恢复时间：</span>
|
||||
<span class="info-value">{{ report.actualRecoverTime || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">预计恢复时间：</span>
|
||||
<span class="info-value">{{ report.expectRecoverTime || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="info-label">填报人：</span>
|
||||
<span class="info-value">{{ report.reporterName ? report.reporterName : '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-item">
|
||||
<span class="info-label">联系电话：</span>
|
||||
<span class="info-value">{{ report.phone ? report.phone : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-list">
|
||||
<FileUpload v-model="report.fileList" :readonly="!isEdit" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detal-info-wrapper">
|
||||
<template v-if="report.showDetail">
|
||||
<LossListDetail :modelValue="report.lossList" :col-span="8" />
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<div class="info-item margin">
|
||||
<span class="info-label">投入机械：</span>
|
||||
<span class="info-value">{{ report.investedMachinery ? report.investedMachinery + '台/班' : '-'}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item margin">
|
||||
<span class="info-label">投入人力：</span>
|
||||
<span class="info-value">{{ report.investedManpower ? report.investedManpower + '人次' : '-'}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item margin">
|
||||
<span class="info-label">投入资金：</span>
|
||||
<span class="info-value">{{ report.investedFunds ? report.investedFunds + '万元' : '-'}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-button style="margin-top: 30px" type="primary" link @click="report.showDetail = !report.showDetail">
|
||||
{{ report.showDetail ? '点击关闭详情' : '点击查看详情' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ArrowLeft, Picture, VideoCamera } from '@element-plus/icons-vue'
|
||||
import ContinueReport from './IceDisasterContinueReportPC.vue'
|
||||
import { request } from '@shared/utils/request'
|
||||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// 详情数据
|
||||
const detailData = ref({
|
||||
event: null,
|
||||
report: [],
|
||||
fileList: [],
|
||||
lossList: [],
|
||||
occurLocation: '',
|
||||
occurTime: '',
|
||||
roadConditionType: '',
|
||||
routeNo: ''
|
||||
})
|
||||
|
||||
// 事件状态
|
||||
const eventStatus = ref(0)
|
||||
|
||||
// 是否为编辑
|
||||
const isEdit = computed(() => {
|
||||
return route.query.mode === 'edit'
|
||||
})
|
||||
|
||||
const continueReport = ref(null)
|
||||
|
||||
// 所有填报记录（首报 + 续报）
|
||||
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()
|
||||
})
|
||||
|
||||
// 是否有填报数据
|
||||
const hasReportData = computed(() => {
|
||||
return allReports.value.length > 0
|
||||
})
|
||||
|
||||
// 获取事件状态文本
|
||||
const getEventStatusText = () => {
|
||||
return eventStatus.value === 1 ? '已解除' : '未解除'
|
||||
}
|
||||
|
||||
// 获取事件状态类型
|
||||
const getEventStatusType = () => {
|
||||
return eventStatus.value === 1 ? 'success' : 'danger'
|
||||
}
|
||||
|
||||
const getBaseDisposalMeasures = () => {
|
||||
const firstItem = allReports.value[0]
|
||||
if (!firstItem) return '-'
|
||||
return formatDisposalMeasures(firstItem.disposalMeasures || '') || '-'
|
||||
}
|
||||
|
||||
// 格式化处置措施
|
||||
const formatDisposalMeasures = (measures) => {
|
||||
if (!measures) return ''
|
||||
const measureMap = {
|
||||
半幅封闭: '半幅封闭',
|
||||
全副封闭: '全副封闭',
|
||||
便道通行: '便道通行',
|
||||
正常通行: '正常通行'
|
||||
}
|
||||
return measures
|
||||
.split(',')
|
||||
.map((m) => measureMap[m.trim()] || m.trim())
|
||||
.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
|
||||
if (!id) {
|
||||
ElMessage.warning('缺少灾毁ID')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await request({
|
||||
url: `/snow-ops-platform/water-damage/getById`,
|
||||
method: 'get',
|
||||
params: { id }
|
||||
})
|
||||
|
||||
if (result?.data) {
|
||||
const data = result.data
|
||||
console.log('🚀 ~ getDisasterDetail ~ data:', data)
|
||||
detailData.value = {
|
||||
event: data.event || null,
|
||||
report: data.report || [],
|
||||
fileList: data.fileList || [],
|
||||
lossList: data.lossList || [],
|
||||
occurLocation: data.occurLocation || '',
|
||||
occurTime: data.occurTime || '',
|
||||
roadConditionType: data.roadConditionType || '',
|
||||
routeNo: data.routeNo || ''
|
||||
}
|
||||
eventStatus.value = data.eventStatus || 0
|
||||
|
||||
if (isEdit.value) {
|
||||
const newFormData = {
|
||||
...data,
|
||||
lossList: null,
|
||||
report: {},
|
||||
fileList: null
|
||||
}
|
||||
continueReport.value?.initFormData(newFormData)
|
||||
}
|
||||
} else {
|
||||
ElMessage.warning(result.message || '获取详情失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取灾毁详情失败:', error)
|
||||
ElMessage.error('获取详情失败，请稍后重试')
|
||||
}
|
||||
}
|
||||
|
||||
// 点击返回
|
||||
const handleClickBack = () => {
|
||||
router.push('/disasterManagement')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDisasterDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.web-detail-container {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
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;
|
||||
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
line-height: 1.5;
|
||||
|
||||
& + .info-item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&.margin {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.report-section {
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.report-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed #dcdfe6;
|
||||
|
||||
.report-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.report-meta {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.basic-info-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.detal-info-wrapper {
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #efefef;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.info-list {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.file-list {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -328,7 +328,6 @@ import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Upload } from '@element-plus/icons-vue'
|
||||
import { request } from '@/utils/request'
|
||||
import LossList from './WaterDisasterLossListPC.vue'
|
||||
import BlockItem from '@/component/BlockItem.vue'
|
||||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||||
import { useOptions } from '@shared/composables/useOptions'
|
||||
|
||||
@ -138,7 +138,7 @@
|
||||
import { ref, reactive, watch, computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { request } from '@shared/utils/request'
|
||||
import LossList from '../DisasterReport/WaterDisasterLossListPC.vue'
|
||||
import LossList from '../WaterDisasterReport/WaterDisasterLossListPC.vue'
|
||||
|
||||
// Props 定义
|
||||
const props = defineProps({
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button :icon="ArrowLeft" @click="handleClickBack">返回</el-button>
|
||||
<h2 class="page-title">灾毁详情</h2>
|
||||
<h2 class="page-title">水毁事件详情</h2>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-tag :type="getEventStatusType()" size="large">
|
||||
@ -246,7 +246,7 @@ 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 '../DisasterReport/waterMockJson.json'
|
||||
import mockData from '../WaterDisasterReport/waterMockJson.json'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user