FE-V2-XCX/pages/pages_safetyExamine/examineManage/examineDetail.vue

<!-- 安全检查-检查详情 -->
<template>
  <view class="examine">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view class="basics">
			<view class="basics_li">
				<text>学院：</text>
				<text>环测学院</text>
			</view>
			<view class="basics_li">
				<text>实验室：</text>
				<text>实验室名称-房间号</text>	
			</view>
			<view class="basics_li">
				<text>楼栋：</text>
				<text>楼栋名称</text>
			</view>
			<view class="basics_li">
				<text>检查类型：</text>
				<text>校级巡查</text>
			</view>
			<view class="basics_li">
				<text>检查范围：</text>
				<text>全校</text>
			</view>
			<view class="basics_li" style="border:none;">
				<text>检查计划：</text>
				<text>2023年3月份校级督导检查</text>
			</view>
		</view>
		<view class="attachment">
			<view class="attachment_t">
				<text>材料附件</text>
				<text>点击文件标题查看</text>
			</view>
			<view class="attachment_li">
				<img src="@/images/Version3.3.3/icon_djc_wj.png"/>
				<text>文件标题文件标题</text>
				<img class="attachment_li_del" src="@/images/Version3.3.3/icon_fjgk_sc.png"/>
			</view>
		</view>
		<view class="basics">
			<view class="basics_li">
				<text>检查结果：</text>
				<text>不符合</text>
			</view>
			<view class="basics_li">
				<text>整改期限：</text>
				<text>2023-04-06</text>	
			</view>
			<view class="basics_li">
				<text>整改通知：</text>
				<text  style="color: #0183FA;">整改告知书</text>
			</view>
			<view class="basics_li">
				<text>检查者：</text>
				<text>管理员</text>
			</view>
			<view class="basics_li" style="border: none;">
				<text>检查时间：</text>
				<text>2023-04-06</text>
			</view>
		</view>
		<view class="inconformity" @click="inconformityFun()">不符合项<img v-if="inconformityStatus" src="@/images/Version3.3.3/icon_bfhx_xq.png"/><img v-if="!inconformityStatus" src="@/images/Version3.3.3/icon_bfhx_sq.png"/></view>
		<view v-for="(item,index) in dangerList">
			<view class="danger">
				<view class="sort">{{item.sort}}</view>
				<view class="grade" :style="item.switch?'border-bottom: 1rpx solid #D8D8D8;':'border:none;'">
					<text>第一项隐患</text>
					<text style="color: #0183FA;">待整改 >></text>
				</view>
				<view v-if="item.switch">
					<view class="grade">
						<text>隐患等级：</text>
						<text>一般隐患</text>
					</view>
					<view class="project">
						<view class="project_t">检查项目：</view>
						<view class="project_b">1检查项目名称—1.1检查项目名称名称名称名称—1.1.1检查项目名称名称名称名称名称名称名称名称</view>
						<view class="project_b2">此检查项在当前实验室累计出现9次隐患</view>
					</view>
					<view class="project">
						<view class="project_t">检查要点：</view>
						<view class="project_b">检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点</view>
					</view>
					<view class="project">
						<view class="project_t">隐患描述：</view>
						<view class="project_b">检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点检查要点</view>
					</view>
					<view class="picture">
						<view class="picture_t">隐患照片</view>
						<view class="picture_b">
							<img  src="@/images/Version3.3.3/icon_xyxc_syszc.png"/>
							<img  src="@/images/Version3.3.3/icon_xyxc_syszc.png"/>
							<img  src="@/images/Version3.3.3/icon_xyxc_syszc.png"/>
							<img  src="@/images/Version3.3.3/icon_xyxc_syszc.png"/>
						</view>
					</view>
				</view>
			</view>
			<view class="pack_up" @click="switchFun(item)">{{item.switch?'收起':'展开'}}<img v-if="item.switch" src="@/images/Version3.3.3/icon_06_1.png"/><img v-if="!item.switch" src="@/images/Version3.3.3/icon_06.png"/></view>
		</view>
	</scroll-view>
	<view class="report">整改报告</view>	
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import { } from '@/api/index.js'
export default {
  name: "rectifyList",
  components: {
   
  },
  data() {
    return {
		pageType:0,
		dangerList:[{sort:1,switch:false,},{sort:2,switch:false,},{sort:3,switch:false,},{sort:4,switch:false,}],
		inconformityStatus:false,
	}
  },
  onLoad(option) {
	 if(option.form){
		this.form=JSON.parse(decodeURIComponent(option.form)); 
		console.log(this.form)
	 }
	 if(option.pageType==1){
		  uni.setNavigationBarTitle({
				title:'校院巡查管理'
		  })
	 }else if(option.pageType==2){
		  uni.setNavigationBarTitle({
				title:'实验室自查管理'
		  })
	 }
  },
  onShow() {
	  
  },
  mounted(){
	  
  },
  methods: {
		
		//滚动事件
		scrollGet(){
			
		},
		//隐患项收起展开
	    inconformityFun(){
			this.inconformityStatus=!this.inconformityStatus;
			if(this.inconformityStatus){
				this.dangerList.forEach(function(item){
					item.switch=true;
				})
			}else{
				this.dangerList.forEach(function(item){
					item.switch=false;
				})
			}
		},
		//隐患小项收起展开
		switchFun(item){
			item.switch=!item.switch
		}
	  
  }
}
</script>

<style lang="stylus" scoped>
.examine{
	height:100%;
	display flex;
	.info-max-box{
		flex: 1;
		overflow: scroll;
	}
	.basics{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 30rpx 32rpx;
		box-sizing: border-box;
		margin: 20rpx 30rpx ;
		.basics_li{
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #D8D8D8;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
				width: 140rpx;
			}
			>text:nth-of-type(2){
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				text-align: right;
			}
		}
	}
	.attachment{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;
		padding-bottom: 32rpx;
		box-sizing: border-box;
		.attachment_t{
			border-bottom: 1rpx solid #D8D8D8;
			>text:nth-of-type(1){
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 110rpx;
				margin-left: 28rpx;
			}
			>text:nth-of-type(2){
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 110rpx;
				margin-left: 24rpx;
			}
		}
		.attachment_li{
			height: 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 32rpx;
			>img{
				width: 30rpx;
				height: 26rpx;
				margin-right: 20rpx;
				margin-left: 50rpx;
			}
			>text{
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 40rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.attachment_li_del{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.inconformity{
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 100rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		>img{
			width: 30rpx;
			height: 26rpx;
			margin-left: 20rpx;
		}
	}
	.danger{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 15rpx 30rpx 15rpx;
		box-sizing: border-box;
		margin: 20rpx 30rpx ;
		position: relative;
		.sort{
			width: 40rpx;
			height: 40rpx;
			background: #0183FA;
			border-radius: 20rpx 0rpx 10rpx 0rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			position: absolute;
			left: 0;
			top: 0;
		}
		.danger_title{
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height:80rpx;
			border-bottom: 1rpx solid #D8D8D8;
		}
		.grade{
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #D8D8D8;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
				width: 140rpx;
			}
			>text:nth-of-type(2){
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				text-align: right;
			}
		}
		.project{
			.project_t{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.project_b{
				min-height: 158rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				padding: 20rpx 14rpx;
				box-sizing: border-box;
				background: #F5F5F5;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
			.project_b2{
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 26rpx;
				margin-top: 14rpx;
				text-align: right;
			}
		}
		.picture{
			.picture_t{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.picture_b{
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				>img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin-right: 14rpx;
					margin-bottom: 10rpx;
				}
				>img:nth-of-type(3n+3){
					margin-right: 0rpx;
				}
			}
		}
	}
	.pack_up{
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		>img{
			width: 14rpx;
			height: 8rpx;
			margin-left: 22rpx;
		}
	}
	.report{
		width: 153rpx;
		height: 50rpx;
		background: #0183FA;
		border-radius: 25rpx 0rpx 0rpx 25rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
		position: fixed;
		top: 180rpx;
		right: 0;
		text-align: center;
	}
}
</style>