TSYWXT-CLOUD-APP/pages/equipment-inspection/inspection-report-detail.vue

<!--
 * @Title: 
 * @Description: 巡检填报详情
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="wrap">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="container">
			<uni-card title="处理人">
				<view class="item-text-line">
					<text class="item-title">{{dataInfo.servicePersonName}}</text>
				</view>
			</uni-card>
			<uni-card title="处理时间">
				<view class="item-text-line">
					<text class="item-title">{{dataInfo.createTime}}</text>
				</view>
			</uni-card>
			<uni-card title="巡检内容">
				<view class="item-text-line">
					<text class="item-title">{{dataInfo.inspectionDesc}}</text>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import {
		role
	} from "@/api/role.js";
	import http from '@/http/api.js';
	import {
		oss
	} from '@/common/setting';
	export default {
		components: {

		},
		props: {
			// id: {
			// 	type: String,
			// 	required: true,
			// },
		},
		data() {
			return {
				query: {},
				title: '巡检详情',
				dataInfo: {

				},
				data: {
					rtuCode: '',
					rtuName: '',
					isRain: false,
					isRiver: false,
					isRes: false,
					isGround: false,
					isCamera: false,
					lng: '',
					lat: '',
					adCity: '',
					adDist: '',
					locationDesc: '',
					//站点状态检查项
					siteCheckStatus: {
						items: [{
							'id': '0',
							'dictValue': '水毁'
						}, {
							'id': '1',
							'dictValue': '丢失'
						}, {
							'id': '2',
							'dictValue': '损坏'
						}, {
							'id': '3',
							'dictValue': '正常'
						}],
						current: 3
					},
					siteCheckPhotos: [],
					siteCheckRemark: '',
					//雨量站检查数据
					rainSiteCheckItems: {
						items: [{
							'id': '0',
							'checked': false,
							'dictValue': '故障排查'
						}, {
							'id': '1',
							'checked': false,
							'dictValue': '清理堵塞'
						}, {
							'id': '2',
							'checked': false,
							'dictValue': '雨量计校核'
						}],
						current: 0
					},
					rainSiteCheckPhotos: [],
					rainSiteCheckResult: 1,
					rainSiteCheckRemark: '',
					//水位站检查数据
					waterSiteCheckItems: {
						items: [{
							'id': '0',
							'checked': false,
							'dictValue': '故障排查'
						}, {
							'id': '1',
							'checked': false,
							'dictValue': '水位计校核'
						}],
						current: 0
					},
					waterSiteCheckPhotos: [],
					waterSiteCheckResult: 1,
					waterSiteCheckRemark: '',
					//墒情站检查数据
					groundSiteCheckItems: {
						items: [{
							'id': '0',
							'checked': false,
							'dictValue': '故障排查'
						}, {
							'id': '1',
							'checked': false,
							'dictValue': '墒情计校核'
						}],
						current: 0
					},
					groundSiteCheckPhotos: [],
					groundSiteCheckRemark: '',
					groundSiteCheckResult: 1,
					//其他设备检查
					othersEquipmentCheckItems: {
						items: [{
							'id': '0',
							'checked': false,
							'dictValue': '设备接地检测'
						}, {
							'id': '1',
							'checked': false,
							'dictValue': '电源电压检测'
						}, {
							'id': '2',
							'checked': false,
							'dictValue': '太阳能板检查'
						}, {
							'id': '3',
							'checked': false,
							'dictValue': '蓄电池检查'
						}, {
							'id': '4',
							'checked': false,
							'dictValue': '网络通信检查'
						}],
						current: 0
					},
					othersEquipmentCheckPhotos: [],
					othersEquipmentCheckRemark: '',
					otherEquipmentCheckResult: 1,
					//设备替换
					equipmentsReplaceItems: {
						items: [{
							'id': '0',
							'checked': false,
							'dictValue': 'RTU'
						}, {
							'id': '1',
							'checked': false,
							'dictValue': '雨量计'
						}, {
							'id': '2',
							'checked': false,
							'dictValue': '水位计'
						}, {
							'id': '3',
							'checked': false,
							'dictValue': '墒情计'
						}, {
							'id': '4',
							'checked': false,
							'dictValue': '蓄电池'
						}, {
							'id': '5',
							'checked': false,
							'dictValue': '太阳能板'
						}, {
							'id': '6',
							'checked': false,
							'dictValue': '充电控制器'
						}, {
							'id': '7',
							'checked': false,
							'dictValue': '其他'
						}],
						current: 0
					},
					rtuModelRemark: '',
					rtuReplacePhotos: [],
					rainSensorModelRemark: '',
					rainSensorReplacePhotos: [],
					waterSensorModelRemark: '',
					waterSensorReplacePhotos: [],
					groundSensorModelRemark: '',
					groundSensorReplacePhotos: [],
					batteryModelRemark: '',
					batteryReplacePhotos: [],
					sunPowerModelRemark: '',
					sunPowerReplacePhotos: [],
					batteryControlModelRemark: '',
					batteryControlReplacePhotos: [],
					otherEquipmentModelRemark: '',
					otherEquipmentReplacePhotos: [],
					//巡检遗留问题描述
					inspectionRemainProblemsRemark: '',
					//工作留存数据
					inspectionWorkPhotos: [],
					id: '',
				},
			}
		},
		onLoad(options) {
			// console.log("ddddd onLoad")
			let params = {};
			params['id'] = options.id;
			// console.log("id " + this.inspectionId)
			this.getDetail(params);
		},
		onShow() {
			// console.log("ddd onShow")
		},
		created() {
			// console.log("dddd created")
			// console.log("id " + this.inspectionId)
			// let params = {};
			// params['id'] = this.inspectionId;
			// console.log("id " + this.inspectionId)
			// this.getDetail(params);
		},
		computed: {
			getSiteKind() {
				let htmltext = '';
				if (this.data.isRain === 1) {
					htmltext = htmltext + "雨量站";
				}
				if (this.data.isRiver == 1 || this.data.isRes == 1) {
					if (htmltext.length > 0) {
						htmltext = htmltext + ' / ';
					}
					htmltext = htmltext + '水位站';
				}
				if (this.data.isGround == 1) {
					if (htmltext.length > 0) {
						htmltext = htmltext + ' / ';
					}
					htmltext = htmltext + '墒情站';
				}
				if (this.data.isVideo == 1) {
					if (htmltext.length > 0) {
						htmltext = htmltext + ' / ';
					}
					htmltext = htmltext + '视频站';
				}
				return htmltext;
			},
			getAreaName() {
				let htmltext = '';
				if (this.data.adCity) {
					htmltext = htmltext + this.data.adCity;
				}
				if (this.data.adDist) {
					if (htmltext.length > 0) {
						htmltext = htmltext + ' / ';
					}
					htmltext = htmltext + this.data.adDist;
				}
				return htmltext;
			},
			getSiteCheckStatus() {
				return this.data.siteCheckStatus.items[this.data.siteCheckStatus.current].dictValue;
			},
			getRainSiteCheckItems() {
				//console.log(JSON.stringify(this.data.rainSiteCheckItems))
				let text = '';
				for (let i = 0; i < this.data.rainSiteCheckItems.items.length; i++) {
					if (this.data.rainSiteCheckItems.items[i].checked) {
						if (text.length > 0) {
							text = text + ' / ';
						}
						text = text + this.data.rainSiteCheckItems.items[i].dictValue;
					}
				}
				return text;
			},
			getWaterSiteCheckItems() {
				let text = '';
				for (let i = 0; i < this.data.waterSiteCheckItems.items.length; i++) {
					if (this.data.waterSiteCheckItems.items[i].checked) {
						if (text.length > 0) {
							text = text + ' / ';
						}
						text = text + this.data.waterSiteCheckItems.items[i].dictValue;
					}
				}
				return text;
			},
			getGroundSiteCheckItems() {
				let text = '';
				for (let i = 0; i < this.data.groundSiteCheckItems.items.length; i++) {
					if (this.data.groundSiteCheckItems.items[i].checked) {
						if (text.length > 0) {
							text = text + ' / ';
						}
						text = text + this.data.groundSiteCheckItems.items[i].dictValue;
					}
				}
				return text;
			},
			getOthersEquipmentCheckItems() {
				let text = '';
				for (let i = 0; i < this.data.othersEquipmentCheckItems.items.length; i++) {
					if (this.data.othersEquipmentCheckItems.items[i].checked) {
						if (text.length > 0) {
							text = text + ' / ';
						}
						text = text + this.data.othersEquipmentCheckItems.items[i].dictValue;
					}
				}
				return text;
			},
		},
		methods: {
			toOss(path) {
				return oss + path;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getDetail(params = {}) {
				let that = this;
				this.query = {};
				Object.assign(this.query, params);
				http.request({
					url: '/galaxy-business/equipment/inspection/report/detail',
					method: 'GET',
					params: this.query
				}).then(res => {
					if (res.success) {
						that.dataInfo = res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			},

		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	.uni-body {
		font-size: 0.7rem;
	}

	.decoration {
		width: 6px;
		height: 6px;
		margin-right: 4px;
		border-radius: 50%;
		background-color: cadetblue;
	}

	.view-flex-rs {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.view-flex-rs-flex-wrap {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.view-flex-rc {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.view-flex-re {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.view-flex-cs {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.view-flex-cc {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.view-flex-ce {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}

	.cell-hover-class {
		background-color: rgb(235, 237, 238);
	}

	.view-flex-ce {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.line-body {
		padding-left: 10px;
		padding-right: 10px;
	}

	.item-text-line {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;

		.item-title {
			font-size: 0.7rem;
			font-weight: bold;
		}

		.item-text {
			overflow: hidden;
			margin-left: 5px;
			font-size: 0.7rem;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.item-text-block {
			margin-left: 5px;
			font-size: 0.7rem;
			word-wrap: break-word;
			word-break: normal;
		}

		.error-text {
			color: #FF0000;
		}

		.normally-text {
			color: darkgreen;
		}

		.select-text {
			color: royalblue;
		}
	}

	.required-star {
		color: #FF0000;
		font-size: 15px;
		width: 20px;
		text-align: center;
		padding-left: 0px;
		padding-right: 2px;
	}

	.item-title {
		color: #909399;
		font-size: 15px;
	}

	.mline-text {
		padding-left: 2px;
		width: 100%;
		/* background-color:#909399; */
		height: 70px;
		border: 1px solid #FF5A5F;
		border-radius: 5px;
	}


	.img-container {
		margin-bottom: 0px;
		width: 100px;
		height: 100px;

		.note-image-box {
			margin-top: 0px;
			display: flex;
			flex-wrap: wrap;
			padding: 10px;

			.note-image-item {
				position: relative;
				width: 100%;
				height: 0;
				padding-top: 100%;
				box-sizing: border-box;
				// background-color: #18B566;

				.close-icon {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0px;
					top: 0px;
					width: 22px;
					height: 22px;
					border-radius: 50%;
					background-color: #d5d5d5;
					z-index: 2;
				}

				.image-box {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0px;
					right: 0px;
					border: 0px;
					left: 0px;
					border: 1px #eee solid;
					border-radius: 5px;
					overflow: hidden;
					width: 99%;
					height: 99%;

				}


			}
		}
	}

	.input-body {
		background-color: #fff;
		padding: 10px;
	}
</style>