xunjian_app/scan_pages/checkdetail/checkdetail.vue

<template>
	<view class="u-flex f-d-c m-w">
		<view class="m-w u-m-t-30 u-p-l-20 u-p-r-20 " v-if="conten != null">
			<!-- 基本信息 -->
			<view @click="lintext(conten.name)" class="u-flex u-row-between border-bottom u-p-b-20 u-p-t-20">
				<view style="font-weight: bold;color: #333333;" class=" u-f-28">点位名称</view>
				<view class="u-line-1  u-text-right u-f-28" style="width: 342rpx;color: #808080;">{{conten.name}}
				</view>
			</view>
			<view @click="lintext(conten.number)" class="u-flex u-row-between border-bottom u-p-b-20 u-p-t-20">
				<view style="font-weight: bold;color: #333333;" class=" u-f-28">房间编号</view>
				<view class="u-line-1  u-text-right u-f-28" style="width: 342rpx;color: #808080;">{{conten.number}}
				</view>
			</view>
			<view @click="lintext()" class="u-flex u-row-between border-bottom u-p-b-20 u-p-t-20">
				<view style="font-weight: bold;color: #333333;" class=" u-f-28">房间位置</view>
				<view class="u-line-1  u-text-right u-f-28" style="width: 342rpx;color: #808080;">
					{{conten.buildingName + conten.floorName}}
				</view>
			</view>
			<view @click="lintext(conten.routeName)" class="u-flex u-row-between border-bottom u-p-b-20 u-p-t-20">
				<view style="font-weight: bold;color: #333333;" class=" u-f-28">巡检路线</view>
				<view class="u-line-1  u-text-right u-f-28" style="width: 342rpx;color: #808080;">{{conten.routeName}}
				</view>
			</view>
			<!-- 巡检项目头 -->
			<view class="collect_tit u-flex u-row-left u-col-center">
				<view class="tit">
					巡检项目
				</view>
				<image :src="icon1"></image>
				<span>设备：{{conten.devices.length + 1}}件</span>
				<image :src="icon2"></image>
				<span>项目：{{checkItemCount}}个</span>
			</view>
			<block>
				<!--自带项目巡检-设备名 -->
				<label class="sel_point u-flex u-row-between" @click="sel_show1">
					<view class="sel_tit u-flex u-row-left u-m-l-26">
						<span>{{conten.name}}自带项目</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 conten.checkItems" :key="i">
						<view @click="lintext(iam.name)" class="u-flex u-row-between border-bottom u-p-b-34 u-p-t-34">
							<view class="item-name">{{show_itemType(iam.itemType)}}</view>
							<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{iam.name}}</view>
						</view>
					</view>
				</block>
			</block>
			
			
			<block v-for="(item,i) in conten.devices" :key="item.id">
				<!-- 设备巡检-设备名 -->
				<label class="sel_point u-flex u-row-between" @click="sel_show(i)">
					<view class="sel_tit u-flex u-row-left u-m-l-26">
						<span>{{item.name}}</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 @click="lintext(ite.name)" class="u-flex u-row-between border-bottom u-p-b-34 u-p-t-34">
								<view class="item-name">{{show_itemType(ite.itemType)}}</view>
								<view class="u-line-1 item-config  u-text-right" style="width: 342rpx;">{{ite.name}}</view>
							</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 {
		pointDetailForMobile,
		pointDetail
	} from '@/api/index.js'
	export default {
		data() {
			return {
				icon1: icon1,
				icon2: icon2,
				tri_style1: '', //自带项目三角形样式变化
				itm1_show: true,//自带项目三角形样式变化
				sel_style:[],
				conten: undefined,
				checkItemCount:0
			}
		},
		onLoad(option) {
			if(option.routeId) {
				this.pointdetail(option.id, option.routeId)
			} else {
				this.unstartPointdetail(option.roomId, option.taskId)
			}
			
		},
		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) {
				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;';
				}
			},
			show_itemType(type) {
				switch (type) {
					case 1:
						return "选择项"
						break;
					case 2:
						return "数字项"
						break;
					case 3:
						return "文本项"
						break;
					default:
						return "拍照项"
						break;
				}
			},
			//巡检路线跳转过来-房间详情
			pointdetail(id, routeId) {
				pointDetailForMobile({
						id,
						routeId
					})
					.then(({
						data
					}) => {
						this.conten = data
						//计算设备数量以及生成虚拟选择下拉样式变更表
						 data.devices.forEach(i => {
							this.checkItemCount += i.checkItems.length 
							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)
						})
						this.checkItemCount +=  data.checkItems.length
					})
			},
			//未巡检房间跳转过来-房间详情
			unstartPointdetail(roomId, taskId) {
				pointDetail({
						roomId,
						taskId
					})
					.then(({
						data
					}) => {
						this.conten = data
						//计算设备数量以及生成虚拟选择下拉样式变更表
						 data.devices.forEach(i => {
							this.checkItemCount += i.checkItems.length 
							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)
						})
						this.checkItemCount +=  data.checkItems.length
					})
			},
			lintext(text) {
				this.$refs.chektost.show({
					title: text,
					type: 'primary',
					duration: '2300'
				})
			}
		}
	}
</script>

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

	.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;
	}

	.border-bottom {
		border-bottom: 3rpx solid #d7d1d1;
	}

	.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;
		}
	}
</style>