ygoa_miniapp/pages/mine/clockIn/clockIn.vue

<template>
	<page-meta root-font-size="system" />
	<view class="container">
		<!-- 时间日期信息 -->
		<view class="header">
			<text class="day">{{ currentDay }}</text>
			<text class="date">{{ currentDate }}</text>
			<text class="nowTime">{{ nowTime }}</text>
		</view>
		<!-- 打卡记录 -->
		<view class="record">
			<!-- <view class="record-item" v-if="nowTime != '' && nowTime <= '12:00:00' || signName == '上班签到'">
				<text class="ygoa_icon icon-goToWork"></text>
				<text class="title">上班</text>
				<text class="time">{{ signInTime || '未打卡' }}</text>
				<text class="signStatus" v-if="!isSignInStatusDisabled">({{ signInStatusName }})</text>
			</view>
			<view class="record-item" v-else-if="nowTime > '12:00:00' && signName == '下班签退'">
				<text class="ygoa_icon icon-afterWork"></text>
				<text class="title">下班</text>
				<text class="time">{{ signOutTime || '未打卡' }}</text>
				<text class="signStatus" v-if="!isSignOutStatusDisabled" style="color: #e64340;">({{ signOutStatusName
					}})</text>
			</view> -->
			<view class="record-item" @click="changeAttType">
				<text class="ygoa_icon icon-goToWork"></text>
				<text class="title">打卡类型</text>
				<picker mode="selector" :range="typeRanges" @change="onTypeRangeChange" class="attTypePicker">
					<text class="time">
						{{ selectedTypeRange }}
					</text>
					<text class="time">(点击切换)</text>
				</picker>
			</view>
			<view class="record-item" @click="getAddress">
				<text class="ygoa_icon icon-location"></text>
				<text class="title">当前位置</text>
				<text class="time">{{ address || '点击获取定位' }}</text>
			</view>
		</view>
		<!-- 地图 -->
		<atl-map :mapKey="config.mapKey" :mapType="mapType" :longitude="longitude" :latitude="latitude" :marker="marker"
			:polygons="polygons" :isPolygons="true">
			<template v-slot:content>
			</template>
		</atl-map>
		<!-- 打卡按钮 -->
		<view class="footer">
			<!-- <button type="default" @click="signInOrOut" style="background-color: #3c9cff; color: #fcfcfc;"
				v-if="signName == '上班签到'">上班签到</button>
			<button type="default" @click="signInOrOut" style="background-color: #1aad19; color: #fcfcfc;"
				v-else-if="signName == '下班签退'">下班签退</button> -->
			<button type="default" @click="signInOrOut" style="background-color: #3c9cff; color: #fcfcfc;"
				>{{selectedTypeRange}}打卡</button>
		</view>
	</view>
</template>


<script setup lang="ts">
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
// 导入地理位置相关函数
import booleanPointInPolygon from "@turf/boolean-point-in-polygon";
import { point, polygon } from "@turf/helpers";
import { useUserStore } from '@/store/user';
import { useConfigStore } from '@/store/config'
import $modal from '@/plugins/modal.js';
import $tab from '@/plugins/tab.js';
import config from '@/config.js';
import { createAttendance, tranAddress, checkAttendance, getAttendanceRule, getAttendanceSegment } from '@/api/mine.js'
const userStore = useUserStore();
const configStore = useConfigStore();
const thisUser = userStore.user;
const intervalId = ref(null); // 定时器ID
onBeforeUnmount(() => {
	clearInterval(intervalId.value);
})
// 组件挂载后初始化当前日期与位置
onMounted(() => {
	// getAttRule();
	dateInit();
	getAddress();
});


// 当前日期和时间相关信息
const currentDate = ref('2023-04-01');
const currentDay = ref('星期三');
const nowTime = ref(''); // 当前时间
const weekArr = reactive(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']); // 星期数组

// 初始化日期
function dateInit() {
	showNowTime();
	const nowDate = new Date();
	const year = nowDate.getFullYear(); // 获取年份
	const month = nowDate.getMonth() + 1; // 获取月份
	const day = nowDate.getDate(); // 获取日期
	// 格式化月份和日期为两位数
	const formattedMonth = month < 10 ? '0' + month : month;
	const formattedDay = day < 10 ? '0' + day : day;
	currentDate.value = `${year}-${formattedMonth}-${formattedDay}`; // 设置当前日期
	const dayOfWeek = nowDate.getDay(); // 获取当前星期
	currentDay.value = weekArr[dayOfWeek]; // 设置当前星期
	getTodayAtt();
	// if (nowTime.value > '12:00') {
	// 	signName.value = '下班签退'
	// }
}

function showNowTime() {
	intervalId.value = setInterval(() => {
		nowTime.value = getNowTime()
	}, 1000); // 每1秒更新一次
}

const signInTime = ref(''); // 上午上班签到时间
const signOutTime = ref(''); // 下午下班签到时间
const signOutTimeAm = ref(''); // 上午下班签到时间
const signInTimePm= ref(''); // 下午上班签到时间

//打卡按钮文字显示
const signName = ref('')

//迟到早退状态，默认隐藏
const signInStatusName = ref('迟到')
const signOutStatusName = ref('早退')
const isSignInStatusDisabled = ref(true)
const isSignOutStatusDisabled = ref(true)
//获取今天考勤状态
function getTodayAtt() {
	const params = {
		universalid: thisUser.useId,
		rizi: currentDate.value
	}
	checkAttendance(params).then(res => {
		if ("success" == res.returnMsg) {
			// console.log("kaoqin",res);
			const attList = res.returnParams.list;
			let time1;
			let time2;
			let time3;
			let time4;
			//上午上班
			const filteredRecord1 = attList.filter(item => item.att_type_id === '1');
			if (filteredRecord1.length > 0) {
				time1 = filteredRecord1.reduce((latest, current) => {
					const latestTime = new Date(latest.att_time);
					const currentTime = new Date(current.att_time);
					return (currentTime < latestTime) ? current : latest;
				});
			}

			//下午下班拿到所有签退数据后，取最大时间的那个
			const filteredRecord2 = attList.filter(item => item.att_type_id === '2');
			if (filteredRecord2.length > 0) {
				time2 = filteredRecord2.reduce((latest, current) => {
					const latestTime = new Date(latest.att_time);
					const currentTime = new Date(current.att_time);
					return (currentTime > latestTime) ? current : latest;
				});
			}
			
			//上午下班，取最大时间的那个
			const filteredRecord3 = attList.filter(item => item.att_type_id === '7');
			if (filteredRecord3.length > 0) {
				time3 = filteredRecord3.reduce((latest, current) => {
					const latestTime = new Date(latest.att_time);
					const currentTime = new Date(current.att_time);
					return (currentTime > latestTime) ? current : latest;
				});
			}
			
			//下午上班，取最小时间
			const filteredRecord4 = attList.filter(item => item.att_type_id === '8');
			if (filteredRecord4.length > 0) {
				time4 = filteredRecord4.reduce((latest, current) => {
					const latestTime = new Date(latest.att_time);
					const currentTime = new Date(current.att_time);
					return (currentTime < latestTime) ? current : latest;
				});
			}
			
			//打卡状态修改
			//打了上班卡
			let checkContinue = false;
			if (time1 !== undefined) {
				// console.log('getTime1',time1);
				signInTime.value = time1.att_time.split(' ')[1];
				if(config.clock && config.clock == 'multiple'){
					selectedTypeRange.value='上午下班'
				}else{
					selectedTypeRange.value='下班'
				}
				checkContinue = true;
				// signName.value = '下班签退';
				// if (isTimeInRange(subOneMinute(signInTime.value), ...configStore.lateTimeRange)) {//迟到
				// 	signInStatusName.value = '迟到';
				// 	isSignInStatusDisabled.value = false;
				// } else if (isTimeInRange(signInTime.value, configStore.lateTimeRange[1], '23:59:59')) {
				// 	signInStatusName.value = '旷工';
				// 	isSignInStatusDisabled.value = false;
				// }
			} 
			// else if (new Date().getHours() >= 12) {
			// 	signName.value = '下班签退'
			// } 
			else {
				// signName.value = '上班签到'; 
				if(config.clock && config.clock == 'multiple'){
					selectedTypeRange.value='上午上班'
				}else{
					selectedTypeRange.value='上班'
				}
				checkContinue = false;
			}
			//上午下班卡
			if (time3 !== undefined) {
				signOutTimeAm.value = time3.att_time.split(' ')[1]; 
				if(checkContinue){
					selectedTypeRange.value='下午上班' 
				} 
			}else{
				checkContinue = false;
			} 
			//下午上班卡
			if (time4 !== undefined) {
				signInTimePm.value = time4.att_time.split(' ')[1];
				 if(checkContinue){
					 selectedTypeRange.value='下午下班' 
				 } 
			}else{
				checkContinue = false;
			}   
			//打了下班卡
			if (time2 !== undefined) {
				signOutTime.value = time2.att_time.split(' ')[1];
				// if (isTimeInRange(signOutTime.value, "00:00:00", configStore.earlyTimeRange[0])) {//旷工
				// 	signOutStatusName.value = '旷工';
				// 	isSignOutStatusDisabled.value = false;
				// }
				// else if (isTimeInRange(signOutTime.value, ...configStore.earlyTimeRange)) {
				// 	signOutStatusName.value = '早退';
				// 	isSignOutStatusDisabled.value = false;
				// }
				// else {
				// 	isSignOutStatusDisabled.value = true; //隐藏早退状态
				// }
			}
			
			
		}
	})
}

let typeRanges;
if(config.clock && config.clock == 'multiple'){
	typeRanges=ref(['上午上班','上午下班','下午上班','下午下班','外出','外出返回'])
}else{
	typeRanges=ref(['上班','下班','外出','外出返回'])
}
const selectedTypeRange=ref('上班')
//打卡类型切换
function onTypeRangeChange(event){
	const selectedIndex = event.detail.value;
	selectedTypeRange.value=typeRanges.value[selectedIndex]
}


//上班卡或下班卡
function signInOrOut() {
	// if ('上班签到' == signName.value) {
	// 	signIn();
	// } else {
	// 	signOut();
	// }
	if(config.clock && config.clock == 'multiple'){
		switch(selectedTypeRange.value){
			case '上午上班':
				signInForMultiple('上午上班')
				break
			case '下午下班':
				signOutForMultiple('下午下班')
				break
			case '外出':
			case '外出返回':
				otherTypeClockIn()
				break
			case '下午上班':
				signInForMultiple('下午上班')
				break
			case '上午下班':
				signOutForMultiple('上午下班')
				break
		}
	}else{
		switch(selectedTypeRange.value){
			case '上班':
				signIn()
				break
			case '下班':
				signOut()
				break
			case '外出':
			case '外出返回':
				otherTypeClockIn()
				break		
		}
	}
}

//外出或外出返回等其他类型的打卡
function otherTypeClockIn(){
	//拿到打卡类型
	const signIn = typeRanges.value.indexOf(selectedTypeRange.value)+1
	getAddress().then(() => {
		clockIn(signIn);
	});
}

//上班签到
function signIn() {
	// const now = getNowTime();
	const signIn = 1;
	getAddress().then(() => {
		clockIn(signIn);
	});
};

function signInForMultiple(selectTypeName) { 
	let signIn = 1;
	if(selectTypeName == '上午上班'){
		signIn = 1
	}else if(selectTypeName == '下午上班'){
		signIn = 8
	}
	getAddress().then(() => {
		clockIn(signIn);
	});
};

// 下班签退
function signOut() {
	const now = getNowTime();
	const signOut = 2; 
	//判断打卡时间是否符合
	const currentRangeIndex = 1; 
	if (!isTimeInRange(now, ...configStore.signOutTimeRange[currentRangeIndex])) {
		$modal.confirm('当前非正常签退时间，是否继续？').then(res => {
			if (res) {
				getAddress().then(() => {
					clockIn(signOut); // 执行打卡并获取结果
				});
			}
		}).catch(() => { })
	} else {
		getAddress().then(() => {
			clockIn(signOut);
		});
	}
};

function signOutForMultiple(selectTypeName) {
	const now = getNowTime();
	let signOut = 2;
	if(selectTypeName == '上午下班'){
		signOut = 7
	}else if(selectTypeName == '下午下班'){
		signOut = 2
	}
	//判断打卡时间是否符合
	const currentRangeIndex = signOut === 7 ? 0 : 1; 
	if (!isTimeInRange(now, ...configStore.signOutTimeRange[currentRangeIndex])) {
		$modal.confirm('当前非正常签退时间，是否继续？').then(res => {
			if (res) {
				getAddress().then(() => {
					clockIn(signOut); // 执行打卡并获取结果
				});
			}
		}).catch(() => { })
	} else {
		getAddress().then(() => {
			clockIn(signOut);
		});
	}
};

//获取当前时间
function getNowTime() {
	return new Date().toLocaleTimeString('en-US', {
		hour12: false
	}).substring(0, 8)
}

//判断时间是否在区间内
function isTimeInRange(time, startTime, endTime) {
	// 将时间字符串转换为Date对象
	const timeObj = new Date('1970-01-01T' + time + 'Z');
	const startObj = new Date('1970-01-01T' + startTime + 'Z');
	const endObj = new Date('1970-01-01T' + endTime + 'Z');
	// 比较时间
	return timeObj >= startObj && timeObj < endObj;
}

//减一分钟
function subOneMinute(timeStr) {
	// 将时间字符串转换为 Date 对象
	const [hours, minutes, seconds] = timeStr.split(':').map(Number);
	const date = new Date();
	date.setHours(hours, minutes, seconds, 0); // 设置时间为给定的时分秒
	// 减去一分钟
	date.setMinutes(date.getMinutes() - 1);
	return date.toTimeString().slice(0, 8);
}

// 地图配置信息
// const mapKey = config.mapKey; // 地图API密钥
const mapType = ref('tmap'); // 地图类型
const address = ref(''); // 初始化地址

// 打卡定位信息
const longitude = ref(); // 经度
const latitude = ref(); // 纬度

// 标记信息
const marker = reactive({
	id: 1,
	latitude: 25.958812,
	longitude: 119.213036,
	width: 50, // 标记宽度
	height: 50, // 标记高度
	title: '宇光同行' // 标记标题
});

// 获取当前定位经纬度
function getlocation() {
	return new Promise((resolve, reject) => {
		//判断用户是否打开位置权限
		uni.getSetting({
			success(res) {
				// 如果用户未授权
				if (!res.authSetting['scope.userLocation']) {
					$modal.confirm('需要您授权获取地理位置信息').then(res => {
						if (res) {
							// 打开权限设置页面
							uni.openSetting({
								success: (settingData) => {
									if (settingData.authSetting[
										'scope.userLocation']) {
										$modal.msg('授权后请重新打开此页面')
										// reject("用户未授权");
									}
								}
							});
						}
					})
						.catch(err => {
							//用户点击取消
							if (!err) {
								uni.showToast({
									title: '获取地理位置授权失败',
									icon: 'none',
									success: () => {
										// 返回上一页
										setTimeout(() => {
											$tab.navigateBack()
										}, 1000);
									}
								});
								// reject("用户未授权");
							}
						})
				} else {
					// 已授权，获取位置
					fetchLocation(resolve, reject);
				}
			},
			fail(err) {
				reject(err); // 拒绝 Promise
			}
		});
	});
}

// 封装获取位置的函数
function fetchLocation(resolve, reject) {
	wx.getLocation({
		type: 'gcj02',
		isHighAccuracy: true, // 开启高精度定位 
		highAccuracyExpireTime: 4000, // 高精度定位超时时间 
		success: (res) => {
			longitude.value = res.longitude; // 保存经度
			latitude.value = res.latitude; // 保存纬度	
			resolve(); // 解析 Promise
		},
		fail: (err) => {
			if (err.errMsg.includes("频繁调用")) {
				$modal.msg('请勿频繁调用');
				// reject("频繁调用错误");
				return;
			}
			// console.log('getLocationErr', err);
			reject(err); // 拒绝 Promise
		},
	});
}


// 获取当前位置地址
function getAddress() {
	return new Promise((resolve, reject) => {
		getlocation()
			.then(res => {
				tranLocationToAddress(); // 执行地址转换
				resolve(res); // 地址获取成功
			})
			.catch(err => {
				// console.error('获取地址失败', err);
				reject(err); // 地址获取失败
			});
	});
}

// 经纬度转地址
function tranLocationToAddress() {
	let locationStr = latitude.value + ',' + longitude.value; // 组合经纬度
	tranAddress(locationStr).then(res => {
		address.value = res.result.address; // 保存地址
	})
		.catch(err => {
			console.log('地址转换请求失败', err); // 请求错误处理
		})
}

// 多边形区域设置
const polygons = reactive([{
	points: [{
		latitude: 25.9591401,
		longitude: 119.21292356
	},
	{
		latitude: 25.95828592,
		longitude: 119.21261955
	},
	{
		latitude: 25.9576709,
		longitude: 119.21458294
	},
	{
		latitude: 25.95845106,
		longitude: 119.21486162
	},
	{
		latitude: 25.9591401,
		longitude: 119.21292356
	}
	],
	strokeWidth: 1, // 边框宽度
	strokeColor: "#ff000066", // 边框颜色
	fillColor: "#ff000016", // 填充颜色
}]);

// 打卡
function clockIn(attType) {
	// 发起打卡请求相关业务逻辑
	//判断是否已经打过上班卡
	if (isClockIn(attType)) {
		return;
	}
	var now = new Date();
	// 使用toISOString()获取一个ISO格式的字符串，然后替换T为空格，并去除最后的Z（表示UTC时间）
	var formatted = now.toISOString().replace('T', ' ').replace('Z', '');
	var localString = new Date(formatted + '-08:00').toISOString().replace('T', ' ').replace('Z', '');
	const params = {
		user_name: thisUser.name,
		user_id: thisUser.useId,
		kaoqin_type: attType,
		now_date: localString,
		longitude: longitude.value,
		latitude: latitude.value,
		address: address.value,
		unitId: thisUser.unitId
	};
	createAttendance(params).then(res => {
		if ("success" == res.returnMsg) {
			if(1==attType || 2==attType || 7==attType || 8==attType){
				getTodayAtt(); //更新今日考勤数据
			}	
			isToFillClock(attType, localString.substring(11, 19));//判断考勤状态是否异常
		} else {
			uni.showToast({
				title: "未在指定范围，打卡失败",
				icon: 'none'
			});
		}
	})
	// const _polygons = polygons.map((polygon) => {
	// 	return polygon.points.map((i) => [
	// 		Number(i.longitude),
	// 		Number(i.latitude),
	// 	]);
	// });
	// const _point = point([longitude.value, latitude.value]); // 用当前坐标创建点
	// const _polygon = polygon(_polygons); // 创建多边形
	// const f = booleanPointInPolygon(_point, _polygon); // 判断点是否在多边形内	
}

//是否补卡、请假判断
function isToFillClock(attType, time) { 
    // console.log('isToFillClock',attType,time);  
    // 早上迟到跳补卡 
    let status = ''; 
    if (attType === 1 || attType === 8) {  
        const currentRangeIndex = attType === 1 ? 0 : 1; 
        if (isTimeInRange(subOneMinute(time), ...configStore.lateTimeRange[currentRangeIndex]))  { 
            status = '迟到'; 
        } else if (isTimeInRange(time, configStore.lateTimeRange[currentRangeIndex][1],  '23:59:59')) { 
            status = '旷工'; 
        } else { 
            $modal.msgSuccess(' 打卡成功'); 
            setTimeout(() => { 
                $tab.navigateTo('/pages/mine/checkIn/checkIn');  
            }, 1000); 
            return; 
        } 
		if(config.companyCode && config.companyCode == 'yg'){
			$modal.confirm(' 当前状态为' + status + '！\n是否跳转补卡页面').then(() => {
				 $tab.reLaunch('/pages/work/index');  
			 }) 
			 .catch(() => { 
				 $tab.navigateTo('/pages/mine/checkIn/checkIn');  
			 });
		}else{
			$tab.navigateTo('/pages/mine/checkIn/checkIn');  
		}
    } else if (attType === 2 || attType === 7) { 
        const currentRangeIndex = attType === 7 ? 0 : 1; 
        // 早退请假提示 
        if (isTimeInRange(time, '00:00:00', configStore.earlyTimeRange[currentRangeIndex][0]))  { 
            status = '旷工'; 
        } else if (isTimeInRange(time, ...configStore.earlyTimeRange[currentRangeIndex]))  { 
            status = '早退'; 
        } else { 
            $modal.msgSuccess(' 打卡成功'); 
            setTimeout(() => { 
                $tab.navigateTo('/pages/mine/checkIn/checkIn');  
            }, 1000); 
            return; 
        } 
        $modal.confirm(' 当前状态为' + status + '！\n是否跳转请假页面').then(() => { 
            $tab.reLaunch('/pages/work/index');  
        }) 
        .catch(() => { 
            $tab.navigateTo('/pages/mine/checkIn/checkIn');  
        }); 
    } else { 
        $modal.msgSuccess(' 打卡成功'); 
        setTimeout(() => { 
            $tab.navigateBack();  
        }, 1000); 
    } 
} 

//判断是否已经打过上班卡
function isClockIn(attType) {
	if (1==attType && '' != signInTime.value) {
		$modal.showToast('请勿重复打卡')
		return true;
	}else if (8==attType && '' != signInTimePm.value) {
		$modal.showToast('请勿重复打卡')
		return true;
	}
	return false;
}
</script>

<style lang="scss" scoped>
// @import "@/static/font/ygoa/iconfont.css";

.ygoa_icon {
	margin-right: 20rpx;
	/* font-size: calc(26px + .5(1rem - 16px)); */
	font-size: calc(1.625rem + 0px) !important;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;

	.header {
		width: 100%;
		height: 200rpx;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.day {
			font-size: calc(1.5rem + 0px);
			color: #333;
			/* font-weight: bold; */
		}

		.date,
		.nowTime {
			font-size: calc(1rem + 0px);
			color: #666;
		}

		// .nowTime {
		// 	font-size: 16px;
		// 	color: #666;
		// }
	}
}

.record {
	width: 100%;
	margin-top: 20rpx;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 0 15rpx;

	.record-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 1px solid #eee;

		.icon {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}

		.title {
			font-size: calc(0.9rem + 0px);
		}

		.time {
			font-size: calc(0.8rem + 0px);
			color: #999;
			margin-left: auto;
		}

		.signStatus {
			font-size: calc(0.9rem + 0px);
			color: orange;
			/* margin-left: auto; */
		}
		picker{
			width: 73%;
			text-align: right;
			.attType{
				font-size: calc(0.8rem + 0px);
			}
		}
	}
}

::v-deep.map-content {
	.map {
		margin-top: 20rpx;
		height: 56vh !important;
	}
}

.footer {
	width: 100%;
	// margin-top: 20rpx;
	display: flex;
	justify-content: space-around;
	position: sticky;
	z-index: 10;
	bottom: 10px;

	button {
		font-size: calc(18px + .5*(1rem - 16px));
		width: 100%;
	}
}
</style>