xunjian_app/scan_pages/scanning/scanning.vue

<template>
	<view class="ccc scning">
		<view style="width: 200rpx">
			<u-tabs bar-width="80" item-width="80" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>

		<scroll-view :scroll-y="true" class="u-p-l-30 u-p-r-30 u-p-b-48 scrll-height u-p-t-26">
			<block v-if="current == 0">
				<u-cell-group>
					<u-cell-item
						:value="scmdata.name"
						bg-color="#ffffff"
						:border-bottom="true"
						:border-top="false"
						:title-style="{ fontSize: '28rpx', color: '#333333', fontWeight: 'bold' }"
						:value-style="{ fontSize: '28rpx', color: '#808080' }"
						:arrow="false"
						title="点位名称"
					></u-cell-item>
					<u-cell-item
						:value="scmdata.id"
						bg-color="#ffffff"
						:border-bottom="true"
						:border-top="false"
						:title-style="{ fontSize: '28rpx', color: '#333333', fontWeight: 'bold' }"
						:value-style="{ fontSize: '28rpx', color: '#808080' }"
						:arrow="false"
						title="房间编号"
					></u-cell-item>
					<u-cell-item
						:value="scmdata.buildingName + scmdata.floorName"
						bg-color="#ffffff"
						:border-bottom="true"
						:border-top="false"
						:title-style="{ fontSize: '28rpx', color: '#333333', fontWeight: 'bold' }"
						:value-style="{ fontSize: '28rpx', color: '#808080' }"
						:arrow="false"
						title="房间位置"
					></u-cell-item>
					<u-cell-item
						:value="scmdata.taskName"
						bg-color="#ffffff"
						:border-bottom="true"
						:border-top="false"
						:title-style="{ fontSize: '28rpx', color: '#333333', fontWeight: 'bold' }"
						:value-style="{ fontSize: '28rpx', color: '#808080' }"
						:arrow="false"
						title="巡检计划"
					></u-cell-item>
				</u-cell-group>
				<view class="collect_tit u-row-left u-flex">
					<view class="tit">巡检项目</view>
					<image :src="icon1"></image>
					<span>设备：{{ scmdata.devices.length }}件</span>
					<image :src="icon2"></image>
					<span>项目：{{ checkItemCount }}个</span>
				</view>
				<!-- 自带项目巡检-设备名 -->
				<view class="zidai_xiangmu">
					<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>{{ scmdata.name }}自带项目</span>
							<sup class="sup">*</sup>
						</view>
						<view class="triangle u-m-r-26" :style="tri_style1"></view>
					</label>
					<!-- 巡检项目名 -->
					<view class="scan_itm1" v-show="itm1_show" v-for="(item1, i) in scmdata.checkItems" :key="item1.id">
						<view class="tit u-m-t-32">
							<view class="u-flex u-row-left u-col-center">
								<span>{{ i + 1 }}.{{ item1.checkItem.checkItem.itemName }}</span>
								<sup class="sup" v-if="item1.checkItem.checkItem.isRequired">*</sup>
							</view>
							<view class="u-m-t-12">
								<span style="color: #b3b3b3; font-size: 24rpx" v-if="item1.checkItem.extra.validMinValue != null">
									{{ '填值范围：' + item1.checkItem.extra.validMinValue + '~' + item1.checkItem.extra.validMaxValue }}
								</span>
							</view>
						</view>
						<!-- 选择类巡检操作 -->
						<!-- 单选 -->
						<block v-if="item1.checkItem.checkItem.itemType == 1 && item1.checkItem.allowMultiple == false">
							<scaradio ref="scarad" :scan_id="item1.id" :options="item1.checkItem.options" />
						</block>
						<!-- 多选 -->
						<block v-if="item1.checkItem.checkItem.itemType == 1 && item1.checkItem.allowMultiple == true">
							<scachebox v-if="item1" ref="scachb" :scan_id="item1.id" :options="item1.checkItem.options" />
						</block>
						<!-- 数字类巡检操作 -->
						<block v-if="item1.checkItem.checkItem.itemType == 2">
							<scanum
								v-if="item1"
								ref="scanum"
								:scan_id="item1.id"
								:min="item1.checkItem.extra.validMinValue"
								:max="item1.checkItem.extra.validMaxValue"
								:places="item1.checkItem.extra.decimalPlaces"
							/>
						</block>
						<!-- 文本类巡检操作 -->
						<block v-if="item1.checkItem.checkItem.itemType == 3">
							<scatex v-if="item1" :defaultValue="item1.checkItem.checkItem.defaultValue" ref="scatex" :scan_id="item1.id" />
						</block>
						<!-- 拍照类巡检操作 -->
						<block v-if="item1.checkItem.checkItem.itemType == 4">
							<scaimg v-if="item1" ref="scaimg" :scan_id="item1.id" :photoPoints="item1.checkItem.photoPoints" />
						</block>
					</view>
				</view>

				<!-- 巡检设备-设备名 -->
				<block class="xunjain_shebei" v-for="(item3, j) in scmdata.devices" :key="j">
					<label class="sel_point u-flex u-row-between u-m-t-40" @click="sel_show(j)">
						<view class="sel_tit u-flex u-row-left u-m-l-26">
							<span>{{ item3.deviceName }}</span>
							<sup class="sup">*</sup>
						</view>
						<view class="triangle u-m-r-26" :style="sel_style[j].tri_style"></view>
					</label>
					<!-- 巡检项目名 -->
					<view v-show="sel_style[j].it_show">
						<block class="scan_itm1" v-for="(item4, i) in item3.checkItems" :key="item4.id">
							<view class="tit u-m-t-32">
								<view class="u-flex u-row-left u-col-center">
									<span>{{ i + 1 }}.{{ item4.checkItem.checkItem.itemName }}</span>
									<sup class="sup" v-if="item4.checkItem.checkItem.isRequired">*</sup>
								</view>
								<view class="u-m-t-12">
									<span style="color: #b3b3b3; font-size: 24rpx" v-if="item4.checkItem.extra.validMinValue != null">
										{{ '填值范围：' + item4.checkItem.extra.validMinValue + '~' + item4.checkItem.extra.validMaxValue }}
									</span>
								</view>
							</view>
							<!-- 选择类巡检操作 -->
							<!-- 单选 -->
							<block v-if="item4.checkItem.checkItem.itemType == 1 && item4.checkItem.allowMultiple == false">
								<scaradio v-if="item4" ref="scarad" :scan_id="item4.id" :options="item4.checkItem.options" />
							</block>
							<!-- 多选 -->
							<block v-if="item4.checkItem.checkItem.itemType == 1 && item4.checkItem.allowMultiple == true">
								<scachebox v-if="item4" ref="scachb" :scan_id="item4.id" :options="item4.checkItem.options" />
							</block>
							<!-- 数字类巡检操作 -->
							<block v-if="item4.checkItem.checkItem.itemType == 2">
								<scanum
									v-if="item4"
									ref="scanum"
									:scan_id="item4.id"
									:min="item4.checkItem.extra.validMinValue"
									:max="item4.checkItem.extra.validMaxValue"
									:places="item4.checkItem.extra.decimalPlaces"
								/>
							</block>
							<!-- 文本类巡检操作 -->
							<block v-if="item4.checkItem.checkItem.itemType == 3">
								<scatex v-if="item4" :defaultValue="item4.checkItem.checkItem.defaultValue" ref="scatex" :scan_id="item4.id" />
							</block>
							<!-- 拍照类巡检操作 -->
							<block v-if="item4.checkItem.checkItem.itemType == 4">
								<scaimg v-if="item4" ref="scaimg" :scan_id="item4.id" :photoPoints="item4.checkItem.photoPoints" />
							</block>
						</block>
					</view>
				</block>
				<u-button :hair-line="false" ripple-bg-color="blue" :disabled="guan" @click="scabtnclick" :custom-style="customStyle">确定</u-button>
			</block>
			<block v-else>
				<protow :option="option" :taskName="scmdata.taskName" :position="scmdata.buildingName + scmdata.floorName" />
			</block>
		</scroll-view>
		<!-- <u-tabbar :list="tabbar" :mid-button="true"></u-tabbar> -->
		<!-- 记录页面 -->

		<u-toast ref="sacast" />
	</view>
</template>

<script>
import icon1 from '@/static/img/devi.png'
import icon2 from '@/static/img/proj.png'
// import jia from '@/static/img/jia.png'
import { mapState } from 'vuex'
import { partinfo, checkItemlist, patrolRecord, listForMobile } from '@/api/index.js'
import dayjs from 'dayjs'
import scaradio from './scanItem/scanradio.vue'
import scachebox from './scanItem/scanchebox.vue'
import scanum from './scanItem/scannum.vue'
import scatex from './scanItem/scantex.vue'
import scaimg from './scanItem/scanimg.vue'
import protow from './protow'
export default {
	name: 'sacnning',
	components: {
		scaradio,
		scachebox,
		scanum,
		scatex,
		scaimg,
		protow
	},
	data() {
		return {
			icon1: icon1,
			icon2: icon2,
			tri_style1: '', //自带项目三角形样式变化
			itm1_show: true, //自带项目三角形样式变化
			sel_style: [], //设备巡检下拉虚拟DOM数组
			//上方导航项
			list: [
				{
					name: '巡检'
				},
				{
					name: '记录'
				}
			],
			current: 0, //跳转栏
			option: undefined, //跳转页面的option
			scmdata: undefined, //巡检数据
			checkItemCount: 0, //项目数
			guan: false,
			uploadlist: [],
			// uploadlist1:[],
			dataindex: 1,
			fromcasl: {},
			timerefs: new Date().getTime(), //因为用了$set的原因 多列表会不刷新 加入一个key 会让子组件重新渲染
			finishStatus: ['', '按时完成', '尚未巡检', '超时漏检', '提前完成', '延时完成'],
			fromarray: [],
			user: uni.getStorageSync('user'),
			customStyle: {
				width: '690rpx',
				height: '90rpx',
				marginBottom: '48rpx',
				background: '#4A8BFF',
				borderRadius: '4rpx',
				border: 'none',
				fontSize: '28rpx',
				fontFamily: 'Microsoft YaHei-3970(82674968)',
				fontWeight: 'bold',
				color: '#FFFFFF',
				textAlign: 'center',
				lineHeight: '90rpx !important',
				marginTop: '48rpx'
			}
		}
	},
	computed: {
		...mapState({
			tabbar: (state) => state.tabbar.tabbar,
			timer: (state) => state.user.timer
		})
	},
	onLoad(option) {
		if (this.option) {
			this.init(option.roomId, option.taskId)
		} else {
			this.option = option

			this.init(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) {
			// 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;'
			}
		},
		// 顶部跳转栏
		change(index) {
			this.current = index
		},
		//处理提交数据
		async scabtnclick() {
			this.guan = true
			this.customStyle.background = 'grey'
			try {
				await this.sumitComponent()
				console.log('数据提交前确认', this.$store.state.user.items) // TODO isRequired
				this.scanSubmit()
			} catch {
				this.$refs.sacast.show({
					title: '提交失败，请稍后再试'
				})
				//开启按钮
				this.customStyle.background = '#4A8BFF'
				this.guan = false
			}
		},
		async sumitComponent() {
			if (this.$refs.scaimg) {
				for (let i = 0; i < this.$refs.scaimg.length; i++) {
					await this.$refs.scaimg[i].submit()
				}
				this.$refs.sacast.show({
					title: '图片上传中...'
					// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
					// type: 'success',
					// 如果不需要图标，请设置为false
					// icon: false
				})
			}
			if (this.$refs.scatex) {
				this.$refs.scatex.forEach((i) => {
					i.submit()
				})
			}
			if (this.$refs.scanum) {
				this.$refs.scanum.forEach((i) => {
					i.submit()
				})
			}
			if (this.$refs.scarad) {
				this.$refs.scarad.forEach((i) => {
					i.submit()
				})
			}
			if (this.$refs.scachb) {
				this.$refs.scachb.forEach((i) => {
					i.submit()
				})
			}
		},
		//提交数据接口
		async scanSubmit() {
			//能改
			setTimeout(() => {
				//开启按钮
				this.customStyle.background = '#4A8BFF'
				this.guan = false
			}, 3000)
			let { message, code, data } = await patrolRecord({
				roomId: this.option.roomId,
				taskId: this.option.taskId,
				items: this.$store.state.user.items
			})
			if (code == 200) {
				//清空提交巡检数据数组
				this.$store.state.user.items = []
				this.$refs.sacast.show({
					title: '巡检完成',
					type: 'success'
				})
				//跳转巡检记录
				this.change(1)
			} else {
				//清空提交巡检数据数组
				console.log('this.$store.state.user.items', this.$store.state.user.items)
				this.$store.state.user.items = []
				this.$refs.sacast.show({
					title: message,
					type: 'warning'
				})
			}
		},
		//重置表单（未用到，只需更新items为空数组，其他会随组件刷新）
		scanReset() {
			this.$nextTick(() => {
				if (this.$refs.scatex) {
					this.$refs.scatex.forEach((i) => {
						i.reset()
					})
				}
				if (this.$refs.scanum) {
					this.$refs.scanum.forEach((i) => {
						i.reset()
					})
				}
				if (this.$refs.scarad) {
					this.$refs.scarad.forEach((i) => {
						i.reset()
					})
				}
				if (this.$refs.scaimg) {
					this.$refs.scaimg.forEach((i) => {
						i.reset()
					})
				}
				if (this.$refs.scachb) {
					this.$refs.scachb.forEach((i) => {
						i.reset()
					})
				}
			})
		},
		//获取巡检房间信息与巡检检查项目规则
		init(roomId, taskId) {
			checkItemlist({
				taskId,
				roomId
			}).then(({ data }) => {
				//处理自带巡检项目数据
				if (data.checkItems.length != 0) {
					//处理自带巡检项JSON数据
					data.checkItems.forEach((i) => {
						i.checkItem = JSON.parse(i.checkItem)
					})
				}
				//计算巡检项目数量
				this.checkItemCount += data.checkItems.length
				//处理设备巡检项目数据
				if (data.devices.length != 0) {
					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)
						//处理设备巡检项JSON数据
						i.checkItems.forEach((h) => {
							h.checkItem = JSON.parse(h.checkItem)
						})
					})
				}
				this.scmdata = data
				console.log(this.scmdata)
			})
		},
		recyle(e) {
			const { key, boll, name } = e

			this.$set(this.from.aircondparol, key, {
				name,
				boll: !boll
			}) //与组件那边同步刷新
			this.timerefs = new Date().getTime() //刷新父组件
			// this.$forceUpdate()
		},
		raidodx(index) {
			let fromarray = this.fromarray
			if (fromarray.length == 0) {
				this.fromarray.push(index)
			} else {
				let sum
				let a = fromarray.find((index2, key) => {
					sum = -1

					if (index2.itemId == index.itemId) {
						sum = key
						return key
					} else {
						sum = -1
					}
				})

				if (sum != -1) {
					this.fromarray.splice(sum, 1)
				}
				this.fromarray.push(index)
			}
		}
	}
}
</script>

<style lang="scss">
.scning .scrll-height {
	width: 100%;
	box-sizing: border-box;
	height: calc(100vh - 78rpx);
	background: #ffffff;
}

// .scning view {
// 	line-height: 1;
// }

.left-boto-txt {
	position: absolute;
	left: 30rpx;
	top: 107rpx;
	font-size: 28rpx;
}

.xianchang {
	width: auto;
	font-size: 14px;
	color: #333333;
	font-weight: bold;
	padding: 26rpx 32rpx;
}

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

	.tit {
		width: 128rpx;
		// height: 33rpx;
		line-height: 33rpx;
		margin-left: 30rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: bold;
		color: #010101;
	}

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

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

.sup {
	color: red;
}

.sel_point {
	width: 690rpx;
	height: 70rpx;
	background: #ebf8ff;

	.triangle {
		margin-top: 10rpx;
		display: inline-block;
		/* Base Style */
		border: solid 10rpx transparent;
		border-top-color: #808080;
	}
}

.u-radio,
.u-checkbox {
	margin-top: 29rpx;
}

.u-radio__label,
.u-checkbox__label {
	color: #333333 !important;
	width: 100%;
}

input {
	width: 100%;
	height: 100%;
	// text-indent: 20rpx;
}

.inp {
	width: 690rpx;
	height: 80rpx;
	padding: 18rpx;
	border: 1rpx solid #bfbfbf;
	border-radius: 6rpx;
}

.tex {
	width: 690rpx;
	height: 210rpx;
	border: 1rpx solid #bfbfbf;
	border-radius: 6rpx;
}

textarea {
	width: 100%;
	height: 100%;
	margin-top: 10rpx;
	text-indent: 20rpx;
}

.upload-image {
	width: 139rpx;
	height: 139rpx;
	margin-right: 45rpx;
	// background-image: url(../../static/img/jia.png);
	// background-repeat: no-repeat;
	// background-size: 100%;
	// line-height: 32px !important;
}

.scan-item-hidden {
	display: none;
}

.scan-form-item-show {
	display: block;
}
</style>