FE-lab-xcx/pages_safetyCheck/views/planDetail.vue

<!-- 计划详情 -->
<template>
	<view class="planDetail">
		<view class="info-max-box" v-if="pageType">
			<view class="title">
				<view class="title-t">{{newData.planTitle}}</view>
				<view class="title-b">
					<view v-if="newData.checkCategory">
						{{newData.checkCategory==1?'校院巡查':(newData.checkCategory==2?'学院自查':'')}}
					</view>
					<view v-if="newData.checkTypeName">{{newData.checkTypeName}}</view>
					<view v-if="newData.crossCheck==1">交叉互检</view>
				</view>
			</view>
			<view class="box">
				<view class="content-li">
					<view>检查周期</view>
					<view>{{newData.cycleStartTime}}至{{newData.cycleEndTime}}</view>
				</view>
				<view class="content-li">
					<view>检查范围</view>
					<view>共 {{newData.subjectNum}} 间实验室</view>
				</view>
				<view class="content-li">
					<view>检查组织</view>
					<view>{{newData.checkGroupName}}</view>
				</view>
				<view class="content-li-tow" v-if="newData.checkDemand">
					<view>检查要求</view>
					<view>{{newData.checkDemand}}</view>
				</view>
			</view>
			<view class="small-title" v-if="newData.uploadDtoList[0]" @click="attachmentClick(newData.uploadDtoList)">
				<view>材料附件</view>
				<view>
					<text>{{newData.uploadDtoList.length}}个</text>
					<img src="@/pages_safetyCheck/images/icon_wd_gd@1x.png">
				</view>
			</view>
			<view class="list" v-for="(item,index) in newData.checkPlanSetDtoList">
				<view class="subscript">{{index+1}}</view>
				<view class="list-li">
					<view>{{item.checkName}}</view>
					<view>进度 {{item.checkSetProgress}} %</view>
				</view>
				<view class="list-li">
					<view>检查开始日期</view>
					<view>{{item.checkStartTime}}</view>
				</view>
				<view class="list-li">
					<view>整改期限</view>
					<view class="rectify-term">
						<text class="rectify-term-l" v-if="item.overdueUnrectify==1">逾期未完成整改关闭实验室</text>
						<text class="rectify-term-c" v-if="item.overdueUnrectify==1">丨</text>
						<text class="rectify-term-r">{{item.rectifyDeadline}}</text>
					</view>
				</view>
				<view class="list-li">
					<view>检查依据</view>
					<view>{{item.checkBasisIds == 0?'全部检查项目':item.checkBasisName}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

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

		},
		data() {
			return {
				baseUrl: config.base_url,
				pageType: false,
				optionData: {},
				newData: {},
			}
		},
		onLoad(option) {
			let optionData = JSON.parse(decodeURIComponent(option.infoData))
			this.$set(this, 'optionData', optionData);
		},
		onShow() {

		},
		mounted() {
			this.securityAppCheckPlanFindCheckPlan();
		},
		methods: {
			//材料附件跳转
			attachmentClick(row) {
				let infoData = row;
				uni.navigateTo({
					url: '/pages_safetyCheck/views/materialAttachments?infoData=' + encodeURIComponent(JSON
						.stringify(
							infoData))
				});
			},
			async securityAppCheckPlanFindCheckPlan() {
				let self = this;
				const {
					data
				} = await securityAppCheckPlanFindCheckPlan({
					planId: this.optionData.planId
				});
				if (data.code == 200) {
					this.$set(this, 'newData', data.data);
					this.$set(this, 'pageType', true);
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.planDetail {
		height: 100%;
		display flex;
		box-sizing: border-box;
		padding: 20rpx 0;
		overflow: hidden;

		.info-max-box {
			padding: 0 30rpx;
			overflow-y: scroll;

			.title {
				width: 689rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;

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

				.title-b {
					display: flex;
					justify-content: flex-start;
					margin-top: 16rpx;

					>view {
						width: 130rpx;
						height: 50rpx;
						background: rgba(1, 131, 250, 0.2);
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-size: 24rpx;
						color: #0183FA;
						line-height: 50rpx;
						text-align: center;
						margin-right: 14rpx;
					}
				}
			}

			.box {
				width: 689rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 20rpx;
				overflow: hidden;

				.content-li:nth-child(1) {
					border-top: none;
				}

				.content-li {
					height: 80rpx;
					border-top: 1rpx solid #E0E0E0;
					display: flex;
					justify-content: space-between;
					padding: 0 30rpx;
					box-sizing: border-box;

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

					>view:nth-of-type(2) {
						font-size: 30rpx;
						color: #666666;
						line-height: 80rpx;
						text-align: right;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.content-li-tow {
					padding: 0 30rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;

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

					>view:nth-of-type(2) {
						word-break: break-all;
						padding: 20rpx;
						box-sizing: border-box;
						width: 630rpx;
						min-height: 160rpx;
						background: #F5F5F5;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						font-size: 28rpx;
						color: #666666;
						line-height: 39rpx;
						text-align: left;
					}
				}
			}

			.small-title {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

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

				>view:nth-of-type(2) {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					>text {
						font-size: 28rpx;
						color: #0183FA;
						line-height: 40rpx;
						text-align: left;
					}

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

			}

			.list {
				width: 690rpx;
				height: 323rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				position: relative;

				.subscript {
					position: absolute;
					left: 0;
					top: 0;
					width: 36rpx;
					height: 36rpx;
					background: #0183FA;
					border-radius: 20rpx 0rpx 20rpx 0rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 36rpx;
					text-align: center;
				}

				.list-li {
					border-bottom: 1rpx solid #E0E0E0;
					display: flex;
					justify-content: space-between;


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

					>view:nth-of-type(2) {
						font-size: 28rpx;
						color: #666666;
						line-height: 80rpx;
						text-align: left;
					}
				}

				.rectify-term {
					.rectify-term-l {
						font-size: 24rpx;
						color: #FF8C00;
						line-height: 34rpx;
						text-align: left;
					}

					.rectify-term-c {
						color: #666666;
					}

					.rectify-term-r {
						font-size: 28rpx;
						color: #666666;
						line-height: 80rpx;
						text-align: left;
					}
				}

				.list-li:last-of-type {
					border: none;
				}
			}

			#color-A {
				color: #FF8C00;
			}

			#color-B {
				color: #0183FA;
			}

			#color-C {
				color: #16B531;
			}
		}
	}
</style>