zc

pages_safetyCheck/views/inspectManage/inspectList.vue

@@ -20,23 +20,51 @@
 					@click="tabClickTow(index)">{{item}}</view>
 			</view>
 			<view>
+				<view class="dept-max-bix-box">
+					<div class="dept-check-box">
+						<picker class="dept-picker" @change="deptChange" :value="deptData.index" :range="deptData.list" range-key="deptName">
+							<view>
+								<view class="dept-check-min-box" :class="deptData.name?'check-dept':'no-check-dept'">
+								{{deptData.name?deptData.name:'选择二级单位'}}
+								</view>
+							</view>
+						</picker>
+						<view class="triangle"></view>
+					</div>
+					<view class="level-r" v-if="tabIndexTow == 0">
+						<view :class="manageStatus == 0 ?'level-r-B':'level-r-A'" @click="checkFlagChange(0)">未检查</view>
+						<view :class="manageStatus == 1 ?'level-r-B':'level-r-A'" @click="checkFlagChange(1)">检查中</view>
+						<view :class="manageStatus == 2 ?'level-r-B':'level-r-A'" @click="checkFlagChange(2)">已检查</view>
+					</view>
+				</view>
 				<view class="level">
 					<view class="level-li"
 						:style="levelId==item.levelId?'border:1rpx solid '+item.levelColor+';background:'+item.levelColorTow+';':'levelColor-B'"
 						@click="levelClick(item.levelId)" v-for="(item,index) in levelList">{{item.levelName}}</view>
-					<view class="level-r" v-if="tabIndexTow == 0">
-						<view :class="manageStatus == 0 ?'level-r-B':'level-r-A'" @click="checkFlagChange(0)">未完成</view>
-						<view :class="manageStatus == 2 ?'level-r-B':'level-r-A'" @click="checkFlagChange(2)">已完成</view>
+				</view>
+				<!-- 搜索 -->
+				<view class="header">
+					<view class="search">
+						<view class="search-r">
+							<img :src="imagesUrl('commonality/icon_aqjc_ss.png')" @click="searchBtn">
+							<input type="text" v-model="searchValue" placeholder="实验室名称或房间号" name="search"
+								@confirm='searchBtn' confirm-type='search' maxlength="50"
+								placeholder-style="color: #333333;font-size:24rpx;">
+							<!-- <view v-if="searchValue" class="left-icons" @click="delSearchValue()">
+								<uni-icons color="#0183FA" type="clear" size="20"></uni-icons>
+							</view> -->
+						</view>
+						<view class="cancel" @click="cancelBtn()">重置</view>
 					</view>
 				</view>
-				<view class="srearch">
+				<!-- <view class="srearch">
 					<view class="srearch-n" @click="srearchClick()">
 						<view class="srearch-l">
 							<img :src="imagesUrl('commonality/icon_aqjc_ss.png')">
 						</view>
-						<input class="srearch-c" type="text" v-model="searchValue" placeholder="搜索实验室" disabled />
+						<input class="srearch-c" type="text" v-model="searchValue" placeholder="实验室名称或房间号"/>
 					</view>
-				</view>
+				</view> -->
 
 			</view>
 			<view class="list">
@@ -62,8 +90,8 @@
 								<img :src="imagesUrl('commonality/icon_sy_zc@1x.png')">
 								{{item.deptName}}
 							</view>
-							<view :class="item.manageStatus==2?'finished':'notFinished'" v-if="tabIndexTow==0">
-								{{item.manageStatus==2?'已完成':'未完成'}}
+							<view :class="item.manageStatus==0?'notFinished':(item.manageStatus==1?'finished-b':(item.manageStatus==2?'finished':''))" v-if="tabIndexTow==0">
+								{{item.manageStatus==0?'未检查':(item.manageStatus==1?'检查中':(item.manageStatus==2?'已检查':''))}}
 							</view>
 						</view>
 					</view>
@@ -158,6 +186,15 @@
 			}, 100);
 		},
 		methods: {
+			//实验室搜索
+			searchBtn() {
+				this.$set(this.queryParams, 'page', 1);
+				this.$set(this, 'dataList', []);
+				this.$set(this, 'total', 0);
+				this.$nextTick(() => {
+					this.getList();
+				})
+			},
 			//滚动事件
 			scrollGet() {
 				let self = this;
@@ -200,7 +237,7 @@
 					id: null,
 					name: null
 				});
-				this.$set(this, 'searchValue', null);
+				this.$set(this, 'searchValue', '');
 				this.$set(this, 'levelId', null);
 				this.$set(this, 'getDataType', false);
 				this.$set(this, 'dataList', []);
@@ -210,6 +247,24 @@
 					this.getList();
 				})
 			},
+			//重置按钮
+			cancelBtn(){
+				this.$set(this.queryParams, 'page', 1);
+				this.$set(this, 'deptData', {
+					index: null,
+					list: this.deptData.list,
+					id: null,
+					name: null
+				});
+				this.$set(this, 'searchValue', '');
+				this.$set(this, 'levelId', null);
+				this.$set(this, 'getDataType', false);
+				this.$set(this, 'dataList', []);
+				this.$set(this, 'total', 0);
+				this.$nextTick(() => {
+					this.getList();
+				})
+			},
 			//实验室搜索框跳转
 			srearchClick() {
 				let infoData = this.optionData;
@@ -521,6 +576,16 @@
 				this.$set(this.queryParams, 'page', 1);
 				this.getList();
 			},
+			//清除输入框内容
+			delSearchValue() {
+				if (this.searchValue) {
+					this.$set(this, 'searchValue', '');
+					this.$set(this, 'dataList', []);
+					this.$nextTick(() => {
+						this.getList();
+					})
+				}
+			},
 			//检查任务
 			async getList() {
 				let self = this;
@@ -732,125 +797,190 @@
 			}
 		}
 
-		.srearch {
-			width: 750rpx;
-			height: 100rpx;
-			background: #FFFFFF;
-			border-radius: 0rpx 0rpx 0rpx 0rpx;
-			overflow: hidden;
-			display: flex;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: 0 30rpx;
-			box-sizing: border-box;
-
-			.college {
-				width: 200rpx;
-				height: 60rpx;
-				border-radius: 50rpx 50rpx 50rpx 50rpx;
-				border: 2rpx solid #E0E0E0;
-				font-size: 24rpx;
-				color: #333333;
-				line-height: 60rpx;
-				text-align: left;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				padding: 0 26rpx;
-				box-sizing: border-box;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
+		.header {
+			width: 100%;
+			z-index: 100;
+			background: #fff;
 
-				>view {
-					width: 124rpx;
-					display: block;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-
-				>img {
-					display: block;
-					width: 24rpx;
-					height: 12rpx;
-				}
-			}
-
-			.srearch-n {
-				width: 690rpx;
-				height: 60rpx;
-				border-radius: 50rpx 50rpx 50rpx 50rpx;
-				border: 2rpx solid #E0E0E0;
+			.search {
+				width: 750rpx;
+				height: 100rpx;
+				background: #FFFFFF;
+				border-radius: 0rpx 0rpx 0rpx 0rpx;
 				display: flex;
-				justify-content: flex-start;
 				align-items: center;
 
-				.srearch-l {
-					width: 60rpx;
+				.search-r {
+					margin-left:30rpx;
+					width: 560rpx;
 					height: 60rpx;
-
-					>img {
-						width: 20rpx;
-						height: 20rpx;
-						margin: 20rpx 0 0 26rpx;
-					}
-				}
-
-				.srearch-c {
-					flex: 1;
-					height: 58rpx;
+					background: #FFFFFF;
+					border-radius: 50rpx 50rpx 50rpx 50rpx;
+					border: 1rpx solid #E0E0E0;
 					font-size: 24rpx;
 					color: #999999;
-					line-height: 30rpx;
+					line-height: 60rpx;
 					text-align: left;
-				}
-
-				.srearch-r {
-					width: 90rpx;
-					height: 60rpx;
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+					padding: 0 20rpx;
+					box-sizing: border-box;
 
 					>img {
 						width: 30rpx;
 						height: 30rpx;
-						margin: 14rpx 22rpx 0 30rpx;
+						margin-right: 20rpx;
 					}
 
-
+					>input {
+						width: 500rpx;
+					}
 				}
 			}
-		}
 
-		.level {
+			.cancel {
+				width:110rpx;
+				height:60rpx;
+				line-height:60rpx;
+				font-size: 28rpx;
+				color: #0183FA;
+				text-align: center;
+				margin-left: 18rpx;
+			}
+		}
+		// .srearch {
+		// 	width: 750rpx;
+		// 	height: 100rpx;
+		// 	background: #FFFFFF;
+		// 	border-radius: 0rpx 0rpx 0rpx 0rpx;
+		// 	overflow: hidden;
+		// 	display: flex;
+		// 	display: flex;
+		// 	justify-content: space-between;
+		// 	align-items: center;
+		// 	padding: 0 30rpx;
+		// 	box-sizing: border-box;
+
+		// 	.college {
+		// 		width: 200rpx;
+		// 		height: 60rpx;
+		// 		border-radius: 50rpx 50rpx 50rpx 50rpx;
+		// 		border: 2rpx solid #E0E0E0;
+		// 		font-size: 24rpx;
+		// 		color: #333333;
+		// 		line-height: 60rpx;
+		// 		text-align: left;
+		// 		display: flex;
+		// 		justify-content: space-between;
+		// 		align-items: center;
+		// 		padding: 0 26rpx;
+		// 		box-sizing: border-box;
+		// 		overflow: hidden;
+		// 		text-overflow: ellipsis;
+		// 		white-space: nowrap;
+
+		// 		>view {
+		// 			width: 124rpx;
+		// 			display: block;
+		// 			overflow: hidden;
+		// 			text-overflow: ellipsis;
+		// 			white-space: nowrap;
+		// 		}
+
+		// 		>img {
+		// 			display: block;
+		// 			width: 24rpx;
+		// 			height: 12rpx;
+		// 		}
+		// 	}
+
+		// 	.srearch-n {
+		// 		width: 690rpx;
+		// 		height: 60rpx;
+		// 		border-radius: 50rpx 50rpx 50rpx 50rpx;
+		// 		border: 2rpx solid #E0E0E0;
+		// 		display: flex;
+		// 		justify-content: flex-start;
+		// 		align-items: center;
+
+		// 		.srearch-l {
+		// 			width: 60rpx;
+		// 			height: 60rpx;
+
+		// 			>img {
+		// 				width: 20rpx;
+		// 				height: 20rpx;
+		// 				margin: 20rpx 0 0 26rpx;
+		// 			}
+		// 		}
+
+		// 		.srearch-c {
+		// 			flex: 1;
+		// 			height: 58rpx;
+		// 			font-size: 24rpx;
+		// 			color: #999999;
+		// 			line-height: 30rpx;
+		// 			text-align: left;
+		// 		}
+
+		// 		.srearch-r {
+		// 			width: 90rpx;
+		// 			height: 60rpx;
+
+		// 			>img {
+		// 				width: 30rpx;
+		// 				height: 30rpx;
+		// 				margin: 14rpx 22rpx 0 30rpx;
+		// 			}
+
+
+		// 		}
+		// 	}
+		// }
+		.dept-max-bix-box{
+			margin-top: 20rpx;
 			width: 750rpx;
-			height: 80rpx;
+			height: 90rpx;
 			background: #FFFFFF;
 			display: flex;
-			justify-content: flex-start;
-			padding: 30rpx 30rpx 0;
-			box-sizing: border-box;
-			margin-top: 20rpx;
-
-			.level-li {
-				width: 100rpx;
-				height: 50rpx;
-				background: #F5F5F5;
-				border-radius: 50rpx 50rpx 50rpx 50rpx;
-				border: 2rpx solid #E0E0E0;
-				margin-right: 10rpx;
-				font-size: 24rpx;
-				color: #333333;
-				line-height: 50rpx;
-				text-align: center;
+			.dept-check-box{
+				flex:1;
+				line-height:60rpx;
+				height:60rpx;
+				margin:20rpx 20rpx 0 30rpx;
+				border:1rpx solid #E0E0E0;
+				border-radius: 50rpx;
+				display: flex;
+				.dept-picker{
+					flex:1;
+					.dept-check-min-box{
+						font-size:24rpx;
+						padding:0 30rpx;
+						overflow: hidden;
+					}
+					.check-dept{
+						color:#333;
+					}
+					.no-check-dept{
+						color:#999;
+					}	
+				}
+				.triangle {
+					margin:25rpx 20rpx 0 20rpx;
+				  width: 0;
+				  height: 0;
+				  border-left: 10rpx solid transparent;
+				  border-right: 10rpx solid transparent;
+				  border-top: 15rpx solid #999; /* 可以根据需要调整颜色 */
+				}
 			}
-
 			.level-r {
 				display: flex;
 				justify-content: flex-start;
 				align-items: center;
-				margin: 0 20rpx 0 30rpx;
-
+				margin: 18rpx 20rpx 0 0;
+			
 				.level-r-A {
 					border-radius: 50rpx 50rpx 50rpx 50rpx;
 					border: 1rpx solid #E0E0E0;
@@ -864,7 +994,7 @@
 					text-align: center;
 					margin-right: 10rpx;
 				}
-
+			
 				.level-r-B {
 					border-radius: 50rpx 50rpx 50rpx 50rpx;
 					border: 1rpx solid #0183FA;
@@ -879,18 +1009,40 @@
 					margin-right: 10rpx;
 				}
 			}
-
+			
 			#levelColor-A {
 				background: rgba(255, 0, 0, 0.2);
 				color: #FF0000;
 				border: 1rpx solid #FF0000;
 			}
-
+			
 			#levelColor-B {
 				background: #F5F5F5;
 				color: #333333;
 				border: 2rpx solid #E0E0E0;
 			}
+		}
+		.level {
+			width: 750rpx;
+			height: 70rpx;
+			background: #FFFFFF;
+			display: flex;
+			justify-content: flex-start;
+			padding: 15rpx 30rpx 0;
+			box-sizing: border-box;
+
+			.level-li {
+				width: 100rpx;
+				height: 50rpx;
+				background: #F5F5F5;
+				border-radius: 50rpx 50rpx 50rpx 50rpx;
+				border: 2rpx solid #E0E0E0;
+				margin-right: 10rpx;
+				font-size: 24rpx;
+				color: #333333;
+				line-height: 50rpx;
+				text-align: center;
+			}
 
 		}
 
@@ -1016,6 +1168,16 @@
 							line-height: 40rpx;
 							text-align: center;
 						}
+						.finished-b {
+							width: 110rpx;
+							height: 40rpx;
+							background: rgba(255, 182, 0, 0.2);
+							border-radius: 20rpx 20rpx 20rpx 20rpx;
+							font-size: 24rpx;
+							color: #ffb600;
+							line-height: 40rpx;
+							text-align: center;
+						}
 
 						.notFinished {
 							width: 110rpx;