bonus-checkVerify-app/pages/work/orderDetails.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="page">
		<scroll-view style="width: 100%;height: 92vh;" @scrolltolower="onScrollTolower" scroll-y="true">
			<!-- <view style="width: 100%;display: flex;justify-content: space-between;">
				<view style="font-weight: 600;">对比结果222</view>
				<view style="font-size: 20rpx;">2025-09-07 22:47:28</view>
			</view> -->
			<table style="width: 100%;" v-if="headList.length>0">
			  <tr v-if="headList[0].attributeKey=='通知书名称'"> 
				<th colspan="5" style="height: 40px;">{{ headList[0].attributeValue }}</th>
			  </tr>
			  <tr>
				<td colspan="2">{{headList[1].attributeKey}}: {{ headList[1].attributeValue }}</td> 
				<td>{{headList[2].attributeKey}}: {{ headList[2].attributeValue }}</td> 
				<td colspan="2">{{headList[3].attributeKey}}: {{ headList[3].attributeValue }}</td> 
			  </tr>
			  <tr>
				<td>{{headList[4].attributeKey}}</td> 
				<td>{{headList[5].attributeKey}}</td> 
				<td>{{headList[6].attributeKey}}</td> 
				<td>{{headList[7].attributeKey}}</td> 
				<td>{{headList[8].attributeKey}}</td> 
			  </tr>
				<tr>
				<td>{{headList[4].attributeValue}}</td> 
				<td>{{headList[5].attributeValue}}</td> 
				<td>{{headList[6].attributeValue}}</td> 
				<td>{{headList[7].attributeValue}}</td> 
				<td>{{headList[8].attributeValue}}</td> 
			  </tr>
			</table>
			<table style="width: 100%;" v-if="bhdzList.length>0">
			  <tr> 
				<th colspan="5" style="height: 40px;">保护定值</th>
			  </tr>
			  <tr v-for="(item,index) in bhdzList" :key="index">
				<td v-for="(subText,subIndex) in item.split('@')" :key="subIndex">{{subText}}</td>
			  </tr>
			</table>
			<table style="width: 100%;" v-if="kzzList.length>0">
			  <tr> 
				<th colspan="5" style="height: 40px;">控制字</th>
			  </tr>
			  <tr v-for="(item,index) in kzzList" :key="index">
				<td v-for="(subText,subIndex) in item.split('@')" :key="subIndex">{{subText}}</td>
			  </tr>
			</table>
			<table style="width: 100%;" v-if="sbcsList.length>0">
			  <tr> 
				<th colspan="5" style="height: 40px;">设备参数</th>
			  </tr>
			  <tr v-for="(item,index) in sbcsList" :key="index">
				<td v-for="(subText,subIndex) in item.split('@')" :key="subIndex">{{subText}}</td>
			  </tr>
			</table> 
		</scroll-view>
	   
	</view>
</template>

<script>  

import { getProdectionInfoByIdApi } from '@/api/protection/index.js'

export default {
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			protectionId:"",
			//解析结果
			headList:[],
			bhdzList:[],
			kzzList:[],
			sbcsList:[]
		}
	},
	onLoad(options) {
		options = JSON.parse(options.params)
		console.log(options)
		this.protectionId = options.protectionId
	},
	onShow() {
		this.getOrderDetail()
	},
	methods: { 
		async getOrderDetail() {
			try {
				let param = {
					"protectionId":this.protectionId
				}
				const res = await getProdectionInfoByIdApi(param)
				console.log('?? ~ getList ~ res:', res)
				this.headList = res.head||[];
				this.bhdzList = res.bhdz||[];
				this.kzzList = res.kzz||[];
				this.sbcsList = res.sbcs||[];
			} catch (error) {
				console.log(error)
			}
		}, 
	}
}
</script>

<style lang="scss" scoped>
.page {
  background: #FFF;
  padding: 16px;
  height: 95vh;
  color: #000;
}
.compare-item{
	width: 100%;
	height: auto;
	margin: 40rpx auto;
	color: rgba(51,51,51,0.8);;
}
.text-item{
	width: 100%;display: flex;justify-content: space-between;border-bottom: 1px solid #ccc;line-height: 60rpx;
}
table {
  border-collapse: collapse; /* 合并表格边框 */
  border: 1px solid black; /* 设置边框颜色和宽度 */
}
table tr td{
  text-align: center; vertical-align: middle;
  border-collapse: collapse; /* 合并表格边框 */
  border: 1px solid black; /* 设置边框颜色和宽度 */
  padding: 4px;
  font-size: 20rpx;
}
</style>