|
|
@@ -0,0 +1,288 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar
|
|
|
+ title="城市智慧停车有限公司"
|
|
|
+ title-color="#fff"
|
|
|
+ :custom-back="customBack"
|
|
|
+ :border-bottom="false"
|
|
|
+ back-icon-color="#CCE8FF"
|
|
|
+ :background="{background: '#008CFF' }">
|
|
|
+ </u-navbar>
|
|
|
+
|
|
|
+ <view class="wrap">
|
|
|
+ <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">{{payeeinfo.payeeName||'智慧停车'}}</view>
|
|
|
+ <view class="id">工号：{{payeeinfo.payeeNo}}</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>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-bottom color="#949494">
|
|
|
+ <view class="bottom" slot="content">
|
|
|
+ 城市智慧停车 版权所有
|
|
|
+ </view>
|
|
|
+ </u-bottom>
|
|
|
+
|
|
|
+ <u-popup class="remark" v-model="remarkPopupShow" @close="remarkClose" mode="bottom">
|
|
|
+ <u-button class="submit-btn" type="primary" size="mini" @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>
|
|
|
+ var ALog = uni.requireNativePlugin("AndroidLog")
|
|
|
+ var location = uni.requireNativePlugin("Location")
|
|
|
+ export default{
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ roadNo:'',
|
|
|
+ payeeinfo:[],
|
|
|
+ theRoad:[],
|
|
|
+ currentTime: new Date().getTime(), // 获取当前时间
|
|
|
+ outPosition:true,//是否超出打卡范围
|
|
|
+ positionInfo:false,//是否线上位置关系信息
|
|
|
+ remarkPopupShow:false,//备注弹框
|
|
|
+ remarkTip:'',
|
|
|
+ remark:'',
|
|
|
+ workType:1,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(){
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ let that = this;
|
|
|
+
|
|
|
+ setInterval(function () {
|
|
|
+ that.currentTime = new Date().getTime()//修改数据让他可以实时更新
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ this.payeeinfo = this.$store.state.vuex_user;
|
|
|
+ this.roadNo = this.payeeinfo?.roadList?.[0]?.roadNo;
|
|
|
+ // console.log(' this.payeeinfo1', this.payeeinfo);
|
|
|
+ this.getPunchInfo(this.roadNo);
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getLocation(){
|
|
|
+ ALog.info({msg:'请求定位'});
|
|
|
+ uni.showLoading({ title: '定位中'});
|
|
|
+ let that = this;
|
|
|
+ uni.getLocation({
|
|
|
+ type:"gcj02",
|
|
|
+ success : function (res) {
|
|
|
+ uni.hideLoading();
|
|
|
+ console.log("定位返回信息:", res)
|
|
|
+ // alert(res.longitude + "," + res.latitude )
|
|
|
+ ALog.info({msg:res})
|
|
|
+ that.payeeinfo.longitude = res.longitude;
|
|
|
+ that.payeeinfo.latitude = res.latitude;
|
|
|
+ var dst = `${that.payeeinfo.longitude},${that.payeeinfo.latitude}`;
|
|
|
+ var src = res.latitude + ',' + res.longitude;
|
|
|
+ var locRet = location?.distance?.(src, dst);
|
|
|
+ that.positionInfo = true;
|
|
|
+ // console.log('locRet',locRet);
|
|
|
+ ALog.info({msg:locRet.distance})
|
|
|
+ if(locRet<=that.payeeinfo.workDistance){//在打卡范围内
|
|
|
+ that.outPosition = false;
|
|
|
+ console.log('that.workType',that.workType);
|
|
|
+ // debugger;
|
|
|
+ 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.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)
|
|
|
+ ALog.info({msg:'请求错误',err:res})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handlePunchIn(){
|
|
|
+ this.getLocation();
|
|
|
+ },
|
|
|
+ remarkClose(){
|
|
|
+ this.remark = '';
|
|
|
+ },
|
|
|
+ getPunchIn(){
|
|
|
+ let that = this;
|
|
|
+ let param ={
|
|
|
+ latitude:that.payeeinfo.latitude,
|
|
|
+ longitude:that.payeeinfo.longitude,
|
|
|
+ remark:that.remark,
|
|
|
+ roadNo:that.payeeinfo.roadNo,
|
|
|
+ workType:that.workType
|
|
|
+ }
|
|
|
+ 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(){
|
|
|
+ this.$u.route({
|
|
|
+ // type:'switchTab',
|
|
|
+ url: 'pages/index/index'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getPunchInfo(roadNo){
|
|
|
+ this.$u.api.punchInfo({roadNo:roadNo})
|
|
|
+ .then(res=>{
|
|
|
+ // this.$refs.uToast.show({
|
|
|
+ // title: res.msg,
|
|
|
+ // type: 'success',
|
|
|
+ // });
|
|
|
+ this.payeeinfo ={...this.payeeinfo,...res.data};
|
|
|
+
|
|
|
+ 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 lang="scss" scoped>
|
|
|
+ @import './attence.scss'
|
|
|
+</style>
|
aleyds
