sh-app/pipe/pressure/pressure_before/detail.vue

<template>
	<view class="page-detail">
		<!-- 统计概览 -->
		<view class="stats-group">
			<view class="stats-item">
				<view class="stats-dot" style="background:#f44336"></view>
				<text class="stats-label">未完成</text>
				<text class="stats-value">{{ red_num }}</text>
			</view>
			<view class="stats-item">
				<view class="stats-dot" style="background:#FFFF00"></view>
				<text class="stats-label">未达检测比例</text>
				<text class="stats-value">{{ yellow_num }}</text>
			</view>
			<view class="stats-item">
				<view class="stats-dot" style="background:#800080"></view>
				<text class="stats-label">已达比例有不合格</text>
				<text class="stats-value">{{ green_num }}</text>
			</view>
			<view class="stats-item">
				<view class="stats-dot" style="background:#008000"></view>
				<text class="stats-label">已通过</text>
				<text class="stats-value">{{ purple_num }}</text>
			</view>
		</view>

		<!-- 表头 -->
		<view class="table-header">
			<text class="col-code">管线号</text>
			<text class="col-num">完成/总焊口</text>
			<text class="col-num">合格/不合格</text>
			<text class="col-num">实际/应检比例</text>
		</view>

		<!-- 列表 -->
		<scroll-view class="list-scroll" scroll-y>
			<view class="list-wrap">
				<view v-for="(item, index) in itemList" :key="index" class="table-row"
					:style="{ background: item.bgColor || '#fff' }" @click="toDetail(item)">
					<text class="col-code" :class="{ 'text-white': isDarkBg(item.bgColor) }">{{ item.PipelineCode || '--' }}</text>
					<text class="col-num" :class="{ 'text-white': isDarkBg(item.bgColor) }">{{ item.WeldJointCountT || 0 }}/{{ item.WeldJointCount || 0 }}</text>
					<text class="col-num" :class="{ 'text-white': isDarkBg(item.bgColor) }">{{ item.CountS || 0 }}/{{ item.CountU || 0 }}</text>
					<text class="col-num" :class="{ 'text-white': isDarkBg(item.bgColor) }">{{ item.Ratio || '--' }}/{{ item.NDTR_Name || '--' }}</text>
				</view>

				<!-- 空状态 -->
				<u-empty v-if="itemList.length === 0" mode="list" text="暂无数据"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
    import {reqTestPackageDetail} from '@/api/hj'

	// 统计数据
	const red_num = ref(0)
	const yellow_num = ref(0)
	const green_num = ref(0)
	const purple_num = ref(0)

	// 列表数据
	const itemList = ref([])

	// 判断深色背景（用于切换文字颜色）
	const isDarkBg = (color) => {
		if (!color) return false
		const darkColors = ['#800080', '#008000', '#f44336', '#800080']
		return darkColors.includes(color.toLowerCase())
	}

	// 跳转详情
	const toDetail = (item) => {
		uni.navigateTo({
			url: `/pipe/pressure/pressure_before/detail?id=${item.PipelineCode}`
		})
	}

	// 获取数据
	const fetchData = async (id) => {
		try {
			const res = await reqTestPackageDetail(id)
			if (res.code === 1 && res.data) {
				res.data.forEach(item => {
					if (item.WeldJointCountT >= item.WeldJointCount) {
						if (item.CountU <= 0) {
							if (item.Ratio >= item.NDTR_Name) {
								if (item.CountS === item.CountU) {
									item.bgColor = '#800080' // 焊完了都合格背景是紫色
									green_num.value++
								} else {
									item.bgColor = '#008000'
									purple_num.value++
								}
							} else {
								item.bgColor = '#008000' // 实际检测比例小于应检测比例背景是淡绿色
								purple_num.value++
							}
						} else {
							item.bgColor = '#FFFF00' // 已经焊完但是有一个不合格背景是黄色
							yellow_num.value++
						}
					} else {
						item.bgColor = '#00FFFF' // 完成的焊口数小于总焊口数背景是红色
						red_num.value++
					}
				})
				itemList.value = res.data
			}
		} catch (error) {
			console.error('获取数据失败:', error)
			uni.showToast({ title: '加载失败', icon: 'none' })
		}
	}

	onLoad((options) => {
        console.log('options:', JSON.parse(options.params))
        let data = JSON.parse(options.params)
		if (data?.value?.BaseInfoId) {
			fetchData(data?.value?.BaseInfoId)
		}
	})
</script>

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

/* 统计概览 */
.stats-group {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
	padding: 24rpx;
	background: #fff;
}

.stats-item {
	flex: 1;
	min-width: calc(50% - 8rpx);
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 20rpx 16rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
}

.stats-dot {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	flex-shrink: 0;
}

.stats-label {
	font-size: 22rpx;
	color: #666;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stats-value {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
	flex-shrink: 0;
}

/* 表头 */
.table-header {
	display: flex;
	align-items: center;
	padding: 20rpx 24rpx;
	background: #4a7df5;
	border-radius: 12rpx 12rpx 0 0;
	margin: 24rpx 24rpx 0;
}

.table-header .col-code,
.table-header .col-num {
	font-size: 24rpx;
	color: #fff;
	font-weight: 500;
}

/* 列表 */
.list-scroll {
	flex: 1;
	overflow-y: auto;
}

.list-wrap {
	padding: 0 24rpx 24rpx;
}

.table-row {
	display: flex;
	align-items: center;
	padding: 24rpx;
	border-bottom: 1rpx solid #f0f0f0;
	border-radius: 0;
	transition: opacity 0.2s;

	&:last-child {
		border-bottom: none;
		border-radius: 0 0 12rpx 12rpx;
	}

	&:active {
		opacity: 0.8;
	}
}

.col-code {
	width: 160rpx;
	font-size: 26rpx;
	color: #333;
	flex-shrink: 0;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.col-num {
	flex: 1;
	font-size: 24rpx;
	color: #666;
	text-align: center;
}

.text-white {
	color: #fff !important;
}
</style>