diff --git a/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue b/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue index 714fdc2..4986aec 100644 --- a/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue +++ b/packages/mobile/src/views/DisasterManagement/DisasterDetail.vue @@ -150,16 +150,18 @@
处置措施： - {{ formatDisposalMeasures(report.disposalMeasures) || '-' }} -
-
- 塌方及损失： - {{ getLossDescription(report) }} -
-
- 路产损失： - {{ report.totalLossAmount ? report.totalLossAmount + '万元' : '-' }} + {{ report.disposalMeasures || '-' }}
+
有无车辆滞留： {{ getVehicleStrandedText(report) }} @@ -181,13 +183,18 @@ {{ report.siteDescription || '-' }}
-
+
附件：
- - {{ file.fileName }} - 预览 +
+ +
+
+ + {{ file.fileName }} + +
@@ -200,8 +207,12 @@
- 续报 + 续报
+ + + + @@ -220,10 +231,10 @@ const route = useRoute() // 详情数据（对应 Data 接口） const detailData = ref({ - event: null, // Event 对象 - reportList: [], // 填报列表（包含首报和续报） - fileList: [], // 附件列表 - lossList: [], // 损失列表 + event: null, // Event 对象 + report: [], // 填报列表（包含首报和续报） + fileList: [], // 附件列表 + lossList: [], // 损失列表 occurLocation: '', occurTime: '', roadConditionType: '', @@ -231,11 +242,17 @@ const detailData = ref({ }) const allReports = computed(() => { - const reports = detailData.value.reportList?.map((item, index)=>{ - item.title = index == 0 ? '首报' : ('续报' + index) - return item - }) || [] - return reports.reverse() + const reports = + detailData.value.report?.map((item, index) => { + if (index === detailData.value.report.length - 1) { + item.title = '首报' + } else { + item.title = '续报' + (detailData.value.report.length - 1 - index) + } + return item + }) || [] + return reports + // return reports.reverse() }) // 是否有填报数据 @@ -243,7 +260,6 @@ const hasReportData = computed(() => { return allReports.value.length > 0 }) - // 获取事件状态文本 const getEventStatusText = () => { return detailData.eventStatus === 1 ? '已解除' : '未解除' @@ -258,10 +274,10 @@ const getEventStatusType = () => { const formatDisposalMeasures = (measures) => { if (!measures) return '' const measureMap = { - '半幅封闭': '半幅封闭', - '全副封闭': '全副封闭', - '便道通行': '便道通行', - '正常通行': '正常通行' + 半幅封闭: '半幅封闭', + 全副封闭: '全副封闭', + 便道通行: '便道通行', + 正常通行: '正常通行' } return measures .split(',') @@ -287,7 +303,7 @@ const getLossDescription = (report) => { // 获取车辆滞留文本 const getVehicleStrandedText = (report) => { const count = report?.strandedVehicleCount || 0 - return count > 0 ? `有车滞留，共${count}辆` : '无车滞留' + return count > 0 ? `有车滞留` : '无车滞留' } // 获取灾毁详情 @@ -310,7 +326,7 @@ const getDisasterDetail = async () => { const data = result.data detailData.value = { event: data.event || null, - reportList: data.report || [], // 直接使用 reportList，包含首报和续报 + report: data.report || [], // 直接使用 report，包含首报和续报 fileList: data.fileList || [], lossList: data.lossList || [], occurLocation: data.occurLocation || '', @@ -344,10 +360,25 @@ const handleContinueReport = () => { }) } +const isImageFile = (file) => { + // 根据url后缀判断 + const imageExtensions = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i + if (file.fileUrl && imageExtensions.test(file.fileUrl)) return true + // 根据文件类型判断 + if (file.type && file.type.startsWith('image/')) return true + return false +} + +const imagesForPreview = ref([]) +const previewImagesVisible = ref(false) +const startPosition = ref(0) + // 预览附件 -const previewFile = (file) => { - console.log("🚀 ~ previewFile ~ file:", file) - // showImagePreview +const previewFile = (report, file) => { + const images = report.fileList.filter((file) => isImageFile(file)) + imagesForPreview.value = images.map((item) => item.fileUrl) + startPosition.value = imagesForPreview.value.indexOf(file.fileUrl) + previewImagesVisible.value = true } onMounted(() => { @@ -374,6 +405,13 @@ onMounted(() => { margin-left: 20px; margin-top: -8px; } + + &.column { + flex-direction: column; + .info-label { + margin-bottom: 10px; + } + } } .info-label { @@ -428,14 +466,17 @@ onMounted(() => { } .attachment-list { + display: flex; + flex-wrap: wrap; flex: 1; + gap: 10px; + overflow: hidden; .attachment-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; - padding: 8px; background: #f7f8fa; border-radius: 4px; @@ -450,11 +491,20 @@ onMounted(() => { color: #323233; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; } } } +.preview-image-block { + width: 60px; + height: 60px; + img { + width: 100%; + height: 100%; + object-fit: contain; + } +} + .footer-buttons { position: fixed; bottom: 0; @@ -474,4 +524,4 @@ onMounted(() => { font-size: 16px; } } - \ No newline at end of file + diff --git a/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue b/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue index 652cfd6..b17de77 100644 --- a/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue +++ b/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue @@ -49,7 +49,7 @@