jp-youdian-Inspection/pages/inspection/info.vue

<template>
	<view>
		<u-navbar title="巡检记录详情" title-color="#101010"></u-navbar>
		<view class="list">
			<view class="item">
				{{record.stationName}}


			</view>
			<view class="item ">
				<view class="name">
					站点地址

				</view>
				<view class="value">
					 {{record.stationAddress}}
				</view>
				
			</view>
			<view class="item ">
				<view class="name">
					巡检人员
			
				</view>
				<view class="value">
					 {{record.inspectionUserName}}
			
				</view>
				
			</view>
			<view class="item ">
				<view class="name">
					巡检时间
			
				</view>
				<view class="value">
					 {{record.inspectionTime}}
				</view>
				
			</view>



		</view>
		<view class=" listtime">
			<view class="item">
				巡检结果

			</view>
			<u-time-line >
				<u-time-line-item  v-for="(item,index) in submitcontent" :key="index">
				<template v-slot:content >
					<view >
						<view class="u-order-title">{{index+1}}.{{item.name}}</view>
						<view class="u-order-desc" v-if="contentList[index].btn&&contentList[index].btn.length" >
							
						 
							<span :class="'result'+item.result"  v-for="(b,i) in contentList[index].btn" v-show="item.result==b.value">
								{{b.name}}
							</span>
							<span v-if="item.result==0" style="margin: 0 8rpx;">, </span>
							{{item.content}}
						</view>
						<view class="u-order-time" >
							
							<img  class="viewImg" v-for="(item,i) in repairImageList(item.image)"
							  @click="previewImage(i,item.image)"
							 :key="i"
							 :src="item" mode=""></img>
							
						</view>
					</view>
				</template>
				</u-time-line-item>
			</u-time-line>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesInspection.js'

	export default {
		data() {
			return {
				record: {},
				content: [

				],
				submitcontent:[]
			};
		},
		onLoad(op) {

			if (op.id) {
				this.id = op.id
			}

			this.errDetails()



		},
		methods: {
			previewImage(i, name) {
				let imgs = name.split(',');
				//imgs.push(img);
				uni.previewImage({
					urls: imgs,
					current: i
				})
			},
			repairImageList(img){
				if(img){
					return img.split(',')
				}else{
					return []
				}
			},
			errDetails() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.recordDetails({
					id: this.id,

				}).then((res) => {
					this.record = res.data.record

					this.content = res.data.content
					
					this.contentList=this.content.map(item=>{
						
						var obj={
							dataId:item.dataId,
							name:item.name,
							btn:[{
								name:"正常",
								value:"1"
							},{
								name:"异常",
								value:"0"
							}],
							desc:"问题描述",
							descP:"请简单描述发现的问题",
						}
						
						if(item.extended1){
							var extended1=JSON.parse(item.extended1)
							
							Object.keys(extended1).forEach(key1 => {
								
								obj[key1]=extended1[key1]
							})
						}
						
						return obj
					})
					
					
					if(this.record.contentJson){
						var contentJson=JSON.parse(this.record.contentJson)
						console.log(contentJson)
						this.submitcontent=contentJson.content

					}
					uni.hideLoading();
				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}

	}
</script>

<style lang="scss">
	.jpmain {
		padding-bottom: 120rpx;
	}

	.list {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16rpx;

		margin: 20rpx;
		 padding-bottom: 20rpx ;
		.item:first-child {
			border-bottom: 2rpx solid rgba(232, 232, 232, 1);
			font-size: 32rpx;
			padding: 20rpx 24rpx;
			font-weight: bold;margin-bottom: 10rpx;
		}


		.item {
			padding: 10rpx 24rpx;
			display: flex;
		    align-items: center;
			.name {
				 width: 30%;
				//padding-bottom: 32rpx;
				font-size: 32rpx;
				color: #777777;

				span {
					color: red
				}


			}

			.valueplus {
				display: flex;
				justify-content: space-between;

			}

			.valueclock {
				width: 100%;
				border-radius: 8rpx;
				padding: 0 16rpx;
				height: 64rpx;
				line-height: 64rpx;
				background-color: rgba(241, 242, 245, 1);
			}

			.value {
				font-size: 32rpx;

				display: flex;
				align-items: center;

				input::placeholder {
					color: #AAAAAA;
				}

				.img {
					width: 40rpx;
					height: 40rpx;

				}

				.textarea {
					background-color: rgba(241, 242, 245, 1);
					width: 100%;
					border-radius: 8rpx;
				}

				.typeN {
					font-size: 24rpx;
					margin-right: 8rpx;
					display: flex;
					align-items: center;
					border-radius: 8rpx;
					padding: 4rpx 8rpx;
					color: #fff;
				}

				.typeN1 {
					background-color: #1677ff;
					//border: 2rpx solid #1677ff;
				}

				.typeN2 {
					background-color: #19be6b;
					//border: 2rpx solid #19be6b;

				}
			}
		}


	}
	.listtime{
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
		
		margin: 20rpx;
		padding: 32rpx 24rpx;
		.item{
			color: rgba(51,51,51,1);
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 18rpx;
		}
		.result0{
			color: #FF3D00;
		}
		.result1{
			color: #00B962;
		}
		.u-order-time{
			margin-bottom: 30rpx;
		}
		.u-order-desc{
			margin: 10rpx 0;
		}
	}
	
	.viewImg {
		width: 160rpx;
		height: 160rpx;
	}
</style>