ygoa_miniapp/pages/mine/checkIn/checkIn.vue

<template>
	<page-meta root-font-size="system" />
	<view class="attendance-page">

		<view class="header">
			<text class="title">我的考勤记录</text>
			<picker mode="selector" :range="timeRanges" @change="onTimeRangeChange">
				<view class="picker">
					{{ selectedTimeRange }}/切换
				</view>
			</picker>
		</view>

		<!-- 今日签到信息区域 -->
		<view class="todayCheckIn" v-if="todayInfoShow">
			<view class="check-in-container">
				<text class="todayAttTitle">今日签到信息</text>
				<view class="info-row">
					<view>
						<text class="ygoa-icon icon-date"></text>
						<text class="value">日期:</text>
					</view>

					<text class="label">{{ todayData.day }}</text>
				</view>
				<view class="info-row">
					<view>
						<text class="ygoa-icon icon-day"></text>
						<text class="value">晨签时间:</text>
					</view>
					<text class="label">{{ todayData.startTime || '未打卡' }} </text>
				</view>
				<view class="info-row">
					<view>
						<text class="ygoa-icon icon-night"></text>
						<text class="value">晚签时间:</text>
					</view>

					<text class="label">{{ todayData.endTime || '未打卡' }} </text>
				</view>

			</view>
			<!-- 分界线 -->
			<view class="divider"></view>

			<!-- 打卡记录 -->
			<!-- <view class="container">
				<view class="header">
					<text class="clockRecordTitle">打卡记录</text>
				</view>
				<view class="content" style="height: 41vh;">
					<z-paging :fixed="false" :default-page-size="pSize" default-page-no="1" @query="queryData" ref="paging">
						<view class="clockRecord" v-for="clockRecord in clockRecords" :key="clockRecord.date">
							<text class="date">{{ clockRecord.date }}</text>
							<view class="shifts">
								<view class="shift">
									<text class="shift-label">晨签:</text>
									<text class="shift-time">{{ clockRecord.morning||'没有该记录'}}</text>
								</view>
								<view class="shift">
									<text class="shift-label">晚签:</text>
									<text class="shift-time">{{ clockRecord.evening ||'没有该记录'}}</text>
								</view>
							</view>
						</view>
					</z-paging>
				</view>
			</view> -->

			<!-- 日历板块 -->
			<template>
				<view class="calendar-content">
					<view>
						<uni-calendar class="uni-calendar--hook" :selected="calenderData" :showMonth="true" @change="changeDate"
							@monthSwitch="monthSwitch" />
					</view>
				</view>
			</template>
		</view>


		<!-- 周，月数据统计区域 -->
		<view class="statistics" v-if="chartShow">
			<view class="statistic-card">
				<view class="statistic-title">{{ selectedTimeRange }}考勤统计</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-attendance"></text>
						<text class="label">出勤:</text>
					</view>
					<text class="value">{{ attendanceCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-goOut"></text>
						<text class="label">外出:</text>
					</view>
					<text class="value">{{ goOutCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-late"></text>
						<text class="label">迟到:</text>
					</view>

					<text class="value">{{ lateCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-leaveEarly"></text>
						<text class="label">早退:</text>
					</view>
					<text class="value">{{ leaveEarlyCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-absenteeism"></text>
						<text class="label">缺勤:</text>
					</view>
					<text class="value">{{ absenteeismCount }}</text>
				</view>
			</view>
		</view>

		<!-- 图表区域 -->
		<view class="chart-container" v-if="chartShow">
			<view class="">
				<text class="chart-title">考勤趋势图</text>
				<view class="charts-box">
					<qiun-data-charts :type="chartsType" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import {ref,onMounted,reactive} from 'vue';
	import {checkAttendance,getMyTotalCount,getMyQDQtAttendance} from '@/api/mine.js'
	import {useUserStore} from '@/store/user.js';
	const userStore = useUserStore();

	// 创建一个响应式对象记录今天的考勤数据
	const todayData = reactive({
		day: '', // 当前日期
		startTime: '', // 晨签到时间
		endTime: '', // 晚签到时间
	})


	// 控制今日签到信息和图表显示的状态
	const todayInfoShow = ref(true) // 今日签到信息是否显示
	const chartShow = ref(false) // 图表是否显示
	// 图表类型的响应式引用
	const chartsType = ref('')
	// 图表要填充的数据
	const chartData = ref({})
	// 图表配置选项
	const opts = ref({
		color: ["#EE6666", "#FAC858", "#FC8452", "#73C0DE", "#3CA272", "#1890FF", "#91CB74", "#9A60B4",
			"#ea7ccc"
		], // 设定图表颜色
		padding: [15, 15, 0, 5],
		enableScroll: false, // 禁用滚动
		legend: {}, // 图例设置
		xAxis: {
			disableGrid: true // 禁用网格线
		},
		yAxis: {
			data: [{
				min: 0 // y轴最小值
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			}
		}
	});

	// 时间范围选择数组
	const timeRanges = ref(['日', '周', '月']);
	const selectedTimeRange = ref('日'); // 初始化选择的时间范围为“日”

	// 考勤相关统计数据
	const attendanceCount = ref(0); // 出勤次数
	const goOutCount = ref(0); // 外出次数
	const lateCount = ref(0); // 迟到次数
	const leaveEarlyCount = ref(0); // 早退次数
	const absenteeismCount = ref(0); // 缺勤次数

	//用户id
	const userId = userStore.user.useId; //拿到用户id
	//当前周的周一日期
	const thisMondayDate = ref('');

	onMounted(() => {
		initAttData(); //初始化日考勤数据
	});

	//初始化考勤数据
	function initAttData() {
		const nowDate = new Date();
		todayData.day = formatDate(nowDate);
		getthisMondayDate(nowDate);
		getDayAttData();
		initCalenderData();
	}

	//格式化日期
	function formatDate(date) {
		const year = date.getFullYear(); // 获取年份
		const month = date.getMonth() + 1; // 获取月份
		const day = date.getDate(); // 获取日期
		// 格式化月份和日期为两位数
		const formattedMonth = month < 10 ? '0' + month : month;
		const formattedDay = day < 10 ? '0' + day : day;
		return `${year}-${formattedMonth}-${formattedDay}`;
	}

	//获取日考勤数据
	function getDayAttData() {
		const params = {
			universalid: userId,
			rizi: todayData.day
		}
		checkAttendance(params).then(res => {
			if ("success" == res.returnMsg) {
				//数据初始化
				todayData.startTime = '';
				todayData.endTime = '';
				if (res.returnParams.list.length == 0) {
					return
				}
				const attList = res.returnParams.list;
				
				const time1 = attList.find(item => item.att_type_id === '1');
				const time2 = attList.filter(item => item.att_type_id === '2').pop();
				if (time1 !== undefined) {
					todayData.startTime = time1.att_time.split(' ')[1];
				}
				if (time2 !== undefined) {
					todayData.endTime = time2.att_time.split(' ')[1];
				}
			}
		})
	}
	//打卡历史记录(日历版)
	//日历表数据
	const calenderData = ref([])

	// 初始化此月日历数据
	function initCalenderData() {
		const params = {
			type: 2, //设置时间区间
			universalid: userId,
			ks_att_time: todayData.day.slice(0, 8) + '01',
			js_att_time: todayData.day,
			pSize: parseInt(todayData.day.slice(8, 10), 10),//当前天数
			p: 1
		}
		getCalenderData(params)
	}
	
	//日历数据的刷新
	function getCalenderData(params){
		getMyQDQtAttendance(params).then(({ returnParams }) => {
			//定义一个数组用于接收日历data
			const thisCalenderData=[]
			returnParams.list.forEach(item => {
				if ((!item.type.includes('1') || !item.type.includes('2'))&&item.att_date.slice(0, 10)!==todayData.day) {
					const calenderDataInfo = {
						date: item.att_date.slice(0, 10),
						info: '缺卡'
					}
					thisCalenderData.push(calenderDataInfo)
				}
			});
			calenderData.value=thisCalenderData
		})
	}

	//日历点击日期切换事件
	function changeDate(e) {
		// console.log('changeDate: ',e);
		console.log("3:calenderData.value " + JSON.stringify(calenderData.value));
		todayData.day = e.fulldate
		getDayAttData()
	}

	//传入年份月份，返回此月天数
	function getDaysInMonth(year, month) {
		const date = new Date(year, month - 1, 1);
		// 将日期设置为下一个月的第0天，即当前月的最后一天
		date.setMonth(date.getMonth() + 1);
		date.setDate(0);
		// 返回当前月的最后一天的日期，即该月的天数
		return date.getDate();
	}

	//月份切换事件
	function monthSwitch(e) {
		// console.log('monthSwitch: ', e);
		const days=getDaysInMonth(e.year,e.month);
		const params = {
			type: 2, //设置时间区间
			universalid: userId,
			ks_att_time: e.year+'-'+e.month+'-' + '01',
			js_att_time: e.year+'-'+e.month+'-' +days,
			pSize: days,
			p: 1
		}
		getCalenderData(params);
	}



	// //打卡历史记录（下拉刷新版）
	// const paging = ref(null)
	// const pSize = ref(5)
	// function complete(list, total, pageNo) {
	// 	if (pageNo == 1) {
	// 		paging.value.complete(list);
	// 		return
	// 	}
	// 	// 防止重复获取最后一次信息
	// 	if (pSize.value * pageNo < total) {
	// 		paging.value.complete(list)
	// 	} else {
	// 		paging.value.complete([])
	// 	}
	// }
	// //日考勤历史记录
	// const clockRecords = ref([])
	// const totalPage = ref(0)
	// //获取日考勤历史(下拉刷新)
	// function getDayAttHistory() {
	// 	const params = {
	// 		type: 1, //不设时间区间
	// 		universalid: userId,
	// 		ks_att_time: '',
	// 		js_att_time: '',
	// 		pSize: pSize.value,
	// 		p: 1
	// 	}
	// 	getMyQDQtAttendance(params).then(({ returnParams }) => {
	// 		totalPage.value = Math.ceil(returnParams.total / pSize.value)
	// 		const list = returnParams.list.map(item => {
	// 			return {
	// 				date: item.att_date.substring(0, 10),
	// 				morning: item.time.split(',')[item.type.split(',').indexOf("1")],
	// 				evening: item.time.split(',')[item.type.split(',').indexOf("2")],
	// 			}
	// 		});
	// 		clockRecords.value = list;

	// 		complete(clockRecords.value, returnParams.total, returnParams.current)
	// 	})
	// }

	// // 刷新
	// function queryData(pageNo, pSize, queryType) {
	// 	switch (queryType) {
	// 		case 0: // 下拉刷新
	// 		case 1: // 初始加载
	// 			getDayAttHistory()
	// 			break
	// 		case 3: // 上拉加载
	// 			scrollQuery(pageNo, pSize)
	// 			break
	// 		default: // 默认刷新
	// 			getDayAttHistory()
	// 			break
	// 	}
	// }

	// //上拉加载事件
	// function scrollQuery(pageNo, pSize) {
	// 	const params = {
	// 		type: 1, //不设时间区间
	// 		universalid: userId,
	// 		ks_att_time: '',
	// 		js_att_time: '',
	// 		pSize: pSize,
	// 		p: pageNo
	// 	}
	// 	getMyQDQtAttendance(params).then(({ returnParams }) => {
	// 		const list = returnParams.list.map(item => {
	// 			return {
	// 				date: item.att_date.substring(0, 10),
	// 				morning: item.time.split(',')[item.type.split(',').indexOf("1")],
	// 				evening: item.time.split(',')[item.type.split(',').indexOf("2")],
	// 			}
	// 		});
	// 		if (pageNo <= totalPage.value) {
	// 			clockRecords.value.push(...list);
	// 		}
	// 		complete(list, returnParams.total, pageNo)
	// 	})
	// }



	// 日周月时间范围切换事件
	function onTimeRangeChange(event) {
		const selectedIndex = event.detail.value;
		selectedTimeRange.value = timeRanges.value[selectedIndex]; // 设置选择的时间范围（日周月）
		// 根据选择的时间范围更新展示内容
		switch (selectedTimeRange.value) {
			case '日':
				getDayAttData();
				showDay(); // 显示今日考勤
				break;
			case '周':
				chartsType.value = 'pie'; // 设置图表类型为饼图
				fetchWeekAttData().then(message => {
					console.log(message);
					showWeekAndMonth();
					updateChart(message);
				})
					.catch(error => {
						console.error(error);
					});
				break;
			case '月':
				chartsType.value = 'column'; // 设置图表类型为柱状图
				fetchMonthAttData().then(message => {
					console.log('message', message);
					showWeekAndMonth();
					updateChart(message);
				})
					.catch(error => {
						console.error(error);
					});
				break;
		}
	};

	// 显示今日考勤数据
	function showDay() {
		todayInfoShow.value = true; // 显示今日签到信息
		chartShow.value = false; // 隐藏图表
	}

	// 显示周或者月考勤
	function showWeekAndMonth() {
		todayInfoShow.value = false; // 隐藏今日签到信息
		chartShow.value = true; // 显示图表
	}


	//计算本周周一日期
	function getthisMondayDate(today) {
		const dayOfWeek = today.getDay(); // 0 (周日) 到 6 (周六)
		const dayOfMonth = today.getDate();
		// 计算本周周一的日期
		const offset = dayOfWeek === 0 ? -6 : 1; // 如果今天是周日，则偏移量为-6，否则为1
		const thisMonday = new Date(today);
		thisMonday.setDate(dayOfMonth - dayOfWeek + offset);
		thisMondayDate.value = formatDate(thisMonday);
	}

	//获取周考勤记录
	function fetchWeekAttData() {
		return new Promise((resolve, reject) => {
			const params = {
				staffId: userId,
				start_date: thisMondayDate.value,
				end_date: todayData.day
			}
			getMyTotalCount(params).then(res => {
				const myWeekAttData = res.returnParams;
				const mockData = {
					series: [{
						data: [
							{
								"name": "缺勤",
								"value": myWeekAttData.type6,
								"labelText": "缺勤:" + myWeekAttData.type6 + "次"
							},
							{
								"name": "迟到",
								"value": myWeekAttData.type4,
								"labelText": "迟到:" + myWeekAttData.type4 + "次"
							},
							{
								"name": "早退",
								"value": myWeekAttData.type5,
								"labelText": "迟到:" + myWeekAttData.type5 + "次"
							},
							{
								"name": "出勤",
								"value": myWeekAttData.type0,
								"labelText": "出勤:" + myWeekAttData.type0 + "次"
							},
							{
								"name": "外出",
								"value": myWeekAttData.type1,
								"labelText": "外出:" + myWeekAttData.type1 + "次"
							},
							{
								"name": "公休",
								"value": myWeekAttData.type2,
								"labelText": "公休:" + myWeekAttData.type2 + "次"
							},
							{
								"name": "未排班",
								"value": myWeekAttData.type3,
								"labelText": "未排班:" + myWeekAttData.type3 + "次"
							}
						]
					}],
				};
				// const weekData = mockData.series[0].data;
				attendanceCount.value = myWeekAttData.type1;
				goOutCount.value = myWeekAttData.type1;
				lateCount.value = myWeekAttData.type4;
				leaveEarlyCount.value = myWeekAttData.type5;
				absenteeismCount.value = myWeekAttData.type6;
				resolve(mockData)
			}).catch(error => {
				reject(error)
			})
		})

	}

	// 获取月考勤记录
	function fetchMonthAttData() {
		return new Promise((resolve, reject) => {
			const weekNodeList = [];// 存储近月每周的周一，周天日期
			weekNodeList.unshift(thisMondayDate.value, todayData.day);
			while (weekNodeList.length !== 8) {
				const weekNode = getOneDaysAgo(weekNodeList[0]);
				weekNodeList.unshift(weekNode);
				weekNodeList.unshift(getSixDaysAgo(weekNode));
			}

			const data1 = [];
			const data2 = [];
			const data3 = [];
			const dataFetchPromises = []; // 存储所有数据请求的promise

			for (let i = 0; i < weekNodeList.length - 1; i += 2) {
				const params = {
					staffId: userId,
					start_date: weekNodeList[i],
					end_date: weekNodeList[i + 1]
				};
				const fetchPromise = getMyTotalCount(params).then(res => {
					// for (const type in res.returnParams) {
					// 	console.log('type', type);
					// }
					console.log('res.returnParams', res.returnParams);

					data1.push(res.returnParams.type6);
					data2.push(res.returnParams.type4);
					data3.push(res.returnParams.type5);
				});
				dataFetchPromises.push(fetchPromise);
			}

			// 等待所有数据请求完成
			Promise.all(dataFetchPromises).then(() => {
				const params = {
					staffId: userId,
					start_date: weekNodeList[0],
					end_date: weekNodeList[weekNodeList.length - 1]
				};
				return getMyTotalCount(params);
			}).then(res => {
				const myMonthAttData = res.returnParams;
				attendanceCount.value = myMonthAttData.type0;
				goOutCount.value = myMonthAttData.type2;
				lateCount.value = myMonthAttData.type4;
				leaveEarlyCount.value = myMonthAttData.type5;
				absenteeismCount.value = myMonthAttData.type6;

				const mockData = {
					categories: ["第1周", "第2周", "第3周", "第4周"],
					series: [{
						name: "缺勤",
						data: data1
					}, {
						name: "迟到",
						data: data2
					}, {
						name: "早退",
						data: data3
					}]
				};
				// console.log(data1); // 打印data1检查内容
				resolve(mockData);
			}).catch(error => {
				reject(error);
			});
		});
	}


	//获取六天前的日期
	function getSixDaysAgo(dateStr) {
		const date = new Date(dateStr);
		date.setDate(date.getDate() - 6);
		return date.toISOString().split('T')[0]; // 返回格式为'YYYY-MM-DD'的字符串
	}
	//获取一天前的日期
	function getOneDaysAgo(dateStr) {
		const date = new Date(dateStr);
		date.setDate(date.getDate() - 1);
		return date.toISOString().split('T')[0]; // 返回格式为'YYYY-MM-DD'的字符串
	}


	// 更新图表数据
	function updateChart(res) {
		chartData.value = JSON.parse(JSON.stringify(res)); // 更新图表数据
	}
</script>


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

	.ygoa-icon {
		margin-right: 0.5rem;
		font-size: calc(2rem + 0px) !important;
		vertical-align: middle;
		/* 确保图标与文本竖直居中 */
	}

	.attendance-page {
		padding: 20px;
		background-color: #f9f9f9;

		::v-deep .calendar-content {
			margin: -20px;
			margin-top: 20px;
			.uni-calendar__header {
				.uni-calendar__header-text {
					font-size: calc(14px + .5*(1rem - 16px)) !important;
				}
				.uni-calendar__backtoday {
					padding: 2px 8px 2px 10px !important;
					font-size: calc(0.75rem + 0px) !important;
				}
			}
			.uni-calendar__box {
				.uni-calendar__weeks {
					.uni-calendar__weeks-day {
						.uni-calendar__weeks-day-text {
							font-size: calc(14px + .5*(1rem - 16px)) !important;
						}
					}
					.uni-calendar__weeks-item {
						.uni-calendar-item__weeks-box-item {
							.uni-calendar-item__weeks-box-circle {
								width: calc(8px + .5*(1rem - 16px)) !important;
								height: calc(8px + .5*(1rem - 16px)) !important;
								top: calc(5px - .25*(1rem - 16px)) !important;
								right: calc(5px - .25*(1rem - 16px)) !important;
							}
							.uni-calendar-item__weeks-box-text {
								font-size: calc(14px + .5*(1rem - 16px)) !important;
							}
							.uni-calendar-item__weeks-lunar-text {
								font-size: calc(12px + .5*(1rem - 16px)) !important;
							}
						}
					}
				}
			}
		}
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;

		.clockRecordTitle {
			font-size: calc(1.25rem + 0px) !important;
			margin: auto;
		}
	}

	.title {
		font-size: calc(1.5rem + 0px) !important;
		font-weight: bold;
		color: #333;
	}

	.picker {
		border: 1px solid #3498db;
		border-radius: 5px;
		padding: 10px;
		background-color: #ecf6fc;
		color: #3498db;
	}

	.statistics {
		// display: flex;
		justify-content: center;
	}

	.statistic-card {
		background: white;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* width: 100%; */
		max-width: 600px;
	}

	.statistic-title {
		text-align: center;
		font-size: calc(1.25rem + 0px) !important;
		font-weight: bold;
		color: #333;
	}

	.statistic-item {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		padding: 10px 0;
	}

	.label {
		color: #666;
	}

	.value {
		font-size: calc(1.125rem + 0px) !important;
		font-weight: bold;
		line-height: calc(2rem + 0px) !important;
		color: #333;
	}

	.label {
		font-size: calc(1rem + 0px) !important;
		line-height: calc(2rem + 0px) !important;
	}

	.chart-container {
		margin-top: 20px;
	}

	.chart-title {
		font-size: calc(1.25rem + 0px) !important;
		font-weight: bold;
		text-align: center;
		margin-bottom: 10px;
		color: #333;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.todayCheckIn {
		background-color: #ffffff;
		padding: 20px;
		margin: auto -20px; //抵消父级padding
		box-sizing: border-box;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.check-in-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.todayAttTitle {
		font-size: calc(1.375rem + 0px) !important;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.info-row {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}


	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		vertical-align: middle;
		/* 确保图标与文本竖直居中 */
	}

	.clockRecord {
		margin-bottom: 20px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 8px;
	}

	.date {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.name {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.divider {
		border-bottom: 5px dashed #ccc; //虚线
		margin: 10px 0;
	}

	.shift-label {
		font-size: 14px;
		color: #333;
	}

	.shift-time {
		font-size: 14px;
		color: #333;
	}
</style>