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
			console.log(this.content)
		},
		// 点击顶部提示文字
		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>