bonus-checkVerify-app/pages/work/orderCheckDetails.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">
			<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="bhdzNoCheckList.length>0">
				<tr>
					<th colspan="5" style="height: 40px;color:red;">识别未匹配保护定值</th>
				</tr>
				<tr v-for="(item,index) in bhdzNoCheckList" :key="index">
					<td v-for="(subText,subIndex) in item.split('@')" :key="subIndex">{{subText}}</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('@')"
					 :style="{ color: (subIndex==item.split('@').length-1&&item.split('@').length>4&&subText==0) ? 'red' : 'black' }"
					 :key="subIndex">{{(subIndex==item.split('@').length-1&&item.split('@').length>4&&index!=0) ? (subText==0?'不一致':'一致') : subText}}
					 </td>
				</tr>
			</table>
			<table style="width: 100%;" v-if="kzzNoCheckList.length>0">
				<tr>
					<th colspan="5" style="height: 40px;color:red;">识别未匹配控制字</th>
				</tr>
				<tr v-for="(item,index) in kzzNoCheckList" :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('@')"
					 :style="{ color: (subIndex==item.split('@').length-1&&item.split('@').length>4&&subText==0) ? 'red' : 'black' }"
					 :key="subIndex">{{(subIndex==item.split('@').length-1&&item.split('@').length>4&&index!=0) ? (subText==0?'不一致':'一致') : subText}}
					 </td>
				</tr>
			</table>
			<table style="width: 100%;" v-if="sbcsList.length>0">
				<tr>
					<th colspan="5" style="height: 40px;">设备参数</th>
				</tr>
			</table>
		</scroll-view>
	   
	</view>
</template>

<script>  

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

export default {
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			protectionId:"",
			analysisId:"",
			//解析结果
			headList:[],
			bhdzList:[],
			kzzList:[],
			sbcsList:[],
			bhdzNoCheckList:[],
			kzzNoCheckList:[],
		}
	},
	onLoad(options) {
		options = JSON.parse(options.params)
		console.log(options)
		this.protectionId = options.protectionId;
		this.analysisId = options.analysisId;
	},
	onShow() {
		this.getOrderDetail()
	},
	methods: { 
		async getOrderDetail() {
			try {
				let param = {
					"protectionId":this.protectionId,
					"analysisId":this.analysisId
				}
				const response = await getProdectionCheckInfoByIdApi(param)
				console.log('?? ~ getList ~ res:', response) 
				this.headList = response.head||[];
				this.bhdzList = response.bhdz||[];
				this.kzzList = response.kzz||[];
				this.sbcsList = response.sbcs||[];
				this.bhdzNoCheckList = response.nobhdz||[];
				this.kzzNoCheckList = response.nokzz||[];
			} 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>