|
@@ -18,14 +18,11 @@
|
|
|
</view>
|
|
|
<view class="number-box">
|
|
|
<text class="number"
|
|
|
- :style="{color: monthAttendQuality==='优秀'?'#4169E1':(monthAttendQuality === '良好'?'#f9c752':'#ff5959')}">{{monthAttendQuality}}</text>
|
|
|
- <view class="number-detail">出勤率</view>
|
|
|
+ :style="{color: monthAttendQuality==='优秀'?'#4169E1':(monthAttendQuality === '较差'?'#ff5959':'#f9c752')}">{{monthAttendQuality}}</text>
|
|
|
+ <view class="number-detail">本月出勤</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- <view class="flex" style="justify-content: center;" >
|
|
|
- <view class="image" :style="{backgroundImage:`url(${image})`}"></view>
|
|
|
- </view> -->
|
|
|
</view>
|
|
|
|
|
|
<view class="card-item">
|
|
@@ -40,7 +37,7 @@
|
|
|
<view class="msg-box">
|
|
|
<view class="flex">
|
|
|
<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">打卡时间:</text>
|
|
|
- <text class="msg-text">{{attendanceTime}}</text>
|
|
|
+ <text class="msg-text">{{attendanceTime.replace('0','')}}</text>
|
|
|
</view>
|
|
|
<view class="flex">
|
|
|
<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">出勤效率:</text>
|
|
@@ -48,6 +45,11 @@
|
|
|
:style="{color: attendanceQuality==='优秀'?'#4169E1':(attendanceQuality === '良好'?'#f9c752':'#3B4144')}">{{attendanceQuality}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 图片信息 -->
|
|
|
+ <view class="image" v-if="currentTodayData.isAttend === 1" :style="{backgroundImage:`url(${imageWorkday})`}"></view>
|
|
|
+ <view class="image" v-if="currentTodayData.isAttend === 7" :style="{backgroundImage:`url(${imageWeekend})`}"></view>
|
|
|
+ <view class="image" v-if="currentTodayData.isAttend === 0" :style="{backgroundImage:`url(${imageNoAttend})`}"></view>
|
|
|
+ <view class="image" v-if="currentTodayData.isAttend === -1" :style="{backgroundImage:`url(${imageNoArrive})`}"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -57,7 +59,8 @@
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
- mapState, mapMutations
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
} from 'vuex'
|
|
|
import zsyCalendar from '@/subpkg/z-calendar/zsy-calendar.vue'
|
|
|
export default {
|
|
@@ -70,25 +73,27 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // image: 'https://image.meiye.art/pic_1632658822816Dw1wc8QoTOnItNvJI76v6',
|
|
|
//当日打卡信息
|
|
|
attendance: '',
|
|
|
attendanceTime: '',
|
|
|
attendanceQuality: '',
|
|
|
- //当月天数
|
|
|
- // monthDates: '',
|
|
|
monthAttendQuality: '',
|
|
|
- //当月
|
|
|
- month: '',
|
|
|
+ //点击当日信息
|
|
|
+ currentTodayData: '',
|
|
|
+ //日历月份
|
|
|
calendarMonth: '',
|
|
|
//控制事件参数
|
|
|
isFirst: false,
|
|
|
//当日时间参数
|
|
|
todayData: '',
|
|
|
+ imageWorkday: 'https://ouch-cdn2.icons8.com/z39mAYlsJUS2hKCBbkK_ktOIjma_qhkc5J0ANdyfiKU/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMTA3/L2FlZjQ4NmM4LTAz/NTYtNGRhNS04ZWQ2/LTBhMGIzMzdhZjNm/Mi5zdmc.png',
|
|
|
+ imageWeekend: 'https://ouch-cdn2.icons8.com/NJDdGibHzZkGZzgqe55ESzJ6_BrcgHO2bkz_vFG6PoY/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvNTg2/L2RlMmJhZDI4LTAz/NTQtNDMwNS1hNmQ2/LTU3Y2Y1ODJjNjc3/YS5zdmc.png',
|
|
|
+ imageNoAttend: 'https://ouch-cdn2.icons8.com/ehPeP69ypvrLonk6YkqIzV_WfKM1G-Ls9J7PuZvxRr8/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMzY3/L2QzZGNmODA5LTY3/ODUtNGFkOC1hOWVi/LWI4OWYyM2ZiMzNi/Yi5zdmc.png',
|
|
|
+ imageNoArrive: 'https://ouch-cdn2.icons8.com/WfSBIzy4iTGDtprvhW0wA2S8lPNRoqeZqvFsNbKsraw/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvODQ3/LzI1NDY1ZDdhLTVj/NDEtNGIzMy1iN2Q1/LTRhYjgwOGU2NDk5/OS5zdmc.png'
|
|
|
};
|
|
|
},
|
|
|
- watch:{
|
|
|
- calendarMonth(){
|
|
|
+ watch: {
|
|
|
+ calendarMonth() {
|
|
|
this.getMonthAttendQuality()
|
|
|
}
|
|
|
},
|
|
@@ -100,45 +105,72 @@
|
|
|
...mapMutations('m_children', ['updateNoAttendNum', 'updateIsAttendNum']),
|
|
|
//选中日期改变回调
|
|
|
change(e) {
|
|
|
- if(this.isFirst === false){
|
|
|
+ //存入当前时间
|
|
|
+ if (this.isFirst === false) {
|
|
|
this.todayData = e
|
|
|
this.isFirst = true
|
|
|
- }
|
|
|
+ }
|
|
|
+ //点击当日信息
|
|
|
+ this.currentTodayData = e
|
|
|
+ console.log("日历点击",this.currentTodayData);
|
|
|
+ //日历月份
|
|
|
this.calendarMonth = e.month
|
|
|
- let isAttendArr = this.records.filter(x => x.month === e.month&&x.year === e.year).length
|
|
|
+ //当前日历月份打卡数
|
|
|
+ let isAttendArr = this.records.filter(x => x.month === e.month && x.year === e.year).length
|
|
|
+ // 当前日历月统计
|
|
|
this.updateIsAttendNum(isAttendArr)
|
|
|
+ // 当前日历月天数
|
|
|
let monthDays = new Date(e.year, e.month, 0).getDate()
|
|
|
//在本年当前月之前
|
|
|
- if(e.year===this.todayData.year&&e.month<this.todayData.month){
|
|
|
- let noAttendArr = monthDays - isAttendArr
|
|
|
+ if (e.year === this.todayData.year && e.month < this.todayData.month) {
|
|
|
+ let weekendDates = 0
|
|
|
+ for (let i = 1; i <= monthDays; i++) {
|
|
|
+ if (new Date(`${e.year}-${e.month}-${i}`).getDay() === 0 ||
|
|
|
+ new Date(`${e.year}-${e.month}-${i}`).getDay() === 6) {
|
|
|
+ weekendDates++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let noAttendArr = monthDays - isAttendArr - weekendDates
|
|
|
this.updateNoAttendNum(noAttendArr)
|
|
|
}
|
|
|
//之前年份
|
|
|
- if(e.year<this.todayData.year){
|
|
|
- let noAttendArr = monthDays - isAttendArr
|
|
|
+ if (e.year < this.todayData.year) {
|
|
|
+ let weekendDates = 0
|
|
|
+ for (let i = 1; i <= monthDays; i++) {
|
|
|
+ if (new Date(`${e.year}-${e.month}-${i}`).getDay() === 0 ||
|
|
|
+ new Date(`${e.year}-${e.month}-${i}`).getDay() === 6) {
|
|
|
+ weekendDates++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let noAttendArr = monthDays - isAttendArr - weekendDates
|
|
|
this.updateNoAttendNum(noAttendArr)
|
|
|
}
|
|
|
//在本月
|
|
|
- if(e.year===this.todayData.year&&e.month===this.todayData.month){
|
|
|
- let noAttendArr = this.todayData.date - isAttendArr
|
|
|
+ if (e.year === this.todayData.year && e.month === this.todayData.month) {
|
|
|
+ let weekendDates = 0
|
|
|
+ for (let i = 1; i <= this.todayData.date; i++) {
|
|
|
+ if (new Date(`${e.year}-${e.month}-${i}`).getDay() === 0 ||
|
|
|
+ new Date(`${e.year}-${e.month}-${i}`).getDay() === 6) {
|
|
|
+ weekendDates++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let noAttendArr = this.todayData.date - isAttendArr - weekendDates
|
|
|
this.updateNoAttendNum(noAttendArr)
|
|
|
}
|
|
|
//在本年当月之后
|
|
|
- if(e.year===this.todayData.year&&e.month>this.todayData.month){
|
|
|
- this.updateNoAttendNum('未记录')
|
|
|
- this.updateIsAttendNum('未记录')
|
|
|
+ if (e.year === this.todayData.year && e.month > this.todayData.month) {
|
|
|
+ this.updateNoAttendNum('暂无')
|
|
|
+ this.updateIsAttendNum('暂无')
|
|
|
}
|
|
|
//之后年份
|
|
|
- if(e.year>this.todayData.year){
|
|
|
- this.updateNoAttendNum('未记录')
|
|
|
- this.updateIsAttendNum('未记录')
|
|
|
+ if (e.year > this.todayData.year) {
|
|
|
+ this.updateNoAttendNum('暂无')
|
|
|
+ this.updateIsAttendNum('暂无')
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
//今日打卡
|
|
|
getTodayAttendance() {
|
|
|
- //获取当月
|
|
|
- this.month = new Date().getMonth() + 1
|
|
|
//获得当前时间时间戳
|
|
|
let timeNow = (new Date()).format("yyyy-M-dd")
|
|
|
let timeArr = timeNow.split("-")
|
|
@@ -147,9 +179,9 @@
|
|
|
//出勤状况
|
|
|
this.attendance = '未打卡',
|
|
|
//打卡时间
|
|
|
- this.attendanceTime = '未记录',
|
|
|
+ this.attendanceTime = '无记录',
|
|
|
//出勤质量
|
|
|
- this.attendanceQuality = '未记录'
|
|
|
+ this.attendanceQuality = '无记录'
|
|
|
} else {
|
|
|
this.attendance = '已打卡'
|
|
|
this.attendanceTime = info[0].time
|
|
@@ -158,9 +190,10 @@
|
|
|
},
|
|
|
//判断本月出勤质量
|
|
|
getMonthAttendQuality() {
|
|
|
- this.monthAttendQuality = this.calendar.noAttendNum/30 <= 0.1 ? '优秀' : (this.calendar.noAttendNum/30 <= 0.2 ? '良好' : '较差')
|
|
|
- if(this.calendar.noAttendNum === '未记录' && this.calendar.isAttendNum === '未记录'){
|
|
|
- this.monthAttendQuality = '未记录'
|
|
|
+ this.monthAttendQuality = this.calendar.noAttendNum / 30 <= 0.1 ? '优秀' : (this.calendar.noAttendNum / 30 <=
|
|
|
+ 0.2 ? '良好' : '较差')
|
|
|
+ if (this.calendar.noAttendNum === '暂无' && this.calendar.isAttendNum === '暂无') {
|
|
|
+ this.monthAttendQuality = '暂无'
|
|
|
}
|
|
|
},
|
|
|
//选择日期
|
|
@@ -174,13 +207,18 @@
|
|
|
}
|
|
|
if (dateInfo.isAttend === 0) {
|
|
|
this.attendance = '未打卡'
|
|
|
- this.attendanceTime = '未记录'
|
|
|
- this.attendanceQuality = '未记录'
|
|
|
+ this.attendanceTime = '无记录'
|
|
|
+ this.attendanceQuality = '无记录'
|
|
|
}
|
|
|
if (dateInfo.isAttend === -1) {
|
|
|
- this.attendance = '未到日期'
|
|
|
- this.attendanceTime = '未记录'
|
|
|
- this.attendanceQuality = '未记录'
|
|
|
+ this.attendance = '时间未到'
|
|
|
+ this.attendanceTime = '无记录'
|
|
|
+ this.attendanceQuality = '无记录'
|
|
|
+ }
|
|
|
+ if (dateInfo.isAttend === 7) {
|
|
|
+ this.attendance = '周末休息'
|
|
|
+ this.attendanceTime = '无记录'
|
|
|
+ this.attendanceQuality = '无记录'
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -297,9 +335,11 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
.image {
|
|
|
- width: 45%;
|
|
|
- height: 250rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
border-radius: $card-border-radius;
|
|
|
background-size: 100%;
|
|
|
background-repeat: no-repeat;
|