v3-lab-xcx/pages_safetyExamine/views/patrolPlan/patrolPlanDetail.vue

<!-- 安全检查-发起巡查计划 -->
<template>
  <view class="examine">
	<view class="tabTitle">
		<view class="tabTitle_li" @tap="tabClick(index)"  :key="index" v-for="(item,index) in tabText">
			<view :class="{on:curTab==index}" class="tabTitle_text">{{item}}</view>
		    <view :class="{on:curTab==index}" class="tabTitle_across"></view>
		</view>
	</view>
	<view class="header" v-if="pageType==1">
		<view class="line"></view>
		<view class="tabTitle_tow">
			<view class="tabTitle_tow_li" @tap="tabClickTow(index)"  :key="index" v-for="(item,index) in tabTextTow">
				<view :class="{on:curTabTow==index}" class="tabTitle_tow_text">{{item}}</view>
			    <view :class="{on:curTabTow==index}" class="tabTitle_tow_across"></view>
			</view>
		</view>
		<view class="lab_title">
			<picker @change="collegeChange" :value="collegeIndex" :range="collegeArray" class="lab_title_l">
				<view class="lab_title_l_n">
					<view>{{collegeArray[collegeIndex]}}</view>
					<img src="@/pages_safetyExamine/images/icon_06.png">
				</view>
			</picker>
			<view class="lab_title_r">
				<view class="lab_title_r_btn" @click="searchBtn">
					<img src="@/pages_safetyExamine/images/icon_aqjc_ss.png"/>
				</view>
				<input type="text" v-model="getData.name" placeholder="请输入实验室名称" maxlength="50" placeholder-style="color: #CCCCCC;font-size:26rpx;">
			</view>
		</view>
	</view>

	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view v-if="pageType==0" style="padding: 0 30rpx;box-sizing: border-box;">
			<view class="delay_inspect" >
				<view class="delay_inspect_l" v-if="inspectState==0">待检查实验室:<text>22间</text></view>
				<view class="delay_inspect_r" v-if="inspectState==0">未开始</view>
				<view class="delay_inspect_l" v-if="inspectState==1">检查进度:<text>待检查2/检查中2/已检查1</text></view>
				<view class="delay_inspect_r_tow" v-if="inspectState==1">进行中</view>
			</view>
			<view class="basics">
				<view class="basics_li">
					<text>计划标题：</text>
					<text>2023年度4月份安全检查</text>
				</view>
				<view class="basics_li">
					<text>检查类型：</text>
					<text>校院巡查</text>
				</view>
				<view class="basics_li">
					<text>检查周期：</text>
					<text>2023-04-01至2023-04-01</text>
				</view>
				<view class="basics_li" style="border:none;">
					<text>检查范围：</text>
					<text>全校</text>
				</view>
				<view class="scope_text">已选择<text>{{form.inspectScope.length}}</text>个学院，共<text>0</text>间实验室</view>
			</view>

			<view class="attachment">
				<view class="attachment_t">
					<text>材料附件</text>
					<text>点击文件标题查看</text>
				</view>
				<view class="attachment_li">
					<img src="@/pages_safetyExamine/images/icon_djc_wj.png"/>
					<text>文件标题文件标题</text>
					<img class="attachment_li_del" src="@/pages_safetyExamine/images/icon_fjgk_sc.png"/>
				</view>
			</view>
			<view class="patrol_group">
				<view class="patrol">
					<view class="patrol_l">巡查组:</view>
					<view class="patrol_r">校级巡查组</view>
				</view>
				<view class="list">
					<view class="list_title"><img src="@/pages_safetyExamine/images/icon_jcjh_cy.png">成员</view>
					<view class="list_header"><text>工号</text><text>姓名</text></view>
					<view class="list_li"><text>12345678</text><text>刘洋</text></view>
					<view class="list_li"><text>12345678</text><text>刘洋</text></view>
					<view class="list_li"><text>12345678</text><text>刘洋</text></view>
					<view class="list_bottom">无数据</view>
				</view>
			</view>
		</view>
		<view v-if="pageType==1">
			<view class="list_three">
				<view class="list_three_li" v-for="(item,index) in  dataList" :key="index">
					<view class="list_three_li_t">
						<view class="list_three_li_t_l">
							<img v-if="item.checkRange==1" src="@/pages_safetyExamine/images/icon_xyxc_qx.png"/>
							<img v-if="item.checkRange==2" src="@/pages_safetyExamine/images/icon_xyxc_xy.png"/>
							<img v-if="item.checkRange==3" src="@/pages_safetyExamine/images/icon_xyxc_sys.png"/>
							<text></text>
						</view>
						<view class="list_three_li_t_c">实验室名称-房间号</view>
						<view class="list_three_li_t_c2">已逾期</view>
						<view class="list_three_li_t_r"></view>
					</view>
					<view class="list_three_li_m">
						<view class="list_three_li_m_t">计划标题计划标题计划标题计划标题计划标题计划...</view>
						<view class="list_three_li_m_b">
							<text class="blue_color">未开始</text>
							<text>校院巡查</text>
							<text>环境与测绘学院</text>
						</view>
					</view>
					<view class="list_three_li_b">
						<img src="@/pages_safetyExamine/images/icon_djcsys.png"/>
						<text>整改进度：</text>
						<text>待检查22/待复核1/已完成/暂无法整改</text>
					</view>
				</view>
			</view>
		</view>


	</scroll-view>
  </view>

</template>

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

  },
  data() {
    return {
		pageType:0,
		//列表请求参数
		getData:{
		 page:1,
		 pageSize:20,
		},
		inspectState:0,//检查状态 0 未开始 1进行中
		tabText:['检查计划','检查管理'],
		curTab:0,
		tabTextTow:['全部','未开始','进行中','已结束'],
		curTabTow:0,
		form:{
			name:'',
			type:'校院巡查',
			startTime:'',
			endTime:'',
			inspectScope:[],
			tiemQuickList:[],
			scopeIndex:'',
			seleteListLab:[],
			patrolIndex:'',
			seleteListMember:[],
		},
		collegeIndex :0,
		collegeArray:['选择学院','学院名称1','学院名称2','学院名称3',],
		dataList:[{name:'计划标题计划标题计划标题计划标题',},{name:'计划标题计划标题计划标题计划标题',},{name:'计划标题计划标题计划标题计划标题',},{name:'计划标题计划标题计划标题计划标题',},{name:'计划标题计划标题计划标题计划标题',}],
	}
  },
  onLoad(option) {
	 if(option.form){
		this.form=JSON.parse(decodeURIComponent(option.form));
		console.log(this.form)
	 }
  },
  onShow() {

  },
  mounted(){

  },
  methods: {
		//顶部tab点击
		tabClick(index) {
			this.curTab = index;
			this.pageType = index;
		},
		//顶部tab点击
		tabClickTow(index) {
			this.curTabTow = index;
		},
		//选择学院
		collegeChange(e){
			this.collegeIndex = e.target.value;
			this.dataList=[];
			this.getList();
		},
		//实验室搜索
		searchBtn(){
			this.dataList=[];
			this.getList();
		},
		//滚动事件
		scrollGet(){
			let self=this;
			if(self.total<=self.getData.page){
			    console.log('没有更多数据!')
			}else{
					setTimeout(function(){
						self.getData.page += 1;
						self.getList();
					},1000)

			}
		},
	    handleClick(doType){
		  let self=this;


	    },
		async getList(){
				  let list=[{name:'实验室名称-房间号',type:false,id:4},{name:'实验室名称-房间号',type:false,id:5}]
				  this.total=5;
				  this.dataList=[...this.dataList,...list]


		 //    let self = this;
		 //    let obj = {
		 //        page:this.getData.page,
		 //        pageSize:this.getData.pageSize,
		 //    };
		 //    const {data} = await groupList(obj);
		 //    if(data.code==200){
					 //  this.total=data.total;
					 //  this.dataList=[...this.dataList,...data.data]
				  // }
		},

  }
}
</script>

<style lang="stylus" scoped>
.examine{
	height:100%;
	display flex;
	// padding: 0 30rpx;
	// box-sizing: border-box;
	padding-bottom: 30rpx;
	box-sizing: border-box;
	.blue_color{
		color: #0183FA;
		border: 1rpx solid #0183FA;
	}
	.red_color{
		color: #FF4545;
		border: 1rpx solid #FF4545;
	}
	.green_color{
		color: #1FA50D;
		border: 1rpx solid #1FA50D;
	}
	/* 切换按钮 */
	.tabTitle{
		width:100%;
		height: 100rpx;
		background: #fff;
		display flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 100;
		box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0,0,0,0.16);
		.tabTitle_li{
			position: relative;
			width:372rpx;
			text-align center;
			.tabTitle_text{
				display: inline-block;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 46rpx;
				position: relative;
				>text{
					position:absolute;
					min-width: 30rpx;
					min-height: 30rpx;
					border-radius:54%;
					background: #E80000;
					font-size: 18rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 30rpx;
					margin-left: 6rpx;
					padding:2rpx;
					box-sizing: border-box;
				}
				&.on{
					color:#0183FA;
				}
			}
			.tabTitle_across{
				width: 50rpx;
				height: 4rpx;
				background: #0183FA;
				border-radius: 2rpx;
				margin-left 162rpx;
				display none;
				&.on{
					display block;
				}
			}

		}
		.tabTitle_li:nth-of-type(1)::after{
			content: '';
			position: absolute;
			top: 0rpx;
			right:  0rpx;
			width: 1rpx;
			height: 50rpx;
			background: #E0E0E0;
		}
	}
	.info-max-box{
		flex: 1;
		overflow: scroll;

	}
	/* 检查计划---------------------------------------------------------------------------------- */
	.delay_inspect{
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		.delay_inspect_l{
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 100rpx;
			>text{
				color: #0183FA;
			}
		}
		.delay_inspect_r{
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #0183FA;
			line-height: 40rpx;
			width: 120rpx;
			height: 40rpx;
			border-radius: 6rpx;
			text-align: center;
			border: 1rpx solid #0183FA;
		}
		.delay_inspect_r_tow{
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FF4545;
			line-height: 40rpx;
			width: 120rpx;
			height: 40rpx;
			border-radius: 6rpx;
			text-align: center;
			border: 1rpx solid rgba(255,69,69,0.898);
		}
	}

	.basics{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 30rpx 30rpx 32rpx;
		box-sizing: border-box;
		.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;
			}
		}
		.scope_text{
			width: 100%;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
			text-align: right;
			>text{
				color: #0183FA;
			}
		}
	}
	.attachment{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		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;
			}
		}
	}
	.patrol_group{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 40rpx 30rpx 64rpx;
		box-sizing: border-box;
		.patrol{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 26rpx;
			.patrol_l{
				width: 146rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 42rpx;
				text-align: left;
			}
			.patrol_r{
				flex: 1;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				text-align: right;
			}
		}
		.list{
			margin-top: 42rpx;
			.list_title{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 80rpx;
				background: #F5F5F5;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				>img{
					width: 30rpx;
					height: 30rpx;
					margin: 0 20rpx;
				}
			}
			.list_header{
				display: flex;
				justify-content: flex-start;
				>text{
					flex: 1;
					height: 80rpx;
					background: #F5F5F5;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
					text-align: center;
					border: 1rpx solid #E0E0E0;
				}
				>text:nth-of-type(1){
					border-right: none;
				}
			}
			.list_li{
				display: flex;
				justify-content: flex-start;
				>text{
					flex: 1;
					height: 80rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
					text-align: center;
					border: 1rpx solid #E0E0E0;
				}
				>text:nth-of-type(1){
					border-right: none;
					border-top: none;
				}
				>text:nth-of-type(2){
					border-top: none;
				}
			}
			.list_bottom{
				flex: 1;
				height: 80rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 80rpx;
				text-align: center;
				border: 1rpx solid #E0E0E0;
				border-top: none;
			}
		}
	}
	/* 检查管理----------------------------------------------------------------------------------- */
	/* 切换按钮 */
	.header{
		width:100%;
		position: fixed;
		top: 100rpx;
		z-index: 100;
		.line{
			width: 100%;
			height: 20rpx;
			background: #F5F5F5;
		}
		.tabTitle_tow{
			width:100%;
			height: 100rpx;
			background: #fff;
			display flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #E0E0E0;
			.tabTitle_tow_li{
				position: relative;
				width:146rpx;
				text-align center;
				.tabTitle_tow_text{
					display: inline-block;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 46rpx;
					position: relative;
					&.on{
						color:#0183FA;
					}
				}
				.tabTitle_tow_across{
					width: 50rpx;
					height: 4rpx;
					background: #0183FA;
					border-radius: 2rpx;
					margin-left: 46rpx;
					display none;
					&.on{
						display block;
					}
				}

			}
		}
		.lab_title{
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;

			.lab_title_l{
				width: 250rpx;
				height: 60rpx;
				margin-right: 20rpx;
				.lab_title_l_n{
					width: 250rpx;
					height: 60rpx;
					border-radius: 10rpx;
					border: 1rpx solid #E0E0E0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					>view{
						flex:1;
						line-height:60rpx;
						margin-left:20rpx;
						color: #999999;
						font-size:28rpx;
					}
					>img{
						width: 14rpx;
						height: 8rpx;
						margin-right: 30rpx;
					}
				}
			}
			.lab_title_r{
				width: 420rpx;
				height: 60rpx;
				position:relative;
				border-radius: 10rpx;
				border: 1rpx solid #E0E0E0;
				.lab_title_r_btn{
					width: 60rpx;
					height: 60rpx
					position: absolute;
					top: 0rpx;
					left:0rpx;
					>img{
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						top: 20rpx;
						left: 24rpx;
					}
				}
				>input{
					width: 360rpx;
					height: 60rpx;
					position: absolute;
					top: 0rpx;
					left: 60rpx;
				}
			}
		}

	}
	.list_three{
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 340rpx;
		.list_three_li{
			position: relative;
			width: 690rpx;
			height: 360rpx;
			background: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			.list_three_li_t{
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				.list_three_li_t_l{
					>img{
						width: 70rpx;
						height: 70rpx;
					}
					>text{
						position: absolute;
						left: -15rpx;
						top: 76rpx;
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						background: #F5F5F5;
						border-radius: 15rpx;
					}
				}
				.list_three_li_t_c{
					width: 630rpx;
					height: 110rpx;
					position: absolute;
					left: 30rpx;
					top: 0;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 110rpx;
					border-bottom: 1rpx dashed #D8D8D8;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					padding-right: 60rpx;
					box-sizing: border-box;
				}
				.list_three_li_t_c2{
					position: absolute;
					right: 20rpx;
					top: 38rpx;
					width: 120rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #FF5757;
					line-height: 40rpx;
					border: 1rpx solid #FF5757;
					border-radius: 6rpx;
					text-align: center;
				}
				.list_three_li_t_r{
					position: absolute;
					right:-15rpx;
					top: 76rpx;
					width: 30rpx;
					height: 30rpx;
					background:#F5F5F5;
					border-radius: 15rpx;
				}
			}
			.list_three_li_m{
				position: absolute;
				top: 110rpx;
				left: 0;
				width: 690rpx;
				height: 158rpx;
				padding-left: 30rpx;
				box-sizing: border-box;
				.list_three_li_m_t{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
					margin-top:22rpx;
				}
				.list_three_li_m_b{
					margin-top:26rpx;
					>text:nth-of-type(1){
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						line-height: 40rpx;
						border-radius: 6rpx;
						padding: 0 20rpx;
						margin-right: 14rpx;
					}
					>text:nth-of-type(2){
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #0183FA;
						line-height: 40rpx;
						padding: 0 8rpx;
						border-radius: 6rpx;
						background: rgba(1,131,250,0.1);
						margin-right: 24rpx;
					}
					>text:nth-of-type(3){
						display: inline-block;
						width: 380rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 26rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;

					}
				}
			}
			.list_three_li_b{
				height: 80rpx;
				position: absolute;
				top: 278rpx;
				left: 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-top: 1rpx solid #E0E0E0;
				>img{
					width: 24rpx;
					height: 30rpx;
					margin-right: 26rpx;
					margin-left: 30rpx;
				}
				>text:nth-of-type(1){
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
				}
				>text:nth-of-type(2){
					flex:1;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #0183FA;
					line-height: 28rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
	.bottom_btn{
		position: fixed;
		bottom: 26rpx;
		left: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 90rpx;
		width: 690rpx;
		height: 90rpx;
		background: #0183FA;
		border-radius: 20rpx;
		text-align: center;

	}
}
</style>