Pārlūkot izejas kodu

Merge branch 'master' of http://118.195.146.34:3000/ygtx/ygoa_miniapp

wangpx 1 gadu atpakaļ
vecāks
revīzija
de579f6eb5
2 mainītis faili ar 282 papildinājumiem un 130 dzēšanām
  1. 19 0
      api/mine/checkIn.js
  2. 263 130
      pages/mine/checkIn/checkIn.vue

+ 19 - 0
api/mine/checkIn.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request.js'
+
+export function CheckAttendance(params) {
+	return request({
+		'data': {
+			'serviceId': 'hr_2018V01CheckAttendance',
+			'params': params
+		}
+	})
+}
+
+export function getMyTotalCount(params) {
+	return request({
+		'data': {
+			'serviceId': 'hr_2015V01getMyTotalCount',
+			'params': params
+		}
+	})
+}

+ 263 - 130
pages/mine/checkIn/checkIn.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="attendance-page">
-		
+
 		<view class="header">
 			<text class="title">我的考勤记录</text>
 			<picker mode="selector" :range="timeRanges" @change="onTimeRangeChange">
@@ -26,7 +26,6 @@
 						<text class="ygoa-icon icon-leave"></text>
 						<text class="label">请假:</text>
 					</view>
-					
 					<text class="value">{{ leaveCount }}</text>
 				</view>
 				<view class="statistic-item">
@@ -34,7 +33,7 @@
 						<text class="ygoa-icon icon-businessTrip"></text>
 						<text class="label">出差:</text>
 					</view>
-					
+
 					<text class="value">{{ businessTripCount }}</text>
 				</view>
 				<view class="statistic-item">
@@ -63,7 +62,7 @@
 						<text class="ygoa-icon icon-date"></text>
 						<text class="value">日期:</text>
 					</view>
-					
+
 					<text class="label">{{todayData.day}}</text>
 				</view>
 				<view class="info-row">
@@ -78,7 +77,7 @@
 						<text class="ygoa-icon icon-night"></text>
 						<text class="value">晚签时间:</text>
 					</view>
-					
+
 					<text class="label">{{todayData.endTime || '未打卡'}} </text>
 				</view>
 				<view class="info-row">
@@ -86,7 +85,7 @@
 						<text class="ygoa-icon icon-checkInStatus"></text>
 						<text class="value">状态:</text>
 					</view>
-					
+
 					<text class="label">{{todayData.status}}</text>
 				</view>
 			</view>
@@ -101,7 +100,7 @@
 				</view>
 			</view>
 		</view>
-		
+
 	</view>
 </template>
 
@@ -111,13 +110,17 @@
 		onMounted,
 		reactive
 	} from 'vue';
+	import {
+		CheckAttendance,
+		getMyTotalCount
+	} from "../../../api/mine/checkIn.js"
 
 	// 创建一个响应式对象记录今天的考勤数据
 	const todayData = reactive({
 		day: '2024-11-11', // 当前日期
-		startTime: '08:59:59', // 晨签到时间
+		startTime: '', // 晨签到时间
 		endTime: '', // 晚签到时间
-		status: '待补卡' // 签到状态
+		status: '未打卡' // 签到状态
 	})
 
 	// 控制今日签到信息和图表显示的状态
@@ -125,15 +128,17 @@
 	const chartShow = ref(false) // 图表是否显示
 
 	// 图表类型的响应式引用
-	const chartsType = ref('') 
+	const chartsType = ref('')
 
 	// 图表要填充的数据
-	const chartData = ref({}) 
+	const chartData = ref({})
 
 	// 图表配置选项
 	const opts = ref({
-		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"], // 设定图表颜色
-		padding: [15, 15, 0, 5], 
+		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+			"#ea7ccc"
+		], // 设定图表颜色
+		padding: [15, 15, 0, 5],
 		enableScroll: false, // 禁用滚动
 		legend: {}, // 图例设置
 		xAxis: {
@@ -146,10 +151,10 @@
 		},
 		extra: {
 			column: {
-				type: "group", 
-				width: 30, 
-				activeBgColor: "#000000", 
-				activeBgOpacity: 0.08 
+				type: "group",
+				width: 30,
+				activeBgColor: "#000000",
+				activeBgOpacity: 0.08
 			}
 		}
 	});
@@ -164,7 +169,7 @@
 	const businessTripCount = ref(0); // 出差次数
 	const clockInCount = ref(0); // 打卡次数
 	const makeUpCount = ref(0); // 补卡次数
-	
+
 
 	const currentData = ref({
 		attendance: 0, // 出勤
@@ -174,28 +179,94 @@
 		makeUp: 0, // 补卡
 		res: {}, // 记录详细数据
 	});
+	const userId = ref('');
+	//当前周的周一日期
+	const thisMondayDate = ref('');
 
 	onMounted(() => {
-		fetchAttendanceData();
+		userId.value = '511341581866278';
+		initAttData(); //初始化日考勤数据
 	});
 
+	//初始化考勤数据
+	function initAttData() {
+		const nowDate = new Date();
+		todayData.day = formatDate(nowDate);
+		getDayAttData();
+		getthisMondayDate();
+	}
+
+	//格式化日期
+	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.value,
+			rizi: todayData.day
+		}
+		CheckAttendance(params).then(res => {
+			if ("success" == res.returnMsg) {
+				const attList = res.returnParams.list;
+				const time1 = attList.find(item => item.att_type_id === '1');
+				const time2 = attList.find(item => item.att_type_id === '2');
+				if (attList.length == 2) {
+					todayData.endTime = time2.att_time.split(' ')[1];
+					todayData.startTime = time1.att_time.split(' ')[1];
+					todayData.status = '晚签完成'
+				} else if (attList.length == 1) {
+					if (time1 !== undefined) {
+						todayData.startTime = time1.att_time.split(' ')[1];
+						todayData.status = '早签完成'
+					} else {
+						todayData.endTime = time2.att_time.split(' ')[1];
+						todayData.status = '待补卡'
+					}
+				}
+			}
+		})
+	}
+
 	// 时间范围切换事件
 	function onTimeRangeChange(event) {
-		const selectedIndex = event.detail.value; 
+		const selectedIndex = event.detail.value;
 		selectedTimeRange.value = timeRanges.value[selectedIndex]; // 设置选择的时间范围(日周月)
-		fetchAttendanceData(); // 获取考勤数据
+		// fetchAttendanceData(); // 获取考勤数据
 		// 根据选择的时间范围更新展示内容
 		switch (selectedTimeRange.value) {
 			case '日':
+				getDayAttData();
 				showDay(); // 显示今日考勤
 				break;
 			case '周':
 				chartsType.value = 'pie'; // 设置图表类型为饼图
-				showWeekAndMonth(); // 显示周考勤
+				fetchWeekAttData().then(message => {
+						console.log(message);
+						showWeekAndMonth();
+						updateChart(message);
+					})
+					.catch(error => {
+						console.error(error); // 如果失败,打印错误消息
+					});
 				break;
 			case '月':
 				chartsType.value = 'column'; // 设置图表类型为柱状图
-				showWeekAndMonth(); // 显示月考勤
+				fetchMonthAttData().then(message => {
+						console.log('message',message);
+						showWeekAndMonth();
+						updateChart(message);
+					})
+					.catch(error => {
+						console.error(error); // 如果失败,打印错误消息
+					});
 				break;
 		}
 	};
@@ -210,124 +281,186 @@
 	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: {
+	}
+
+
+	//计算本周周一日期
+	function getthisMondayDate() {
+		const today = new Date();
+		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.value,
+				start_date: thisMondayDate.value,
+				end_date: todayData.day
+			}
+			// console.log('params', params);
+			getMyTotalCount(params).then(res => {
+				const myWeekAttData = res.returnParams;
+				const mockData = {
 					series: [{
 						data: [{
-							"name": "出勤",
-							"value": 50,
-							"labelText": "出勤:50次"
-						}, {
-							"name": "请假",
-							"value": 30
-						}, {
-							"name": "出差",
-							"value": 20
-						}, {
-							"name": "打卡",
-							"value": 18,
-							"labelText": "打卡:18次"
-						}, {
-							"name": "补卡",
-							"value": 8
-						}]
+								"name": "出勤",
+								"value": myWeekAttData.type0,
+								"labelText": "出勤:" + myWeekAttData.type0 + "次"
+							},
+							{
+								"name": "外出",
+								"value": myWeekAttData.type1
+							},
+							{
+								"name": "公休",
+								"value": myWeekAttData.type2
+							},
+							{
+								"name": "未排班",
+								"value": myWeekAttData.type3,
+							},
+							{
+								"name": "迟到",
+								"value": myWeekAttData.type4
+							},
+							{
+								"name": "早退",
+								"value": myWeekAttData.type5
+							},
+							{
+								"name": "缺勤",
+								"value": myWeekAttData.type6
+							}
+						]
 					}],
-				}
-			},
-			月: {
-				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;
+				};
+				const weekData = mockData.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); // 错误处理
+				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.value,
+				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.type0);
+				data2.push(res.returnParams.type1);
+				data3.push(res.returnParams.type4);
+			});
+			dataFetchPromises.push(fetchPromise);
+		}
+
+		// 等待所有数据请求完成
+		Promise.all(dataFetchPromises).then(() => {
+			const params = {
+				staffId: userId.value,
+				start_date: weekNodeList[0],
+				end_date: weekNodeList[weekNodeList.length - 1]
+			};
+			return getMyTotalCount(params);
+		}).then(res => {
+			const myMonthAttData = res.returnParams;
+			attendanceCount.value = myMonthAttData.type0;
+			leaveCount.value = myMonthAttData.type1;
+			businessTripCount.value = myMonthAttData.type2;
+			clockInCount.value = myMonthAttData.type3;
+			makeUpCount.value = myMonthAttData.type4;
+
+			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 getData() {
-		let res = currentData.value.res; // 获取当前数据的额外信息
+
+	// 更新图表数据
+	function updateChart(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{
+
+	.ygoa-icon {
 		margin-right: 20rpx;
 		font-size: 50rpx;
-		vertical-align: middle; /* 确保图标与文本竖直居中 */
+		vertical-align: middle;
+		/* 确保图标与文本竖直居中 */
 	}
+
 	.attendance-page {
 		padding: 20px;
 		background-color: #f9f9f9;
@@ -392,9 +525,11 @@
 		font-weight: bold;
 		color: #333;
 	}
-	
-	.value, .label {
-	    line-height: 50rpx; /* 与图标高度一致,确保垂直对齐 */
+
+	.value,
+	.label {
+		line-height: 50rpx;
+		/* 与图标高度一致,确保垂直对齐 */
 	}
 
 	.chart-container {
@@ -462,14 +597,12 @@
 	.statistics.show {
 		display: block;
 	}
-	
+
 	.icon {
-	    width: 50rpx; 
-	    height: 50rpx; 
-	    margin-right: 20rpx; 
-	    vertical-align: middle; /* 确保图标与文本竖直居中 */
+		width: 50rpx;
+		height: 50rpx;
+		margin-right: 20rpx;
+		vertical-align: middle;
+		/* 确保图标与文本竖直居中 */
 	}
-	
-
-
 </style>