FE-lab-xcx/pages_safetyCheck/views/snapshotManage/snapshotDetail.vue

<!-- 随手拍详情 -->
<template>
	<view class="snapshotDetail">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="items" v-if="inspectionItems==0">
				<view class="items-li">
					<view>实验室</view>
					<view>{{newData.subName}}({{newData.subRoom}})</view>
				</view>
				<view class="items-li">
					<view>学院单位</view>
					<view>{{newData.deptName}}</view>
				</view>
				<view class="items-t" v-if="newData.hazardCheckName!=''">
					<view class="items-t-r">{{newData.hazardCheckCode}} {{newData.hazardCheckName}}</view>
				</view>
				<view class="items-b" v-if="newData.hazardCheckName!=''">＜ {{newData.hazardCheckCode2}} {{newData.hazardCheckName2}} ＜ {{newData.hazardCheckCode1}} {{newData.hazardCheckName1}}</view>
			</view>
			<view class="items-number" v-if="newData.hazardCheckName!=''">此检查项在当前实验室累计出现<text>{{newData.hazardCheckNum}}</text>次隐患</view>
			<view class="list">
				<view class="list-li" v-if="newData.hazardCheckName!=''">
					<view>检查要点</view>
					<view>
						<img src="@/pages_safetyCheck/images/icon_06.png">
					</view>
				</view>
				<view v-if="newData.hazardCheckName!=''" class="hidden-content">{{newData.hazardCheckPoint}}
				</view>
				<view class="list-li">
					<view>检查隐患</view>
				</view>
				<view class="hidden-content">{{newData.hazardDescribe}}
				</view>
				<view class="photo">
					<img v-for="(item,index) in newData.yhDtoList" :src="baseUrl+item.fileUrl">
				</view>
				<view class="list-li">
					<view>隐患整改</view>
					<view :id="newData.rectifyStatus==0?'fontColor-A':(newData.rectifyStatus==1?'fontColor-B':'fontColor-C')">
						{{newData.rectifyStatus==0?'待整改':(newData.rectifyStatus==1?'已整改':'暂无法整改')}}
						<img src="@/pages_safetyCheck/images/icon_06.png">
					</view>
				</view>
				<view class="hidden-content" v-if="newData.rectifyStatus==1 || newData.rectifyStatus==2">{{newData.data7}}
				</view>
				<view class="photo" v-if="newData.rectifyStatus==1 || newData.rectifyStatus==2">
					<img src="@/pages_safetyCheck/images/img_ssp_pz@1x.png">
				</view>
				<view class="list-li" v-if="newData.rectifyStatus==1 || newData.rectifyStatus==2">
					<view>整改方案</view>
					<view></view>
				</view>
				<view class="file-li" v-if="newData.rectifyStatus==1 || newData.rectifyStatus==2">
					<img src="@/pages_safetyCheck/images/icon_djc_wj.png">
					<view>文件标题文件标题文件标题文件标题</view>
				</view>
				<view class="list-li" v-if="newData.rectifyStatus==1 || newData.rectifyStatus==2">
					<view>姓名：</view>
					<view>{{newData.data8}}</view>
				</view>
				<view class="list-li" v-if="newData.rectifyStatus==1 || newData.rectifyStatus==2">
					<view>时间：</view>
					<view>{{newData.data9}}</view>
				</view>
				
			</view>
		</scroll-view>
		<view class="sub-btn" @click="rectificationBtn">{{newData.rectifyStatus==0?'整改':'继续整改'}}</view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		securityAppCheckPhotoDetail,
	} from '@/pages_safetyCheck/api/index.js'
	export default {
		name: "snapshotDetail",
		components: {

		},
		data() {
			return {
				baseUrl: config.base_url,
				inspectionItems:0,//0有检查项 1无检查项
				newData: {},
				photoId:'',
				
			}
		},
		onLoad(option) {
			this.$set(this, 'photoId', JSON.parse(decodeURIComponent(option.infoData)).photoId);
		},
		onShow() {

		},
		mounted() {
			this.securityAppCheckPhotoDetail();
		},
		methods: {
			//滚动事件
			scrollGet() {},
			async securityAppCheckPhotoDetail() {
				let self = this;
				const {
					data
				} = await securityAppCheckPhotoDetail({photoId:this.photoId});
				if (data.code == 200) {
					this.$set(this, 'newData', data.data);
				}
			},
			//整改页面
			rectificationBtn(){
				let infoData=this.newData;
				uni.navigateTo({
					url: '/pages_safetyCheck/views/itemsManage/snapshotRectification?infoData=' + encodeURIComponent(JSON.stringify(infoData))
				});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.snapshotDetail {
		height: 100%;
		display flex;
		box-sizing: border-box;
		padding-bottom: 160rpx;
		box-sizing: border-box;
		#bgColor-A {
			color: #FFD400;
		}

		#bgColor-B {
			color: #FF8C00;
		}

		#bgColor-C {
			color: #E11608;
		}
		#fontColor-A {
			color: #0183FA;
		}
		
		#fontColor-B {
			color: #FF8C00;
		}
		
		#fontColor-C {
			color: #16B531;
		}
		.items {
			width: 690rpx;
			min-height: 165rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx 0 0 30rpx;
			.items-li{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E0E0E0;
				
				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}
				
				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
			.items-t {
				border-bottom: 1rpx solid #E0E0E0;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				.items-t-l {
					width: 175rpx;
					height: 50rpx;
					background: #E11608;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: center;
					margin-right: 14rpx;
				}

				.items-t-r {
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
				}
			}

			.items-b {
				padding: 0 30rpx;
				box-sizing: border-box;
				height: 80rpx;
				font-size: 28rpx;
				color: #666666;
				line-height: 80rpx;
				text-align: left;
			}
		}

		.items-number {
			font-size: 24rpx;
			color: #3D3D3D;
			line-height: 34rpx;
			text-align: right;
			margin: 20rpx 60rpx 0 0;

			>text {
				font-size: 24rpx;
				color: #FF0000;
				line-height: 34rpx;
				text-align: right;
			}
		}

		.list {
			width: 690rpx;
			margin: 20rpx 30rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.list-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E0E0E0;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;

					>img {
						width: 24rpx;
						height: 12rpx;
						margin-left: 10rpx;
					}
				}

			}
			.file-li{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				>img:nth-of-type(1) {
					width: 30rpx;
					height: 30rpx;
				}
				>view{
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
					margin: 0 92rpx 0 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;   
				}
				>img:nth-of-type(2) {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.hidden-content {
				width: 630rpx;
				min-height: 120rpx;
				background: #F5F5F5;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 20rpx 30rpx 0;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #666666;
				line-height: 39rpx;
				text-align: left;
			}

			.photo {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-top: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				>img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin: 0 10rpx 10rpx 0;
				}
			}
			.list-li:last-of-type {
				border: none;
			}
		}
		
	}
	.sub-btn{
		width: 686rpx;
		height: 100rpx;
		background: #0183FA;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}
	
</style>