app 考勤打卡

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

@@ -1,18 +1,40 @@
 <template> 
-  
-    <view v-if="ready" class="contentBox"> 
+  <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 id="attimg" :src="imgsrc" alt="" width="100%">
+				 <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> 
+	<view id='container'></view>
+  </view>
+    
 </template> 
   
   
@@ -49,10 +71,12 @@ export default {
   data() { 
     return { 
       // 页面相关参数 
+	  info:{},
       now: null, 
 	  imgsrc:dk,
       ready: false, 
 	  timer:'',
+	  map:null,
     } 
   }, 
   
@@ -67,7 +91,6 @@ export default {
   
       this.now = this.getCurrentTime()
 	  this.timer = setInterval(this.getCurrentTime,1000)
-	  
 	  await this.judgeIsDK()
 	  
       this.ready = true
@@ -99,18 +122,22 @@ export default {
     },
 	//判断当前时间是否可以打卡
 	async judgeIsDK(){
-		this.HTTP_GET('learun/adms/attendance/IsAttendance',{},'判断当前时间是否可以打卡失败').then(success=>{
-			if(!success){return}
-			if (success.data == "red") {
-				this.imgsrc=dkred;
-			} else if (success.data == "yellow") {
-				this.imgsrc=dkyellow;
-			}else {
-				this.imgsrc=dk;
-			}
-			
-		})
-		
+		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(){
@@ -124,6 +151,54 @@ export default {
 	 　　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)
@@ -145,7 +220,28 @@ uni-page-body{
 	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;
@@ -191,4 +287,13 @@ uni-page-body{
 	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>