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

Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev

Browse Source
This commit is contained in:
fanjia 2026-04-17 14:50:28 +08:00
commit 5e90481aaa
31 changed files with 3271 additions and 1248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -190,7 +190,6 @@ const formData = ref({
district: '', // 上报区县
endStakeNo: '', // 止点桩号
estimatedRecoveryCost: '', // 恢复重建预估费用
inspectionMileage: '', // 巡查里程
isBlocked: '', // 是否阻断
needsRecovery: '', // 是否需要恢复重建
repairProgress: '', // 抢险进度

6
packages/mobile/src/views/DisasterManagement/WaterDisasterDetail.vue
View File

@ -102,12 +102,6 @@
<span class="info-value">{{ detailData.event?.district || '-' }}</span>
</div>
<!-- 巡查里程 -->
<div class="info-row">
<span class="info-label">巡查里程：</span>
<span class="info-value">{{ detailData.event?.inspectionMileage ? detailData.event.inspectionMileage + '公里' : '-' }}</span>
</div>
<!-- 是否恢复重建 -->
<div class="info-row">
<span class="info-label">是否恢复重建：</span>

1
packages/mobile/src/views/DisasterManagement/waterDisasterFormData.json
View File

@ -12,7 +12,6 @@
"district": "武侯区",
"endStakeNo": "K2251+200",
"estimatedRecoveryCost": 120.5,
"inspectionMileage": 25.6,
"isBlocked": true,
"needsRecovery": true,
"repairProgress": "抢险中",

2
packages/screen/src/component/DynamicForm/DynamicForm.vue
View File

@ -8,7 +8,7 @@
</div>
</template>
<script setup>
import { onMounted, watch, ref, provide } from 'vue'
import { onMounted, watch, ref, provide, computed } from 'vue'
import DynamicFormItem from './DynamicFormItem.vue'
const props = defineProps({
configList: {

2
packages/screen/src/component/MenuBar/index.js
View File

@ -46,7 +46,7 @@ export default () => {
const firstMenuItem = menuList.value[0]?.children?.[0];
if (firstMenuItem) {
// 注释掉进入页面点击第一项的逻辑 后续记得打开
// handleMenuClick(firstMenuItem);
handleMenuClick(firstMenuItem);
}
}
}, { immediate: true });

5
packages/screen/src/directive/index.js Normal file
View File

@ -0,0 +1,5 @@
import hasPermi from './permission/hasPermi'
export default function directive(app){
app.directive('hasPermi', hasPermi)
}

27
packages/screen/src/directive/permission/hasPermi.js Normal file
View File

@ -0,0 +1,27 @@
/**
* v-hasPermi 操作权限处理
* Copyright (c) 2019 ruoyi
*/
import useUserStore from '@flightweb/store/modules/user'
export default {
mounted(el, binding, vnode) {
const { value } = binding
const all_permission = "*:*:*"
const permissions = useUserStore().permissions
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
const hasPermissions = permissions.some(permission => {
return all_permission === permission || permissionFlag.includes(permission)
})
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`请设置操作权限标签值`)
}
}
}

11
packages/screen/src/router/index.js
View File

@ -190,6 +190,17 @@ const routes = [
parentRoute: 'warningManagement3'
}
},
{
path: '/messageManagement',
name: 'messageManagement',
component: () => import('../views/WarningManagement/law/messageManagement/index.vue'),
meta: {
title: '消息推送设置',
breadcrumb: true,
parentRoute: 'warningManagement3'
}
},
// 项目管理 - 区县
{

13
packages/screen/src/store/userStore.js Normal file
View File

@ -0,0 +1,13 @@
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: {
},
getters: {
},
actions: {
}
})

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

@ -166,7 +166,6 @@ const formData = reactive({
district: '',
endStakeNo: '',
estimatedRecoveryCost: '',
inspectionMileage: '',
isBlocked: '',
needsRecovery: '',
repairProgress: '',
@ -325,7 +324,6 @@ const resetForm = () => {
district: '',
endStakeNo: '',
estimatedRecoveryCost: '',
inspectionMileage: '',
isBlocked: '',
needsRecovery: '',
repairProgress: '',

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

@ -1,9 +1,64 @@
<template>
<div class="web-detail-container">
<div class="content-container">
<div class="left-panel">
<DynamicDetail v-model="detailData" :config-list="detailConfig" />
<!-- 基本信息卡片 -->
<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">{{}}</span>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="info-label">线路编号：</span>
<span class="info-value">{{}}</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">冰雪事件</span>
</div>
</el-col>
<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">{{}}</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>
</el-card>
</div>
<!-- <div class="right-panel" v-if="isEdit">
<ContinueReport ref="continueReport" @refresh="getDisasterDetail" />
@ -20,8 +75,6 @@ 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'
import detailConfig from './detailConfig'
import DynamicDetail from '@/component/DynamicDetail/DynamicDetail.vue'
const router = useRouter()
const route = useRoute()
@ -68,7 +121,6 @@ const hasReportData = computed(() => {
return allReports.value.length > 0
})
// 获取灾毁详情
const getDisasterDetail = async () => {
const id = route.query.id
@ -80,7 +132,7 @@ const getDisasterDetail = async () => {
try {
const result = await request({
url: `/snow-ops-platform/event/getById?id=${route.query.id}`,
method: 'get',
method: 'get'
})
if (result?.data) {

111
packages/screen/src/views/DisasterManagement/IceDisasterDetail/detailConfig.js
View File

@ -1,111 +0,0 @@
export default [
{
type: 'card',
label: '基础信息',
children: [
{
type: 'row',
children: [
{
span: 8,
label: '事件类型',
value: '冰雪事件',
},
{
span: 8,
label: '路况类别',
prop: 'event.routeNo'
},
{
span: 8,
label: '处理措施',
prop: 'event.disposalMeasures'
}
]
},
{
type: 'row',
children: [
{
span: 8,
label: '地点路线',
prop: 'event.occurLocation'
},
{
span: 8,
label: '起点桩号',
prop: 'event.startStakeNo'
},
{
span: 8,
label: '止点桩号',
prop: 'event.endStakeNo'
}
]
},
{
type: 'row',
children: [
{
span: 8,
label: '路况位置',
prop: 'event.occurLocation'
},
{
span: 8,
label: '阻断点小地名',
prop: 'event.occurLocation'
},
{
span: 8,
label: '地点路线',
prop: 'event.occurLocation'
}
]
},
{
type: 'row',
children: [
{
span: 24,
label: '受灾里程',
prop: 'event.disasterMileage'
}
]
},
{
type: 'row',
children: [
{
span: 8,
label: '所属区县',
prop: 'event.district'
},
{
span: 8,
label: '发现时间',
prop: 'event.occurTime'
}
]
},
{
type: 'row',
children: [
{
span: 8,
label: '是否需要恢复重建',
prop: 'event.actualRecoverTime'
},
{
show: (formData) => {
return formData.event?.actualRecoverTime
},
span: 8,
label: '恢复重建预估费用（万元）',
prop: 'event.estimatedRecoveryCost'
}
]
}
]
}
]

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

@ -1,83 +1,50 @@
<template>
<div class="disaster-form-page">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" class="disaster-form" @submit.prevent>
<!-- 基本信息区块 -->
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="disaster-form" @submit.prevent>
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">基本信息</span>
<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-input v-model="formData.event.reporterUnit" disabled />
</el-form-item>
</el-col>
<!-- 联系人 -->
<el-col :span="8">
<el-form-item label="联系人员" prop="event.contactPerson">
<el-input v-model="formData.event.contactPerson" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 联系电话 -->
<el-col :span="8">
<el-form-item label="联系电话" prop="event.contactPhone">
<el-input v-model="formData.event.contactPhone" placeholder="请填写" />
<el-input v-model="formData.event.contactPhone" maxlength="11" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
</BlockItem>
<BlockItem title="路况事件信息">
<el-row :gutter="24">
<!-- 发生时间 -->
<el-col :span="8">
<el-form-item label="发生时间" 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="roadConditionType">
<el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
<el-option v-for="(option, idx) in options['iceRoadConditionType']" :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-row>
<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 v-model="eventType" style="width: 100%" @change="handleEventTypeChange">
<el-option v-for="(option, idx) in options['eventType']" :key="idx" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
</el-col>
<!-- 预计恢复时间 -->
<el-col :span="8">
<el-form-item label="预计恢复时间" prop="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 label="填报站点" prop="event.serviceStationId">
<YHZSelect v-model="formData.event.serviceStationId" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24"> </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-col :span="8">
<el-form-item label="发生时间" prop="occurTime">
<el-date-picker v-model="formData.occurTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
</el-row>
@ -85,90 +52,85 @@
<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-input :model-value="routeTypeLabel" readonly />
</el-form-item>
</el-col>
<!-- 所属区县 -->
<el-col :span="8">
<el-form-item label="所属区县" prop="event.district">
<el-select v-model="formData.event.district" placeholder="请选择" style="width: 100%" @change="handleDistrictChange">
<el-option v-for="(option, idx) in options['area']" :label="option.label" :value="option.value" :key="idx" />
<el-option v-for="(option, idx) in options['area']" :key="idx" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
</el-col>
<!-- 受灾里程 -->
<el-col :span="8">
<el-form-item label="受灾里程" prop="event.disasterMileage">
<el-input v-model="formData.event.disasterMileage" placeholder="请填写" />
<el-form-item label="线路编号" prop="routeNo">
<RoadRoutesSelect v-model="formData.routeNo" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" @change="handleRouteNoChange" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="地点路线" prop="routeNo">
<RoadRoutesSelect v-model="formData.routeNo" @change="handleRouteNoChange" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" />
<el-form-item label="发生地点" prop="event.occurLocation">
<el-input v-model="formData.event.occurLocation" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 起点桩号 -->
<el-col :span="8">
<el-form-item label="起点桩号(K)" prop="event.startStakeNo">
<el-form-item label="路况位置" prop="occurLocation">
<el-input v-model="formData.occurLocation" placeholder="请选择">
<template #suffix>
<el-icon class="location-icon"><LocationFilled /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="起点桩号" prop="event.startStakeNo">
<el-input v-model="formData.event.startStakeNo" placeholder="请填写">
<template #prepend>K</template>
</el-input>
</el-form-item>
</el-col>
<!-- 止点桩号 -->
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="止点桩号(K)" prop="event.endStakeNo">
<el-form-item label="起点桩经度" prop="event.startStakeLongitude">
<el-input v-model="formData.event.startStakeLongitude" placeholder="请填写" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="起点桩纬度" prop="event.startStakeLatitude">
<el-input v-model="formData.event.startStakeLatitude" placeholder="请填写" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="止点桩号" prop="event.endStakeNo">
<el-input v-model="formData.event.endStakeNo" placeholder="请填写">
<template #prepend>K</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<!-- 路况位置 -->
<el-col :span="8">
<el-form-item label="路况位置" prop="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 label="止点桩经度" prop="event.endStakeLongitude">
<el-input v-model="formData.event.endStakeLongitude" placeholder="请填写" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="视频上传" prop="fileList">
<FileUpload type="video" :limit="9" v-model="formData.fileList" />
<el-form-item label="止点桩纬度" prop="event.endStakeLatitude">
<el-input v-model="formData.event.endStakeLatitude" 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="请填写">
<template #append>公里</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
@ -178,440 +140,151 @@
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">灾毁损失</span>
<span class="section-title">处置情况</span>
</div>
</template>
<BlockItem title="路况事件信息">
<BlockItem>
<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-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['iceDisposalMeasures']" :key="idx" :label="option.label" :value="option.value" />
</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-col :span="8">
<el-form-item label="预计恢复时间" prop="report.expectRecoverTime">
<el-date-picker v-model="formData.report.expectRecoverTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="实际预计恢复时间" prop="report.actualRecoverTime">
<el-date-picker v-model="formData.report.actualRecoverTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
</el-row>
</BlockItem>
</el-card>
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">实施情况</span>
</div>
</template>
<BlockItem>
<MaterialList v-model="formData.yhzMaterialList" :yhzId="formData.event.serviceStationId" />
<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>
</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>
</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>
</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-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>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="18">
<el-form-item label="现场情况描述" prop="report.siteDescription">
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="3" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="16">
<el-form-item label="附件上传" prop="fileList">
<div class="upload-wrapper">
<div class="upload-title">图片上传</div>
<FileUpload v-model="formData.fileList" type="image" :limit="9" />
</div>
</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>
<el-button type="primary" :loading="submitting" @click="handleSubmit">提交</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 { request } from '@/utils/request'
import { LocationFilled } from '@element-plus/icons-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'
import YHZSelect from '../components/YHZSelect.vue'
import MaterialList from '../components/MaterialList.vue'
import { useIceDisasterReport } from './useIceDisasterReport'
const router = useRouter()
const route = useRoute()
const { options, getAreaOptions } = useOptions()
const formRef = ref(null)
const submitting = ref(false)
const {
eventType,
filterForm,
formData,
formRef,
formRules,
handleBack,
handleDistrictChange,
handleEventTypeChange,
handleRouteNoChange,
handleSubmit,
initFormData,
getFormData,
options,
routeTypeLabel,
strandedVehicleOptions,
submitting,
handleHasStrandedVehiclesChange,
validate
} = useIceDisasterReport()
// 是否为续报
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, // 联系电话
district: null, // 上报区县
endStakeNo: null, // 止点桩号
estimatedRecoveryCost: null, // 恢复重建预估费用
inspectionMileage: null, // 巡查里程
needsRecovery: null, // 是否需要恢复重建
reporterUnit: null, // 填报单位
startStakeNo: null, // 起点桩号
disasterMileage: 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: '/waterDisasterReport' })
}
// 监听处置措施数组变化，转换为逗号分隔的字符串存到 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' }],
'report.disposalMeasures': [{ required: true, message: '请选择处置措施', trigger: 'change' }],
'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 () => {
initFormData({})
}
onMounted(() => {
// 获取区县下拉列表
getAreaOptions()
loadEditData()
})
// 暴露方法给父组件
defineExpose({
validate,
initFormData,
@ -625,74 +298,65 @@ defineExpose({
background-color: #f5f7fa;
height: 100%;
overflow: auto;
}
.disaster-form {
.form-section {
margin-bottom: 20px;
.form-section {
margin-bottom: 20px;
:deep(.el-card__header) {
padding: 12px 20px;
background-color: #fafafa;
border-bottom: 1px solid #ebeef5;
}
: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;
}
:deep(.el-card__body) {
padding: 20px;
}
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #303133;
position: relative;
padding-left: 10px;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 16px;
border-radius: 2px;
background-color: #409eff;
}
}
.location-icon {
color: #909399;
}
.unit-text {
color: #606266;
font-size: 14px;
}
.upload-wrapper {
width: 100%;
}
.upload-title {
margin-bottom: 12px;
color: #303133;
font-size: 14px;
}
.form-actions {
display: flex;
justify-content: center;
gap: 16px;
padding: 8px 0 32px;
}
</style>

336
packages/screen/src/views/DisasterManagement/IceDisasterReport/useIceDisasterReport.js Normal file
View File

@ -0,0 +1,336 @@
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { request } from '@/utils/request'
import { useOptions } from '@shared/composables/useOptions'
const DEFAULT_REPORTER_UNIT = '万州区公路中心'
const createDefaultFormData = () => ({
occurLocation: '',
occurTime: '',
routeNo: '',
event: {
contactPerson: '',
contactPhone: '',
disasterMileage: null,
district: '',
endStakeLatitude: null,
endStakeLongitude: null,
endStakeNo: '',
occurLocation: '',
reporterUnit: DEFAULT_REPORTER_UNIT,
serviceStationId: '',
startStakeLatitude: null,
startStakeLongitude: null,
startStakeNo: ''
},
material: {
inputEquipment: null,
inputFunds: null,
inputManpower: null
},
report: {
actualRecoverTime: '',
disposalMeasures: '',
expectRecoverTime: '',
siteDescription: ''
},
traffic: {
hasStrandedVehicles: null,
strandedVehicleCount: null
},
fileList: []
})
const mergeFormData = (source = {}) => {
const defaults = createDefaultFormData()
const merged = {
...defaults,
...source,
event: {
...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
if (!merged.event.reporterUnit) {
merged.event.reporterUnit = DEFAULT_REPORTER_UNIT
}
return merged
}
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 }
}
export const useIceDisasterReport = () => {
const router = useRouter()
const route = useRoute()
const { options, getAreaOptions } = useOptions()
const formRef = ref(null)
const submitting = ref(false)
const eventType = ref('冰雪事件')
const filterForm = reactive({
routeType: ''
})
const formData = reactive(createDefaultFormData())
const strandedVehicleOptions = [
{ label: '有', value: 1 },
{ label: '无', value: 0 }
]
const routeTypeLabel = computed(() => {
const matched = options.value.roadType?.find((item) => item.value === filterForm.routeType)
return matched?.label || '国省道'
})
const formRules = {
'event.contactPerson': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
'event.contactPhone': [
{ 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.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.endStakeNo': [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
'event.endStakeLongitude': [{ required: true, message: '请输入止点桩经度', trigger: 'blur' }],
'event.endStakeLatitude': [{ 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' }],
fileList: [
{
validator: (_rule, value, callback) => {
if (!Array.isArray(value) || value.length === 0) {
callback(new Error('请上传附件'))
return
}
callback()
},
trigger: 'change'
}
]
}
const initFormData = (data = {}) => {
Object.assign(formData, mergeFormData(data))
}
const handleEventTypeChange = (value) => {
if (value === '水毁事件') {
router.replace({ path: '/waterDisasterReport' })
}
}
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
}
const handleRouteNoChange = (item = {}) => {
formData.routeNo = item.routeCode || formData.routeNo
formData.event.startStakeNo = item.startStakeNo
formData.event.endStakeNo = item.endStakeNo
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
}
const handleHasStrandedVehiclesChange = (value) => {
if (value !== 1) {
formData.traffic.strandedVehicleCount = null
}
}
const buildSubmitData = () => {
const payload = mergeFormData(formData)
payload.event.routeNo = payload.routeNo
payload.event.occurTime = payload.occurTime
payload.event.eventType = eventType.value
payload.event.roadType = filterForm.routeType
payload.event.roadConditionLocation = payload.occurLocation
if (payload.traffic.hasStrandedVehicles !== 1) {
payload.traffic.strandedVehicleCount = null
}
return payload
}
const getFormData = () => buildSubmitData()
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 res = await request({
url: '/snow-ops-platform/event/addOrUpdate',
method: 'post',
data: buildSubmitData()
})
if (res?.code === '00000') {
ElMessage.success('提交成功')
setTimeout(() => {
router.replace('/disasterManagement')
}, 500)
} else {
ElMessage.error(res?.message || '提交失败')
}
} catch (error) {
console.error('提交失败:', error)
ElMessage.error('提交失败，请重试')
} finally {
submitting.value = false
}
}
const getDisasterDetail = async () => {
if (!route.query.id) {
return
}
try {
const result = await request({
url: `/snow-ops-platform/event/getById?id=${route.query.id}`,
method: 'get'
})
if (result?.data) {
const data = result.data
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 || {})
},
report: {
...(data.report || {})
},
traffic: {
...(data.traffic || {})
}
})
} else {
ElMessage.warning(result?.message || '获取详情失败')
}
} catch (error) {
console.error('获取冰雪详情失败:', error)
ElMessage.error('获取详情失败，请稍后重试')
}
}
const handleBack = () => {
router.back()
}
onMounted(async () => {
await getAreaOptions()
if (route.query.id) {
await getDisasterDetail()
return
}
initFormData({})
})
return {
eventType,
filterForm,
formData,
formRef,
formRules,
handleBack,
handleDistrictChange,
handleEventTypeChange,
handleHasStrandedVehiclesChange,
handleRouteNoChange,
handleSubmit,
initFormData,
getFormData,
options,
routeTypeLabel,
strandedVehicleOptions,
submitting,
validate
}
}

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

@ -166,7 +166,6 @@ const formData = reactive({
district: '',
endStakeNo: '',
estimatedRecoveryCost: '',
inspectionMileage: '',
isBlocked: '',
needsRecovery: '',
repairProgress: '',
@ -317,7 +316,6 @@ const resetForm = () => {
district: '',
endStakeNo: '',
estimatedRecoveryCost: '',
inspectionMileage: '',
isBlocked: '',
needsRecovery: '',
repairProgress: '',

5
packages/screen/src/views/DisasterManagement/WaterDisasterReport/WaterDisasterLossListPC.vue
View File

@ -68,6 +68,11 @@ const getLossDict = async () => {
}
}
const changeValue = (config, event) => {
const item = getValueItem(config)
item.totalAmount = event
}
onMounted(async () => {
await getLossDict()
})

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

@ -1,32 +1,28 @@
<template>
<div class="disaster-form-page">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" class="disaster-form" @submit.prevent>
<!-- 基本信息区块 -->
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="disaster-form" @submit.prevent>
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">基本信息</span>
<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-input v-model="formData.event.reporterUnit" disabled />
</el-form-item>
</el-col>
<!-- 联系人 -->
<el-col :span="8">
<el-form-item label="联系人员" prop="event.contactPerson">
<el-input v-model="formData.event.contactPerson" placeholder="请填写" />
</el-form-item>
</el-col>
<!-- 联系电话 -->
<el-col :span="8">
<el-form-item label="联系电话" prop="event.contactPhone">
<el-input v-model="formData.event.contactPhone" placeholder="请填写" />
<el-input v-model="formData.event.contactPhone" maxlength="11" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
@ -36,87 +32,60 @@
<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 v-model="eventType" style="width: 100%" @change="handleEventTypeChange">
<el-option v-for="(option, idx) in options['eventType']" :key="idx" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
</el-col>
<!-- 路况类别 -->
<el-col :span="8">
<el-form-item label="填报站点" prop="event.serviceStationId">
<YHZSelect v-model="formData.event.serviceStationId" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发生时间" prop="occurTime">
<el-date-picker v-model="formData.occurTime" type="datetime" placeholder="请选择日期时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="路况类别" prop="roadConditionType">
<el-select v-model="formData.roadConditionType" placeholder="请选择" style="width: 100%">
<el-option v-for="(option, idx) in options['waterRoadConditionType']" :label="option.label" :value="option.value" :key="idx" />
<el-option v-for="(option, idx) in options['waterRoadConditionType']" :key="idx" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
</el-col>
<!-- 是否阻断 -->
<el-col :span="8">
<el-form-item label="是否阻断" prop="event.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-option v-for="(option, idx) in options['repairProgress']" :key="idx" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
</el-col>
<!-- 处理措施-->
<el-col :span="8">
<el-form-item label="处理措施" prop="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-form-item label="是否阻断" prop="event.isBlocked">
<el-select v-model="formData.event.isBlocked" placeholder="请选择" style="width: 100%">
<el-option v-for="(option, idx) in options['yesNoBool']" :key="idx" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
</el-col>
<!-- 水毁处数 -->
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="受灾里程" prop="event.blockedMileage">
<el-input v-model="formData.event.blockedMileage" placeholder="请填写">
<template #append>公里</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="水毁处数" prop="event.damageCount">
<el-input-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-input v-model="formData.event.damageCount" placeholder="请填写">
<template #append>处</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
@ -124,84 +93,78 @@
<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-input :model-value="routeTypeLabel" readonly />
</el-form-item>
</el-col>
<!-- 所属区县 -->
<el-col :span="8">
<el-form-item label="所属区县" prop="event.district">
<el-select v-model="formData.event.district" placeholder="请选择" style="width: 100%" @change="handleDistrictChange">
<el-option v-for="(option, idx) in options['area']" :label="option.label" :value="option.value" :key="idx" />
<el-option v-for="(option, idx) in options['area']" :key="idx" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
</el-col>
</el-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 label="线路编号" prop="routeNo">
<RoadRoutesSelect v-model="formData.routeNo" :extra-params="{ xzdj: filterForm.routeType, qxid: formData.event.district }" @change="handleRouteNoChange" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<!-- 路况位置 -->
<el-col :span="8">
<el-form-item label="路况位置" prop="occurLocation">
<el-input v-model="formData.occurLocation" placeholder="请填写" />
<el-input v-model="formData.occurLocation" placeholder="请选择">
<template #suffix>
<el-icon class="location-icon"><LocationFilled /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
<!-- 阻断点小地名 -->
<el-col :span="8">
<el-form-item label="阻断点小地名" prop="event.blockedPointName">
<el-input v-model="formData.event.blockedPointName" placeholder="请填写" />
</el-form-item>
</el-col>
</el-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 label="起点桩号" prop="event.startStakeNo">
<el-input v-model="formData.event.startStakeNo" placeholder="请填写">
<template #prepend>K</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 纬度 -->
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="纬度" prop="event.latitude">
<el-input v-model="formData.event.latitude" placeholder="纬度"> </el-input>
<el-form-item label="起点桩经度" prop="event.startStakeLongitude">
<el-input v-model="formData.event.startStakeLongitude" placeholder="请填写" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="起点桩纬度" prop="event.startStakeLatitude">
<el-input v-model="formData.event.startStakeLatitude" placeholder="请填写" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="止点桩号" prop="event.endStakeNo">
<el-input v-model="formData.event.endStakeNo" placeholder="请填写">
<template #prepend>K</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="图片上传" prop="fileList">
<FileUpload type="image" :limit="9" v-model="formData.fileList" />
<el-form-item label="止点桩经度" prop="event.endStakeLongitude">
<el-input v-model="formData.event.endStakeLongitude" placeholder="请填写" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="视频上传" prop="fileList">
<FileUpload type="video" :limit="9" v-model="formData.fileList" />
<el-form-item label="止点桩纬度" prop="event.endStakeLatitude">
<el-input v-model="formData.event.endStakeLatitude" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
@ -211,12 +174,42 @@
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">灾毁损失</span>
<span class="section-title">处置情况</span>
</div>
</template>
<BlockItem title="路况事件信息">
<BlockItem>
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="处置措施" prop="report.disposalMeasures">
<el-select v-model="formData.report.disposalMeasures" placeholder="请选择" style="width: 100%">
<el-option v-for="(option, idx) in options['disposalMeasures']" :key="idx" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="预计恢复时间" prop="report.expectRecoverTime">
<el-date-picker v-model="formData.report.expectRecoverTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="实际恢复时间" prop="report.actualRecoverTime">
<el-date-picker v-model="formData.report.actualRecoverTime" type="datetime" placeholder="请选择时间" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-col>
</el-row>
</BlockItem>
</el-card>
<el-card class="form-section" shadow="never">
<template #header>
<div class="section-header">
<span class="section-title">实施情况</span>
</div>
</template>
<BlockItem title="人员车辆">
<el-row :gutter="24">
<!-- 受伤人员 -->
<el-col :span="8">
<el-form-item label="受伤人员" prop="report.injuredCount">
<el-input-number v-model="formData.report.injuredCount" :min="0" :step="1" style="width: 100%">
@ -226,8 +219,6 @@
</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%">
@ -237,8 +228,6 @@
</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%">
@ -248,8 +237,9 @@
</el-input-number>
</el-form-item>
</el-col>
</el-row>
<!-- 损坏车辆 -->
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="损坏车辆" prop="report.damagedVehicleCount">
<el-input-number v-model="formData.report.damagedVehicleCount" :min="0" :step="1" style="width: 100%">
@ -259,8 +249,6 @@
</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%">
@ -272,390 +260,110 @@
</el-col>
</el-row>
</BlockItem>
<BlockItem title="道路损失及其他">
<LossList v-model:model-value="formData.report.lossList" />
<BlockItem title="灾毁损失">
<LossList v-model:model-value="formData.lossList" />
<el-row :gutter="24">
<!-- 投入机械 -->
<el-col :span="8">
<el-form-item label="投入机械" prop="report.investedMachinery">
<el-input-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-input v-model="formData.report.investedMachinery" placeholder="请填写">
<template #append>台/班</template>
</el-input>
</el-form-item>
</el-col>
<!-- 投入人力 -->
<el-col :span="8">
<el-form-item label="投入人力" prop="report.investedManpower">
<el-input-number v-model="formData.report.investedManpower" :min="0" :step="1" style="width: 100%" placeholder="请填写">
<el-input-number v-model="formData.report.investedManpower" :min="0" :step="1" style="width: 100%">
<template #suffix>
<span class="unit-text">人次</span>
</template>
</el-input-number>
</el-form-item>
</el-col>
<!-- 投入资金 -->
<el-col :span="8">
<el-form-item label="投入资金" prop="report.investedFunds">
<el-input-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-input v-model="formData.report.investedFunds" placeholder="请填写">
<template #append>万元</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="现场情况描述" prop="report.siteDescription">
<el-input v-model="formData.report.siteDescription" type="textarea" :rows="3" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="16">
<el-form-item label="附件">
<FileUpload v-model="formData.fileList" type="image" :limit="9" />
</el-form-item>
</el-col>
</el-row>
</BlockItem>
<BlockItem title="恢复重建预估费用">
<el-row :gutter="24">
<!-- 是否需要恢复重建 -->
<el-col :span="8">
<el-form-item label="是否需要恢复重建" prop="event.needsRecovery">
<el-select v-model="formData.event.needsRecovery" placeholder="请选择" style="width: 100%">
<el-option v-for="(option, idx) in options['yesNoBool']" :label="option.label" :value="option.value" :key="idx" />
<el-option v-for="(option, idx) in options['yesNoBool']" :key="idx" :label="option.label" :value="option.value" />
</el-select>
</el-form-item>
</el-col>
<!-- 恢复重建预估费用 -->
<el-col :span="8" v-if="formData?.event.needsRecovery">
<el-col v-if="showEstimatedRecoveryCost" :span="8">
<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-input v-model="formData.event.estimatedRecoveryCost" placeholder="请填写">
<template #append>万元</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</BlockItem>
</el-card>
<!-- 提交按钮 -->
<div class="form-actions">
<el-button @click="handleBack">取消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="submitting">提交</el-button>
<el-button type="primary" :loading="submitting" @click="handleSubmit">提交</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 { LocationFilled } from '@element-plus/icons-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'
import YHZSelect from '../components/YHZSelect.vue'
import LossList from './WaterDisasterLossListPC.vue'
import { useWaterDisasterReport } from './useWaterDisasterReport'
const router = useRouter()
const route = useRoute()
const { options, getAreaOptions } = useOptions()
const formRef = ref(null)
const submitting = ref(false)
const {
eventType,
filterForm,
formData,
formRef,
formRules,
handleBack,
handleDistrictChange,
handleEventTypeChange,
handleRouteNoChange,
handleSubmit,
initFormData,
getFormData,
options,
routeTypeLabel,
showEstimatedRecoveryCost,
submitting,
validate
} = useWaterDisasterReport()
// 是否为续报
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,
@ -669,74 +377,55 @@ defineExpose({
background-color: #f5f7fa;
height: 100%;
overflow: auto;
}
.disaster-form {
.form-section {
margin-bottom: 20px;
.form-section {
margin-bottom: 20px;
:deep(.el-card__header) {
padding: 12px 20px;
background-color: #fafafa;
border-bottom: 1px solid #ebeef5;
}
: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;
}
:deep(.el-card__body) {
padding: 20px;
}
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #303133;
position: relative;
padding-left: 10px;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 16px;
border-radius: 2px;
background-color: #409eff;
}
}
.location-icon {
color: #909399;
}
.unit-text {
color: #909399;
font-size: 12px;
}
.form-actions {
display: flex;
justify-content: center;
gap: 16px;
padding: 8px 0 32px;
}
</style>

742
packages/screen/src/views/DisasterManagement/WaterDisasterReport/copy.vue Normal file
View File

@ -0,0 +1,742 @@
<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>

292
packages/screen/src/views/DisasterManagement/WaterDisasterReport/useWaterDisasterReport.js Normal file
View File

@ -0,0 +1,292 @@
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { request } from '@/utils/request'
import { useOptions } from '@shared/composables/useOptions'
import mockData from './waterMockJson.json'
const DEFAULT_REPORTER_UNIT = '万州区公路中心'
const createDefaultFormData = () => ({
occurLocation: '',
occurTime: '',
roadConditionType: '',
routeNo: '',
event: {
blockedMileage: null,
blockedPointName: '',
contactPerson: '',
contactPhone: '',
damageCount: null,
district: '',
endStakeLatitude: null,
endStakeLongitude: null,
endStakeNo: '',
estimatedRecoveryCost: null,
isBlocked: null,
latitude: null,
longitude: null,
needsRecovery: null,
repairProgress: '抢险中',
reportSite: '',
reporterUnit: DEFAULT_REPORTER_UNIT,
serviceStationId: '',
startStakeLatitude: null,
startStakeLongitude: null,
startStakeNo: ''
},
report: {
actualRecoverTime: '',
damagedVehicleCount: null,
deadCount: null,
disposalMeasures: '',
expectRecoverTime: '',
injuredCount: null,
investedFunds: null,
investedMachinery: null,
investedManpower: null,
remark: '',
siteDescription: '',
strandedPersonCount: null,
strandedVehicleCount: null,
totalLossAmount: null
},
lossList: [],
fileList: []
})
const mergeFormData = (source = {}) => {
const defaults = createDefaultFormData()
const merged = {
...defaults,
...source,
event: {
...defaults.event,
...(source.event || {})
},
report: {
...defaults.report,
...(source.report || {})
},
lossList: Array.isArray(source.lossList) ? source.lossList : defaults.lossList,
fileList: Array.isArray(source.fileList) ? source.fileList : defaults.fileList
}
if (!merged.event.reporterUnit) {
merged.event.reporterUnit = DEFAULT_REPORTER_UNIT
}
if (!merged.event.repairProgress) {
merged.event.repairProgress = '抢险中'
}
if (!merged.event.serviceStationId && merged.event.reportSite) {
merged.event.serviceStationId = merged.event.reportSite
}
return merged
}
export const useWaterDisasterReport = () => {
const router = useRouter()
const route = useRoute()
const { options, getAreaOptions } = useOptions()
const formRef = ref(null)
const submitting = ref(false)
const eventType = ref('水毁事件')
const filterForm = reactive({
routeType: ''
})
const formData = reactive(createDefaultFormData())
const routeTypeLabel = computed(() => {
const matched = options.value.roadType?.find((item) => item.value === filterForm.routeType)
return matched?.label || '国省道'
})
const showEstimatedRecoveryCost = computed(() => formData.event.needsRecovery === true)
const formRules = {
'event.contactPerson': [{ required: true, message: '请输入联系人员', trigger: 'blur' }],
'event.contactPhone': [
{ 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.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' }],
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.endStakeNo': [{ required: true, message: '请输入止点桩号', trigger: 'blur' }],
'event.endStakeLongitude': [{ 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' }],
'event.needsRecovery': [{ required: true, message: '请选择是否需要恢复重建', trigger: 'change' }],
'event.estimatedRecoveryCost': [
{
validator: (_rule, value, callback) => {
if (showEstimatedRecoveryCost.value && (value === '' || value === null || value === undefined)) {
callback(new Error('请输入恢复重建预估费用'))
return
}
callback()
},
trigger: 'blur'
}
]
}
const initFormData = (data = {}) => {
Object.assign(formData, mergeFormData(data))
}
const handleEventTypeChange = (value) => {
if (value === '冰雪事件') {
router.replace({ path: '/iceDisasterReport' })
}
}
const handleDistrictChange = () => {
// formData.routeNo = ''
// formData.occurLocation = ''
// formData.event.startStakeNo = ''
// formData.event.endStakeNo = ''
}
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.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
}
const buildSubmitData = () => {
const payload = mergeFormData(formData)
if (!payload.event.reportSite && payload.event.serviceStationId) {
payload.event.reportSite = payload.event.serviceStationId
}
return payload
}
const getFormData = () => buildSubmitData()
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 res = await request({
url: '/snow-ops-platform/water-damage/addOrUpdate',
method: 'post',
data: buildSubmitData()
})
if (res?.code === '00000') {
ElMessage.success('提交成功')
setTimeout(() => {
router.replace('/disasterManagement')
}, 500)
} else {
ElMessage.error(res?.message || '提交失败')
}
} catch (error) {
console.error('提交失败:', error)
ElMessage.error('提交失败，请重试')
} finally {
submitting.value = false
}
}
const handleBack = () => {
router.back()
}
onMounted(async () => {
await getAreaOptions()
initFormData(route.query.mock ? mockData : {})
})
return {
eventType,
filterForm,
formData,
formRef,
formRules,
handleBack,
handleDistrictChange,
handleEventTypeChange,
handleRouteNoChange,
handleSubmit,
initFormData,
getFormData,
options,
routeTypeLabel,
showEstimatedRecoveryCost,
submitting,
validate
}
}

1
packages/screen/src/views/DisasterManagement/WaterDisasterReport/waterMockJson.json
View File

@ -12,7 +12,6 @@
"district": "武侯区",
"endStakeNo": "K2251+200",
"estimatedRecoveryCost": 120.5,
"inspectionMileage": 25.6,
"isBlocked": true,
"needsRecovery": true,
"repairProgress": "抢险中",

170
packages/screen/src/views/DisasterManagement/components/MaterialList.vue Normal file
View File

@ -0,0 +1,170 @@
<template>
<el-row class="material-list-pc" :gutter="24">
<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>
</template>
</el-input>
</el-form-item>
</el-col>
</template>
</el-row>
</template>
<script setup>
import { ref, computed, onMounted, watch } 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'])
const props = defineProps({
yhzId: {
type: [Number, null, String],
default: null
},
modelValue: {
type: Array,
default: () => []
},
colSpan: {
type: Number,
default: 8
}
})
watch(()=> props.yhzId, ()=> {
emit('update:modelValue', [])
getDict()
})
const getValue = (config) => {
const item = getValueItem(config)
return item?.usageAmount || 0
}
const getValueItem = (config) => {
let item = props.modelValue.find((v) => v.yhzid === config.yhzid)
if (item == null) {
item = { ...config }
props.modelValue.push(item)
}
return item
}
const changeValue = (item, value) => {
const index = props.modelValue.findIndex((v) => v.yhzid === item.yhzid)
if (index > -1) {
props.modelValue[index].usageAmount = value
}
}
const configs = ref([])
// 获取字典
const getDict = async () => {
if(!props.yhzId) return []
try {
const res = await request({
url: `/snow-ops-platform/yjwz/list?yhzid=${props.yhzId}&pageNum=1&pageSize=9999`,
method: 'get'
})
configs.value = res.data?.records
} catch (error) {
console.error('获取物质列表失败:', error)
}
}
</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>

2
packages/screen/src/views/DisasterManagement/components/RoadRoutesSelect.vue
View File

@ -6,7 +6,7 @@
</template>
</el-input>
<el-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" :append-to-body="true" :modal="true" @close="handleDialogClose">
<el-dialog v-model="dialogVisible" :header="dialogTitle" :width="dialogWidth" :append-to-body="true" :modal="true" @close="handleDialogClose">
<div class="dialog-content">
<div class="title">已选择地点路线：{{ tempSelectedItem?.routeCode }}</div>

253
packages/screen/src/views/DisasterManagement/components/YHZSelect.vue Normal file
View File

@ -0,0 +1,253 @@
<template>
<div class="selector-component">
<el-input :modelValue="tempSelectedItem?.mc" :placeholder="placeholder" readonly @click="openDialog">
<template #suffix>
<el-icon><ArrowDown /></el-icon>
</template>
</el-input>
<el-dialog v-model="dialogVisible" :header="dialogTitle" :width="dialogWidth" :append-to-body="true" :modal="true" @close="handleDialogClose">
<div class="dialog-content">
<div class="title">已选择养护站：{{ tempSelectedItem?.mc }}</div>
<el-input v-model="searchKeyword" :placeholder="searchPlaceholder" clearable @input="handleSearch" />
<el-table :data="dataList" v-loading="loading" height="350" @row-click="handleRowClick" highlight-current-row>
<el-table-column prop="mc" label="服务站名称" />
<el-table-column prop="qxmc" label="区县名称" />
</el-table>
<div class="pagination-wrapper" v-if="total > 0">
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="total"
:page-sizes="pageSizes"
layout="prev, pager, next, sizes"
@current-change="handlePageChange"
@size-change="handleSizeChange"
/>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref, computed, onUnmounted, watch } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { request } from '@shared/utils/request'
// ==================== Props ====================
const props = defineProps({
// v-model 绑定的值
modelValue: {
type: [String, Number],
default: ''
},
// 占位符文本
placeholder: {
type: String,
default: '请选择'
},
// 弹窗标题
dialogTitle: {
type: String,
default: '选择地点路线'
},
// 弹窗宽度
dialogWidth: {
type: String,
default: '500px'
},
// 搜索框占位符
searchPlaceholder: {
type: String,
default: '请输入关键词搜索'
},
// 请求接口地址
apiUrl: {
type: String,
default: '/snow-ops-platform/yhz/list'
},
// 每页大小
pageSize: {
type: Number,
default: 10
},
// 每页大小选项
pageSizes: {
type: Array,
default: () => [10, 20, 50]
},
// 额外请求参数
extraParams: {
type: Object,
default: () => ({})
},
// 搜索防抖延迟时间(ms)
searchDelay: {
type: Number,
default: 1000
}
})
const emit = defineEmits(['update:modelValue', 'change'])
// ==================== 状态 ====================
const dialogVisible = ref(false)
const searchKeyword = ref('')
const dataList = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(props.pageSize)
const total = ref(0)
// 临时选中的数据（确定前暂存）
const tempSelectedItem = ref(null)
// 防抖定时器
let searchTimer = null
// 已确认选中的值
const selectedValue = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
watch(() => props.modelValue, () => {
if(props.modelValue != tempSelectedItem.value?.id) {
tempSelectedItem.value = null
}
})
// ==================== API 请求 ====================
const fetchData = async () => {
loading.value = true
try {
const params = {
pageNum: currentPage.value,
pageSize: pageSize.value,
}
// 如果有搜索关键词，添加到参数中
if (searchKeyword.value) {
params.mc = searchKeyword.value
}
const response = await request({
url: props.apiUrl,
method: 'get',
params
})
if (response?.code === '00000') {
const records = response.data.records || []
total.value = response.data.total || 0
// 统一格式化数据，便于内部使用
dataList.value = records
} else {
ElMessage.error(response.message || '加载失败')
dataList.value = []
total.value = 0
}
} catch (error) {
console.error('请求失败:', error)
ElMessage.error('加载失败，请重试')
dataList.value = []
total.value = 0
} finally {
loading.value = false
}
}
// 带防抖的搜索函数
const debouncedSearch = () => {
// 清除之前的定时器
if (searchTimer) {
clearTimeout(searchTimer)
}
// 设置新的定时器
searchTimer = setTimeout(() => {
currentPage.value = 1
fetchData()
}, props.searchDelay)
}
// ==================== 事件处理 ====================
const openDialog = () => {
dialogVisible.value = true
// 重置状态
searchKeyword.value = tempSelectedItem.value?.mc || ''
currentPage.value = 1
fetchData()
}
const handleDialogClose = () => {
dialogVisible.value = false
// 关闭弹窗时清除防抖定时器
if (searchTimer) {
clearTimeout(searchTimer)
}
}
const handleSearch = () => {
// 使用防抖处理搜索
debouncedSearch()
}
const handlePageChange = (page) => {
currentPage.value = page
fetchData()
}
const handleSizeChange = (size) => {
pageSize.value = size
currentPage.value = 1
fetchData()
}
const handleRowClick = (row) => {
tempSelectedItem.value = row
selectedValue.value = tempSelectedItem.value.id
dialogVisible.value = false
emit('change', tempSelectedItem.value)
}
// ==================== 清理定时器 ====================
onUnmounted(() => {
if (searchTimer) {
clearTimeout(searchTimer)
}
})
</script>
<style scoped lang="scss">
.selector-component {
width: 100%;
:deep(.el-input__wrapper) {
cursor: pointer;
.el-input__inner {
cursor: pointer;
}
}
}
.dialog-content {
display: flex;
flex-direction: column;
gap: 16px;
.pagination-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
}
</style>

242
packages/screen/src/views/WarningManagement/law/dutyManagement/addDialog.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="detail-container">
<el-form ref="formRef" :model="form" label-position="right" label-width="auto"
style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules">
style="max-height: 60vh; overflow-y: hidden; padding-right: 50px" :rules="rules">
<el-form-item label="" prop="schedules">
<div class="tree-transfer-container">
@ -11,24 +11,45 @@
children: 'children',
label: 'orgName'
}" node-key="orgId" :expand-on-click-node="false" :default-expand-all="false" highlight-current
style="height: 400px; overflow-y: auto;"
@node-click="handleNodeClick">
<template #default="{ node, data }">
style="height: 100%; overflow-y: auto;" @node-click="handleNodeClick">
<template #default="{ node: _node }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<span>{{ _node.label }}</span>
</span>
</template>
</el-tree>
</div>
<!-- 中间空白区域 -->
<!-- 中间用户列表 -->
<div class="middle-panel">
<!-- 暂留空，后续使用 -->
<div class="panel-title">用户列表</div>
<div class="user-list">
<div v-for="user in currentUsers" :key="user.userId" class="user-item"
:class="{ 'selected': isUserSelected(user) }" @click="toggleUserSelection(user)">
<span class="user-name">{{ user.realName || user.nickName || user.account }}</span>
<span class="user-position">{{ user.positionName }}</span>
</div>
</div>
</div>
<!-- 右侧空白区域 -->
<!-- 右侧已选择用户 -->
<div class="right-panel">
<!-- 暂留空，后续使用 -->
<div class="panel-title">已选择用户 ({{ selectedUsers.length }})</div>
<div class="selected-user-list">
<div v-for="user in selectedUsers" :key="user.userId" class="selected-user-item">
<div class="user-info">
<span class="user-name">{{ user.realName || user.nickName || user.account }}</span>
<span class="user-position">{{ user.positionName }}</span>
</div>
<div class="time-picker-container">
<el-date-picker v-model="user.timeRange" type="datetimerange" range-separator="至"
start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss" size="small" :shortcuts="dateShortcuts"
@change="handleTimeChange(user)" />
</div>
<el-button type="danger" size="small" icon="Delete" circle @click.stop="removeSelectedUser(user)" />
</div>
</div>
</div>
</div>
</el-form-item>
@ -38,13 +59,31 @@
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { ref, computed, onMounted, watch } from "vue";
import { request } from "@/utils/request";
import { ElMessage } from 'element-plus';
const formRef = ref(null);
defineExpose({ formRef });
// 获取保存用的用户数据（格式化后的数据）
const getFormattedSelectedUsers = () => {
return selectedUsers.value.map(user => ({
userId: user.userId,
userName: user.realName || user.nickName || user.account,
orgId: user.orgId,
startTime: user.timeRange ? user.timeRange[0] : '',
endTime: user.timeRange ? user.timeRange[1] : ''
}));
}
// 当前显示的用户列表
const currentUsers = ref([]);
// 已选择的用户列表
const selectedUsers = ref([]);
defineExpose({
formRef,
getFormattedSelectedUsers
});
const props = defineProps({
form: {
type: Object,
@ -52,6 +91,13 @@ const props = defineProps({
},
});
// 监听已选择用户变化，实时保存到form中
watch(selectedUsers, (newSelectedUsers) => {
// 格式化数据并保存到form
props.form.schedules = getFormattedSelectedUsers();
}, { deep: true, immediate: true });
const rules = computed(() => {
@ -122,14 +168,14 @@ const buildOrgTree = (orgList) => {
// 取最后一个ID作为直接父级（排除-1）
const parentIds = pidMatches.filter(id => id !== '-1');
if (parentIds.length > 0) {
parentId = parseInt(parentIds[parentIds.length - 1]);
parentId = parentIds[parentIds.length - 1]; // 保持字符串类型，不转成数字
}
}
}
// 方法2：如果无法从orgPids解析，使用orgParentId
// 方法2：如果无法从orgPids解析，使用orgParentId（转换为字符串）
if (parentId === null && org.orgParentId && org.orgParentId !== -1) {
parentId = org.orgParentId;
parentId = String(org.orgParentId);
}
// 添加到父节点的children中
@ -156,15 +202,66 @@ const buildOrgTree = (orgList) => {
return sortTree(tree);
}
// 树节点点击事件
const handleNodeClick = (data, node) => {
// 判断是否为叶子节点（没有子节点）
if (!node.childNodes || node.childNodes.length === 0) {
// 叶子节点，调用获取用户列表方法
getUsersByOrgId(data.orgId);
// 检查用户是否已被选择
const isUserSelected = (user) => {
return selectedUsers.value.some(selected => selected.userId === user.userId);
};
// 切换用户选择状态
const toggleUserSelection = (user) => {
if (isUserSelected(user)) {
removeSelectedUser(user);
} else {
// 添加用户时初始化时间范围和orgId
selectedUsers.value.push({
...user,
orgId: user.orgId, // 确保包含orgId
timeRange: null
});
}
};
// 移除已选择的用户
const removeSelectedUser = (user) => {
const index = selectedUsers.value.findIndex(selected => selected.userId === user.userId);
if (index > -1) {
selectedUsers.value.splice(index, 1);
}
};
// 树节点点击事件
const handleNodeClick = async (_data) => {
// 获取该组织的用户列表
await getUsersByOrgId(_data.orgId);
}
// 日期时间范围快捷选项
const dateShortcuts = [
{
text: '今天',
value: [new Date(), new Date()],
},
{
text: '明天',
value: [
new Date(new Date().getTime() + 86400000),
new Date(new Date().getTime() + 86400000)
],
},
{
text: '最近一周',
value: [new Date(), new Date(new Date().getTime() + 604800000)],
},
];
// 处理时间范围变化
const handleTimeChange = (user) => {
// 时间变化时的处理逻辑可以在这里添加
console.log('时间范围变化:', user.userId, user.timeRange);
};
// 根据组织ID查询用户列表
const getUsersByOrgId = async (orgId) => {
try {
@ -176,7 +273,8 @@ const getUsersByOrgId = async (orgId) => {
}
})
if (res.code === '00000') {
console.log('@@@@@@用户列表',res.data);
currentUsers.value = res.data || [];
// console.log('@@@@@', res.data);
} else {
throw new Error(res.message)
}
@ -205,6 +303,7 @@ onMounted(() => {
display: flex;
gap: 20px;
width: 100%;
height: 60vh;
}
.tree-panel {
@ -213,10 +312,7 @@ onMounted(() => {
border-radius: 4px;
padding: 10px;
background-color: #fff;
}
.empty-panel {
height: 100%;
}
.middle-panel {
@ -225,6 +321,9 @@ onMounted(() => {
border-radius: 4px;
padding: 10px;
background-color: #fff;
display: flex;
flex-direction: column;
height: 100%;
}
.right-panel {
@ -233,6 +332,99 @@ onMounted(() => {
border-radius: 4px;
padding: 10px;
background-color: #fff;
display: flex;
flex-direction: column;
height: 100%;
}
.panel-title {
font-weight: bold;
font-size: 14px;
color: #303133;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #ebeef5;
}
.user-list {
flex: 1;
overflow-y: auto;
}
.user-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
margin-bottom: 4px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
border: 1px solid transparent;
}
.user-item:hover {
background-color: #f5f7fa;
}
.user-item.selected {
background-color: #409eff;
color: white;
border-color: #409eff;
}
.user-name {
font-size: 14px;
font-weight: 500;
}
.user-position {
font-size: 12px;
opacity: 0.7;
}
.selected-user-list {
flex: 1;
overflow-y: auto;
}
.selected-user-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
margin-bottom: 4px;
border-radius: 4px;
background-color: #f0f9ff;
border: 1px solid #e1f5fe;
gap: 12px;
}
.time-picker-container {
flex: 1.2;
min-width: 280px;
}
.time-picker-container :deep(.el-date-editor) {
width: 100%;
}
.user-info {
display: flex;
flex-direction: column;
min-width: 120px;
flex: 0.8;
}
.selected-user-item .user-name {
font-size: 14px;
font-weight: 500;
color: #303133;
}
.selected-user-item .user-position {
font-size: 12px;
color: #606266;
}
.custom-tree-node {

27
packages/screen/src/views/WarningManagement/law/dutyManagement/index.js
View File

@ -68,7 +68,7 @@ const pagination = reactive({
},
});
// 获取预警列表
// 获取值班列表
const getTableData = async (filterData = {}) => {
try {
// 过滤空字符串属性
@ -100,7 +100,28 @@ const getTableData = async (filterData = {}) => {
}
}
// 打开发布预警弹窗
// 排班提交
const addSchedule = async (form) => {
try {
const res = await request({
url: '/snow-ops-platform/law-duty/schedule',
method: "POST",
data: form
})
if (res.code === '00000') {
ElMessage.success('排班成功');
modelVisible.value = false;
getTableData(filterData)
} else {
throw new Error(res.message)
}
} catch (error) {
ElMessage.error('排班失败');
console.error('排班失败:', error);
}
}
// 打开排班弹窗
const openAddDialog = () => {
model.title = '立即排班';
Object.assign(form, INIT_FORM);
@ -113,7 +134,7 @@ const openAddDialog = () => {
};
model.onConfirm = async () => {
await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(async () => {
console.log('@@@@@立即排班', form);
await addSchedule(form)
// await publishWarning(form)
})
.catch((err) => {

56
packages/screen/src/views/WarningManagement/law/index.js
View File

@ -2,6 +2,7 @@ import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
import { request } from "@/utils/request";
import { useRoute, useRouter } from 'vue-router'
import AddDialog from "./addDialog.vue";
import ScheduleDiaog from "../law/dutyManagement/addDialog.vue"
import DetailDrawer from "./detailDrawer.vue";
const tableData = ref([]); // 表格数据
@ -305,6 +306,53 @@ const uploadFile = async (file) => {
}
}
const form2 = reactive({});
const INIT_FORM2 = {};
// 排班提交
const addSchedule = async (form) => {
try {
const res = await request({
url: '/snow-ops-platform/law-duty/schedule',
method: "POST",
data: form
})
if (res.code === '00000') {
ElMessage.success('排班成功');
modelVisible.value = false;
getTableData(filterData)
} else {
throw new Error(res.message)
}
} catch (error) {
ElMessage.error('排班失败');
console.error('排班失败:', error);
}
}
const openScheduleDiaog = () => {
model.title = '立即排班';
Object.assign(form2, INIT_FORM2);
model.props = {
form: form2,
};
model.content = ScheduleDiaog;
model.onCancel = () => {
modelVisible.value = false;
};
model.onConfirm = async () => {
await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(async () => {
await addSchedule(form)
// await publishWarning(form)
})
.catch((err) => {
ElMessage.error('请处理表单中的错误项');
});
};
model.width = "70%"
modelVisible.value = true;
}
@ -324,6 +372,12 @@ export default () => {
path: '/dutyManagement'
});
};
// 跳转到消息推送设置
const gotoMessagePage = () => {
router.push({
path: '/messageManagement'
});
}
onMounted(() => {
getTableData();
@ -348,6 +402,7 @@ export default () => {
columns,
gotoLedgerPage,
gotoDutyPage,
gotoMessagePage,
modelVisible,
model,
@ -356,6 +411,7 @@ export default () => {
dialogRef,
drawerRef,
openAddDialog,
openScheduleDiaog,
uploadFile,
}

3
packages/screen/src/views/WarningManagement/law/index.vue
View File

@ -15,8 +15,9 @@
<el-button type="primary" @click="script.openAddDialog">发布预警</el-button>
<el-button type="primary" @click="triggerFileSelect">上传线下帮扶</el-button>
<el-button type="primary" @click="script.gotoLedgerPage">线下帮扶台账</el-button>
<el-button type="primary" @click="">立即排班</el-button>
<el-button type="primary" @click="script.openScheduleDiaog">立即排班</el-button>
<el-button type="primary" @click="script.gotoDutyPage">值班管理</el-button>
<el-button type="primary" @click="script.gotoMessagePage">消息推送设置</el-button>
<el-button type="primary" color="#952DE6" @click="">导出</el-button>
<input type="file" ref="fileInput" style="display: none" @change="handleFileSelect" accept=".*"></input>
<!-- <el-button type="primary" @click="script.gotoLedgerPage">驻地台账</el-button> -->

267
packages/screen/src/views/WarningManagement/law/messageManagement/addDialog.vue Normal file
View File

@ -0,0 +1,267 @@
<template>
<div class="detail-container">
<el-form ref="formRef" :model="form" label-position="right" label-width="auto"
style="max-height: 60vh; overflow-y: hidden; padding-right: 50px" :rules="rules">
<el-form-item label="" prop="schedules">
<div class="user-select-container">
<!-- 左侧用户列表 -->
<div class="user-list-panel">
<div class="panel-title">用户列表</div>
<div class="user-list">
<div v-for="user in currentUsers" :key="user.userId" class="user-item"
:class="{ 'selected': isUserSelected(user) }" @click="toggleUserSelection(user)">
<span class="user-name">{{ user.realName || user.nickName || user.account }}</span>
<span class="user-position">{{ user.positionName }}</span>
</div>
</div>
</div>
<!-- 右侧已选择用户 -->
<div class="selected-panel">
<div class="panel-title">已选择用户 ({{ selectedUsers.length }})</div>
<div class="selected-user-list">
<div v-for="user in selectedUsers" :key="user.userId" class="selected-user-item">
<div class="user-info">
<span class="user-name">{{ user.realName || user.nickName || user.account }}</span>
<span class="user-position">{{ user.positionName }}</span>
</div>
<el-button type="danger" size="small" icon="Delete" circle @click.stop="removeSelectedUser(user)" />
</div>
</div>
</div>
</div>
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { request } from "@/utils/request";
import { ElMessage } from 'element-plus';
const formRef = ref(null);
// 当前显示的用户列表
const currentUsers = ref([]);
// 已选择的用户列表
const selectedUsers = ref([]);
defineExpose({
formRef,
});
const props = defineProps({
form: {
type: Object,
default: () => ({}),
},
orgId: {
type: String,
default: ''
},
orgName: {
type: String,
default: ''
}
});
const rules = computed(() => {
return {
};
});
// 检查用户是否已被选择
const isUserSelected = (user) => {
return selectedUsers.value.some(selected => selected.userId === user.userId);
};
// 切换用户选择状态
const toggleUserSelection = (user) => {
if (isUserSelected(user)) {
removeSelectedUser(user);
} else {
// 添加用户时初始化时间范围和orgId
selectedUsers.value.push({
// ...user,
// orgId: user.orgId, // 确保包含orgId
// timeRange: null
...user,
orgId: user.orgId,
orgName: props.orgName,
userId: user.userId,
userAccount: user.account,
userPhone: user.phone
});
}
};
// 移除已选择的用户
const removeSelectedUser = (user) => {
const index = selectedUsers.value.findIndex(selected => selected.userId === user.userId);
if (index > -1) {
selectedUsers.value.splice(index, 1);
}
};
// 根据组织ID查询用户列表
const getUsersByOrgId = async (orgId) => {
// console.log('@@@@@', orgId);
try {
const res = await request({
url: '/snow-ops-platform/user/orgUsers',
method: 'GET',
params: {
orgId
}
})
if (res.code === '00000') {
currentUsers.value = res.data || [];
// console.log('@@@@@', res.data);
} else {
throw new Error(res.message)
}
} catch (error) {
ElMessage.error('获取用户失败');
console.error('获取用户失败:', error);
}
}
onMounted(() => {
getUsersByOrgId(props.orgId);
})
watch(selectedUsers.value, (val) => {
props.form.data = val;
}, { deep: true })
</script>
<style scoped>
.form-part {
padding: 20px;
}
.text-center {
text-align: center;
}
.user-select-container {
display: flex;
gap: 20px;
width: 100%;
height: 60vh;
}
.user-list-panel {
flex: 1;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 10px;
background-color: #fff;
height: 100%;
}
.selected-panel {
flex: 1;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 10px;
background-color: #fff;
display: flex;
flex-direction: column;
height: 100%;
}
.user-list {
flex: 1;
overflow-y: auto;
}
.user-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
margin-bottom: 4px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
border: 1px solid transparent;
}
.user-item:hover {
background-color: #f5f7fa;
}
.user-item.selected {
background-color: #409eff;
color: white;
border-color: #409eff;
}
.user-name {
font-size: 14px;
font-weight: 500;
}
.user-position {
font-size: 12px;
opacity: 0.7;
}
.selected-user-list {
flex: 1;
overflow-y: auto;
}
.selected-user-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
margin-bottom: 4px;
border-radius: 4px;
background-color: #f0f9ff;
border: 1px solid #e1f5fe;
gap: 12px;
}
.time-picker-container {
flex: 1.2;
min-width: 280px;
}
.time-picker-container :deep(.el-date-editor) {
width: 100%;
}
.user-info {
display: flex;
flex-direction: column;
min-width: 120px;
flex: 0.8;
}
.selected-user-item .user-name {
font-size: 14px;
font-weight: 500;
color: #303133;
}
.selected-user-item .user-position {
font-size: 12px;
color: #606266;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
font-size: 14px;
padding-right: 8px;
}
</style>

224
packages/screen/src/views/WarningManagement/law/messageManagement/index.js Normal file
View File

@ -0,0 +1,224 @@
import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
import { request } from "@/utils/request";
import { useRoute, useRouter } from 'vue-router'
import AddDialog from "./addDialog.vue";
const modelVisible = ref(false); // 弹窗状态
const drawerVisible = ref(false); // 抽屉状态
// 弹窗内容
const model = reactive({
});
const form = reactive({
});
const INIT_FORM = {
};
// 抽屉内容
const drawer = reactive({
title: '',
content: null,
props: {},
onCancel: null,
onConfirm: null,
direction: 'rtl',
size: '50%'
});
const dialogRef = ref(null); // 弹窗实例
const drawerRef = ref(null); // 抽屉实例
// 消息推送组织列表（固定六个），增加personList存储该组织的人员数组
const messageOrgList = ref([
{ title: '中心领导', orgName: '中心领导', personList: [] },
{ title: '法规处', orgName: '法规处', personList: [] },
{ title: '养护处', orgName: '养护处', personList: [] },
{ title: '农村公路处', orgName: '农村公路处', personList: [] },
{ title: '建设处', orgName: '建设处', personList: [] },
{ title: '市公路应急中心/管理段', orgName: '公路管理段', personList: [] },
])
const messagePushPerson = ref([])
const userOrgsList = ref([])
// 查询所有消息推送人员
const getAllMessagePushPerson = async () => {
try {
const res = await request({
url: '/snow-ops-platform/messagePushPerson/listAll',
method: 'GET',
})
if (res.code === '00000') {
messagePushPerson.value = res.data
// 按orgId分组填充人员数据到对应组织
messageOrgList.value.forEach(org => {
org.personList = messagePushPerson.value.filter(person => person.orgId === org.orgId)
});
// console.log('@@@@@@', messageOrgList.value);
} else {
throw new Error(res.message)
}
} catch (error) {
ElMessage.error('获取消息推送人员失败');
console.error('获取消息推送人员失败:', error);
}
}
// 查询所有组织
const getUserOrgs = async () => {
try {
const res = await request({
url: '/snow-ops-platform/user/userOrgs',
method: 'GET',
})
if (res.code === '00000') {
userOrgsList.value = res.data.data
// 遍历后端返回的组织数据，与固定组织列表匹配并赋值orgId
messageOrgList.value.forEach(fixedOrg => {
const matchedOrg = userOrgsList.value.find(org =>
org.orgName === fixedOrg.orgName
);
if (matchedOrg) {
fixedOrg.orgId = matchedOrg.orgId;
}
});
// 在获取到orgId后，立即根据orgId填充对应的人员数据
messageOrgList.value.forEach(org => {
org.personList = messagePushPerson.value.filter(person => person.orgId === org.orgId)
});
// console.log('@@@@',messageOrgList.value);
} else {
throw new Error(res.message)
}
} catch (error) {
ElMessage.error('获取组织失败');
console.error('获取组织失败:', error);
}
}
// 添加消息推送人
const handelAdd = async (data) => {
try {
const loading = ElLoading.service({
lock: true,
text: '操作中',
background: 'rgba(0, 0, 0, 0.7)',
})
const res = await request({
url: '/snow-ops-platform/messagePushPerson/add',
method: 'POST',
data: data
})
loading.close();
if (res.code === '00000') {
ElMessage.success('添加成功');
modelVisible.value = false;
await getAllMessagePushPerson();
} else {
throw new Error(res.message)
}
} catch (error) {
ElMessage.error('添加失败');
console.error('添加失败:', error);
}
}
// 打开添加人员弹窗
const openAddDialog = (orgId, orgName) => {
model.title = '添加人员';
Object.assign(form, INIT_FORM);
model.props = {
orgId: orgId,
orgName: orgName,
form: form,
};
model.content = AddDialog;
model.onCancel = () => {
modelVisible.value = false;
};
model.onConfirm = async () => {
await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(async () => {
// console.log('@@@@@@form',form);
await handelAdd(form.data)
// await addSchedule(form)
// await publishWarning(form)
})
.catch((err) => {
ElMessage.error('请处理表单中的错误项');
});
};
model.width = "70%"
modelVisible.value = true;
}
// 删除消息推送人
const deletePushPerson = async (person) => {
try {
await ElMessageBox.confirm(
`确定要删除【${person.realName}】吗？`,
'删除确认',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
const loading = ElLoading.service({
lock: true,
text: '操作中',
background: 'rgba(0, 0, 0, 0.7)',
})
const res = await request({
url: '/snow-ops-platform/messagePushPerson/deleteByUserId',
method: 'POST',
data: {
userId: person.userId
}
})
loading.close();
if (res.code === '00000') {
ElMessage.success('删除成功');
await getAllMessagePushPerson();
} else {
throw new Error(res.message)
}
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败');
console.error('删除失败:', error);
}
}
}
export default () => {
const router = useRouter();
onMounted(async () => {
await getUserOrgs();
await getAllMessagePushPerson();
})
return {
modelVisible,
model,
drawerVisible,
drawer,
dialogRef,
drawerRef,
openAddDialog,
deletePushPerson,
messageOrgList,
}
}

121
packages/screen/src/views/WarningManagement/law/messageManagement/index.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<div class="root">
<div class="content-box">
<el-card shadow="never" v-for="org in script.messageOrgList.value" class="org-box">
<template #header>
<div class="card-header">
<span>{{ org.title }}</span>
<el-button type="primary" size="small" text
@click="script.openAddDialog(org.orgId, org.orgName)">添加</el-button>
</div>
</template>
<!-- 人员列表 -->
<div class="person-list">
<div v-if="org.personList.length === 0" class="empty-text">暂无人员</div>
<div v-else class="person-item" v-for="person in org.personList" :key="person.userId">
<div class="person-info">
<span class="name">{{ person.realName }}</span>
<!-- <span class="account">({{ person.userAccount }})</span> -->
<span class="phone" v-if="person.userPhone">{{ person.userPhone }}</span>
</div>
<el-button type="danger" size="small" text @click="script.deletePushPerson(person)">删除</el-button>
</div>
</div>
</el-card>
</div>
<div class="model-box">
<MyDialog v-model="script.modelVisible.value" :title="script.model?.title"
:dynamicComponent="script.model?.content" :component-props="script.model?.props"
:onConfirm="script.model?.onConfirm" :onCancel="script.model?.onCancel" ref="dialogRef"
:width="script.model?.width">
</MyDialog>
<MyDrawer v-model="script.drawerVisible.value" :title="script.drawer?.title"
:dynamicComponent="script.drawer?.content" :component-props="script.drawer?.props"
:onConfirm="script.drawer?.onConfirm" :onCancel="script.drawer?.onCancel" ref="drawerRef"
:direction="script.drawer?.direction" :size="script.drawer?.size">
</MyDrawer>
</div>
</div>
</template>
<script setup>
import DynamicTable from "@/component/DynamicTable/index.js";
import { Search, ArrowDown } from "@element-plus/icons-vue";
import MyDialog from "@/component/MyDialog/index.js";
import MyDrawer from "@/component/MyDrawer/index.js";
import scriptFn from "./index.js";
const script = scriptFn();
const { dialogRef, drawerRef } = script;
</script>
<style scoped>
.root {
height: 100%;
padding: 25px;
}
.content-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
gap: 20px;
}
.org-box {
flex: 1;
height: 100%;
min-width: fit-content;
}
.card-header {
display: flex;
flex-direction: row;
justify-content: space-between;
white-space: nowrap;
align-items: center;
}
.person-list {
margin-top: 10px;
}
.empty-text {
color: #999;
text-align: center;
padding: 20px 0;
}
.person-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.person-item:last-child {
border-bottom: none;
}
.person-info {
display: flex;
gap: 10px;
align-items: center;
}
.name {
font-weight: bold;
}
.account {
color: #666;
font-size: 0.9em;
}
.phone {
color: #666;
font-size: 0.9em;
}
</style>

6
packages/shared/composables/useOptions.js
View File

@ -48,6 +48,12 @@ export function useOptions() {
{ label: '限制通行', value: '限制通行' }
]
// 冰灾 处理措施
options.value['iceDisposalMeasures'] = [
{ label: '封闭交通', value: '封闭交通' },
{ label: '限速通行', value: '限速通行' },
]
// 路线类型
options.value['roadType'] = [
{ label: '国道', value: 'G' },