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

feat: 灾毁

Browse Source
This commit is contained in:
niedongsheng 2026-04-24 13:20:44 +08:00
parent a3ff5082a6
commit 4520394ea3
13 changed files with 187 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisaster.vue
View File

@ -4,7 +4,7 @@
<PanelItem title="基本信息" v-if="!isContinue">
<!-- 发生时间 (顶层 occurTime) -->
<BaseDatePicker
v-model="formData.occurTime"
v-model="formData.event.occurTime"
label="发生时间"
placeholder="请选择时间"
:columnsType="['year', 'month', 'day', 'hour', 'minute']"
@ -17,14 +17,14 @@
<!-- 线路编号 (顶层 routeNo) -->
<RoadRoutesPicker
v-model="formData.routeNo"
v-model="formData.event.routeNo"
label="线路编号"
placeholder="请线路"
@change="handleRouteNoChange"
/>
<!-- 发生地点 (occurLocation) -->
<van-field v-model="formData.occurLocation" label="发生地点" placeholder="请填写" />
<van-field v-model="formData.event.occurLocation" label="发生地点" placeholder="请填写" />
<!-- 起点桩号 (event.startStakeNo) -->
<van-field v-model="formData.event.startStakeNo" label="起点桩号(K)" placeholder="请填写" />
@ -205,7 +205,7 @@ const parsePointValue = point => {
};
const handleRouteNoChange = (item = {}) => {
formData.routeNo = item.routeCode || formData.routeNo;
formData.event.routeNo = item.routeCode;
formData.event.startStakeNo = item.startStakeNo;
formData.event.endStakeNo = item.endStakeNo;
@ -219,7 +219,7 @@ const handleRouteNoChange = (item = {}) => {
};
const calibrateTime = isShowToast => {
formData.value.occurTime = formatDate(Date.now());
formData.value.event?.occurTime = formatDate(Date.now());
if (isShowToast) showToast('时间已校准为当前时间');
};
@ -240,8 +240,9 @@ const handleSubmit = async () => {
// 可以在这里添加站点信息等其他数据
};
let apiUrl = formData.id ? '/snow-ops-platform/event/dispose' : '/snow-ops-platform/event/report'
const res = await request({
url: '/snow-ops-platform/event/addOrUpdate',
url: apiUrl,
method: 'post',
data: submitData,
});

14
packages/mobile/src/views/DisasterManagement/IceDisaster/IceDisasterDetail.vue
View File

@ -28,19 +28,19 @@
<!-- 线路编号： -->
<div class="info-row">
<span class="info-label">线路编号：</span>
<span class="info-value">{{ detailData.routeNo || '-' }}</span>
<span class="info-value">{{ detailData.event?.routeNo || '-' }}</span>
</div>
<!-- 发生时间 -->
<div class="info-row">
<span class="info-label">发生时间：</span>
<span class="info-value">{{ detailData.occurTime || '-' }}</span>
<span class="info-value">{{ detailData.event?.occurTime || '-' }}</span>
</div>
<!-- 地点路线 -->
<div class="info-row">
<span class="info-label">路况位置：</span>
<span class="info-value">{{ detailData.occurLocation || '-' }}</span>
<span class="info-value">{{ detailData.event?.occurLocation || '-' }}</span>
</div>
<!-- 发生地点 -->
@ -171,10 +171,6 @@ const detailData = ref({
report: [], // 填报列表（包含首报和续报）
fileList: [], // 附件列表
lossList: [], // 损失列表
occurLocation: '',
occurTime: '',
roadConditionType: '',
routeNo: '',
});
const loading = ref(true);
@ -255,10 +251,6 @@ const getDisasterDetail = async () => {
report: data.reportList?.reverse() || [], // 直接使用 report，包含首报和续报
fileList: data.fileList || [],
lossList: data.lossList || [],
occurLocation: data.occurLocation || '',
occurTime: data.occurTime || '',
roadConditionType: data.roadConditionType || '',
routeNo: data.routeNo || '',
};
} else {
showToast(result.message || '获取详情失败');

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

@ -4,7 +4,7 @@
<PanelItem title="基本信息" v-if="!isContinue">
<van-form>
<!-- 路况类别 -->
<BasePicker v-model="formData.roadConditionType" :options="options['waterRoadConditionType']" label="路况类别" placeholder="请选择" />
<BasePicker v-model="formData.event.roadConditionType" :options="options['waterRoadConditionType']" label="路况类别" placeholder="请选择" />
<!-- 是否阻断 (event.isBlocked) -->
<BasePicker v-model="formData.event.isBlocked" :options="options['yesOrNoBool']" label="是否阻断" placeholder="请选择" />
@ -23,14 +23,14 @@
</van-field>
<!-- 发生时间 (顶层 occurTime) -->
<BaseDatePicker v-model="formData.occurTime" label="发生时间" placeholder="请选择时间" :columnsType="['year', 'month', 'day', 'hour', 'minute']" />
<BaseDatePicker v-model="formData.event?.occurTime" label="发生时间" placeholder="请选择时间" :columnsType="['year', 'month', 'day', 'hour', 'minute']" />
<div class="calibrate-time-btn" @click="calibrateTime">
<van-icon name="replay" />
<span>校准时间</span>
</div>
<!-- 线路编号 (顶层 routeNo) -->
<RoadRoutesPicker v-model="formData.routeNo" label="线路编号" placeholder="请线路" @change="handleRouteNoChange" />
<RoadRoutesPicker v-model="formData.event?.routeNo" label="线路编号" placeholder="请线路" @change="handleRouteNoChange" />
<!-- 起点桩号 (event.startStakeNo) -->
<van-field v-model="formData.event.startStakeNo" label="起点桩号(K)" placeholder="请填写" />
@ -43,7 +43,7 @@
<van-field v-model="formData.event.latitude" label="纬度" placeholder="请填写" />
<!-- 路况位置 (occurLocation) -->
<van-field v-model="formData.occurLocation" label="路况位置" placeholder="请填写" />
<van-field v-model="formData.event?.occurLocation" label="路况位置" placeholder="请填写" />
<!-- 阻断点小地名 (event.blockedPointName) -->
<van-field v-model="formData.event.blockedPointName" label="阻断点小地名" placeholder="请填写" />
@ -172,14 +172,12 @@ const isContinue = computed(() => route.query.isContinue)
// 表单数据 - 按 Request 接口结构定义，使用 ref 包装
const formData = ref({
// 顶层字段
occurLocation: '', // 发生地点
occurTime: null, // 发生时间
roadConditionType: '', // 路况类别
routeNo: '', // 线路编号
// event 对象
event: {
occurLocation: '', // 发生地点/路况位置
occurTime: null, // 发生时间
routeNo: '', // 线路编号
roadConditionType: '', // 路况类别
blockedMileage: '', // 阻断里程
blockedPointName: '', // 阻断点小地名
contactPerson: '', // 联系人
@ -230,10 +228,6 @@ const initFormData = (newVal) => {
if (newVal && Object.keys(newVal).length > 0) {
// 深度合并数据 - 直接替换整个对象
formData.value = {
occurLocation: newVal.occurLocation || '',
occurTime: newVal.occurTime || formatDate(Date.now()),
roadConditionType: newVal.roadConditionType || '',
routeNo: newVal.routeNo || '',
event: { ...formData.value.event, ...(newVal.event || {}) },
report: { ...formData.value.report, ...(newVal.report || {}) },
lossList: newVal.lossList || [],
@ -246,7 +240,7 @@ const initFormData = (newVal) => {
const calibrateTime = () => {
const now = new Date()
const formatted = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
formData.value.occurTime = formatted
formData.value.event?.occurTime = formatted
showToast('时间已校准为当前时间')
}
@ -280,17 +274,17 @@ const parsePointValue = (point) => {
}
const handleRouteNoChange = (item) => {
formData.routeNo = item.routeCode
formData.event.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
formData.event.startStakeLng = startPoint.longitude
formData.event.startStakeLat = startPoint.latitude
formData.event.endStakeLng = endPoint.longitude
formData.event.endStakeLat = endPoint.latitude
}
// 简单的空值判断
@ -299,7 +293,7 @@ const isEmpty = (value) => {
}
const validate = () => {
if (isEmpty(formData.value.roadConditionType)) {
if (isEmpty(formData.value.event?.roadConditionType)) {
showToast('请选择路况类别')
return false
}
@ -323,7 +317,7 @@ const validate = () => {
showToast('请输入阻断里程')
return false
}
if (isEmpty(formData.value.occurTime)) {
if (isEmpty(formData.value.event?.occurTime)) {
showToast('请选择发生时间')
return false
}
@ -331,7 +325,7 @@ const validate = () => {
showToast('请输入预计恢复时间')
return false
}
if (isEmpty(formData.value.routeNo)) {
if (isEmpty(formData.value.event?.routeNo)) {
showToast('请输入线路编号')
return false
}
@ -343,7 +337,7 @@ const validate = () => {
showToast('请输入止点桩号')
return false
}
if (isEmpty(formData.value.occurLocation)) {
if (isEmpty(formData.value.event?.occurLocation)) {
showToast('请输入路况位置')
return false
}
@ -351,14 +345,6 @@ const validate = () => {
showToast('请输入阻断点小地名')
return false
}
if (isEmpty(formData.value.event?.longitude)) {
showToast('请输入经度')
return false
}
if (isEmpty(formData.value.event?.latitude)) {
showToast('请输入纬度')
return false
}
if (isEmpty(formData.value.event?.needsRecovery)) {
showToast('请选择是否需要恢复重建')
return false
@ -390,9 +376,9 @@ const handleSubmit = async () => {
...formData
// 可以在这里添加站点信息等其他数据
}
let apiUrl = formData.id ? '/snow-ops-platform/water-damage/dispose' : '/snow-ops-platform/water-damage/report'
const res = await request({
url: '/snow-ops-platform/water-damage/addOrUpdate',
url: apiUrl,
method: 'post',
data: submitData
})
@ -467,7 +453,7 @@ const getDisasterDetail = async () => {
onMounted(() => {
formData.value.occurTime = formatDate(Date.now())
formData.value.event?.occurTime = formatDate(Date.now())
if (route.query.id) {
getDisasterDetail()
} else {

20
packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisasterDetail.vue
View File

@ -22,7 +22,7 @@
<!-- 路况类别 -->
<div class="info-row">
<span class="info-label">路况类别：</span>
<span class="info-value">{{ detailData.roadConditionType || '-' }}</span>
<span class="info-value">{{ detailData.event?.roadConditionType || '-' }}</span>
</div>
<!-- 是否阻断 -->
@ -57,19 +57,19 @@
<!-- 发生时间 -->
<div class="info-row">
<span class="info-label">发生时间：</span>
<span class="info-value">{{ detailData.occurTime || '-' }}</span>
<span class="info-value">{{ detailData.event?.occurTime || '-' }}</span>
</div>
<!-- 线路编号 -->
<div class="info-row">
<span class="info-label">线路编号：</span>
<span class="info-value">{{ detailData.routeNo || '-' }}</span>
<span class="info-value">{{ detailData.event?.routeNo || '-' }}</span>
</div>
<!-- 地点路线 -->
<div class="info-row">
<span class="info-label">地点路线：</span>
<span class="info-value">{{ detailData.occurLocation || '-' }}</span>
<span class="info-label">路况位置：</span>
<span class="info-value">{{ detailData.event?.occurLocation || '-' }}</span>
</div>
<!-- 起点桩号 -->
@ -87,7 +87,7 @@
<!-- 路况位置（使用阻断点小地名或发生地点） -->
<div class="info-row">
<span class="info-label">路况位置：</span>
<span class="info-value">{{ detailData.event?.blockedPointName || detailData.occurLocation || '-' }}</span>
<span class="info-value">{{ detailData.event?.occurLocation || '-' }}</span>
</div>
<!-- 阻断点小地名 -->
@ -231,10 +231,6 @@ const detailData = ref({
report: [], // 填报列表（包含首报和续报）
fileList: [], // 附件列表
lossList: [], // 损失列表
occurLocation: '',
occurTime: '',
roadConditionType: '',
routeNo: ''
})
const loading = ref(true)
@ -329,10 +325,6 @@ const getDisasterDetail = async () => {
report: data.report || [], // 直接使用 report，包含首报和续报
fileList: data.fileList || [],
lossList: data.lossList || [],
occurLocation: data.occurLocation || '',
occurTime: data.occurTime || '',
roadConditionType: data.roadConditionType || '',
routeNo: data.routeNo || ''
}
} else {
showToast(result.message || '获取详情失败')

2
packages/screen/src/views/DisasterManagement/DisasterManagementPC.vue
View File

@ -320,7 +320,7 @@ const resetFilters = () => {
// 查看详情
const handleDetail = (row) => {
if (row.disasterType == 'WATER_DAMAGE') {
router.push({ path: '/waterDisasterDetail', query: { id: row.id } })
router.push({ path: '/waterDisasterDetail', query: { id: row.relationId } })
}
if (row.disasterType == 'ICE_SNOW') {
router.push({ path: '/iceDisasterDetail', query: { id: row.relationId } })

4
packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterContinueReportPC.vue
View File

@ -164,7 +164,7 @@ 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.value.occurTime = `${year}-${month}-${day} ${hours}:${minutes}`
formData.value.event?.occurTime = `${year}-${month}-${day} ${hours}:${minutes}`
ElMessage.success('时间已校准为当前时间')
}
@ -181,7 +181,7 @@ const handleSubmit = async () => {
try {
const res = await request({
url: '/snow-ops-platform/event/addOrUpdate',
url: '/snow-ops-platform/event/dispose',
method: 'post',
data: getFormData()
})

18
packages/screen/src/views/DisasterManagement/IceDisasterDetail/IceDisasterDetailPC.vue
View File

@ -26,7 +26,7 @@
<el-col :span="8">
<div class="info-item">
<span class="info-label">线路编号：</span>
<span class="info-value">{{ detailData.routeNo || '-' }}</span>
<span class="info-value">{{ detailData.event?.routeNo || '-' }}</span>
</div>
</el-col>
</el-row>
@ -34,13 +34,13 @@
<el-col :span="8">
<div class="info-item">
<span class="info-label">发现时间：</span>
<span class="info-value">{{ detailData.occurTime || '-' }}</span>
<span class="info-value">{{ detailData.event?.occurTime || '-' }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="info-label">路况位置：</span>
<span class="info-value">{{ detailData.occurLocation || '-' }}</span>
<span class="info-value">{{ detailData.event?.occurLocation || '-' }}</span>
</div>
</el-col>
<el-col :span="8">
@ -60,14 +60,6 @@
<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">
@ -279,10 +271,6 @@ const getDisasterDetail = async () => {
report: data.reportList?.reverse(),
fileList: data.fileList || [],
lossList: data.lossList || [],
occurLocation: data.occurLocation || data.event?.roadConditionLocation || '',
occurTime: data.occurTime || data.event?.occurTime || '',
roadConditionType: data.roadConditionType || '',
routeNo: data.routeNo || data.event?.routeNo || ''
}
if (isEdit.value) {

8
packages/screen/src/views/DisasterManagement/IceDisasterReport/IceDisasterReportPC.vue
View File

@ -43,8 +43,8 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发生时间" prop="occurTime">
<el-date-picker v-model="formData.occurTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
<el-form-item label="发生时间" prop="event.occurTime">
<el-date-picker v-model="formData.event.occurTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
</el-row>
@ -68,8 +68,8 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="线路编号" prop="routeNo">
<RoadRoutesSelect v-model="formData.routeNo" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" @change="handleRouteNoChange" />
<el-form-item label="线路编号" prop="event.routeNo">
<RoadRoutesSelect v-model="formData.event.routeNo" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" @change="handleRouteNoChange" />
</el-form-item>
</el-col>
</el-row>

16
packages/screen/src/views/DisasterManagement/IceDisasterReport/useIceDisasterReport.js
View File

@ -6,9 +6,6 @@ import { useOptions } from '@shared/composables/useOptions'
import { useUserStore} from '@/store/userStore'
const createDefaultFormData = () => ({
occurLocation: '',
occurTime: '',
routeNo: '',
event: {},
report: {},
fileList: [],
@ -61,15 +58,15 @@ export const useIceDisasterReport = () => {
const formData = reactive(createDefaultFormData())
const formRules = {
'event.reporterName': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
// 'event.reporterName': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
'event.reporterPhone': [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
// { required: true, message: '请输入联系电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的联系电话', trigger: 'blur' }
],
'event.serviceStationId': [{ required: true, message: '请选择填报站点', trigger: 'change' }],
occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
'event.district': [{ required: true, message: '请选择所属区县', trigger: 'change' }],
routeNo: [{ required: true, message: '请选择线路编号', trigger: 'change' }],
'event.routeNo': [{ required: true, message: '请选择线路编号', trigger: 'change' }],
'event.occurLocation': [{ required: true, message: '请输入发生地点', trigger: 'blur' }],
occurLocation: [{ required: true, message: '请选择路况位置', trigger: 'blur' }],
'event.startStakeNo': [{ required: true, message: '请输入起点桩号', trigger: 'blur' }],
@ -118,7 +115,7 @@ export const useIceDisasterReport = () => {
}
const handleRouteNoChange = (item = {}) => {
formData.routeNo = item.routeCode || formData.routeNo
formData.event.routeNo = item.routeCode
formData.event.startStakeNo = item.startStakeNo
formData.event.endStakeNo = item.endStakeNo
@ -149,8 +146,7 @@ export const useIceDisasterReport = () => {
}
const buildSubmitData = () => {
console.log(formData)
return
return formData
}
const validate = async () => {
@ -175,7 +171,7 @@ export const useIceDisasterReport = () => {
submitting.value = true
try {
const res = await request({
url: '/snow-ops-platform/event/addOrUpdate',
url: '/snow-ops-platform/event/report',
method: 'post',
data: buildSubmitData()
})

12
packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterContinueReportPC.vue
View File

@ -161,11 +161,11 @@ const emit = defineEmits(['input', 'change'])
// 表单数据
const formData = reactive({
event: {
occurLocation: '',
occurTime: '',
roadConditionType: '',
routeNo: '',
event: {
blockedMileage: '',
blockedPointName: '',
contactPerson: '',
@ -271,10 +271,6 @@ watch(
// 初始化表单数据
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 || [],
@ -294,7 +290,7 @@ 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.event?.occurTime = `${year}-${month}-${day} ${hours}:${minutes}`
ElMessage.success('时间已校准为当前时间')
}
@ -311,11 +307,11 @@ const getFormData = () => {
// 重置表单
const resetForm = () => {
Object.assign(formData, {
event: {
occurLocation: '',
occurTime: '',
roadConditionType: '',
routeNo: '',
event: {
blockedMileage: '',
blockedPointName: '',
contactPerson: '',
@ -368,7 +364,7 @@ const handleSubmit = async () => {
}
const res = await request({
url: '/snow-ops-platform/water-damage/addOrUpdate',
url: '/snow-ops-platform/water-damage/dispose',
method: 'post',
data: submitData
})

218
packages/screen/src/views/DisasterManagement/WaterDisasterDetail/WaterDisasterDetailPC.vue
View File

@ -10,99 +10,15 @@
</div>
</template>
<div class="base-info-grid">
<div class="base-info-column">
<div class="base-info-group">
<el-row v-for="(row, rowIndex) in baseInfoRows" :key="rowIndex" :gutter="24" class="base-info-row">
<el-col v-for="item in row" :key="`${rowIndex}-${item.label}`" :span="getColSpan(row)" class="info-column">
<div class="info-item">
<span class="info-label">事件类型：</span>
<span class="info-value">水毁事件</span>
</div>
<div class="info-item">
<span class="info-label">路况类别：</span>
<span class="info-value">{{ detailData.roadConditionType || '-' }}</span>
</div>
<div class="info-item">
<span class="info-label">是否阻断：</span>
<span class="info-value">{{ formatBooleanValue(detailData.event?.isBlocked) }}</span>
</div>
<div class="info-item">
<span class="info-label">路况位置：</span>
<span class="info-value">{{ detailData.occurLocation || '-' }}</span>
</div>
<div class="info-item">
<span class="info-label">所属区县：</span>
<span class="info-value">{{ detailData.event?.district || '-' }}</span>
</div>
<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>
<div class="info-item">
<span class="info-label">处理措施：</span>
<span class="info-value">{{ getBaseDisposalMeasures() }}</span>
</div>
<div class="info-item">
<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>
<span class="info-label">{{ item.label }}：</span>
<span class="info-value">{{ item.value }}</span>
</div>
</el-col>
</el-row>
</div>
</el-card>
@ -122,33 +38,15 @@
</div>
<div class="content-wrapper">
<div class="basic-info-wrapper">
<div class="info-list">
<div class="report-info-group">
<el-row v-for="(row, rowIndex) in getReportInfoRows(report)" :key="rowIndex" :gutter="24" class="report-info-row">
<el-col v-for="item in row" :key="`${rowIndex}-${item.label}`" :span="getColSpan(row)" class="info-column">
<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>
<span class="info-label">{{ item.label }}：</span>
<span class="info-value">{{ item.value }}</span>
</div>
</el-col>
</el-row>
</div>
<div class="file-list">
<FileUpload v-model="report.fileList" :readonly="!isEdit" />
@ -239,6 +137,67 @@ const hasReportData = computed(() => {
return allReports.value.length > 0
})
const baseInfoRows = computed(() => {
if (!detailData.value) return []
const rows = [
[
{ label: '事件类型', value: '水毁事件' },
{ label: '填报站点', value: detailData.value.event.stationName || '-' },
{ label: '发生时间', value: detailData.value.event.occurTime || '-' }
],
[
{ label: '路况类别', value: detailData.value.event.roadConditionType || '-' },
{ label: '抢险进度', value: detailData.value.event?.repairProgress || '-' },
{ label: '处理措施', value: getBaseDisposalMeasures() }
],
[
{ label: '是否阻断', value: formatBooleanValue(detailData.value.event?.isBlocked) },
{ label: '受灾里程', value: formatUnitValue(detailData.value.event?.blockedMileage, '公里') },
{ label: '水毁处数', value: detailData.value.event?.damageCount ?? '-' }
],
[
{ label: '地点路线', value: detailData.value.event?.routeNo || '-'},
{ label: '起点桩号', value: detailData.value.event?.startStakeNo || '-' },
{ label: '止点桩号', value: detailData.value.event?.endStakeNo || '-' },
],
[
{ label: '路况位置', value: detailData.value.occurLocation || '-' },
{ label: '阻断点小地名', value: detailData.value.event?.blockedPointName || '-' },
{ label: '所属区县', value: detailData.value.event?.district || '-' },
],
[
{ label: '是否需要恢复重建', value: formatBooleanValue(detailData.value.event?.needsRecovery) }
],
]
if (detailData.value.event?.estimatedRecoveryCost) {
rows[4].push([{ label: '恢复重建预估费用（万元）', value: detailData.value.event?.estimatedRecoveryCost ?? '-' }])
}
return rows
})
const getReportInfoRows = (report) => {
return [
[{ label: '现场描述', value: report.siteDescription || '-' }],
[{ label: '处置措施', value: report.disposalMeasures || '-' }],
[
{ label: '实际恢复时间', value: report.actualRecoverTime || '-' },
{ label: '预计恢复时间', value: report.expectRecoverTime || '-' }
],
[
{ label: '填报人', value: report.reporterName || '-' },
{ label: '联系电话', value: report.phone || '-' }
]
]
}
const getColSpan = (row) => {
const length = row?.length || 1
return Math.floor(24 / length)
}
const getBaseDisposalMeasures = () => {
const firstItem = allReports.value[0]
if (!firstItem) return '-'
@ -293,11 +252,6 @@ const getDisasterDetail = async () => {
report: data.report || [],
fileList: data.fileList || [],
lossList: data.lossList || [],
occurLocation: data.occurLocation || '',
occurTime: data.occurTime || '',
roadConditionType: data.roadConditionType || '',
routeNo: data.routeNo || '',
routeName: data.routeName || ''
}
if (isEdit.value) {
@ -353,12 +307,6 @@ onMounted(() => {
}
}
.base-info-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.info-item {
display: flex;
align-items: flex-start;
@ -387,8 +335,16 @@ onMounted(() => {
}
}
.base-info-column {
.base-info-group,
.report-info-group,
.base-info-row,
.report-info-row {
width: 100%;
}
.info-column {
min-width: 0;
margin-bottom: 10px;
}
.report-section {
@ -439,16 +395,20 @@ onMounted(() => {
}
.basic-info-wrapper {
display: flex;
gap: 24px;
}
.detal-info-wrapper {
margin-top: 10px;
border-top: 1px solid #efefef;
padding-top: 10px;
}
.info-list {
.report-info-row {
flex: 1;
overflow: hidden;
margin-bottom: -10px;
}
.file-list {
width: 320px;
flex-shrink: 0;
}
</style>

32
packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterReportPC.vue
View File

@ -43,16 +43,16 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发生时间" prop="occurTime">
<el-date-picker v-model="formData.occurTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
<el-form-item label="发生时间" prop="event.occurTime">
<el-date-picker v-model="formData.event.occurTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="路况类别" prop="roadConditionType">
<el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
<el-form-item label="路况类别" prop="event.roadConditionType">
<el-select v-model="formData.event.roadConditionType" placeholder="请选择" style="width: 100%">
<el-option v-for="(option, idx) in options['waterRoadConditionType']" :key="idx" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
@ -109,16 +109,16 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="线路编号" prop="routeNo">
<RoadRoutesSelect v-model="formData.routeNo" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" @change="handleRouteNoChange" />
<el-form-item label="线路编号" prop="event.routeNo">
<RoadRoutesSelect v-model="formData.event.routeNo" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" @change="handleRouteNoChange" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="路况位置" prop="occurLocation">
<el-input v-model="formData.occurLocation" placeholder="请选择">
<el-form-item label="路况位置" prop="event.occurLocation">
<el-input v-model="formData.event.occurLocation" placeholder="请选择">
<template #suffix>
<el-icon class="location-icon"><LocationFilled /></el-icon>
</template>
@ -141,13 +141,13 @@
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="起点桩经度" prop="event.startStakeLongitude">
<NumberInput v-model="formData.event.startStakeLongitude" :precision="6" 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">
<NumberInput v-model="formData.event.startStakeLatitude" :precision="6" 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">
@ -161,13 +161,13 @@
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="止点桩经度" prop="event.endStakeLongitude">
<NumberInput v-model="formData.event.endStakeLongitude" :precision="6" 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">
<NumberInput v-model="formData.event.endStakeLatitude" :precision="6" placeholder="请填写" />
<el-form-item label="止点桩纬度" prop="event.endStakeLat">
<NumberInput v-model="formData.event.endStakeLat" :precision="6" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>

31
packages/screen/src/views/DisasterManagement/WaterDisasterReport/useWaterDisasterReport.js
View File

@ -6,10 +6,6 @@ import { useOptions } from '@shared/composables/useOptions'
import { useUserStore} from '@/store/userStore'
const createDefaultFormData = () => ({
occurLocation: '',
occurTime: '',
roadConditionType: '',
routeNo: '',
event: {
},
report: {
@ -40,27 +36,27 @@ export const useWaterDisasterReport = () => {
const showEstimatedRecoveryCost = computed(() => formData.event.needsRecovery === true)
const formRules = {
'event.contactPerson': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
// 'event.contactPerson': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
'event.contactPhone': [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
// { required: true, message: '请输入联系电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的联系电话', trigger: 'blur' }
],
'event.serviceStationId': [{ required: true, message: '请选择填报站点', trigger: 'change' }],
occurTime: [{ required: true, message: '请选择发生时间', trigger: 'change' }],
roadConditionType: [{ required: true, message: '请选择路况类别', trigger: 'change' }],
"event.occurTime": [{ required: true, message: '请选择发生时间', trigger: 'change' }],
'event.roadConditionType': [{ required: true, message: '请选择路况类别', trigger: 'change' }],
'event.repairProgress': [{ required: true, message: '请选择抢险进度', trigger: 'change' }],
'event.isBlocked': [{ required: true, message: '请选择是否阻断', trigger: 'change' }],
'event.blockedMileage': [{ required: true, message: '请输入受灾里程', trigger: 'blur' }],
'event.damageCount': [{ required: true, message: '请输入水毁处数', trigger: 'blur' }],
'event.district': [{ required: true, message: '请选择所属区县', trigger: 'change' }],
routeNo: [{ required: true, message: '请选择线路编号', trigger: 'change' }],
'event.routeNo': [{ required: true, message: '请选择线路编号', trigger: 'change' }],
occurLocation: [{ required: true, message: '请输入路况位置', trigger: 'blur' }],
'event.blockedPointName': [{ 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.endStakeLat': [{ required: true, message: '请输入止点桩经度', trigger: 'blur' }],
'event.endStakeLatitude': [{ required: true, message: '请输入止点桩纬度', trigger: 'blur' }],
'report.disposalMeasures': [{ required: true, message: '请选择处置措施', trigger: 'change' }],
'report.expectRecoverTime': [{ required: true, message: '请选择预计恢复时间', trigger: 'change' }],
@ -133,13 +129,14 @@ export const useWaterDisasterReport = () => {
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
formData.event.startStakeLng = startPoint.longitude
formData.event.startStakeLat = startPoint.latitude
formData.event.endStakeLng = endPoint.longitude
formData.event.endStakeLat = endPoint.latitude
}
const buildSubmitData = () => {
return formData
}
const validate = async () => {
@ -164,7 +161,7 @@ export const useWaterDisasterReport = () => {
submitting.value = true
try {
const res = await request({
url: '/snow-ops-platform/water-damage/addOrUpdate',
url: '/snow-ops-platform/water-damage/report',
method: 'post',
data: buildSubmitData()
})