|
|
@@ -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>
|