|
|
@@ -11,7 +11,8 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 今日签到信息区域 -->
|
|
|
- <view class="todayCheckIn" :class="{ 'show': shouldShow }">
|
|
|
+ <!-- <view class="todayCheckIn" :class="{ 'show': shouldShow }"> -->
|
|
|
+ <view class="todayCheckIn" v-if="todayInfoShow">
|
|
|
<view class="check-in-container">
|
|
|
<text class="todayAttTitle">今日签到信息</text>
|
|
|
<view class="info-row">
|
|
|
@@ -39,6 +40,7 @@
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
+ <!-- 分界线 -->
|
|
|
<view class="divider"></view>
|
|
|
|
|
|
<!-- 打卡记录 -->
|
|
|
@@ -46,7 +48,6 @@
|
|
|
<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">
|
|
|
@@ -64,14 +65,23 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</z-paging>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 日历板块 -->
|
|
|
+ <!-- <template>
|
|
|
+ <view class="calendar-content" >
|
|
|
+ <view>
|
|
|
+ <uni-calendar class="uni-calendar--hook" :selected="selected" :showMonth="true" @change="change"
|
|
|
+ @monthSwitch="monthSwitch" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template> -->
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<!-- 周,月数据统计区域 -->
|
|
|
- <view class="statistics" :class="{ 'show': chartShow }">
|
|
|
+ <view class="statistics" v-if="chartShow">
|
|
|
<view class="statistic-card">
|
|
|
<view class="statistic-title">{{ selectedTimeRange }}考勤统计</view>
|
|
|
<view class="statistic-item">
|
|
|
@@ -113,9 +123,8 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
-
|
|
|
<!-- 图表区域 -->
|
|
|
- <view class="chart-container" :class="{ 'show': chartShow }">
|
|
|
+ <view class="chart-container" v-if="chartShow">
|
|
|
<view class="">
|
|
|
<text class="chart-title">考勤趋势图</text>
|
|
|
<view class="charts-box">
|
|
|
@@ -150,10 +159,52 @@
|
|
|
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 shouldShow = ref(true) // 今日签到信息是否显示
|
|
|
+ const todayInfoShow = ref(true) // 今日签到信息是否显示
|
|
|
const chartShow = ref(false) // 图表是否显示
|
|
|
|
|
|
// 图表类型的响应式引用
|
|
|
@@ -270,7 +321,8 @@
|
|
|
const clockRecords = ref([])
|
|
|
|
|
|
const totalPage = ref(0)
|
|
|
- //获取日考勤历史
|
|
|
+
|
|
|
+ //获取日考勤历史(下拉刷新)
|
|
|
function getDayAttHistory() {
|
|
|
const params = {
|
|
|
type: 1, //不设时间区间
|
|
|
@@ -280,7 +332,7 @@
|
|
|
pSize: pSize.value,
|
|
|
p: 1
|
|
|
}
|
|
|
- getMyQDQtAttendance(params).then(({returnParams}) => {
|
|
|
+ getMyQDQtAttendance(params).then(({ returnParams }) => {
|
|
|
totalPage.value = Math.ceil(returnParams.total / pSize.value)
|
|
|
const list = returnParams.list.map(item => {
|
|
|
return {
|
|
|
@@ -290,7 +342,7 @@
|
|
|
}
|
|
|
});
|
|
|
clockRecords.value = list;
|
|
|
-
|
|
|
+
|
|
|
complete(clockRecords.value, returnParams.total, returnParams.current)
|
|
|
})
|
|
|
}
|
|
|
@@ -321,7 +373,7 @@
|
|
|
pSize: pSize,
|
|
|
p: pageNo
|
|
|
}
|
|
|
- getMyQDQtAttendance(params).then(({returnParams}) => {
|
|
|
+ getMyQDQtAttendance(params).then(({ returnParams }) => {
|
|
|
const list = returnParams.list.map(item => {
|
|
|
return {
|
|
|
date: item.att_date.substring(0, 10),
|
|
|
@@ -331,10 +383,10 @@
|
|
|
});
|
|
|
// clockRecords.value.push(...list);
|
|
|
// complete(list,returnParams.total,pageNo)
|
|
|
- if(pageNo<=totalPage.value){
|
|
|
+ if (pageNo <= totalPage.value) {
|
|
|
clockRecords.value.push(...list);
|
|
|
}
|
|
|
- complete(list,returnParams.total,pageNo)
|
|
|
+ complete(list, returnParams.total, pageNo)
|
|
|
|
|
|
})
|
|
|
}
|
|
|
@@ -353,10 +405,10 @@
|
|
|
case '周':
|
|
|
chartsType.value = 'pie'; // 设置图表类型为饼图
|
|
|
fetchWeekAttData().then(message => {
|
|
|
- console.log(message);
|
|
|
- showWeekAndMonth();
|
|
|
- updateChart(message);
|
|
|
- })
|
|
|
+ console.log(message);
|
|
|
+ showWeekAndMonth();
|
|
|
+ updateChart(message);
|
|
|
+ })
|
|
|
.catch(error => {
|
|
|
console.error(error); // 如果失败,打印错误消息
|
|
|
});
|
|
|
@@ -364,10 +416,10 @@
|
|
|
case '月':
|
|
|
chartsType.value = 'column'; // 设置图表类型为柱状图
|
|
|
fetchMonthAttData().then(message => {
|
|
|
- console.log('message', message);
|
|
|
- showWeekAndMonth();
|
|
|
- updateChart(message);
|
|
|
- })
|
|
|
+ console.log('message', message);
|
|
|
+ showWeekAndMonth();
|
|
|
+ updateChart(message);
|
|
|
+ })
|
|
|
.catch(error => {
|
|
|
console.error(error); // 如果失败,打印错误消息
|
|
|
});
|
|
|
@@ -377,13 +429,13 @@
|
|
|
|
|
|
// 显示今日考勤数据
|
|
|
function showDay() {
|
|
|
- shouldShow.value = true; // 显示今日签到信息
|
|
|
+ todayInfoShow.value = true; // 显示今日签到信息
|
|
|
chartShow.value = false; // 隐藏图表
|
|
|
}
|
|
|
|
|
|
// 显示周或者月考勤
|
|
|
function showWeekAndMonth() {
|
|
|
- shouldShow.value = false; // 隐藏今日签到信息
|
|
|
+ todayInfoShow.value = false; // 隐藏今日签到信息
|
|
|
chartShow.value = true; // 显示图表
|
|
|
}
|
|
|
|
|
|
@@ -412,34 +464,34 @@
|
|
|
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
|
|
|
- }
|
|
|
+ "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
|
|
|
+ }
|
|
|
]
|
|
|
}],
|
|
|
|
|
|
@@ -565,6 +617,10 @@
|
|
|
.attendance-page {
|
|
|
padding: 20px;
|
|
|
background-color: #f9f9f9;
|
|
|
+ .calendar-content{
|
|
|
+ margin: -20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
@@ -594,7 +650,7 @@
|
|
|
}
|
|
|
|
|
|
.statistics {
|
|
|
- display: flex;
|
|
|
+ // display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
@@ -658,6 +714,7 @@
|
|
|
.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);
|
|
|
@@ -690,20 +747,6 @@
|
|
|
}
|
|
|
|
|
|
|
|
|
- .todayCheckIn,
|
|
|
- .chart-container,
|
|
|
- .statistics {
|
|
|
- /* 默认隐藏 */
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- /* 当需要显示时,可以添加一个额外的类 */
|
|
|
- .todayCheckIn.show,
|
|
|
- .chart-container.show,
|
|
|
- .statistics.show {
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
.icon {
|
|
|
width: 50rpx;
|
|
|
height: 50rpx;
|