parking_pda/pages/parking/parking.vue

<template>
	<view>
		<u-navbar
		 title="车辆入场" 
		 title-color="#fff" 
		 :custom-back="customBack" 
		 :border-bottom="false" 
		 back-icon-color="#CCE8FF" 
		 :background="{background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }"></u-navbar>
		<u-empty class="u-m-t-80" text="暂无车位" mode="data" v-if="roadspaceList.length == 0"></u-empty>
		<view class="search"><u-search placeholder="请输入车位名称" v-model="roadspaceList.spaceName" shape="round" @search="spaceSearch()" @custom="spaceSearch()"></u-search></view>
		<view class="roadspace-list wrap">
			<view class="roadspace-list-item" @click="roadspaceClick(item)" @longpress="longopenPage(item)" v-for="(item,index) in roadspaceList" :key="index + item.id">
				<view class="block" :class="{flashing: (item.deviceStatus ==1||item.deviceStatus ==5)||(item.placeStatus==1&&(item.vehicleNo==''))}">
					<view class="block-top" v-if="item.placeStatus==1&&(item.vehicleNo=='')"></view>
					<view class="block-bottom" v-if="item.placeStatus==1&&(item.vehicleNo=='')">
						<u-icon name="clock-fill" size="40" color="#3397FA"></u-icon>
						<view class="time">{{ item.inTime | timeago(currentTime)}}</view>
					</view>
				</view>
				<view class="text">{{item.spaceName}}</view>
			</view>			
			
		</view>
		<view class="bottom-btn-wrap">
			<u-button class="bt1" @click="last(list.pageNum)"><</u-button>
			<view class="pagesInput">
				<view class="pagesInput-left">第</view><u-input v-model="pageNum" type="text" :border="true" :clearable="false" /><view class="pagesInput-right">页</view></view>
			<view class="num">
			<u-button @click="jump(list.pageNum)" size="mini">跳转</u-button>
			</view>
			<u-button class="bt2" @click="next(list.pageNum)">></u-button>
			<!-- <view class="bottom-btn" @click="openPage('pages/index/index')">返回主页</view> -->
			<!-- <uni-pagination class="page" v-if="roadspaceList" title="标题文字" :total='total'  @change='uni_pagination_change'></uni-pagination> -->
		</view>
		<!-- <u-action-sheet :list="actionList" @click="actionClick" v-model="actionShow"></u-action-sheet> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import uniPagination from '../../uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue'
	//#ifdef APP-PLUS
	let ocr = uni.requireNativePlugin("OcrPlug");
	//#endif
	export default {
		components: {uniPagination},
		data() {
			return {
				currentTime: new Date(), 
				roadNo:null,//路段编码 ,示例值(RN000000004)
				actionList:[
					{text: '停车',},
					// {text: '查看'}
				],
				actionShow:false,
				roadspaceList:[],
				spaceId:null,
				pageNum:'',
				spaceName:'',
				total:'',
				currentPageNum:'',
				list:{
					pageNum:''
				},
				vehicleNo:'',
				carImg:'',
				pages:'',
				vehicleImage:null,
				placeStatus:'',
				timeOutEvent: '0'
			}
		},
		onLoad() {
			this.roadNo = this.$store.state.vuex_user.roadList[0].roadNo || '';
			this.handleGetRoadspace(this.roadNo);
			
		},
		onShow(){
			let that = this;
			setInterval( () => {
				that.currentTime = new Date()//修改数据让他可以实时更新
			}, 1000);
		},
		methods:{
			longopenPage(item){
				this.spaceId = item.id;
				this.spaceName = item.spaceName;
				this.inTime = item.inTime;
				this.placeStatus=item.placeStatus;
				this.currentVehicleNo=item.vehicleNo;
				this.$u.route({
					url: 'pages/getin/getin',
					params:{
						spaceId: this.spaceId,
						spaceName:this.spaceName,
						roadNo:this.roadNo,
						inTime:this.inTime,
						placeStatus:this.placeStatus,
						currentVehicleNo:this.currentVehicleNo
					}
				})
			},
			// uni_pagination_change(e){
			
			// 	//this.getList(e.current)
			// 	this.handleGetRoadspace(this.roadNo, e.current)
			// 	console.log(e)
			// 	// {type: "next", current: 2}
			// },
			jump(){
				this.$u.api.getRoadspace({roadNo:this.roadNo,placeStatus:0,pageNum:this.pageNum})
				.then(res => {
					this.pages=res.data.pages;
					this.currentPageNum=res.data.page;
					this.list.pageNum=res.data.page;
					this.roadspaceList = res.data.rows;
				})
			},
			spaceSearch(){
				console.log(this.roadspaceList.spaceName)
				this.$u.api.getRoadspace({roadNo:this.roadNo,placeStatus:0,spaceName:this.roadspaceList.spaceName})
				.then(res => {
					this.pages=res.data.pages;
					this.currentPageNum=res.data.page;
					this.list.pageNum=res.data.page;
					this.roadspaceList = res.data.rows;
				})
			},
			last(i){
				if(i>1){
					setTimeout(	this.handleGetRoadspace(this.roadNo,i-1),500)
					// this.handleGetRoadspace(this.roadNo,i-1)
				}else{
					return
				}				
			},
			next(n){
				if(n < this.pages){
					setTimeout(this.handleGetRoadspace(this.roadNo,n+1),500)
					// this.handleGetRoadspace(this.roadNo,n+1)
				}else{
					this.$refs.uToast.show({
						title: '已经是最后一页',
						type: 'warning',
					})
				}
			},
			customBack(){
				uni.reLaunch({
				    url: '/pages/index/index'
				});
			},
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			handleGetRoadspace(roadNo, page){
				this.$u.api.getRoadspace({roadNo:this.roadNo,placeStatus:0,pageNum:page || ''})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.pages=res.data.pages;
					this.currentPageNum=res.data.page;
					this.list.pageNum=res.data.page;
					this.total=res.data.total;
					this.roadspaceList = res.data.rows;
					console.log('handleGetRoadspace',res)
				}).catch(err=>{
					if(err.errMsg){
						this.$refs.uToast.show({
							title: '请检查网络',
							type: 'error',
						});
						return false;
					};
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('handleGetRoadspace ',err)
				});
			},
			roadspaceClick(roadspace){
				this.actionShow = true;
				this.spaceId = roadspace.id;
				this.spaceName = roadspace.spaceName;
				this.inTime = roadspace.inTime;
				this.placeStatus=roadspace.placeStatus;
				this.currentVehicleNo=roadspace.vehicleNo
				console.log('roadspace',roadspace);
				let that = this;
				ocr.ocrVehicleNo((ret) => {
					if (ret.success){
						that.vehicleNo = ret.vehicleNo;
						// this.carImg = 'data:image/png;base64,' + ret.imageBase64;
						this.$u.api.tencentBase64Upload({
							base64: ret.imageBase64,
							suffix: 'png'
						})
						.then(res=>{
								that.carImg =  res.data.url;
								that.vehicleImage =  res.data.url;
								this.$u.route({
									type: 'redirectTo',
									url: 'pages/getin/getin',
									params: {
										spaceId: this.spaceId,
										spaceName:this.spaceName,
										roadNo:this.roadNo,
										vehicleNo:this.vehicleNo,
										carImg:that.carImg,
										vehicleImage:that.vehicleImage,
										inTime:this.inTime,
										placeStatus:this.placeStatus,
										currentVehicleNo:this.currentVehicleNo
									}
								});
						}).catch(err=>{});
					}else {
						plus.nativeUI.toast('识别失败');
					}
				});
			},
			confirmIn(){
				let files = [];
				let that = this;
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				});
				// 如果不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				that.confirmData.images = [];
				this.confirmData.spaceId = that.confirmData.id;
				files.forEach(function(element) {
				  that.confirmData.images.push(element.response.data.url);
				});
				let param = this.confirmData;
				this.$u.api.parkInConfirm(param)//有车但是车牌为空
				.then(res=>{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						url:'pages/getout/getout'
					});
					//#ifdef APP-PLUS
					device.print(res.data.print);
					speak(res.data.speak);
					//#endif
					console.log('parkInConfirm',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						// url:'pages/parking/parking'
					});
					console.log('parkInConfirm ',err)
				});
			},
			// actionClick(e){
			// 	console.log('actionClick',e);
			// 	switch (e){
			// 		case 0:
			// 			this.$u.route({
			// 				url: 'pages/getin/getin',
			// 				params: {
			// 					spaceId: this.spaceId,
			// 					spaceName:this.spaceName,
			// 					roadNo:this.roadNo
			// 				}
			// 			});
			// 			break;
			// 		case 1:
			// 			break;
			// 		default:
			// 			break;
			// 	}
			// }
			
		},
		filters:{
			timeago(inTime,currentTime){
				var time_start = '', clock_start = ''
				if (inTime) {
					time_start = new Date(inTime.replace(/-/g,'/'));
					time_start.getTime();
				}
				// console.log('currentTime',this.currentTime)
				
				const formatNumber = (num) => {
					num = num.toString()
					return num[1] ? num : '0' + num
				};
				var i_total_secs = Math.round(currentTime.getTime() - time_start);
				//计算出相差天数
				var days = Math.floor(i_total_secs / (24 * 3600 * 1000))
					 
				//计算出小时数
				var leave1 = i_total_secs % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000))
				
				// var hours = Math.floor(i_total_secs / (3600 * 1000))
				
				//计算相差分钟数
				var leave2 = i_total_secs % (3600 * 1000)        //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000))
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000)
				days = formatNumber(days)
				hours = formatNumber(hours);
				minutes = formatNumber(minutes);
				seconds = formatNumber(seconds);
				// console.log(days + '天' + hours + '个小时' + minutes + '分钟' + seconds + '秒');
				return days + '天' + hours + '时' + minutes + '分' + seconds + '秒'
			}
		}
		
	}
</script>

<style lang="scss">
	@import "./parking.scss";
</style>