DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/AttendanceCard/list.vue

<template> 
  <view class="">
  	<view v-if="ready" class="contentBox">
		<view class="rules">
			<view class="">
				<view class="">
					上班 {{info.WorkTime}}
				</view>
				<view class="">
					{{info.UserWorkTime?info.UserWorkTime.substring(8)+' 打卡':'未打卡'}}
				</view>
			</view>
			<view class="">
				<view class="">
					下班 {{info.CloseTime}}
				</view>
				<view class="">
					{{info.UserCloseTime?info.UserCloseTime.substring(8)+' 打卡':'未打卡'}}
				</view>
			</view>
		</view>
		<view class="content" id="attendContent">
			<view id="show">{{now}}</view>
			<view class="pen" @click="action('dk')">
				 <img :class="{gray:info.AttendanceType != 1}" id="attimg" :src="imgsrc" alt="" width="100%">
			</view>
			<view class="title">
				{{info.AttendanceTypeString}}
			</view>
		</view>
		<view class="footer">
			<img src="../../common/images/2.png" alt="" width="100%">
		</view>
    </view> 
	<view id='container'></view>
  </view>
    
</template> 
  
  
<script> 
/* 
 * 版 本 Learun-ADMS V7.0.3 力软敏捷开发框架(http://www.learun.cn) 
 * Copyright (c) 2013-2020 上海力软信息技术有限公司 
 * 创建人：超级管理员 
 * 日  期：2022-03-10 15:30 
 * 描  述：考勤打卡 
 */
  
/** 
 * 本段代码由移动端代码生成器输出，移动端须 2.2.0 版本及以上可以使用
 * 请在移动端 /pages.json 中的 pages 字段中添加一条记录： 
 * { "path": "pages/AttendanceCard/list", "style": { "navigationBarTitleText": "考勤打卡" } } 
 *  
 * （navigationBarTitleText 字段为本页面的标题文本，可以修改） 
 * （必须自行操作该步骤，力软代码生成器不会自动帮您修改 /pages.json 文件） 
 */
  
import get from 'lodash/get'
import set from 'lodash/set'
import moment from 'moment'
import customPageMixins from '@/common/custompage.js'
//导入图片
import dk from '../../common/images/dk.png'
import dkred from '../../common/images/dkred.png'
import dkyellow from '../../common/images/dkyellow.png'
  
export default { 
  mixins: [customPageMixins], 
  
  data() { 
    return { 
      // 页面相关参数 
	  info:{},
      now: null, 
	  imgsrc:dk,
      ready: false, 
	  timer:'',
	  map:null,
    } 
  }, 
  
  async onLoad() { 
    await this.init() 
  }, 
  
  methods: { 
    // 页面初始化 
    async init() { 
      this.LOADING('加载数据中...') 
  
      this.now = this.getCurrentTime()
	  this.timer = setInterval(this.getCurrentTime,1000)
	  await this.judgeIsDK()
	  
      this.ready = true
      this.HIDE_LOADING() 
    },
	
    // 点击 「打卡」按钮 
    async action(type) { 
      switch (type) { 
        case 'dk': 
			if(this.imgsrc == dkred){
				return
			}
			this.LOADING()
			this.HTTP_POST('learun/adms/attendance/clockin', {}, '打卡失败').then(success => {
				this.HIDE_LOADING()
				if(!success) { 
					this.TOAST('打卡失败') 
					return
				} 
				this.TOAST('打卡成功','success') 
				setTimeout(this.back,500)
			    
			}) 
			return
		  
        default: break
      } 
    },
	//判断当前时间是否可以打卡
	async judgeIsDK(){
		let success = await this.HTTP_GET('learun/adms/attendance/IsAttendance',{},'判断当前时间是否可以打卡失败')
		if(!success){return}
		this.info = success.data
		this.imgsrc=dk;
		// if ([1].includes(this.info.AttendanceType)) {
		// 	this.imgsrc=dk;
		// } else if ([2,3].includes(this.info.AttendanceType)) {
		// 	this.imgsrc=dkyellow;
		// }else {
		// 	this.imgsrc=dkred;
		// }
		if(![5].includes(this.info.AttendanceType)){
			if(!window.BMapGL) await this.loadJScript()
			this.map = new BMapGL.Map('container');
			await this.isFieldPersonnel()
		}
	},
	//返回
	back(){
		this.NAV_BACK()
	},
	//获取当前时间
	 getCurrentTime() {
		 let nowDate = new Date();
	 　　let hh = nowDate.getHours();
	 　　let mf = nowDate.getMinutes()<10 ? '0'+nowDate.getMinutes() : nowDate.getMinutes();
	 　　let ss = nowDate.getSeconds()<10 ? '0'+nowDate.getSeconds() : nowDate.getSeconds();
	 　　this.now = hh+':'+mf+':'+ss;
	 },
	 // 判断是否外勤打卡
	 async isFieldPersonnel(){
		 let point = new BMapGL.Point(this.info.GPSLon,this.info.GPSLat)
		 await this.getDistance(point)
	 },
	 //异步加载地图
	 loadJScript() {
		 return new Promise((resolve,reject)=>{
		    window.initMap = function(){
			  resolve(BMapGL)
		    }
			var script = document.createElement('script');
			script.type = 'text/javascript';
			script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=j1TvNK854LRvVuxuAhNNxdhKVB0KbEZD'+'&callback='+'initMap';
			script.onerror = reject
			document.head.appendChild(script);
		 })
	 },
	 // 计算距离打卡点的距离
	 // 签到状态(1正常打卡，2迟到打卡，3早退打卡，4外勤打卡，5不在考勤时间范围)
	 async getDistance(myP1) {
	   // new BMapGL.Point(116.404, 39.915)
	   let myP2 = await this.local();
	   let distance = this.map.getDistance(myP1, myP2).toFixed(2)
	   console.log(distance)
	   if(Number(distance) > Number(this.info.GPSRange)){
		   this.$set(this.info,'AttendanceType',4)
		   this.$set(this.info,'AttendanceTypeString','外勤打卡')
	   }
	 },
	 // 获取当前位置
	local() {
	   return new Promise((resolve) => {
		 // 创建定位对象
		 let geolocation = new BMapGL.Geolocation();
		 geolocation.getCurrentPosition(
		   async function (r) {
			 if (this.getStatus() == BMAP_STATUS_SUCCESS) {
			   resolve(r.point);
			 } else {
			   resolve(new BMapGL.Point(116.404, 39.915)); //北京
			 }
		   },
		   { enableHighAccuracy: true }
		 );
		 navigator.geolocation.clearWatch(geolocation);
	   });
	 }
  },
  destroyed() {
  	clearInterval(this.timer)
  }
} 
</script> 

<style lang="less">	
uni-page-body{
	height: 100%;
	width: 100%;
	background-color: #fff;
}
  .content {
	width: 48%;
	height: 50%;
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, 10%);
}
.title{
	font-size: 14px;
	text-align: center;
	color: #333;
	margin-top: 8px;
}
.rules{
	display: flex;
	justify-content: space-between;
	color: #666;
	padding: 15px;
	line-height: 24px;
}
.rules>*{
	width: 49%;
	background-color: #BDE4FF;
	padding: 8px;
	border-radius: 8px 12px;
}
.rules>*>*:first-child{
	color: #333;
}
#show {
	text-align: center;
	height: 200rpx;
	font-size: 56rpx;
}

.pen {
	height: 48%;
	border-radius: 50%;
	background-color: #e7f5ff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pen2 {
	width: 91%;
	height: 91%;
	border-radius: 50%;
	background-color: #bde4ff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pen3 {
	width: 84%;
	height: 84%;
	border-radius: 50%;
	background-color: #0c86d8;
	text-align: center;
	font-size: 68rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffff;
}

.footer {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	overflow: hidden;
}
.gray{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter: gray;
}
</style>