From 9ec3f14585a6a452a5603750df58c8527432ac56 Mon Sep 17 00:00:00 2001 From: niedongsheng <605973111@qq.com> Date: Fri, 10 Apr 2026 11:38:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B0=B4=E6=AF=81=E7=81=BE=E5=AE=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DisasterManagement/DisasterDetail.vue | 14 +- .../DisasterManagement/DisasterManagement.vue | 6 +- .../WaterDisaster/WaterDisaster.vue | 184 ++++++++--- .../waterDisasterFormData.json | 4 +- .../src/component/FileUpload/FileUpload.vue | 4 +- .../src/component/FileUpload/PreviewBlock.vue | 4 +- .../src/component/FileUpload/UploadBlock.vue | 6 +- .../src/component/VideoPreviewDialog.vue | 142 +++++++++ .../DisasterDetail/ContinueReport.vue | 18 +- .../DisasterDetail/LossListDetail.vue | 165 ++++++++++ .../DisasterDetail/WaterDisasterDetail.vue | 285 +++++++++--------- .../DisasterManagement/DisasterManagement.vue | 59 ++-- .../DisasterReport/WaterDisasterReport.vue | 6 +- 13 files changed, 663 insertions(+), 234 deletions(-) create mode 100644 packages/screen/src/component/VideoPreviewDialog.vue create mode 100644 packages/screen/src/views/DisasterManagement/DisasterDetail/LossListDetail.vue diff --git a/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue b/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue index a164499..dd1edc0 100644 --- a/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue +++ b/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue @@ -31,9 +31,9 @@ {{ detailData.event?.isBlocked ? '是' : '否' }} - +
- 抢修进度: + 抢险进度: {{ detailData.event?.repairProgress || '-' }}
@@ -165,7 +165,7 @@
- 处置情况: + 处置措施: {{ formatDisposalMeasures(report.disposalMeasures) || '-' }}
@@ -274,10 +274,10 @@ const getEventStatusType = () => { const formatDisposalMeasures = (measures) => { if (!measures) return '' const measureMap = { - halfClose: '半幅封闭', - fullClose: '全副封闭', - bypass: '便道通行', - normal: '正常通行' + '半幅封闭': '半幅封闭', + '全副封闭': '全副封闭', + '便道通行': '便道通行', + '正常通行': '正常通行' } return measures .split(',') diff --git a/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue b/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue index f6caa8d..652cfd6 100644 --- a/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue +++ b/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue @@ -124,7 +124,7 @@ const getDisasterTypeText = (item) => { // 可以根据 roadConditionType、repairProgress 或其他字段来生成类型标签 // 这里提供几种可能的映射方式 - // 方式1:根据抢修进度 + // 方式1:根据抢险进度 if (item.repairProgress) { return item.repairProgress } @@ -149,8 +149,8 @@ const getShortTypeName = (type) => { '积水': '积水', '积雪': '积雪', '其他': '其他', - '未抢修': '待抢修', - '抢修中': '抢修中', + '未抢险': '待抢险', + '抢险中': '抢险中', '已完成': '已完成', '高速公路': '高速', '国道': '国道', diff --git a/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue b/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue index cf3e45c..705f30c 100644 --- a/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue +++ b/packages/mobile/src/views/DisasterManagement/WaterDisaster/WaterDisaster.vue @@ -9,8 +9,8 @@ - - + + @@ -73,10 +73,10 @@
- 半幅封闭 - 全副封闭 - 便道通行 - 正常通行 + 半幅封闭 + 全副封闭 + 便道通行 + 正常通行
@@ -148,30 +148,12 @@ + + + - - - - @@ -187,12 +169,13 @@ + + \ No newline at end of file diff --git a/packages/screen/src/views/DisasterManagement/DisasterDetail/ContinueReport.vue b/packages/screen/src/views/DisasterManagement/DisasterDetail/ContinueReport.vue index 7158c2b..c4e4ac1 100644 --- a/packages/screen/src/views/DisasterManagement/DisasterDetail/ContinueReport.vue +++ b/packages/screen/src/views/DisasterManagement/DisasterDetail/ContinueReport.vue @@ -3,19 +3,19 @@
- 续保信息 + 续报信息
- - 半幅封闭 - 全副封闭 - 便道通行 - 正常通行 - + + + + + + @@ -216,8 +216,8 @@ const blockedOptions = [ ] const repairProgressOptions = [ - { label: '未抢修', value: '未抢修' }, - { label: '抢修中', value: '抢修中' }, + { label: '未抢险', value: '未抢险' }, + { label: '抢险中', value: '抢险中' }, { label: '已完成', value: '已完成' } ] diff --git a/packages/screen/src/views/DisasterManagement/DisasterDetail/LossListDetail.vue b/packages/screen/src/views/DisasterManagement/DisasterDetail/LossListDetail.vue new file mode 100644 index 0000000..d8ecbde --- /dev/null +++ b/packages/screen/src/views/DisasterManagement/DisasterDetail/LossListDetail.vue @@ -0,0 +1,165 @@ + + + + + diff --git a/packages/screen/src/views/DisasterManagement/DisasterDetail/WaterDisasterDetail.vue b/packages/screen/src/views/DisasterManagement/DisasterDetail/WaterDisasterDetail.vue index 3bb01cd..1d46067 100644 --- a/packages/screen/src/views/DisasterManagement/DisasterDetail/WaterDisasterDetail.vue +++ b/packages/screen/src/views/DisasterManagement/DisasterDetail/WaterDisasterDetail.vue @@ -47,16 +47,25 @@
- 抢修进度: + 抢险进度: {{ detailData.event?.repairProgress || '-' }}
+ +
+ 处理措施: + {{ getBaseDisposalMeasures() }} +
+
水毁处数: {{ detailData.event?.damageCount || 0 }}
+
+ +
阻断里程: @@ -66,66 +75,24 @@ - -
- 发生时间: - {{ detailData.occurTime || '-' }} -
-
- -
- 线路编号: - {{ detailData.routeNo || '-' }} -
-
地点路线: {{ detailData.occurLocation || '-' }}
-
- -
起点桩号: {{ detailData.event?.startStakeNo || '-' }}
- -
- 起点桩经度: - {{ detailData.event?.startStakeLng || '-' }} -
-
- -
- 起点桩纬度: - {{ detailData.event?.startStakeLat || '-' }} -
-
-
- -
止点桩号: {{ detailData.event?.endStakeNo || '-' }}
- -
- 止点桩经度: - {{ detailData.event?.endStakeLng || '-' }} -
-
- -
- 止点桩纬度: - {{ detailData.event?.endStakeLat || '-' }} -
-
@@ -141,55 +108,37 @@ {{ detailData.event?.blockedPointName || '-' }}
- -
- 上报区县: - {{ detailData.event?.district || '-' }} -
-
- 巡查里程: - {{ detailData.event?.inspectionMileage ? detailData.event.inspectionMileage + '公里' : '-' }} + 所属区县: + {{ detailData.event?.district || '-' }}
+ +
+ 发生时间: + {{ detailData.occurTime || '-' }} +
+
+
+ +
是否恢复重建: {{ detailData.event?.needsRecovery ? '是' : '否' }}
- +
恢复重建预估费用: {{ detailData.event?.estimatedRecoveryCost ? detailData.event.estimatedRecoveryCost + '万元' : '-' }}
- - - -
- 联系人: - {{ detailData.event?.contactPerson || '-' }} -
-
- -
- 联系电话: - {{ detailData.event?.contactPhone || '-' }} -
-
- -
- 填报单位: - {{ detailData.event?.reporterUnit || '-' }} -
-
-
@@ -204,52 +153,83 @@
{{ report?.title }} - {{ report.reporterName || '-' }} {{ report.reportTime || '-' }} + 时间:{{ report.reportTime || '-' }}
+
+
+
+
+ 现场描述: + {{ report.siteDescription || '-' }} +
+
+ 处置措施: + {{ report.disposalMeasures || '-' }} +
+
+ 路产损失: + {{ report.totalLossAmount ? report.totalLossAmount + '万元' : '-' }} +
+
+ 实际恢复时间: + {{ report.actualRecoverTime || '-' }} +
+
+ 预计恢复时间: + {{ report.expectRecoverTime || '-' }} +
-
-
- 处置情况: - {{ formatDisposalMeasures(report.disposalMeasures) || '-' }} -
-
- 塌方及损失: - {{ getLossDescription(report) }} -
-
- 路产损失: - {{ report.totalLossAmount ? report.totalLossAmount + '万元' : '-' }} -
-
- 有无车辆滞留: - {{ getVehicleStrandedText(report) }} -
-
- 滞留车辆: - {{ report.strandedVehicleCount || 0 }}辆 -
-
- 预计恢复时间: - {{ report.expectRecoverTime || '-' }} -
-
- 实际恢复时间: - {{ report.actualRecoverTime || '-' }} -
-
- 现场描述: - {{ report.siteDescription || '-' }} -
+
+ 填报人: + {{ report.reporterName ? report.reporterName : '-' }} +
- -
- 附件: -
- - - {{ file.fileName }} - +
+ 联系电话: + {{ report.phone ? report.phone : '-' }} +
+
+ +
+
+ +
+ + + + {{ report.showDetail ? '点击关闭详情' : '点击查看详情' }} +
@@ -276,6 +256,8 @@ import { ElMessage } from 'element-plus' import { ArrowLeft, Picture, VideoCamera } from '@element-plus/icons-vue' import ContinueReport from './ContinueReport.vue' import { request } from '@shared/utils/request' +import LossListDetail from './LossListDetail.vue' +import FileUpload from '@/component/FileUpload/FileUpload.vue' import mockData from '../DisasterReport/waterMockJson.json' const router = useRouter() @@ -307,10 +289,16 @@ const continueReport = ref(null) const allReports = computed(() => { const reports = detailData.value.report?.map((item, index) => { - item.title = index === 0 ? '首报' : '续报' + index + if (index === detailData.value.report.length - 1) { + item.title = '首报' + } else { + item.title = '续报' + (detailData.value.report.length - 1 - index) + } + console.log(detailData.value.report.length - 1, ' ', index, ' -', item.title) return item }) || [] - return reports.reverse() + return reports + // return reports.reverse() }) // 是否有填报数据 @@ -328,14 +316,20 @@ const getEventStatusType = () => { return eventStatus.value === 1 ? 'success' : 'danger' } +const getBaseDisposalMeasures = () => { + const firstItem = allReports.value[0] + if (!firstItem) return '-' + return formatDisposalMeasures(firstItem.disposalMeasures || '') || '-' +} + // 格式化处置措施 const formatDisposalMeasures = (measures) => { if (!measures) return '' const measureMap = { - halfClose: '半幅封闭', - fullClose: '全副封闭', - bypass: '便道通行', - normal: '正常通行' + 半幅封闭: '半幅封闭', + 全副封闭: '全副封闭', + 便道通行: '便道通行', + 正常通行: '正常通行' } return measures .split(',') @@ -381,6 +375,7 @@ const getDisasterDetail = async () => { if (result?.data) { const data = result.data + console.log('🚀 ~ getDisasterDetail ~ data:', data) detailData.value = { event: data.event || null, report: data.report || [], @@ -397,7 +392,7 @@ const getDisasterDetail = async () => { const newFormData = { ...data, lossList: null, - report: mockData.report, + report: route.query.mock ? mockData.report : {}, fileList: null } continueReport.value?.initFormData(newFormData) @@ -416,25 +411,6 @@ const handleClickBack = () => { router.push('/disasterManagement') } -// 续报 -const handleContinueReport = () => { - router.push({ - path: '/disasterReport', - query: { - id: route.query.id, - eventId: detailData.value.event?.id, - isContinue: 'true' - } - }) -} - -// 预览附件 -const previewFile = (file) => { - if (file.fileUrl) { - window.open(file.fileUrl, '_blank') - } -} - onMounted(() => { getDisasterDetail() }) @@ -502,8 +478,12 @@ onMounted(() => { align-items: flex-start; line-height: 1.5; + & + .info-item { + margin-top: 10px; + } + .info-label { - width: 120px; + white-space: nowrap; flex-shrink: 0; color: #909399; font-size: 14px; @@ -612,7 +592,26 @@ onMounted(() => { margin-right: 10px; } .right-panel { - width: 400px; + width: 300px; } +} +.content-wrapper { + display: flex; + flex-direction: column; +} +.basic-info-wrapper { + display: flex; +} +.detal-info-wrapper { + margin-top: 10px; + border-top: 1px solid #efefef; + padding-top: 10px; +} +.info-list { + flex: 1; + overflow: hidden; +} +.file-list { + } diff --git a/packages/screen/src/views/DisasterManagement/DisasterManagement.vue b/packages/screen/src/views/DisasterManagement/DisasterManagement.vue index 68edc96..700557d 100644 --- a/packages/screen/src/views/DisasterManagement/DisasterManagement.vue +++ b/packages/screen/src/views/DisasterManagement/DisasterManagement.vue @@ -22,9 +22,8 @@ - - - + + @@ -87,20 +86,25 @@ {{ scope.$index + 1 }} - + - - + + - + + + - + @@ -148,6 +152,9 @@ />
+ + +
@@ -156,6 +163,8 @@ import { ref, reactive, onMounted } from 'vue' import { ElMessage } from 'element-plus' import { useRouter } from 'vue-router' import { request } from '@/utils/request' +import { Picture, VideoPlay } from '@element-plus/icons-vue' +import VideoPreviewDialog from '@/component/VideoPreviewDialog.vue' const router = useRouter() @@ -171,6 +180,11 @@ const filterForm = reactive({ pushStatus: '' // 推送状态 }) +const showPreviewImage = ref(false) +const selectedRow = ref(null) + +const videoPreviewDialog = ref(null) + // 日期范围 const dateRange = ref(null) @@ -221,7 +235,7 @@ const fetchData = async () => { // 实际接口调用 const response = await request({ - url: '/snow-ops-platform/unified-disaster/list', + url: '/snow-ops-platform/unified-disaster/pc/list', method: 'get', params }) @@ -313,21 +327,16 @@ const toReport = () => { // 查看图片 const viewImages = (row) => { - if (row.images && row.images.length) { - // 打开图片预览 - ElMessage.info('图片预览功能开发中') - } else { - ElMessage.info('暂无图片') - } + selectedRow.value = row + showPreviewImage.value = true } // 查看视频 const viewVideos = (row) => { - if (row.videos && row.videos.length) { - ElMessage.info('视频播放功能开发中') - } else { - ElMessage.info('暂无视频') - } + videoPreviewDialog.value.show({ + url: row.videos[0], + title: row.eventName + }) } // 分页大小改变 @@ -400,4 +409,4 @@ onMounted(() => { border-top: 1px solid #ebeef5; } } - \ No newline at end of file + diff --git a/packages/screen/src/views/DisasterManagement/DisasterReport/WaterDisasterReport.vue b/packages/screen/src/views/DisasterManagement/DisasterReport/WaterDisasterReport.vue index e5837d5..b6f23f7 100644 --- a/packages/screen/src/views/DisasterManagement/DisasterReport/WaterDisasterReport.vue +++ b/packages/screen/src/views/DisasterManagement/DisasterReport/WaterDisasterReport.vue @@ -77,8 +77,8 @@ - - + + @@ -414,7 +414,7 @@ const formData = reactive({ inspectionMileage: null, // 巡查里程 isBlocked: null, // 是否阻断 needsRecovery: null, // 是否需要恢复重建 - repairProgress: null, // 抢修进度 + repairProgress: null, // 抢险进度 reporterUnit: null, // 填报单位 startStakeLat: null, // 起点纬度 startStakeLng: null, // 起点经度