parking_inspection/pages/clockIn/clockIn.vue

<template>
	<view>
		<u-navbar 
		title="考勤" 
		title-color="#fff" 
		:custom-back="customBack" 
		:border-bottom="false"
		back-icon-color="#CCE8FF"
		:background="{background: 'linear-gradient(99deg, #7A4398 0%, #5A5DB9 100%)' }"></u-navbar>
		</u-navbar>
		<view class="wrap">
			<u-cell-item class="road-select-cell" icon="map-fill" bg-color="#fff" :border-bottom="false" :title="roadName" :arrow="true" @click="roadSelectShow = true" arrow-direction="right"></u-cell-item>
			<u-select v-model="roadSelectShow" :list="roadListData" value-name="roadNo" label-name="roadName" @confirm="roadSelectConfirm"></u-select>
			<view class="payeeinfo u-flex">
				<u-image src="../../static/img/default-portrait.png" width="87" height="87"></u-image>
				<view class="payeeinfo-text">
					<view class="name">巡检人员：{{vuex_user.officerName||'智慧停车'}}</view>
					<view class="id">工号：{{vuex_user.officerNo}}</view>
				</view>
			</view>
			<view class="attence-block">
				<view class="today-attence u-flex">
					<view class="today-attence-item">
						<view class="work-time">上班：{{payeeinfo.workStartTime?payeeinfo.workStartTime.slice(11):''}}</view>
						<view class="my-time" v-if="payeeinfo.isPunchIn">
							<u-icon name="checkmark-circle-fill" color="#2979ff" size="28"></u-icon>
							{{payeeinfo.punchInTime?payeeinfo.punchInTime.slice(11):''}}已打卡
						</view>
						<view class="my-time" v-else>未打卡</view>
					</view>
					<view class="today-attence-item">
						<view class="work-time">下班：{{payeeinfo.workEndTime?payeeinfo.workEndTime.slice(11):''}}</view>
						<view class="my-time" v-if="payeeinfo.isPunchOut">
							<u-icon name="checkmark-circle-fill" color="#2979ff" size="28"></u-icon>
							{{payeeinfo.punchOutTime?payeeinfo.punchOutTime.slice(11):''}}已打卡
						</view>
						<view class="my-time" v-else>未打卡</view>
					</view>
				</view>
				<view class="attence-button u-flex u-flex-wrap" @click="handlePunchIn">
					<view class="attence-button-type">{{workType|filterWorkType}}打卡</view>
					<view class="attence-button-time">{{ $u.timeFormat(currentTime, 'hh:MM:ss') }}</view>
				</view>
				<view class="position-tip" v-if="!outPosition&&positionInfo">
					<u-icon name="checkmark-circle-fill" color="#21CF3D" size="28"></u-icon>
					您已进入考勤范围：{{payeeinfo.roadName}}
				</view>
				<view class="position-tip" v-else-if="outPosition&&positionInfo">
					<u-icon name="checkmark-circle-fill" color="#da0808" size="28"></u-icon>
					您已超出考勤范围：{{payeeinfo.roadName}}
				</view>
				<!-- <view class="statistics u-flex">
					<view class="statistics-item">
						<view class="statistics-item-til">本月已打卡</view>
						<view class="statistics-item-con">
							<span class="number">{{payeeinfo.punched}}</span>
							天
						</view>
					</view>
					<view class="statistics-item">
						<view class="statistics-item-til">月目标打卡</view>
						<view class="statistics-item-con">
							<span class="number">{{payeeinfo.punchTotal}}</span>
							天
						</view>
					</view>
				</view> -->
				
				<map v-show="!roadSelectShow" id="navmap" scale="13" :latitude="latitude" :longitude="longitude" :markers="covers" :circles="circles" ></map>
			</view>
			
		</view>
	<!-- 	<u-bottom color="#949494">
			<view class="bottom" slot="content">
				城市智慧停车 版权所有
			</view>
		</u-bottom> -->
		
		<u-popup class="remark" v-model="remarkPopupShow" @close="remarkClose" mode="top">
			<u-button class="submit-btn" type="primary" size="default" @click="getPunchIn">打卡</u-button>
			<view class="content">
				<u-form-item 
					label="备注" 
					:label-style="{fontSize:'36rpx'}"
					label-position="top">
					<u-input v-model="remark" type="textarea" />
				</u-form-item>
				<view class="remark-tip" v-if="remarkTip">{{remarkTip}}</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	//#ifdef APP-PLUS
	// var ALog = uni.requireNativePlugin("AndroidLog")
	// var location = uni.requireNativePlugin("Location")
	//#endif

	import distance from "utils/getDistance.js"

	export default{
		data(){
			return{
				roadName:'请选择打卡路段',
				roadSelectShow:false,
				roadListData:[],
				roadNo:'',
				payeeinfo:[],
				theRoad:[],
				currentTime: new Date().getTime(), // 获取当前时间
				outPosition:true,//是否超出打卡范围
				positionInfo:false,//是否线上位置关系信息
				remarkPopupShow:false,//备注弹框
				remarkTip:'',
				remark:'',
				workType:1,
				punchDistance:0, //打卡距离
				punchRange:0, //打卡范围
				outwork:0, //是否外勤 0-否 1-是
				// 地图
				covers: [],
				circles:[{  
                    latitude: '',  
                    longitude: '',  
                    radius: 300,  
                    strokeWidth: 1,  
                    color: "#428BCA88",  
                    fillColor: "#B6E1F248",  
                }],
				latitude: '',
				longitude: '',
			}
		},
		onLoad(){
			this.getRoadList();
		},
		onShow() {
			let that = this;
				
			setInterval(function () {
				that.currentTime = new Date().getTime()//修改数据让他可以实时更新
			}, 1000);
			
			// this.getPunchInfo(this.roadNo);
		},
		methods:{
			getLocation(){
				//#ifdef APP-PLUS
				// ALog?.info({msg:'请求定位'});
				//#endif
				uni.showLoading({ title: '定位中'});
				let that = this;
				uni.getLocation({
					type:"gcj02",
					success : function (res) {
						console.log('定位',res)
						uni.hideLoading();
						//#ifdef APP-PLUS
						// var dst = `${that.payeeinfo.latitude},${that.payeeinfo.longitude}`;
						// var src = res.latitude + ',' + res.longitude;
						// var locRet = location?.distance?.(src, dst);
						that.positionInfo = true;
						// that.punchDistance = locRet.distance;
						that.punchRange = that.payeeinfo.workDistance;
						// console.log('res.latitude',res.latitude)
						// console.log('res.longitude',res.longitude)
						let myDistance = distance(res.latitude,res.longitude,that.payeeinfo.latitude,that.payeeinfo.longitude);
						// console.log('myDistance',myDistance)
						// console.log('workDistance',that.payeeinfo.workDistance)
						that.punchDistance = myDistance;
						if(myDistance <= that.payeeinfo.workDistance){//在打卡范围内
						//#endif
						//#ifdef H5
						that.positionInfo = true;
						let myDistance = distance(res.latitude,res.longitude,that.payeeinfo.latitude,that.payeeinfo.longitude);
						that.punchDistance = myDistance;
						that.punchRange = that.payeeinfo.workDistance;
						// console.log('res.latitude',res.latitude)
						// console.log('res.longitude',res.longitude)
						// console.log('myDistance',myDistance)
						// console.log('workDistance',that.payeeinfo.workDistance)
						// console.log('that.payeeinfo.latitude',that.payeeinfo.latitude)
						if(myDistance <= that.payeeinfo.workDistance){//在打卡范围内
						//#endif
							that.outPosition = false;
							that.outwork = 0;
							if(that.workType==1){
								let workStartTime = new Date(that.payeeinfo.workStartTime.replace(/-/g,'/'));
								if(that.currentTime<=workStartTime.getTime()){
									
								}else{//迟到
									that.remarkTip = '您已迟到!';
									that.remarkPopupShow = true;
									return;
								}
								console.log('workStartTime',workStartTime.getTime())
							}else if(that.workType==2){
								if(that.payeeinfo.isPunchOut){
									that.$refs.uToast.show({
										title: '已经打过下班卡!',
										type: 'error',
									});
									return;
								};
								let workEndTime = new Date(that.payeeinfo.workEndTime.replace(/-/g,'/'));
								if(that.currentTime<=workEndTime.getTime()){//
									that.remarkTip = '还未到下班时间,现在打卡将视为早退!';
									that.remarkPopupShow = true;
									return;
								}
								console.log('workEndTime',workEndTime.getTime())
								
							}
							that.getPunchIn();
						}else{//不在打卡范围内
							that.outPosition = true;
							that.outwork = 1;
							// that.remarkPopupShow = true;
							// console.table({locRet:locRet,workDistance:that.payeeinfo.workDistance,r:locRet<=that.payeeinfo.workDistance});
							that.$refs.uToast.show({
								title: '超出打卡范围!',
								type: 'error',
							});
						};
						
						
						
						
					},
					fail: function(res){
						uni.hideLoading();
						console.log('getLocation err',res)	
						//#ifdef APP-PLUS
						// ALog?.info({msg:'请求错误',err:res})
						//#endif				
					}
				})
			},
			handlePunchIn(){
				this.getLocation();
			},
			remarkClose(){
				this.remark = '';
			},
			getRoadList(){
				let that = this;
				that.$u.api.getRoadList()
				.then(res=>{
					this.roadListData = res.data;
					console.log('this.getRoadList',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
			},
			roadSelectConfirm(e){
				// console.log('roadSelectConfirm',e[0]);
				this.roadName = e[0].label;
				this.roadNo = e[0].value;
				console.log('this.roadNo',this.roadNo);
				this.getPunchInfo(this.roadNo);
			},
			getPunchIn(){
				let that = this;
				let param ={
					latitude:that.payeeinfo.latitude,
					longitude:that.payeeinfo.longitude,
					remark:that.remark,
					roadNo:that.payeeinfo.roadNo,
					workType:that.workType,
					punchDistance: that.punchDistance,
					punchRange: that.punchRange,
					outwork: that.outwork
				}
				that.$u.api.punchIn(param)
				.then(res=>{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
					});
					this.remarkPopupShow = false;
					
					this.getPunchInfo(this.roadNo);
					console.log('this.punchIn',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('punchIn ',err)
				});
			},
			customBack(){
				uni.reLaunch({
				    url: '/pages/index/index'
				});
			},
			getPunchInfo(roadNo){
				if(!roadNo){
					console.log('this.$refs',this.$refs);
					setTimeout(()=>{
						this.$refs.uToast.show({
							title: '请先选择路段!',
							type: 'error',
						});
					},1000)
					
				};
				console.log('roadNo',roadNo);
				this.$u.api.punchInfo({roadNo:roadNo})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.payeeinfo ={...this.payeeinfo,...res.data};
					// console.log('getPunchInfo res',res);
					this.latitude = res.data.latitude;
					this.longitude = res.data.longitude;
					this.circles[0].latitude = res.data.latitude;
					this.circles[0].longitude = res.data.longitude;
					this.circles[0].radius = res.data.workDistance;
					// console.log('this.circles',this.circles);
					let mark = {
						latitude:res.data.latitude,
						longitude:res.data.longitude
					};
					this.covers.push(mark);
					if(!res.data.isPunchIn){//还未打上班卡
						this.workType = 1;
					}
					else{//已打上班卡
						this.workType = 2;
					}
					
					// console.log('this.payeeinfo',this.payeeinfo)
				}).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('punchInfo ',err)
				});
			}
			
		},
		filters:{
			filterWorkType(WorkType){
				return (WorkType==1)?'上班':'下班'
			}
		}
	}
</script>
<style>
page{background-color: #F4F4F4;}
</style>
<style lang="scss">
	@import  './clockIn.scss'
</style>