TSYWXT-CLOUD-APP/pages/check-order/orderprocessreportdetail.vue

<!--
 * @Title: 
 * @Description: 维修任务填报详情
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view style="width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
				<text style="color: white;font-size: 1rem;">{{title}}</text>
			</view>
		</uni-nav-bar>
		<uni-section v-for="item in list" :key="item.id" :title="item.createTime" type="circle">
			<view v-if="item.orderStatusKey==orderStatusCreateKey">
				<uni-card title="维修任务创建" :is-shadow="false">
					<text class="uni-body">{{item.processDesc}}</text>
				</uni-card>
			</view>
			<view v-else-if="item.orderStatusKey==orderStatusConfirmKey">
				<uni-card title="维修任务确认" :is-shadow="false">
					<view class="uni-body">{{item.processDesc}}</view>
				</uni-card>
			</view>
			<view v-else-if="item.orderStatusKey==orderStatusProcessKey">
				<uni-card title="填报人姓名" :is-shadow="false">
					<view class="uni-body">{{item.orderProcessUserName}}</view>
				</uni-card>
				<uni-card title="RTU设备运行状态" :is-shadow="false">
					<text v-if="item.rtuStatus == 0" style="font-size: 0.7rem;color: green;margin-left: 4px;">正常</text>
					<text v-else style="font-size: 0.7rem;color: orangered;margin-left: 4px;">故障</text>
				</uni-card>
				<uni-card title="是否更换RTU" :is-shadow="false">
					<text v-if="item.rtuReplace==0" class="uni-body">否</text>
					<text v-else class="uni-body">更换</text>
				</uni-card>
				<uni-card title="RTU设备维修说明" :is-shadow="false">
					<text class="uni-body">{{item.rtuDesc}}</text>
				</uni-card>
				<uni-card v-if="item.rtuPhotoTake==1" padding="0" spacing="0" :is-shadow="false">
					<template v-slot:cover>
						<view class="custom-cover">
							<image v-if="item.rtuPhotoUrl" class="cover-image" style="width: 100%;" mode="aspectFill"
								:src="toOss(item.rtuPhotoUrl)">
							</image>
							<view class="cover-content" style="text-align: center;">
								<text class="uni-subtitle uni-white" style="color: gray;">RTU设备照片</text>
							</view>
						</view>
					</template>
				</uni-card>
				<view v-if="item.isRain ==1">
					<uni-card title="雨量传感器运行状态" :is-shadow="false">
						<text v-if="item.rainSensorStatus == 0"
							style="font-size: 0.7rem;color: green;margin-left: 4px;">正常</text>
						<text v-else style="font-size: 0.7rem;color: orangered;margin-left: 4px;">故障</text>
					</uni-card>
					<uni-card title="是否更换雨量传感器" :is-shadow="false">
						<text v-if="item.rainSensorReplace==0" class="uni-body">否</text>
						<text v-else class="uni-body">更换</text>
					</uni-card>
					<uni-card title="雨量传感器维修说明" :is-shadow="false">
						<text class="uni-body">{{item.rainSensorDesc}}</text>
					</uni-card>
					<uni-card v-if="item.rainSensorPhotoTake==1" padding="0" spacing="0" :is-shadow="false">
						<template v-slot:cover>
							<view class="custom-cover">
								<image v-if="item.rainSensorPhotoUrl" class="cover-image" style="width: 100%;"
									mode="aspectFill" :src="toOss(item.rainSensorPhotoUrl)">
								</image>
								<view class="cover-content" style="text-align: center;">
									<text class="uni-subtitle uni-white" style="color: gray;">雨量传感器照片</text>
								</view>
							</view>
						</template>
					</uni-card>
				</view>
				<view v-if="item.isRiver ==1 || item.isRes ==1 ">
					<uni-card title="水位传感器运行状态" :is-shadow="false">
						<text v-if="item.waterLevelSensorStatus == 0"
							style="font-size: 0.7rem;color: green;margin-left: 4px;">正常</text>
						<text v-else style="font-size: 0.7rem;color: orangered;margin-left: 4px;">故障</text>
					</uni-card>
					<uni-card title="是否更换水位传感器" :is-shadow="false">
						<text v-if="item.waterSensorReplace==0" class="uni-body">否</text>
						<text v-else class="uni-body">更换</text>
					</uni-card>
					<uni-card title="水位传感器维修说明" :is-shadow="false">
						<text class="uni-body">{{item.waterSensorDesc}}</text>
					</uni-card>
					<uni-card v-if="item.waterSensorPhotoTake==1" padding="0" spacing="0" :is-shadow="false">
						<template v-slot:cover>
							<view class="custom-cover">
								<image v-if="item.waterSensorPhotoUrl" class="cover-image" style="width: 100%;"
									mode="aspectFill" :src="toOss(item.waterSensorPhotoUrl)">
								</image>
								<view class="cover-content" style="text-align: center;">
									<text class="uni-subtitle uni-white" style="color: gray;">水位传感器照片</text>
								</view>
							</view>
						</template>
					</uni-card>
				</view>
				<view v-if="item.isGround ==1">
					<uni-card title="墒情传感器运行状态" :is-shadow="false">
						<text v-if="item.groundWaterSensorStatus == 0"
							style="font-size: 0.7rem;color: green;margin-left: 4px;">正常</text>
						<text v-else style="font-size: 0.7rem;color: orangered;margin-left: 4px;">故障</text>
					</uni-card>
					<uni-card title="是否更换墒情传感器" :is-shadow="false">
						<text v-if="item.groundSensorReplace==0" class="uni-body">否</text>
						<text v-else class="uni-body">更换</text>
					</uni-card>
					<uni-card title="墒情传感器维修说明" :is-shadow="false">
						<text class="uni-body">{{item.groundSensorDesc}}</text>
					</uni-card>
					<uni-card v-if="item.groundSensorPhotoTake==1" padding="0" spacing="0" :is-shadow="false">
						<template v-slot:cover>
							<view class="custom-cover">
								<image v-if="item.groundSensorPhotoUrl" class="cover-image" style="width: 100%;"
									mode="aspectFill" :src="toOss(item.groundSensorPhotoUrl)">
								</image>
								<view class="cover-content" style="text-align: center;">
									<text class="uni-subtitle uni-white" style="color: gray;">墒情传感器照片</text>
								</view>
							</view>
						</template>
					</uni-card>
				</view>
				<uni-card title="供电系统运行状态" :is-shadow="false">
					<text v-if="item.powerStatus == 0"
						style="font-size: 0.7rem;color: green;margin-left: 4px;">正常</text>
					<text v-else style="font-size: 0.7rem;color: orangered;margin-left: 4px;">故障</text>
				</uni-card>
				<uni-card title="是否更换蓄电池" :is-shadow="false">
					<text v-if="item.batteryReplace==0" class="uni-body">否</text>
					<text v-else class="uni-body">更换</text>
				</uni-card>
				<uni-card title="是否更换太阳能板" :is-shadow="false">
					<text v-if="item.sunPowerReplace==0" class="uni-body">否</text>
					<text v-else class="uni-body">更换</text>
				</uni-card>
				<uni-card title="供电系统维修说明" :is-shadow="false">
					<text class="uni-body">{{item.powerDesc}}</text>
				</uni-card>
				<uni-card v-if="item.batteryPhotoTake==1" padding="0" spacing="0" :is-shadow="false">
					<template v-slot:cover>
						<view class="custom-cover">
							<image v-if="item.batteryPhotoUrl" class="cover-image" style="width: 100%;"
								mode="aspectFill" :src="toOss(item.batteryPhotoUrl)">
							</image>
							<view class="cover-content" style="text-align: center;">
								<text class="uni-subtitle uni-white" style="color: gray;">蓄电池照片</text>
							</view>
						</view>
					</template>
				</uni-card>
				<uni-card v-if="item.sunPhotoTake==1" padding="0" spacing="0" :is-shadow="false">
					<template v-slot:cover>
						<view class="custom-cover">
							<image v-if="item.sunPhotoUrl" class="cover-image" style="width: 100%;" mode="aspectFill"
								:src="toOss(item.sunPhotoUrl)">
							</image>
							<view class="cover-content" style="text-align: center;">
								<text class="uni-subtitle uni-white" style="color: gray;">太阳能板照片</text>
							</view>
						</view>
					</template>
				</uni-card>
				<uni-card title="是否欠费" :is-shadow="false">
					<text v-if="item.networkOverdue==0" class="uni-body">否</text>
					<text v-else class="uni-body">欠费</text>
				</uni-card>
				
				<uni-card v-if="item.isSatellite ==0" title="4G移动网络维修说明" :is-shadow="false">
					<text class="uni-body">{{item.networkDesc}}</text>
				</uni-card>
				<uni-card v-else title="北斗通讯维修说明" :is-shadow="false">
					<text class="uni-body">{{item.satelliteDesc}}</text>
				</uni-card>
				<uni-card title="维修总结说明" :is-shadow="false">
					<text class="uni-body">{{item.processDesc}}</text>
				</uni-card>
				<uni-card v-if="item.baseBeforePhoto1Take ==1" padding="0" spacing="0" :is-shadow="false">
					<template v-slot:cover>
						<view class="custom-cover">
							<image v-if="item.baseBeforePhoto1Url" class="cover-image" style="width: 100%;"
								mode="aspectFill" :src="toOss(item.baseBeforePhoto1Url)">
							</image>
							<view class="cover-content" style="text-align: center;">
								<text class="uni-subtitle uni-white" style="color: gray;">维修前照片一</text>
							</view>
						</view>
					</template>
				</uni-card>
				<uni-card v-if="item.baseBeforePhoto2Take==1" padding="0" spacing="0" :is-shadow="false">
					<template v-slot:cover>
						<view class="custom-cover">
							<image v-if="item.baseBeforePhoto2Url" class="cover-image" style="width: 100%;"
								mode="aspectFill" :src="toOss(item.baseBeforePhoto2Url)">
							</image>
							<view class="cover-content" style="text-align: center;">
								<text class="uni-subtitle uni-white" style="color: gray;">维修前照片二</text>
							</view>
						</view>
					</template>
				</uni-card>
				<uni-card v-if="item.baseAfterPhoto1Take ==1" padding="0" spacing="0" :is-shadow="false">
					<template v-slot:cover>
						<view class="custom-cover">
							<image v-if="item.baseAfterPhoto1Url" class="cover-image" style="width: 100%;"
								mode="aspectFill" :src="toOss(item.baseAfterPhoto1Url)">
							</image>
							<view class="cover-content" style="text-align: center;">
								<text class="uni-subtitle uni-white" style="color: gray;">维修后照片一</text>
							</view>
						</view>
					</template>
				</uni-card>
				<uni-card v-if="item.baseAfterPhoto2Take==1" padding="0" spacing="0" :is-shadow="false">
					<template v-slot:cover>
						<view class="custom-cover">
							<image v-if="item.baseAfterPhoto2Url" class="cover-image" style="width: 100%;"
								mode="aspectFill" :src="toOss(item.baseAfterPhoto2Url)">
							</image>
							<view class="cover-content" style="text-align: center;">
								<text class="uni-subtitle uni-white" style="color: gray;">维修后照片二</text>
							</view>
						</view>
					</template>
				</uni-card>
			</view>
			<view v-else>
				<uni-card title="维修完成" :is-shadow="false">
					<view class="uni-body">{{item.processDesc}}</view>
				</uni-card>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import http from '@/http/api.js';
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js';
	import {
		oss,
		devUrl,
		prodUrl
	} from '@/common/setting';

	export default {
		components: {},
		onLoad(options) {
			this.orderId = options.orderId;
		},
		data() {
			return {
				list: [],
				orderId: 0,
				reportId: 0,
				orderStatusCreateKey: 0,
				orderStatusConfirmKey: 0,
				orderStatusProcessKey: 0,
				orderStatusCloseKey: 0,
				title: '维修任务处理详情',
			}
		},
		computed: {},
		onShow() {
			this.getReportDict();
		},
		created() {},
		methods: {
			toOss(path) {
				return oss + path;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getReportDict() {
				var that = this;
				http.request({
					url: '/galaxy-system/dict-biz/dictionary?code=rtu_check_order_status',
					method: 'GET'
				}).then(res => {
					if (res.data != null) {
						const dictLength = res.data['length'];
						for (var i = 0; i < dictLength; i++) {
							let dict = res.data[i];
							if (dict.dictKey === '1') {
								that.orderStatusCreateKey = dict.id;
							} else if (dict.dictKey === '2') {
								that.orderStatusConfirmKey = dict.id;
							} else if (dict.dictKey === '3') {
								that.orderStatusProcessKey = dict.id;
							} else if (dict.dictKey === '4') {
								that.orderStatusCloseKey = dict.id;
							}
						}
						this.getOrderProcessList();
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getOrderProcessList() {
				let that = this;
				let postData = {};
				postData['id'] = this.orderId;
				http.request({
					url: '/galaxy-business/rtu/check/order/process/list',
					method: 'GET',
					data: postData,
				}).then(res => {
					if (res.data != null) {
						that.list = res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

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

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

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

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

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

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

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

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

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

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

<style lang="scss" scoped>
	.container {
		padding: 0 0 50rpx;
	}

	.uni-body {
		font-size: 0.7rem;
	}

	.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: 5px;
					right: 5px;
					border: 5px;
					left: 5px;
					border: 1px #eee solid;
					border-radius: 5px;
					overflow: hidden;
					width: 98%;
					height: 98%;

				}


			}
		}
	}
</style>