xunjian_app/scan_pages/patroldetail/patroldetail.vue

<template>
	<view class="u-flex f-d-c m-w ccc ">
		<view class="m-w u-m-t-30 u-p-l-20 u-p-r-20  " style="background: #FFFFFF;">
			<!-- <view @click="lintext(content.pointNo)" class="u-flex u-row-between border-bottom u-p-b-28 u-p-t-28">
				<view class="item-name">记录单号</view>
				<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{content.pointNo}}</view>
			</view> -->
			<view @click="lintext(content.roomName)" class="u-flex u-row-between border-bottom u-p-b-28 u-p-t-28">
				<view class="item-name">房间名称</view>
				<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{content.roomName}}</view>
			</view>
			<view @click="lintext(content.roomNumber)" class="u-flex u-row-between border-bottom u-p-b-28 u-p-t-28">
				<view class="item-name">房间编号</view>
				<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{content.roomNumber}}</view>
			</view>
			<view @click="lintext(content.buildingName+content.floorName)" class="u-flex u-row-between border-bottom u-p-b-28 u-p-t-28">
				<view class="item-name">房间位置</view>
				<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{content.buildingName}}{{content.floorName}}</view>
			</view>
			<view @click="lintext(content.name)" class="u-flex u-row-between border-bottom u-p-b-28 u-p-t-28">
				<view class="item-name">巡检计划</view>
				<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{content.name}}</view>
			</view>
			<view @click="lintext(content.time)" class="u-flex u-row-between border-bottom u-p-b-28 u-p-t-28">
				<view class="item-name">巡检时间</view>
				<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{content.time}}</view>
			</view>
			<view @click="lintext(content.username)" class="u-flex u-row-between border-bottom u-p-b-28 u-p-t-28">
				<view class="item-name">巡检人员</view>
				<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{content.username}}</view>
			</view>
			<view @click="lintext(content.qualified)" class="u-flex u-row-between border-bottom u-p-b-28 u-p-t-28">
				<view class="item-name">是否合格</view>
				<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{content.qualified==true?"合格":"不合格"}}</view>
			</view>
			<view @click="lintext(content.score)" class="u-flex u-row-between border-bottom u-p-b-28 u-p-t-28">
				<view class="item-name">评分</view>
				<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{content.score}}</view>
			</view>
			
			<!-- 巡检项目头 -->
				<view class="collect_tit u-flex u-row-left u-col-center">
					<view class="tit">
						巡检项目
					</view>
					<image :src="icon1"></image>
					<span>设备：{{content.devices.length + 1}}件</span>
					<image :src="icon2"></image>
					<span>项目：{{checkItemCount}}个</span>
				</view>
				<block>
					<!--自带项目-设备名 -->
					<label class="sel_point u-flex u-row-between u-m-b-34" @click="sel_show1">
						<view class="sel_tit u-flex u-row-left u-m-l-26">
							<span>{{content.roomName}}自带项目</span>
							<!-- <sup class="sup">*</sup> -->
						</view>
						<view class="triangle u-m-r-26" :style="tri_style1">
						</view>
					</label>
					<!-- 检查项 -->
					<block class="scan_itm1" v-if="itm1_show" >
						<view v-for="(iam,i) in content.checkItems" :key="i">
							<!-- <view @click="lintext(iam.value)" class="u-flex u-row-between border-bottom u-p-b-34 u-p-t-34">
								<view class="item-name">{{iam.checkItemName}}</view>
								<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{iam.value}}</view>
							</view> -->
							<!-- 数字项与选择项 -->
							<view v-if="iam.checkItemType == 2 || iam.checkItemType == 1" @click="lintext(iam.value)" class="u-flex u-row-between border-bottom u-m-b-34 u-p-b-34 ">
								<view class="item-name">{{iam.checkItemName}}</view>
								<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{iam.value == '' ? "暂无数据" : iam.value }}</view>
							</view>
							<!-- 文本项 -->
							<view v-else-if="iam.checkItemType == 3" @click="lintext(iam.value)" class=" border-bottom u-m-b-34">
								<view class="item-name" >{{iam.checkItemName}}:</view>
								<view v-if="iam.value != ''" class="text_box u-m-t-18">{{iam.value}}</view>
								<block v-else>
									<u-empty text="数据为空" ></u-empty>
								</block>
							</view>
							<!-- 图片项 -->
							<view v-else class="img_box  u-m-b-34  u-p-b-2">
								<view class="item-name">{{iam.checkItemName}}</view>
								<!-- <view v-if="iam.value != ''"  class="img_itms u-m-t-18">
									<view class="img_itm" v-for="(index,key) in iam.value" :key="key">
										<u-image @click="previewImage(key,iam.value)" width="139rpx" height="139rpx" :src="index"></u-image>
									</view>
								</view> -->
								<view v-if="iam.value != ''" class=" u-m-t-18" v-for="(index,key) in iam.value" :key="key">
									<view class="titl  u-flex u-row-left u-m-t-12  u-m-l-8">
										<span>{{key + 1}}.{{index.name}}</span>
									</view>
									<view class="img_itms">
										<view class="img_itm" v-for="(img,imgIndex) in index.value" :key="key">
											<u-image  @click="previewImage(imgIndex,index.value)" width="139rpx" height="139rpx" :src="img"></u-image>
										</view>	
									</view>
								</view>
								<block v-else>
									<u-empty text="数据为空" ></u-empty>
								</block>
							</view>
						</view>
					</block>
				</block>
				
				<block v-for="(item,i) in content.devices" :key="item.id">
					<!--巡检设备-设备名 -->
					<label class="sel_point u-flex u-row-between u-m-b-40" @click="sel_show(i)">
						<view class="sel_tit u-flex u-row-left u-m-l-26">
							<span>{{item.deviceName}}</span>
							<!-- <sup class="sup">*</sup> -->
						</view>
						<view class="triangle u-m-r-26" :style="sel_style[i].tri_style">
						</view>
					</label>
					<!-- 检查项 -->
						<block class="scan_itm1" v-if="sel_style[i].it_show">
							<view v-for="ite in item.checkItems" :key="ite.id">
								<!-- 选择项或数字项 -->
								<view v-if="ite.checkItemType == 1 || ite.checkItemType == 2" @click="lintext(ite.value)" class="u-flex u-row-between border-bottom u-p-b-34 u-m-b-34">
									<view class="item-name">{{ite.checkItemName}}</view>
									<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{ite.value == '' ? "数据为空" : ite.value }}</view>
								</view>
								<!-- 文本项 -->
								<view v-else-if="ite.checkItemType == 3" @click="lintext(ite.value)" class=" u-m-b-34  border-bottom">
									<view class="item-name" >{{ite.checkItemName}}:</view>
									<view v-if="iam.value != ''" class="text_box u-m-t-18">{{ite.value}}</view>
									<block v-else>
										<u-empty text="数据为空" ></u-empty>
									</block>
								</view>
								<!-- 图片项 -->
								<view v-else class="img_box u-m-b-34">
									<view class="item-name" >{{ite.checkItemName}}</view>
										<view v-if="ite.value != ''" class=" u-m-t-18" v-for="(index,key) in ite.value" :key="key">
											<view class="titl  u-flex u-row-left u-m-t-12  u-m-l-8">
												<span>{{key + 1}}.{{index.name}}</span>
											</view>
											<view class="img_itms">
												<view class="img_itm" v-for="(img,imgIndex) in index.value" :key="key">
													<u-image  @click="previewImage(imgIndex,index.value)" width="139rpx" height="139rpx" :src="img"></u-image>
												</view>	
											</view>
										</view>
										<block v-else>
											<u-empty text="数据为空" ></u-empty>
										</block>
									</view>
								</view>
						</block>
				</block>
			</view>
		<u-top-tips ref="chektost"></u-top-tips>

	</view>
</template>

<script>
	import icon1 from '@/static/img/devi.png'
	import icon2 from '@/static/img/proj.png'
	import dayjs from "dayjs";
	import {
		partinfo
	} from '@/api/index.js'
	export default {
		data() {
			return {
				icon1: icon1,
				icon2: icon2,
				checkItemCount:0,//项目数量
				tri_style1: '', //自带项目三角形样式变化
				itm1_show: true,//自带项目三角形样式变化
				// tri_style: '',
				// it_show: true,
				sel_style:[],
				content: null, //列表数据
				finishStatus: ["", '按时完成', '尚未巡检（正常时效内未检）', '超时漏检（超过时效后未检）', '提前完成', '延时完成']
			}
		},
		onLoad(option) {
			this.init(option.taskId, option.roomId)
		},

		methods: {
			//自带项目三角样式变化
			sel_show1() {
				this.itm1_show = !this.itm1_show;
				if (!this.itm1_show) {
					this.tri_style1 =
						'margin-top: 0rpx;margin-bottom:10rpx;border-top-color:transparent;border-bottom-color: #808080;';
				} else {
					this.tri_style1 =
						'margin-top: 10rpx;margin-bottom:0rpx;border-top-color:#808080;border-bottom-color: transparent;';
				}
			},
			//设备三角形样式变化
			sel_show(index) {
				// obj.tri_style
				// obj.it_show
				this.sel_style[index].it_show = !this.sel_style[index].it_show
				
				if (!this.sel_style[index].it_show) {
					this.sel_style[index].tri_style =
						'margin-top: 0rpx;margin-bottom:10rpx;border-top-color:transparent;border-bottom-color: #808080;';
				} else {
					this.sel_style[index].tri_style =
						'margin-top: 10rpx;margin-bottom:0rpx;border-top-color:#808080;border-bottom-color: transparent;';
				}
			},
			//预览图片
			previewImage(index,i){
						 uni.previewImage({
						            current:index, //预览图片的下标
						            urls: i//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						    })
					},
			// 获取页面数据
			async init(taskId, roomId) {
				let {
					data,
					code,
					message
				} = await partinfo({
					taskId,
					roomId
				})
				if(code != 200) {
					uni.showToast({
						title:message,
						type:"warning"
					})
				}
				data.time=dayjs(data.time).format("YYYY-MM-DD HH:mm:ss")
				//一、自带巡检项目-数据处理
				data.checkItems.forEach(i => {
					let checkItem = JSON.parse(i.checkItem)
					//图片数据处理
					if (i.checkItemType == 4) {
						let imgValue = JSON.parse(i.value)
						i.value = []
						let b = undefined //查找项
						imgValue.forEach(j => {
						let a =	j.value.match(/[^\,]+/g) //	图片数组
						b = checkItem.photoPoints.find((ite,index) => {
							return ite.id == j.id
							})
						if(a && b) {
								let imgItem = {}
								imgItem.name = b.name
								imgItem.value = a
								i.value.push(imgItem)
						} else{
							return i.value 
						}
						})
					}
					//选择项数据处理
					if(i.checkItemType == 1) {
						if(i.value !== '') {
							let selArr =i.value.match(/[^\,]+/g)
							let resStr = ''
							let rightItem = undefined
							selArr.forEach(sel => {
								 rightItem = checkItem.options.find((ite) => {
								return ite.id == sel
								})
								resStr == '' ? resStr = rightItem.optionName : resStr = resStr + ',' + rightItem.optionName
							})
							i.value = resStr
						}
						else {
							i.value = ''
						}
					}
				})
				//二、巡检设备-数据处理
				data.devices.forEach(item => {
					//计算巡检项目数
					this.checkItemCount += item.checkItems.length 
					//收缩框虚拟DOM
					let obj = {}
					obj.tri_style = 'margin-top: 10rpx;margin-bottom:0rpx;border-top-color:#808080;border-bottom-color: transparent;'
					obj.it_show = true
					this.sel_style.push(obj)
					//数据
					item.checkItems.forEach(i => {
						let checkItem = JSON.parse(i.checkItem)
						//处理图片数据
						if (i.checkItemType == 4) {
							let imgValue = JSON.parse(i.value)
							i.value = []
							let rightItem = undefined //查找项
							imgValue.forEach(j => {
							let imgArr = j.value.match(/[^\,]+/g) //	图片数组
							rightItem = checkItem.options.find((ite,index) => {
								return ite.id == j.id
								})
							if(imgArr && rightItem) {
									let imgItem = {}
									imgItem.name = rightItem.name
									imgItem.value = imgArr
									i.value.push(imgItem)
							} else{
								return i.value 
							}
							})
						}
						//选择项数据处理
						if(i.checkItemType == 1) {
							if(i.value != '') {
								let selArr =i.value.match(/[^\,]+/g)
								let resStr = ''
								let a = undefined //查找项
								selArr.forEach(sel => {
									 a = checkItem.options.find((ite,index) => {
									return ite.id == sel
									})
									resStr == '' ? resStr = a.optionName : resStr = resStr + ',' + a.optionName
								})
								i.value = resStr
							}
							else {
								i.value = ''
							}
						}
					})
				})
				//三、巡检项目数
				this.checkItemCount +=  data.checkItems.length
				this.content = data
			},
			// 点击顶部提示文字
			lintext(text) {
				this.$refs.chektost.show({
					title: text,
					type: 'primary',
					duration: '2300'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #FFFFFF
	}

	.border-bottom {
		border-bottom: 2rpx solid #E6E6E6;
	}

	.item-name {
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}

	.item-config {
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #808080;
		box-sizing: border-box;
	}

	.reacakye {
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #333333;
	}

	.collect_tit {
		width: 710rpx;
		height: 104rpx;

		.tit {
			width: 128rpx;
			height: 33rpx;
			margin-left: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #010101;
		}

		image {
			max-width: 24rpx;
			max-height: 24rpx;
			margin-left: 42rpx;
			margin-top: 12rpx;
		}

		span {
			height: 24rpx;
			margin-left: 10rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei-3970(82674968);
			font-weight: 400;
			color: #808080;
		}
	}

	.sel_point {
		width: 710rpx;
		height: 70rpx;
		background: #EBF8FF;

		.sup {
			color: red;
		}

		.triangle {
			margin-top: 10rpx;
			display: inline-block;
			/* Base Style */
			border: solid 10rpx transparent;
			border-top-color: #808080;
		}
	}
	.img_box {
		// width: 690rpx;
	}
	.img_itms{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		align-content:space-between;
	}
	.img_itm {
		display: inline-block;
		width: 139rpx;
		height: 139rpx;
		margin-right: 20rpx;
	}
	.text_box{
		height: 150rpx;
		max-height:210rpx ;
		color: #808080;
		text-indent: 40rpx;
	}
	
</style>