ygoa_miniapp/pages/mine/checkIn/checkIn.vue

<template>
	<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="statistics" :class="{'show': chartShow}">
			<view class="statistic-card">
				<view class="statistic-title">考勤统计</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-leave"></text>
						<text class="label">请假:</text>
					</view>
					
					<text class="value">{{ leaveCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-businessTrip"></text>
						<text class="label">出差:</text>
					</view>
					
					<text class="value">{{ businessTripCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-clockIn1"></text>
						<text class="label">打卡:</text>
					</view>
					<text class="value">{{ clockInCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-makeUp"></text>
						<text class="label">补卡:</text>
					</view>
					<text class="value">{{ makeUpCount }}</text>
				</view>
			</view>
		</view>

		<!-- 今日签到信息区域 -->
		<view class="todayCheckIn" :class="{'show': shouldShow}">
			<view class="check-in-container">
				<text class="title2">今日签到信息</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 class="info-row">
					<view>
						<text class="ygoa-icon icon-checkInStatus"></text>
						<text class="value">状态:</text>
					</view>
					
					<text class="label">{{todayData.status}}</text>
				</view>
			</view>
		</view>

		<!-- 图表区域 -->
		<view class="chart-container" :class="{'show': 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>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';

	// 创建一个响应式对象记录今天的考勤数据
	const todayData = reactive({
		day: '2024-11-11', // 当前日期
		startTime: '08:59:59', // 晨签到时间
		endTime: '', // 晚签到时间
		status: '待补卡' // 签到状态
	})

	// 控制今日签到信息和图表显示的状态
	const shouldShow = ref(true) // 今日签到信息是否显示
	const chartShow = ref(false) // 图表是否显示

	// 图表类型的响应式引用
	const chartsType = ref('') 

	// 图表要填充的数据
	const chartData = ref({}) 

	// 图表配置选项
	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#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 leaveCount = ref(0); // 请假次数
	const businessTripCount = ref(0); // 出差次数
	const clockInCount = ref(0); // 打卡次数
	const makeUpCount = ref(0); // 补卡次数
	

	const currentData = ref({
		attendance: 0, // 出勤
		leave: 0, // 请假
		businessTrip: 0, // 出差
		clockIn: 0, // 打卡
		makeUp: 0, // 补卡
		res: {}, // 记录详细数据
	});

	onMounted(() => {
		fetchAttendanceData();
	});

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

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

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

	// 获取考勤数据的函数
	function fetchAttendanceData() {
		// 模拟考勤数据
		const mockData = {
			日: {
				attendance: 5,
				leave: 0,
				businessTrip: 1,
				clockIn: 5,
				makeUp: 0,
				res: {}
			},
			周: {
				attendance: 30,
				leave: 2,
				businessTrip: 1,
				clockIn: 32,
				makeUp: 1,
				res: {
					series: [{
						data: [{
							"name": "出勤",
							"value": 50,
							"labelText": "出勤:50次"
						}, {
							"name": "请假",
							"value": 30
						}, {
							"name": "出差",
							"value": 20
						}, {
							"name": "打卡",
							"value": 18,
							"labelText": "打卡:18次"
						}, {
							"name": "补卡",
							"value": 8
						}]
					}],
				}
			},
			月: {
				attendance: 100,
				leave: 5,
				businessTrip: 2,
				clockIn: 105,
				makeUp: 3,
				res: {
					categories: ["第1周", "第2周", "第3周", "第4周"], 
					series: [{
						name: "出勤",
						data: [35, 8, 25, 37] 
					},
					{
						name: "出差",
						data: [70, 40, 65, 100]
					},
					{
						name: "请假",
						data: [100, 80, 95, 10] 
					}]
				},
			}
		};

		// 获取当前选择时间范围的考勤数据
		const currentData1 = mockData[selectedTimeRange.value];
		currentData.value = currentData1; // 更新当前数据

		// 更新统计数据
		if (currentData1) {
			if('周'==selectedTimeRange.value){
				const weekData=currentData1.res.series[0].data;
				attendanceCount.value = weekData[0].value;
				leaveCount.value = weekData[1].value;
				businessTripCount.value = weekData[2].value;
				clockInCount.value = weekData[3].value;
				makeUpCount.value = weekData[4].value;
			}else{
				attendanceCount.value = currentData1.attendance;
				leaveCount.value = currentData1.leave;
				businessTripCount.value = currentData1.businessTrip;
				clockInCount.value = currentData1.clockIn;
				makeUpCount.value = currentData1.makeUp;
			}
		} else {
			console.error('没有找到相关的考勤数据:', selectedTimeRange.value); // 错误处理
		}
	}

	// 获取图表数据
	function getData() {
		let res = currentData.value.res; // 获取当前数据的额外信息
		chartData.value = JSON.parse(JSON.stringify(res)); // 更新图表数据
	}
	
	// 计算数组和的辅助函数 (未使用)
	function countArr(arr){
		const sum=0;
		for (var i = 0; i < arr.length; i++) {
			sum+=arr[i];
		}
		return sum;
	}
</script>


<style scoped>
	@import "@/static/font/ygoa/iconfont.css";
	
	.ygoa-icon{
		margin-right: 20rpx;
		font-size: 50rpx;
		vertical-align: middle; /* 确保图标与文本竖直居中 */
	}
	.attendance-page {
		padding: 20px;
		background-color: #f9f9f9;
	}

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

	.title {
		font-size: 24px;
		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: 20px;
		font-weight: bold;
		color: #333;
	}

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

	.label {
		color: #666;
	}

	.value {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}
	
	.value, .label {
	    line-height: 50rpx; /* 与图标高度一致，确保垂直对齐 */
	}

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

	.chart-title {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 10px;
		color: #333;
	}

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


	.todayCheckIn {

		background-color: #ffffff;
		padding: 20px;
		box-sizing: border-box;
	}



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

	.title2 {
		font-size: 22px;
		font-weight: bold;
		margin-bottom: 20px;
	}


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


	.todayCheckIn,
	.chart-container,
	.statistics {
		/* 默认隐藏 */
		display: none;
	}

	/* 当需要显示时，可以添加一个额外的类 */
	.todayCheckIn.show,
	.chart-container.show,
	.statistics.show {
		display: block;
	}
	
	.icon {
	    width: 50rpx; 
	    height: 50rpx; 
	    margin-right: 20rpx; 
	    vertical-align: middle; /* 确保图标与文本竖直居中 */
	}
	


</style>