unnormal-people/pages/index/index.vue

<template>
	<view class="content">
		<view class="text-area">
			<text class="top-line"></text>
			<form @submit="formSubmit" @reset="formReset" class="form-text">
				<view class="form-top">人员基本信息</view>
				<view class="form-name">姓      名：{{name}}</view>
				<text class="form-line1"></text>
				<view class="form-phone">联系方式：{{phone}}</view>
				<text class="form-line2"></text>
				<view class="form-card">身份证号：{{card}}</view>
				<text class="form-line3"></text>
				<view class="form-ma">码      色：<text :class="{'yellow': sm_color == '黄码', 'red': sm_color == '红码'}">{{ma_color}}</text></view>
				<text class="form-line4"></text>
				<view class="form-type">人员类型：{{people_type}}</view>
				<text class="form-line5"></text>
				<view class="form-time">时      间：{{time}}</view>
				<text class="form-line6"></text>
				<view class="form-unit">处理单位：{{unit}}</view>
				<text class="form-line7"></text>
				<view class="form-place">监测地点：{{place}}</view>
				<text class="form-line8"></text>
				
				<view class="form-select" v-if="this.state==0">
					<view class="form-way">处置方式：
						<picker @change="bindPickerChange" :value="index" :range="array">
							<text class="uni-input">{{array[index]}}</text>
							<image src="../../static/select_img.png" class="select-img"></image>
						</picker>
						
					</view>
				</view>
				
				<view class="form-detail" v-if="this.state==0">处置详情：
					<textarea placeholder="请输入处置详情" v-model="mark"></textarea>
				</view>
				<view class="handle" v-if="this.state==0">
					<button form-type="submit" type="primary" @click="sub">确认处置</button>
				</view>
				
				<view class="form-select" v-if="this.state==1">
					<view class="form-way">处置方式：{{message}}
					</view>
				</view>
				
				<view class="form-detail" v-if="this.state==1">处置详情：{{xinxi_mark}}
					
				</view>
				<view class="handle" v-if="this.state==1">
					<view class="yihandle">已处置</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['集中隔离', '居家隔离','发送协查','居家监测','正常管理', '闭环管理','其他情况','自我监测'],
				index: 0,
				sm_color:'黄码',
				id:'',
				name:'',
				phone:'',
				card:'',
				ma_color:'',
				people_type:'',
				time:'',
				unit:'',
				place:'',
				way:'',
				mark:'',
				uuid:'',
				xinxi:'',
				state:'',
				message:'',
				xinxi_mark:'',
			}
		},
		onLoad() {
			
			let curPage = getCurrentPages();
			let route = curPage[curPage.length - 1].route; //获取当前页面的路由
			let params = curPage[curPage.length - 1].options; //获取当前页面参数，如果有则返回参数的对象，没有参数返回空对象{}
			let keys = Object.keys(params); //获取对象的key 返回对象key的数组
			// console.log(route)
			// console.log(keys)
			if (keys.length > 0) {
				// this.id = keys.reduce((pre, cur) => {
				// 	return pre +keys + '/';
				// }, '?').slice(-1, 1);
				this.id = keys.reduce((pre, cur) => {
					return keys[0];
				},);
				// this.ltime = keys.reduce((pre, cur) => {
				// 	return keys[1];
				// },);
			}
			// console.log(this.id)
			// console.log(this.ltime)
			this.getUnPeople()
			uni.$on('refreshData',() => {
					this.getUnPeople()
				})
		},

		methods: {
			
			//异常人员信息
			getUnPeople() {
				this.$axios.post('/bigData2/userqueryHandlerByUUId.action?id='+this.id, {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						// console.log(res.data)
						this.name=res.data.data[0].sm_name
						this.phone=res.data.data[0].sm_phone
						this.card=res.data.data[0].sm_card
						this.ma_color=res.data.data[0].sm_color
						this.people_type=res.data.data[0].sm_type
						this.time=res.data.data[0].sm_time
						this.unit=res.data.data[0].handler_unit
						this.place=res.data.data[0].sm_place
						this.way=res.data.data[0].handler_type
						this.uuid=res.data.data[0].uuid
						this.state=res.data.data[0].handler_state2
						this.message=res.data.data[0].handler_message
						this.xinxi_mark=res.data.data[0].message_commit
					})
					.catch(err => {
						console.log(err)
					})
			},
			
			//提交处置
			getTijiao() {
				console.log(this.uuid)
				if(this.index=='0') {
					this.xinxi='集中隔离'
				}else if(this.index=='1') {
					this.xinxi='居家隔离'
				}else if(this.index=='2') {
					this.xinxi='发送协查'
				}else if(this.index=='3') {
					this.xinxi='居家监测'
				}else if(this.index=='4') {
					this.xinxi='正常管理'
				}else if(this.index=='5') {
					this.xinxi='闭环管理'
				}else if(this.index=='6') {
					this.xinxi='其他情况'
				}else if(this.index=='7') {
					this.xinxi='自我监测'
				}
				console.log(this.xinxi)
				console.log(this.mark)
				this.$axios.post('/bigData2/userupdateHand.action?uuid='+this.uuid + '&handler_message=' + this.xinxi + '&sm_time=' + this.time + '&message_commit=' + this.mark +'&id=' +this.id, {
						headers: {
							'Content-Type': 'application/json',
						}
					})
					.then(res => {
						// console.log(res)
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "./success",
							});
						}, 600);
					})
					.catch(err => {
						console.log(err)
						uni.showToast({
							title: '提交失败',
							icon: 'defeat',
							duration: 1000
						})
					})
			},
			
			sub() {
				this.getTijiao()
			},
			//选择框
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
	.top-line{
		margin-top: 0rpx;
		margin-left: 0;
		position: absolute;
		width: 750rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.form-text{
		margin-top: 32rpx;
		display: flex;
		width: 690rpx;
		height: 1461rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 17rpx 1rpx rgba(0, 0, 0, 0.22);
		border-radius: 20rpx;
	}
	.form-top{
		width: 690rpx;
		height: 120rpx;
		background: linear-gradient(90deg, #42A9FE 0%, #2A71DD 100%);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 120rpx;
	}
	.form-name{
		margin-left: 41rpx;
		margin-top: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.form-line1{
		display: flex;
		margin-left: 40rpx;
		margin-top: 45rpx;
		width: 610rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.form-phone{
		margin-left: 41rpx;
		margin-top: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.form-line2{
		display: flex;
		margin-left: 40rpx;
		margin-top: 45rpx;
		width: 610rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.form-card{
		margin-left: 41rpx;
		margin-top: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.form-line3{
		display: flex;
		margin-left: 40rpx;
		margin-top: 45rpx;
		width: 610rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.form-ma{
		margin-left: 41rpx;
		margin-top: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	>>>.yellow {
		color: #F4B800;
	}

	>>>.red {
		color: #FF4A4A;
	}
	.form-line4{
		display: flex;
		margin-left: 40rpx;
		margin-top: 45rpx;
		width: 610rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.form-type{
		margin-left: 41rpx;
		margin-top: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.form-line5{
		display: flex;
		margin-left: 40rpx;
		margin-top: 45rpx;
		width: 610rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.form-time{
		margin-left: 41rpx;
		margin-top: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.form-line6{
		display: flex;
		margin-left: 40rpx;
		margin-top: 45rpx;
		width: 610rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.form-unit{
		margin-left: 41rpx;
		margin-top: 38rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.form-line7{
		display: flex;
		margin-left: 40rpx;
		margin-top: 45rpx;
		width: 610rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.form-place{
		margin-left: 41rpx;
		margin-top: 39rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.form-line8{
		display: flex;
		margin-left: 40rpx;
		margin-top: 45rpx;
		width: 610rpx;
		height: 1rpx;
		background: #CCCCCC;
	}
	.form-way{
		margin-left: 41rpx;
		margin-top: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.form-way picker{
		margin-left: 141rpx;
		margin-top: -47rpx;
		width: 243rpx;
		height: 63rpx;
		background: #F2F2F2;
		border: 1rpx solid #808080;
		border-radius: 10rpx;
		text-align: center;
		line-height: 63rpx;
	}
	.select-img{
		position: absolute;
		margin-left: 35rpx;
		margin-top: 23rpx;
		width: 20rpx;
		height: 20rpx;
	}
	.form-detail{
		margin-left: 41rpx;
		margin-top: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.form-detail textarea{
		margin-left: 141rpx;
		margin-top: -47rpx;
		width: 468rpx;
		height: 159rpx;
		border: 1rpx solid #BFBFBF;
		border-radius: 10rpx;
	}
	.handle{
		margin-left: 145rpx;
		margin-top: 88rpx;
		width: 468rpx;
		width: 400rpx;
		height: 105rpx;
		border-radius: 10rpx;
	}
	.yihandle{
		margin-left: 145rpx;
		margin-top: 80rpx;
		width: 468rpx;
		width: 400rpx;
		height: 105rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: #007AFF;
	}
</style>