qtapp_800/pages/work/download/DownloadDetail.uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<!-- 报告基础信息 -->
		<view class="section">
			<view class="info-item">
				<text class="label">检验任务</text>
				<text class="value">{{ download.workorder}}</text>
			</view>
			<view class="info-item">
				<text class="label">{{ download.productno }}</text>
				<text class="value">{{ download.invname }}</text>
			</view>
		</view>

		<view class="section">
			<uni-table v-for="(item,index) in demoData" :key="index">
				<uni-tr>
					<uni-td class="grid-text">{{item.itemTitle}}</uni-td>
				</uni-tr>
				<uni-tr class="section-title" @click="enterItem(item.gxid, 0)">
					<uni-td class="grid-text">拍照点</uni-td>
					<uni-td class="grid-text">{{item.photoitemStep}} / {{item.photoitemTotal}}</uni-td>
					<uni-td class="grid-text">{{item.photoitemStatus}}</uni-td>
				</uni-tr>
				<uni-tr class="section-title" @click="enterItem(item.gxid, 1)">
					<uni-td class="grid-text">检验记录</uni-td>
					<uni-td class="grid-text">{{item.recordStep}} / {{item.recordTotal}}</uni-td>
					<uni-td class="grid-text">{{item.recordStatus}}</uni-td>
				</uni-tr>
				<uni-tr class="section-title" @click="enterItem(item.gxid, 2)">
					<uni-td class="grid-text">关键工序记录</uni-td>
					<uni-td class="grid-text">{{item.keypointStep}} / {{item.keypointTotal}}</uni-td>
					<uni-td class="grid-text">{{item.keypointStatus}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import { getList, Download, TaskProcess, getRecordCalculate, RecordCalculate, statusDict, TaskInfo } from '@/api/work';

	const titleList = [{
		title1: "部位", title2: "进度", title3: "状态"
	}];
	var taskProcessList = ref<RecordCalculate[]>([]);
	var initTasks = [] as RecordCalculate[]
	//const statusMap = ref(new Map<number, string>([[1,'未执行'],[2,'执行中'],[3,'执行完'],[4,'检验失败']]))
	
	var demoData = ref<TaskInfo[]>([]);
	demoData.value = [
		{
			gxid: '1',
			itemTitle : '20-检验',
			photoitemStep : 10,
			photoitemTotal: 10,
			photoitemStatus : '',
			recordStep : 5,
			recordTotal : 5,
			recordStatus : '不合格',
			keypointStep : 4,
			keypointTotal : 4,
			keypointStatus : ''
		} as TaskInfo,
		{
			gxid: '2',
			itemTitle : '50-检验',
			photoitemStep : 2,
			photoitemTotal: 5,
			photoitemStatus : '',
			recordStep : 2,
			recordTotal : 11,
			recordStatus : '',
			keypointStep : 3,
			keypointTotal : 4,
			keypointStatus : ''
		} as TaskInfo,
		{
			gxid: '3',
			itemTitle : '80-检验',
			photoitemStep : 2,
			photoitemTotal: 5,
			photoitemStatus : '',
			recordStep : 2,
			recordTotal : 11,
			recordStatus : '',
			keypointStep : 3,
			keypointTotal : 4,
			keypointStatus : ''
		} as TaskInfo,
		{
			gxid: '4',
			itemTitle: '100-总检',
			photoitemStep: 0,
			photoitemTotal: 5,
			photoitemStatus: '',
			recordStep: 0,
			recordTotal: 13,
			recordStatus: '',
			keypointStep: 0,
			keypointTotal: 4,
			keypointStatus: ''
		} as TaskInfo
	]
	
	const download = ref<Download>({
		pdid: 0,
		workorder: "",
		invname: "",
		productno: "",
		graphid: "",
		cardno: "",
		processno: "",
		ver: "",
		updatetime: "",
		progress: "",
		status: 1
	})

	onLoad((options) => {
		const downloadId = options?.id ?? ""
		// 模拟数据加载，建议替换为后端接口请求
        // #ifdef APP-ANDROID
		    //获取下载产品数据
         	getList('app_task_info', 'pdid', downloadId,null, null, null).then((res:UTSJSONObject) => {
         	 		console.log(res)
         				let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
         				if(dataList!=null && dataList.length>0){							
         					dataList.forEach(item =>{
         						if(item!=null){
         							let data = JSON.parse<Download>(item.toJSONString());
         							if(data!=null){
         								download.value = data
         							}
         						}
         					});
         				} 
         	 })
			 
			 //获取下载产品任务数据
			 getRecordCalculate('app_product_points', downloadId, null).then((res:UTSJSONObject) => {
			  		console.log(res)
			 			let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
			 			if(dataList!=null && dataList.length>0){							
			 				dataList.forEach(item =>{
			 					if(item!=null){
			 						let task = JSON.parse<RecordCalculate>(item.toJSONString());
			 						if(task!=null){
			 							initTasks.push(task)
			 						}
			 					}
			 				});
			 			} 
				   console.log(initTasks)
				   taskProcessList.value = initTasks
			  })
			 
        // #endif
	})

	const goBack = () => {5
		uni.navigateBack()
	}

	const enterItem = (id : string, type : number) => {
		let url = ''
	  if (type == 0) {
		  url = `/pages/work/download/PhotoRecord`
	  }	else if (type == 1) {
		  url = `/pages/work/report/InspectionList`
	  } else if (type == 2) {
		  url = `/pages/work/process/ProcessList`
	  }
	  uni.navigateTo({
	    url
	  });
	}
</script>

<style scoped>
	
	.container {
		padding: 40rpx;
		background-color: #f5f7fa;
		flex: 1;
		box-sizing: border-box;
	}

	.banner {
		background: linear-gradient(135deg, #2193b0, #6dd5ed);
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 16rpx rgba(33, 147, 176, 0.3);
	}

	.banner-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}

	.section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		display: flex;
		flex-direction: row;
		flex: 1;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		/* #ifdef APP-NVUE */
		font-size: 28rpx;
		color: #666;
		/* #endif */
		margin-bottom: 18rpx;
		flex-direction: row;
	}

	.section-content {
		font-size: 28rpx;
		color: #444;
		line-height: 1.8;
		white-space: normal;
	}

	/* 表格容器样式 */
	uni-table {
		width: 100%;
		background-color: #fff; /* 设置表格背景色 */
		border-radius: 8rpx;
		overflow: hidden;
		/* 去除列表样式，解决第一列前的小短横 */
		list-style-type: none;
	}
	
	/* 表格行样式 */
	uni-tr {
		width: 100%;
		/* #ifdef APP-ANDROID */
		border-bottom: 1rpx solid #f0f0f0; /* Android设备添加底边框 */
		/* #endif */
	}
	
	/* 表格单元格样式 */
	uni-td {
		/* #ifdef APP-ANDROID */
		border-right: 1rpx solid #f0f0f0; /* Android设备添加右边框 */
		/* #endif */
	}
	
	/* 最后一列去除右边框 */
	uni-tr uni-td:last-child {
		/* #ifdef APP-ANDROID */
		border-right: none;
		/* #endif */
	}
	
	/* 最后一行去除底边框 */
	uni-table uni-tr:last-child {
		/* #ifdef APP-ANDROID */
		border-bottom: none;
		/* #endif */
	}
	
	.grid-text {
		/* #ifdef APP-NVUE */
		font-size: 24rpx;
		color: #000;
		/* #endif */
		/* #ifdef APP-ANDROID */
		font-size: 28rpx; /* Android设备上字体稍大一些 */
		/* #endif */
		padding: 20rpx 16rpx; /* 增加内边距 */
		box-sizing: border-box;
		margin: 0;
		min-width: 180rpx;
		background-color: #fff; /* 确保单元格背景色 */
		/* 去除列表样式标记 */
		list-style-type: none;
		list-style-position: inside;
	}

	.footer-btn {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
	}

	.main-btn {
		width: 80%;
		padding: 28rpx 0;
		font-size: 30rpx;
		color: #fff;
		border: none;
		border-radius: 100rpx;
		background: linear-gradient(to right, #36d1dc, #5b86e5);
		box-shadow: 0 10rpx 24rpx rgba(91, 134, 229, 0.3);
	}

	.label {
		font-weight: bold;
		color: #102a43;
		min-width: 150rpx;
		margin-right: 30rpx;
	}

	.value {
		flex: 1;
		/* #ifdef APP-NVUE */
		white-space: nowrap;
		text-overflow: ellipsis;
		/* #endif */
		overflow: hidden;
		margin-left: 30rpx;
	}

	.my-radius {
		border-radius: 10rpx;
	}

	.bg-text {
		width: 100rpx;
		min-width: 80rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.bg-green {
		background-color: seagreen;
		color: #fff;
	}

	.bg-yellow {
		background-color: yellow;
	}

	.bg-black {
		background-color: #102a43;
		color: #fff;
	}

	.bg-red {
		background-color: red;
		color: #fff;
	}

	.ft-red {
		color: red;
	}
</style>