jinganhandle/pages/detail/detail.vue

<template>
	<view>
		<view class="text-area">
			<text class="top-line"></text>
			<view class="form">
				<view class="select1">
					<picker @change="bindPickerChange" :value="select1" :range="array">
						<view class="uni-input">{{select1==0?'黄码':select1==1?'红码':select1==2?'重点':select1==3?'脱管':'发热'}}</view>
						<image src="../../static/select_img.png" class="select-img"></image>
					</picker>
				</view>
				
				<view class="select2">
					<picker @change="bindPickerChange2" :value="handle_state" :range="handle">
						<view class="uni-input">{{handle_state==1?'已处置':'处置中'}}</view>
						<image src="../../static/select_img.png" class="select-img2"></image>
					</picker>
				</view>
				
				<text class="big" v-show="handle_state==1">
					<text class="bg">
						<span class="line1"></span>
						<span class="line2"></span>
					</text>
					<text class="table_title">
						<span style=" width: 150rpx;margin-left: 10px">姓名</span>
						<span style=" width: 300rpx;margin: 88rpx ">发现/处置时间</span>
						<span style="width: 300rpx;margin-left: 58rpx ">处置单位</span>
					</text>
					
					<view v-for="(item,i) in xinxi" :key="i">
						<!-- <navigator url="./mark?uuid=item.uuid" hover-class="navigator-hover"> -->
							<view class="list" @click="onCLick(item.id)">
								<text style=" width: 75rpx;margin-left: 30rpx; line-height: 88rpx;">{{item.sm_name}}</text>
								<text style=" margin-left: 80rpx;">{{item.sm_time}} \n{{item.handler_time==''||item.handler_time==null?'':item.handler_time}}</text>
								<!-- <text style=" margin-left: 70rpx;">{{item.handler_time==''||item.handler_time==null?'':item.handler_time.slice(0, 10)}} \n &nbsp; {{item.handler_time==''||item.handler_time==null?'暂无时间':item.handler_time.slice(11, 19)}}</text> -->
								<text style=" margin-left: 90rpx; line-height: 88rpx;">{{item.handler_unit}}</text>
							</view>
						<!-- </navigator> -->
						<view class="list-line"></view>
					</view>
					
				</text>
				<!-- 处置中 -->
				<text class="big" v-show="handle_state==0">
					<text class="bg">
						<span class="line1"></span>
						<span class="line2"></span>
					</text>
					<text class="table_title">
						<span style=" width: 150rpx;margin-left: 10px">姓名</span>
						<span style=" width: 300rpx;margin-left: 118rpx ">发现时间</span>
						<span style="width: 300rpx;margin-left: 178rpx ">处置单位</span>
					</text>
					
					<view v-for="(item,i) in xinxi" :key="i">
						<!-- <navigator url="./mark?uuid=item.uuid" hover-class="navigator-hover"> -->
							<view class="list" @click="onCLick(item.id)">
								<text style=" width: 75rpx; margin-left: 30rpx; line-height: 88rpx;">{{item.sm_name}}</text>
								<text style=" margin-left: 80rpx;line-height: 88rpx;">{{item.sm_time}}</text>
								<text style=" margin-left: 90rpx;line-height: 88rpx;">{{item.handler_unit}}</text>
							</view>
						<!-- </navigator> -->
						<view class="list-line"></view>
					</view>
					
				</text>
				
				<text class="foot">
					<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
						:page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, pager, jumper"
						:total="total">
					</el-pagination>
				</text>
			</view>				
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['黄码', '红码', '重点', '脱管', '发热'],
				index: 0,
				handle: [ '处置中','已处置'],
				index2: 0,
				pageSize:10,//每页数量
				ma_color:'',
				handle_state:'',
				ishot:'',
				istoken:'',
				iskey:'',
				select1:'',
				total: 0, //总页数
				cur: 1, //当前页码
				pageSizes: [10],
				pageSize: 10, //每页条数
				xinxi:[],
				lid:'',
				uuid:'',
				ltime:'',
			}
		},
		onLoad(options) {
			this.ma_color=options.sm_color
			this.handle_state=options.handler_state2
			this.ishot=options.ishot
			this.istoken=options.istoken
			this.iskey=options.iskey
			
			// this.select1=ishot==1?'发热':iskey==1?'重点':istoken==1?'脱管':ma_color
			if (this.ishot==1) {
				this.select1=4
			} else if (this.iskey==1) {
				this.select1=2
			} else if (this.istoken==1) {
				this.select1=3
			} else if (this.ma_color!=undefined && this.ma_color=='黄码') {
				this.select1=0
			} else if (this.ma_color!=undefined && this.ma_color=='红码') {
				this.select1=1
			}
			// console.log(this.ma_color)
			// console.log(this.handle_state)
			// console.log(this.ishot)
			// console.log(this.istoken)
			// console.log(this.iskey)
			
			if (this.ma_color!= undefined && this.handle_state!= undefined) {
				this.getHandlePeople()
			}else if (this.ishot!= undefined && this.handle_state!= undefined) {
				this.getHandlePeople2()
			}else if (this.iskey!= undefined && this.handle_state!= undefined) {
				this.getHandlePeople3()
			}else if (this.istoken!= undefined && this.handle_state!= undefined) {
				this.getHandlePeople4()
			}
		},
		methods: {
			onCLick (id) {
				for(var i=0;i<this.xinxi.length;i++){
					if(id===this.xinxi[i].id){
					  this.lid=this.xinxi[i].id
					  this.uuid=this.xinxi[i].uuid
					  this.ltime=this.xinxi[i].sm_time
					}
				  }
				  setTimeout(() => {
				  	uni.navigateTo({
				  		url: "./mark?lid="+this.lid+"&uuid="+this.uuid,
				  	});
				  }, 600);
			},
			
			// 分页
			handleSizeChange1(val) {
				this.pageSize = val;
				if (this.select1 === 0 || this.select1 === 1) {
					this.pageSize = val;
					this.getHandlePeople()
				} else if (this.select1 === 4) {
					this.pageSize = val;
					this.getHandlePeople2()
				} else if (this.select1 === 2) {
					this.pageSize = val;
					this.getHandlePeople3()
				} else if (this.select1 === 3) {
					this.pageSize = val;
					this.getHandlePeople4()
				} 
			},
			handleCurrentChange1(val) {
				this.cur = val;
				if (this.select1 === 0 || this.select1 === 1) {
					this.cur = val;
					this.getHandlePeople()
				} else if (this.select1 === 4) {
					this.cur = val;
					this.getHandlePeople2()
				} else if (this.select1 === 2) {
					this.cur = val;
					this.getHandlePeople3()
				} else if (this.select1 === 3) {
					this.cur = val;
					this.getHandlePeople4()
				} 
			},
						
			//选择框1
			bindPickerChange: function(e) {
				// console.log(e.target.value)
				this.select1 = e.target.value
				if(this.select1==0) {
					this.ma_color='黄码'
					this.getHandlePeople()
				}else if(this.select1==1) {
					this.ma_color='红码'
					this.getHandlePeople()
				}else if(this.select1==2) {
					this.iskey=1
					this.getHandlePeople3()
				}else if(this.select1==3) {
					this.istoken=1
					this.getHandlePeople4()
				}else if(this.select1==4) {
					this.ishot=1
					this.getHandlePeople2()
				}
				
			},
			//选择框2
			bindPickerChange2: function(e) {
				this.handle_state = e.target.value
				this.getHandlePeople()
				this.getHandlePeople2()
				this.getHandlePeople3()
				this.getHandlePeople4()
			},
			
			//根据码色处置人员详情
			getHandlePeople() {
				this.xinxi=[]
				this.$axios.post('/bigData2/mobqueryHandler.action?page='+this.cur+'&rows=' + this.pageSize + '&sm_color=' + this.ma_color + '&handler_state2=' + this.handle_state, {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						for(var i=0; i<res.data.rows.length; i++){
							this.xinxi.push(res.data.rows[i])
						}
						this.total = res.data.total
					})
					.catch(err => {
						console.log(err)
					})
			},
			
			//根据发热处置人员详情
			getHandlePeople2() {
				this.xinxi=[]
				this.$axios.post('/bigData2/mobqueryHandler.action?page='+this.cur+'&rows=' + this.pageSize + '&handler_state2=' + this.handle_state + '&ishot=' + this.ishot, {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						for(var i=0; i<res.data.rows.length; i++){
							this.xinxi.push(res.data.rows[i])
						}
						this.total = res.data.total
					})
					.catch(err => {
						console.log(err)
					})
			},
			
			//根据重点处置人员详情
			getHandlePeople3() {
				this.xinxi=[]
				this.$axios.post('/bigData2/mobqueryHandler.action?page='+this.cur+'&rows=' + this.pageSize + '&handler_state2=' + this.handle_state + '&iskey=' + this.iskey, {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						for(var i=0; i<res.data.rows.length; i++){
							this.xinxi.push(res.data.rows[i])
						}
						this.total = res.data.total
					})
					.catch(err => {
						console.log(err)
					})
			},
			
			//根据脱管处置人员详情
			getHandlePeople4() {
				this.xinxi=[]
				this.$axios.post('/bigData2/mobqueryHandler.action?page='+this.cur+'&rows=' + this.pageSize + '&handler_state2=' + this.handle_state + '&istoken=' + this.istoken, {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						for(var i=0; i<res.data.rows.length; i++){
							this.xinxi.push(res.data.rows[i])
						}
						this.total = res.data.total
					})
					.catch(err => {
						console.log(err)
					})
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.text-area {
		display: flex;
		width: 375px;
	}
	.top-line{
		margin-top: 0rpx;
		margin-left: 0;
		position: absolute;
		width: 100%;
		height: 1rpx;
		background: #CCCCCC;
	}
	.form{
		margin-top: 29rpx;
		display: flex;
		width: 690rpx;
		height: 1457rpx;
	}
	/* 选择器 */
	.select1 picker{
		position: absolute;
		margin-top: 29rpx;
		margin-left: 354rpx;
		width: 180rpx;
		height: 54rpx;
		border: 2rpx solid #B3B3B3;
		border-radius: 27rpx;
		text-align: center;
		line-height: 54rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: bold;
		color: #333333;
		z-index: 1;
	}
	.select-img{
		position: absolute;
		margin-top: -30rpx;
		margin-left: 57rpx;
		width: 15rpx;
		height: 15rpx;
		z-index: 2;
	}
	.select2 picker{
		position: absolute;
		margin-top: 29rpx;
		margin-left: 554rpx;
		width: 166rpx;
		height: 54rpx;
		border: 2rpx solid #B3B3B3;
		border-radius: 27rpx;
		text-align: center;
		line-height: 54rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: bold;
		color: #333333;
		z-index: 1;
	}
	.select-img2{
		position: absolute;
		margin-top: -30rpx;
		margin-left: 57rpx;
		width: 15rpx;
		height: 15rpx;
		z-index: 2;
	}
	
	.big{
		display: flex;
		justify-content: center;
		margin-top: 113rpx;
		margin-left: 29rpx;
		/* text-align: center; */
		width: 692rpx;
		height: 90%;
	}
	.bg{
		display: flex;
		margin-top: 0;
		margin-left: 0;
		width: 692rpx;
		height: 70rpx;
		background: #E6F4FF;
		z-index: 1;
	}
	.table_title{
		display: flex;
		margin-top: -55rpx;
		margin-left: 26rpx;
		width: 608rpx;
		height: 70rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: bold;
		color: #666666;
		text-align: center;
		z-index: 2;
	}
	.line1{
		display: flex;
		margin-top: 0rpx;
		width: 692rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.line2{
		display: flex;
		margin-top: 70rpx;
		width: 692rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.list{
		display: flex;
		margin-top: 3rpx;
		margin-left: 15rpx;
		width: 666rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: bold;
		color: #333333;
	}
	.list-line{
		float: left;
		margin-top: 28rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		width: 692rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.foot{
		position: absolute;
		margin-top: 1189px;
		margin-left: 29rpx;
		/* text-align: center; */
		width:992rpx;
		height: 30rpx;
	}
	>>>.el-pagination span:not([class*=suffix]) {
			display: inline-block;
			font-size: 28rpx;
			min-width: 35.5rpx;
			height: 28rpx;
			line-height: 28rpx;
			vertical-align: top;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
	
		>>>.el-pagination .btn-prev {
			background: center center no-repeat;
			background-size: 28rpx;
			cursor: pointer;
			margin-left: 20rpx;
			width: 40rpx;
			height: 40rpx;
			color: #000000;
		}
	
		>>>.el-icon-arrow-left::before {
			content: "\e6de";
			/* background-image: url('../../assets/images/before.png'); */
			width: 15rpx;
			height: 28rpx;
		}
	
		>>>.el-pagination .btn-prev .el-icon {
			display: block;
			font-size: 28rpx;
			font-weight: 700;
		}
	
		>>>.el-pagination .btn-next .el-icon,
		.el-pagination .btn-prev .el-icon {
			display: block;
			font-size: 28rpx;
			font-weight: 700;
		}
	
		>>>.el-pager {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			list-style: none;
			font-size: 28rpx;
			color: #000000;
			background: none;
			height: 40rpx;
			margin-top: 5rpx;
			padding: 0;
		}
	
		>>>.el-pager,
		.el-pager li {
			vertical-align: top;
			margin: 0;
			display: inline-flex;
			font-size: 26rpx;
			color: #000000;
			height: 40rpx;
			margin-top: 5rpx;
		}
	
		>>>.el-pager li {
			background: none;
			-webkit-box-sizing: border-box;
		}
		>>>.el-pager li.active {
		    color: #409EFF;
		    cursor: default;
		}
	
		>>>.el-pager li {
			padding: 0 4rpx;
			font-size: 30rpx;
			min-width: 35.5rpx;
			height: 30rpx;
			line-height: 30rpx;
			box-sizing: border-box;
			text-align: center;
		}
	
		.el-dialog,
		.el-pager li {
			-webkit-box-sizing: border-box;
			font-size: 26rpx;
		}
	
		>>>.el-pagination .btn-next,
		.el-pagination .btn-prev {
			background: center center no-repeat;
			background-size: 26rpx;
			cursor: pointer;
			margin: 0;
			width: 40rpx;
			height: 40rpx;
			color: #000000;
		}
	
		>>>.el-pagination {
			white-space: nowrap;
			padding: 2rpx 5rpx;
			font-size: 28rpx;
			font-weight: 200;
		}
	
		>>>.el-pagination__total {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #000000;
		}
		
		>>>.el-pagination span:not([class*=suffix]) {
			display: inline-flex;
			height: 30rpx;
			line-height: 30rpx;
			color: #000000;
			vertical-align: top;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
	
		>>>.el-pagination .el-select .el-input .el-input__inner {
			padding-right: 25rpx;
			font-size: 28rpx;
			color: #000000;
			width: 100rPX;
			height: 50rPX;
			font-weight: 200;
		}
	
		>>>.foot .el-input__inner {
			width: 50rpx;
			height: 45rpx;
			font-size: 28rpx;
			padding-left: 10rpx;
			border-radius: 5rpx;
			font-weight: 200;
		}
		
</style>