threeonecheck_web/pages/hiddendanger/view.vue

<template>
	<view class="padding page">
		<view class="padding bg-white radius">
			<view class="flex margin-bottom">
				<view class="text-gray">检查形式</view>
				<view class="text-red">*</view>
			</view>
			<view class="read-only-box">{{ detailData.source || '暂无' }}</view>

			<view class="flex margin-bottom margin-top">
				<view class="text-gray">隐患图片</view>
				<view class="text-red">*</view>
			</view>
			<view class="margin-bottom">
				<view v-if="detailData.attachments && detailData.attachments.length > 0" class="margin-top-xs">
					<view class="flex" style="flex-wrap: wrap; gap: 10rpx;">
						<image
							v-for="(img, idx) in detailData.attachments"
							:key="idx"
							:src="getFullPath(img.filePath)"
							style="width: 136rpx;height: 136rpx;border-radius: 16rpx;"
							mode="aspectFill"
							@click="previewHazardImage(idx)"
						></image>
					</view>
				</view>
				<view v-else class="text-gray text-sm">暂无图片</view>
				<view class="text-gray text-sm margin-top-xs">必填：请上传现场照片作为隐患证据</view>
			</view>

			<view class="flex margin-bottom margin-top">
				<view class="text-gray">隐患标题</view>
				<view class="text-red">*</view>
			</view>
			<up-input v-model="detailData.title" disabled disabledColor="#F6F6F6" border="surround" placeholder="暂无" />
			<view class="text-sm text-gray margin-top-xs">请用简洁的语言概括隐患要点</view>

			<view class="flex margin-bottom margin-top">
				<view class="text-gray">隐患等级</view>
				<view class="text-red">*</view>
			</view>
			<view class="flex col-2" style="gap: 10rpx;">
				<view :class="detailData.level === 2 ? 'bg-blue light' : 'bg-gray'" class="level-item">一般隐患</view>
				<view :class="detailData.level === 3 ? 'bg-blue light' : 'bg-gray'" class="level-item">重大隐患</view>
			</view>

			<view class="flex margin-bottom margin-top">
				<view class="text-gray">隐患位置</view>
				<view class="text-red">*</view>
			</view>
			<up-input v-model="detailData.address" disabled disabledColor="#F6F6F6" border="surround" placeholder="暂无地址" />
			<view class="text-gray text-sm margin-top-xs">如：办公楼3层东侧消防通道、生产车间A区设备旁等，或点击"选择地址"按钮在地图上选择</view>

			<view class="flex margin-bottom margin-top">
				<view class="text-gray">法律依据</view>
			</view>
			<view class="read-only-select">
				<view class="select-value" :class="{ placeholder: !legalBasisText }">
					{{ legalBasisText || '暂无' }}
				</view>
			</view>

			<view class="flex margin-bottom margin-top">
				<view class="text-gray">隐患区域</view>
			</view>
			<view class="read-only-select">
				<view class="flex align-center">
					<view
						v-if="detailData.areaColor"
						class="area-color-dot"
						:style="{ backgroundColor: detailData.areaColor }"
					></view>
					<view class="select-value" :class="{ placeholder: !detailData.areaName }">
						{{ detailData.areaName || '暂无' }}
					</view>
				</view>
			</view>

			<view class="flex margin-bottom margin-top">
				<view class="text-gray">隐患描述</view>
				<view class="text-red">*</view>
			</view>
			<up-textarea v-model="detailData.description" placeholder="暂无描述" disabled autoHeight></up-textarea>
			<view class="text-gray text-sm margin-top-xs">请详细说明隐患现状、潜在风险及影响范围</view>

			<view class="text-gray margin-bottom margin-top">隐患标签</view>
			<view class="read-only-box">{{ detailData.tagName || '暂无' }}</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getHiddenDangerDetail } from '@/request/api.js'
	import { toImageUrl } from '@/request/request.js'

	const detailData = reactive({
		hazardId: '',
		assignId: '',
		title: '',
		level: 0,
		levelName: '',
		source: '',
		description: '',
		address: '',
		areaName: '',
		areaColor: '',
		tagName: '',
		legalBasis: '',
		regulationName: '',
		attachments: []
	})

	const legalBasisText = computed(() => detailData.legalBasis || detailData.regulationName || '')

	const getFullPath = (filePath) => toImageUrl(filePath)

	const previewHazardImage = (index) => {
		if (!detailData.attachments || detailData.attachments.length === 0) return
		uni.previewImage({
			current: index,
			urls: detailData.attachments.map(item => getFullPath(item.filePath))
		})
	}

	const fetchDetail = async (hazardId, assignId) => {
		try {
			const params = { hazardId }
			if (assignId) params.assignId = assignId
			const res = await getHiddenDangerDetail(params)
			if (res.code === 0 && res.data) {
				Object.assign(detailData, res.data)
			} else {
				uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
			}
		} catch (error) {
			console.error('获取隐患详情失败:', error)
			uni.showToast({ title: '请求失败', icon: 'none' })
		}
	}

	onLoad((options) => {
		if (options.hazardId) {
			fetchDetail(options.hazardId, options.assignId)
		}
	})
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #EBF2FC;
	}

	.read-only-box {
		background: #f5f5f5;
		border-radius: 8rpx;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		color: #333;
	}

	.read-only-select {
		background: #f5f5f5;
		border: 1rpx solid #dcdfe6;
		border-radius: 8rpx;
		padding: 20rpx 24rpx;

		.select-value {
			font-size: 28rpx;
			color: #333;
			line-height: 1.5;
			word-break: break-all;

			&.placeholder {
				color: #999;
			}
		}
	}

	.level-item {
		padding: 16rpx 40rpx;
		border-radius: 8rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.area-color-dot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		margin-right: 16rpx;
		flex-shrink: 0;
	}
</style>