|
|
@@ -44,13 +44,12 @@
|
|
|
<view class="divider"></view>
|
|
|
|
|
|
<!-- 打卡记录 -->
|
|
|
- <view class="container">
|
|
|
+ <!-- <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">
|
|
|
+ <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">
|
|
|
@@ -66,17 +65,17 @@
|
|
|
</view>
|
|
|
</z-paging>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
+ </view> -->
|
|
|
+
|
|
|
<!-- 日历板块 -->
|
|
|
- <!-- <template>
|
|
|
+ <template>
|
|
|
<view class="calendar-content" >
|
|
|
<view>
|
|
|
- <uni-calendar class="uni-calendar--hook" :selected="selected" :showMonth="true" @change="change"
|
|
|
+ <uni-calendar class="uni-calendar--hook" :selected="calenderData" :showMonth="true" @change="change"
|
|
|
@monthSwitch="monthSwitch" />
|
|
|
</view>
|
|
|
</view>
|
|
|
- </template> -->
|
|
|
+ </template>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
@@ -159,63 +158,19 @@
|
|
|
endTime: '', // 晚签到时间
|
|
|
})
|
|
|
|
|
|
- //日历表数据
|
|
|
- // const showCalendar = ref(true)
|
|
|
- // const selected = ref([{
|
|
|
- // date: getDate(new Date(), -3).fullDate,
|
|
|
- // info: '打卡'
|
|
|
- // },
|
|
|
- // {
|
|
|
- // date: getDate(new Date(), -2).fullDate,
|
|
|
- // info: '签到',
|
|
|
- // data: {
|
|
|
- // custom: '自定义信息',
|
|
|
- // name: '自定义消息头'
|
|
|
- // }
|
|
|
- // },
|
|
|
- // {
|
|
|
- // date: '2024-12-09',
|
|
|
- // info: '已打卡'
|
|
|
- // }
|
|
|
- // ])
|
|
|
-
|
|
|
-
|
|
|
- // function getDate(date, AddDayCount = 0) {
|
|
|
- // if (!date) {
|
|
|
- // date = new Date()
|
|
|
- // }
|
|
|
- // if (typeof date !== 'object') {
|
|
|
- // date = date.replace(/-/g, '/')
|
|
|
- // }
|
|
|
- // const dd = new Date(date)
|
|
|
-
|
|
|
- // dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
|
|
-
|
|
|
- // const y = dd.getFullYear()
|
|
|
- // const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0
|
|
|
- // const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0
|
|
|
- // return {
|
|
|
- // fullDate: y + '-' + m + '-' + d,
|
|
|
- // year: y,
|
|
|
- // month: m,
|
|
|
- // date: d,
|
|
|
- // day: dd.getDay()
|
|
|
- // }
|
|
|
- // }
|
|
|
+
|
|
|
+
|
|
|
|
|
|
// 控制今日签到信息和图表显示的状态
|
|
|
const todayInfoShow = ref(true) // 今日签到信息是否显示
|
|
|
const chartShow = ref(false) // 图表是否显示
|
|
|
-
|
|
|
// 图表类型的响应式引用
|
|
|
const chartsType = ref('')
|
|
|
-
|
|
|
// 图表要填充的数据
|
|
|
const chartData = ref({})
|
|
|
-
|
|
|
// 图表配置选项
|
|
|
const opts = ref({
|
|
|
- color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
|
+ color: ["#EE6666", "#FAC858", "#FC8452", "#73C0DE", "#3CA272", "#1890FF", "#91CB74", "#9A60B4",
|
|
|
"#ea7ccc"
|
|
|
], // 设定图表颜色
|
|
|
padding: [15, 15, 0, 5],
|
|
|
@@ -292,19 +247,59 @@
|
|
|
const time2 = attList.filter(item => item.att_type_id === '2').pop();
|
|
|
if (time1 !== undefined) {
|
|
|
todayData.startTime = time1.att_time.split(' ')[1];
|
|
|
- // todayData.status = '早签完成'
|
|
|
}
|
|
|
if (time2 !== undefined) {
|
|
|
todayData.endTime = time2.att_time.split(' ')[1];
|
|
|
- // todayData.status = '晚签完成'
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+//打卡历史记录(日历版)
|
|
|
+//日历表数据
|
|
|
+ const calenderData = ref([{
|
|
|
+ date: '2024-12-07',
|
|
|
+ info: '打卡'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2024-12-08',
|
|
|
+ info: '签到',
|
|
|
+ data: {
|
|
|
+ custom: '自定义信息',
|
|
|
+ name: '自定义消息头'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ])
|
|
|
+
|
|
|
+ // 初始化日历数据
|
|
|
+ function initCalenderData(){
|
|
|
+ const params = {
|
|
|
+ type: 2, //设置时间区间
|
|
|
+ universalid: userId,
|
|
|
+ ks_att_time: todayData.day.slice(0, 8)+'01',
|
|
|
+ js_att_time: todayData.day,
|
|
|
+ pSize: 31,
|
|
|
+ p: 1
|
|
|
+ }
|
|
|
+ getMyQDQtAttendance(params).then(({ returnParams }) => {
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ //传入年份月份,返回此月天数
|
|
|
+ function getDaysInMonth(year, month) {
|
|
|
+ const date = new Date(year, month - 1, 1);
|
|
|
+ // 将日期设置为下一个月的第0天,即当前月的最后一天
|
|
|
+ date.setMonth(date.getMonth() + 1);
|
|
|
+ date.setDate(0);
|
|
|
+ // 返回当前月的最后一天的日期,即该月的天数
|
|
|
+ return date.getDate();
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
+
|
|
|
+//打卡历史记录(下拉刷新版)
|
|
|
const paging = ref(null)
|
|
|
const pSize = ref(5)
|
|
|
-
|
|
|
function complete(list, total, pageNo) {
|
|
|
if (pageNo == 1) {
|
|
|
paging.value.complete(list);
|
|
|
@@ -319,9 +314,7 @@
|
|
|
}
|
|
|
//日考勤历史记录
|
|
|
const clockRecords = ref([])
|
|
|
-
|
|
|
const totalPage = ref(0)
|
|
|
-
|
|
|
//获取日考勤历史(下拉刷新)
|
|
|
function getDayAttHistory() {
|
|
|
const params = {
|
|
|
@@ -381,21 +374,19 @@
|
|
|
evening: item.time.split(',')[item.type.split(',').indexOf("2")],
|
|
|
}
|
|
|
});
|
|
|
- // clockRecords.value.push(...list);
|
|
|
- // complete(list,returnParams.total,pageNo)
|
|
|
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]; // 设置选择的时间范围(日周月)
|
|
|
- // fetchAttendanceData(); // 获取考勤数据
|
|
|
// 根据选择的时间范围更新展示内容
|
|
|
switch (selectedTimeRange.value) {
|
|
|
case '日':
|
|
|
@@ -410,7 +401,7 @@
|
|
|
updateChart(message);
|
|
|
})
|
|
|
.catch(error => {
|
|
|
- console.error(error); // 如果失败,打印错误消息
|
|
|
+ console.error(error);
|
|
|
});
|
|
|
break;
|
|
|
case '月':
|
|
|
@@ -421,7 +412,7 @@
|
|
|
updateChart(message);
|
|
|
})
|
|
|
.catch(error => {
|
|
|
- console.error(error); // 如果失败,打印错误消息
|
|
|
+ console.error(error);
|
|
|
});
|
|
|
break;
|
|
|
}
|
|
|
@@ -463,35 +454,36 @@
|
|
|
const myWeekAttData = res.returnParams;
|
|
|
const mockData = {
|
|
|
series: [{
|
|
|
- data: [{
|
|
|
- "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
|
|
|
- }
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ "name": "缺勤",
|
|
|
+ "value": myWeekAttData.type6
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "迟到",
|
|
|
+ "value": myWeekAttData.type4
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "早退",
|
|
|
+ "value": myWeekAttData.type5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "出勤",
|
|
|
+ "value": myWeekAttData.type0,
|
|
|
+ "labelText": "出勤:" + myWeekAttData.type0 + "次"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "外出",
|
|
|
+ "value": myWeekAttData.type1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "公休",
|
|
|
+ "value": myWeekAttData.type2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "未排班",
|
|
|
+ "value": myWeekAttData.type3,
|
|
|
+ }
|
|
|
]
|
|
|
}],
|
|
|
|
|
|
@@ -538,9 +530,9 @@
|
|
|
// }
|
|
|
console.log('res.returnParams', res.returnParams);
|
|
|
|
|
|
- data1.push(res.returnParams.type0);
|
|
|
- data2.push(res.returnParams.type1);
|
|
|
- data3.push(res.returnParams.type4);
|
|
|
+ data1.push(res.returnParams.type6);
|
|
|
+ data2.push(res.returnParams.type4);
|
|
|
+ data3.push(res.returnParams.type5);
|
|
|
});
|
|
|
dataFetchPromises.push(fetchPromise);
|
|
|
}
|
|
|
@@ -564,13 +556,13 @@
|
|
|
const mockData = {
|
|
|
categories: ["第1周", "第2周", "第3周", "第4周"],
|
|
|
series: [{
|
|
|
- name: "出勤",
|
|
|
+ name: "缺勤",
|
|
|
data: data1
|
|
|
}, {
|
|
|
- name: "出差",
|
|
|
+ name: "迟到",
|
|
|
data: data2
|
|
|
}, {
|
|
|
- name: "迟到",
|
|
|
+ name: "早退",
|
|
|
data: data3
|
|
|
}]
|
|
|
};
|
|
|
@@ -601,6 +593,8 @@
|
|
|
function updateChart(res) {
|
|
|
chartData.value = JSON.parse(JSON.stringify(res)); // 更新图表数据
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
|
|
|
@@ -617,7 +611,8 @@
|
|
|
.attendance-page {
|
|
|
padding: 20px;
|
|
|
background-color: #f9f9f9;
|
|
|
- .calendar-content{
|
|
|
+
|
|
|
+ .calendar-content {
|
|
|
margin: -20px;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
@@ -714,7 +709,7 @@
|
|
|
.todayCheckIn {
|
|
|
background-color: #ffffff;
|
|
|
padding: 20px;
|
|
|
- margin: auto -20px;//抵消父级padding
|
|
|
+ margin: auto -20px; //抵消父级padding
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|