zhgdyunapp/pages/projectEnd/InspectionRoute/inspecteddetail.vue

<template>
	<view>
		<headers class="fixedheader" :showBack="true">
			<view class="headerName">
				{{info.itemName}}
			</view>
			<!-- <view class="right" @click="getScanCode()">
				<image class="scancode" src="@/static/scancode.png" mode=""></image>
			</view> -->
		</headers>
		<view class="content" :style="{ 'padding-top': (statusBarHeight+52) + 'px' }">
			<view class="coordinate">
				<view class="coordinate-header">
					<view>
						<image src="@/static/inspecteIcon-normal.png" mode=""></image>
						已巡检-正常
					</view>
					<view class="abnormal">
						<image src="@/static/inspectelcon-abnormal.png" mode=""></image>
						已巡检-异常
					</view>
					<view>
						<image src="@/static/inspectelcon-not.png" mode=""></image>
						未巡检
					</view>
				</view>
				<view class="coordinate-item">
					<view :class="{'abnormal':item.inspectStatus == 2}" @click="onClickSelect(item)"
						v-for="item in checkingList" :key="item.id">
						<image :src="statusList[item.inspectStatus].image" mode=""></image>
						<text>{{item.checkingPointName}}</text>
					</view>
					<!-- <view class="abnormal">
						<image src="@/static/inspectelcon-abnormal.png" mode=""></image>
						<text>1号巡检点</text>
					</view>
					<view>
						<image src="@/static/inspecteIcon-normal.png" mode=""></image>
						<text>1号巡检点</text>
					</view>
					<view>
						<image src="@/static/inspecteIcon-normal.png" mode=""></image>
						<text>1号巡检555555555555点</text>
					</view>
					<view>
						<image src="@/static/inspecteIcon-normal.png" mode=""></image>
						<text>1号巡检点</text>
					</view>
					<view>
						<image src="@/static/inspecteIcon-normal.png" mode=""></image>
						<text>1号巡检点</text>
					</view>
					<view>
						<image src="@/static/inspecteIcon-normal.png" mode=""></image>
						<text>1号巡检点</text>
					</view> -->
				</view>
			</view>


			<view class="detail-main" v-for="item in checkingInfoList" :key="item.id">
				<view class="title">
					{{item.checkingPointName}}
				</view>
				<view class="detail-content">
					<view>巡检点名称:{{item.checkingPointName}}</view>
					<view>巡检点位置:{{item.position}}</view>
					<view>巡检人员:{{item.checkingPointUserName}}</view>
					<view>巡检通知人员:{{item.noticeUserNames}}</view>
					<view>状态:{{item.status == 1 ? '正常' : '异常'}}</view>
					<view>巡检时间:{{item.createDate}}</view>
					<view>巡检详情:{{item.alarmDetails}}</view>
					 <!-- v-if="item.status == 2" -->
					<view class="detail-image">
						巡检图片:
						<view v-if="item.alarmImage && JSON.parse(item.alarmImage).length > 0">
							<image v-for="ele in JSON.parse(item.alarmImage)"
								@click="previewImage(url_config+'image/'+ele.url)" :src="url_config+'image/'+ele.url"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>

			<view v-if="checkingInfoList.length == 0 && btnAuth" class="scancodebtn" @click="getScanCode()">
				扫码巡检
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				checkingList: [],
				statusList: [{
					id: 1,
					statusName: "未巡检",
					image: "/static/inspectelcon-not.png",
				}, {
					id: 2,
					statusName: "正常",
					image: "/static/inspecteIcon-normal.png",
				}, {
					id: 3,
					statusName: "异常",
					image: "/static/inspectelcon-abnormal.png",
				}],
				checkingInfoList: [],
				checkingInfoDetail: {
					id: "",
				},
				statusBarHeight: 0,
				pageNo: 1,
				pageSize: 10,
				btnAuth: true
			}
		},
		onLoad(options) {
			this.btnAuth = this.checkPermission({key: 'selfInspect_scanCheck', menuPath: '/project/inspecPoint/selfInspect'})
			this.info = JSON.parse(options.info);
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			console.log(this.info);
		},
		onShow(){
			this.getcheckingList();
		},
		//上拉触底时间
		onReachBottom() {
			// this.pageNo = this.pageNo + 1;
			// this.getcheckingInfo();
		},
		methods: {
			getcheckingList() {
				let that = this;
				//获取我整改的巡查记录数量
				this.sendRequest({
					url: 'xmgl/checkingPoint/selectPage',
					method: 'post',
					data: {
						projectSn: this.projectSn,
						xzCheckingRouteTaskId: this.info.id,
						// checkingPointUserId: this.info.xzCheckingRoute.inspectUserIds,
						pageNo: 1,
						pageSize: 99999,
					},
					success: res => {
						console.log(res.result.records);
						that.checkingList = res.result.records;
						this.checkingInfoDetail = res.result.records.length > 0 ? res.result.records[0] : {};
						this.getcheckingInfo();
					}
				})
			},
			onClickSelect(item) {
				this.pageNo = 1;
				this.pageSize = 10;
				this.checkingInfoList = [];
				this.checkingInfoDetail = item;
				this.getcheckingInfo();
			},
			getcheckingInfo() {
				let that = this;

				//获取我整改的巡查记录详情
				this.sendRequest({
					url: 'xmgl/checkingPointInfo/selectPage',
					method: 'post',
					data: {
						projectSn: this.projectSn,
						xzCheckingRouteTaskId: this.info.id,
						checkingPointId: this.checkingInfoDetail.id,
						// checkingPointUserId: this.checkingInfoDetail.inspectUserIds,
						pageNo: that.pageNo,
						pageSize: that.pageSize,
					},
					success: res => {
						console.log(res);
						that.checkingInfoList = res.result.records;
					}
				})
			},

			getScanCode() {
				const that = this;
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						console.log('扫一扫得到的数据：' + res.result)
						uni.navigateTo({
							url: `../scan/saoSao?data=${res.result}&id=${that.info.id}`
						})

						// let qrcodeVal=JSON.parse(res.result)
						// let param={
						// 	checkingPointId:qrcodeVal.checkingPointId,
						// 	checkingPointName:qrcodeVal.checkingPointName,
						// 	checkingPointUserId:that.userInfo.userId,
						// 	checkingPointUserName:that.userInfo.realName||that.userInfo.account,
						// 	position:qrcodeVal.position
						// }

						// that.sendRequest({
						// 	url: "xmgl/checkingPointInfo/add",
						// 	data:param,
						// 	method: "POST",
						// 	success(res) {
						// 		console.log(res,'res');
						// 		console.log(param,'===')
						// 		that.qrCode=param;
						// 		that.$refs.popupqrcode.open();
						// 		setTimeout(item=>{
						// 			that.$refs.popupqrcode.close();
						// 		},5000)
						// 	}
						// })
					}
				})
			},
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		/deep/ .backImg {
			color: #fff !important;
		}

		/deep/.headerBox {
			background: #2b8df3;
			color: #fff;
		}

		/deep/ .right {
			font-size: 24rpx;
			position: absolute;
			right: 20rpx;
			top: 50%;
			z-index: 4;
			transform: translateY(-50%);

			.scancode {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}

	.scancodebtn {
		padding: 20rpx 20rpx;
		background-color: #2b8df3;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: white;
		border-radius: 16rpx;
		margin-top: 160rpx;
	}

	.content {
		padding: 0 26rpx 15%;
		box-sizing: border-box;
		width: 100%;

		.coordinate {
			padding: 22rpx 28rpx 54rpx 12rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(198, 220, 255, 0.2) 100%);
			box-shadow: 0 8rpx 32rpx -8rpx rgba(42, 60, 106, 0.24);
			border-radius: 34rpx;
			position: relative;
			margin-top: 22rpx;
			font-size: 24rpx;
			color: #000;

			.coordinate-header {
				display: flex;
				justify-content: center;

				>view:not(:last-child) {
					margin-right: 14rpx;
				}

				>view {
					display: flex;
					align-items: center;

					>image {
						width: 50rpx;
						height: 60rpx;
						margin-right: 8rpx;
					}
				}
			}

			.abnormal {
				>image {
					width: 60rpx !important;
					height: 60rpx;
				}
			}

			.coordinate-item {
				display: flex;
				flex-wrap: wrap;
				margin-top: 18rpx;

				>view {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-left: 28rpx;
					margin-top: 18rpx;

					>image {
						width: 50rpx;
						height: 60rpx;
						margin-right: 8rpx;
					}

					>text {
						width: 107rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: center;
					}
				}
			}
		}

		.detail-main {
			padding: 22rpx 48rpx 0;
			color: #000000;

			.title {
				font-weight: bold;
				font-size: 36rpx;
				display: flex;
				justify-content: center;
				position: relative;
			}

			.title::before {
				content: "";
				border-bottom: 6rpx solid #3A7BFF;
				position: absolute;
				bottom: 0;
				bottom: -12rpx;
				width: 190rpx;
			}

			.detail-content {
				margin-top: 60rpx;

				>view:not(:first-child) {
					margin-top: 32rpx;
				}

				>view {
					font-size: 28rpx;
				}

				.detail-image {
					display: flex;

					image {
						width: 128rpx;
						height: 112rpx;
						margin-left: 8rpx;
					}
				}

			}
		}
	}
</style>