MiniPrograms/subpkg/home/clockStats.vue

<template>
	<view class="page-view">
		<top-return text="打卡详情" color="#FFF"></top-return>
		<!-- 背景 -->
		<view class="bg-box2"></view>
		<!-- 月统计卡片信息 -->
		<view class="card-view" style="margin-top: 140rpx;">
			<view class="card-item" style="width: 100%;">
				<view class="card-title" style="margin:10rpx 0 0 10rpx;">
					<view class="title">{{currentTodayData.month}}月 打卡汇总</view>
				</view>
				<view class="clock-stats">
					<view class="flex-column" style="align-items: center;">
						<view class="number" style="color: #4169E1;">{{isClockStats}}</view>
						<view class="number-detail">打卡次数</view>
					</view>
					<view class="flex-column" style="align-items: center;">
						<view class="number" style="color: #ff5959;">{{noClockStats}}</view>
						<view class="number-detail">缺卡次数</view>
					</view>
					<view class="flex-column" style="align-items: center;">
						<view class="number"
							:style="{color: clockStatsQuality==='优秀'?'#4169E1':(clockStatsQuality === '较差'?'#ff5959':'#f9c752')}">
							{{clockStatsQuality}}
						</view>
						<view class="number-detail">出勤质量</view>
					</view>
				</view>
			</view>
			<!-- 打卡记录日历 -->
			<view class="card-item" style="width: 100%;">
				<view class="calendar-container">
					<zsyCalendar :sundayIndex="6" @chooseDate="chooseDate" @change="change" />
				</view>
				<view class="state-box">
					<view class="state"
						:style="{backgroundColor: clockState==='已打卡'?'#4169E1':(clockState === '未打卡'?'#ff5959':'#bebebe')}">
						<view class="state-text">{{clockState}}</view>
					</view>
					<view class="msg-box">
						<view class="flex">
							<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">打卡时间:</text>
							<text class="msg-text">{{clockTime.replace('0','')}}</text>
						</view>
						<view class="flex">
							<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">出勤效率:</text>
							<text class="msg-text"
								:style="{color: clockQuality==='优秀'?'#4169E1':(clockQuality === '良好'?'#f9c752':'#3B4144')}">{{clockQuality}}</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>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import zsyCalendar from '@/components/z-calendar/zsy-calendar.vue'
	export default {
		name: 'Calendar',
		components: {
			zsyCalendar
		},
		computed: {
			...mapState('m_children', ['clockData']),
		},
		data() {
			return {
				//月打卡统计数据
				isClockStats: '',
				noClockStats: '',
				clockStatsQuality: '',
				//日打卡数据
				clockState: '',
				clockTime: '',
				clockQuality: '',
				//日历月份
				calendarMonth: '',
				//点击当日信息
				currentTodayData: '',
				//控制事件参数
				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() {
				this.getClockStatsQuality()
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				this.getClockStatsQuality()
				this.getTodayAttendance()
			},
			//判断本月出勤质量
			getClockStatsQuality() {
				this.clockStatsQuality = this.noClockStats / 30 <= 0.1 ? '优秀' : (this.noClockStats / 30 <= 0.2 ? '良好' :
					'较差')
				if (this.noClockStats === '暂无' && this.isClockStats === '暂无') {
					this.clockStatsQuality = '暂无'
				}
			},
			//今日打卡
			getTodayAttendance() {
				//获得当前时间时间戳
				let timeArr = (new Date()).format("yyyy-M-dd").split("-")
				let val = this.clockData.filter(x => x.year == timeArr[0] && x.month == timeArr[1] && x.date == timeArr[2])
				if (val.length === 0) {
					//出勤状况
					this.clockState = '未打卡',
						//打卡时间
						this.clockTime = '无记录',
						//出勤质量
						this.clockQuality = '无记录'
				} else {
					this.clockState = '已打卡'
					this.clockTime = val[0].time
					this.clockQuality = val[0].time <= '08:15' ? '优秀' : (val[0].time <= '08:25' ? '良好' : '较差')
				}
			},
			//选择日期
			chooseDate(dateInfo, dateIndex) {
				if (dateInfo.isAttend === 1) {
					this.clockState = '已打卡'
					this.clockTime = this.clockData.filter(x => x.date === dateInfo.date && x.month === dateInfo
						.month && x.year === x.year)[0].time
					this.clockQuality = this.clockTime <= '08:15' ? '优秀' : (this.clockTime <= '08:25' ?
						'良好' : '较差')
				}
				if (dateInfo.isAttend === 0) {
					this.clockState = '未打卡'
					this.clockTime = '无记录'
					this.clockQuality = '无记录'
				}
				if (dateInfo.isAttend === -1) {
					this.clockState = '时间未到'
					this.clockTime = '无记录'
					this.clockQuality = '无记录'
				}
				if (dateInfo.isAttend === 7) {
					this.clockState = '周末休息'
					this.clockTime = '无记录'
					this.clockQuality = '无记录'
				}
			},
			//选中日期改变回调
			change(e) {
				//存入当前时间
				if (this.isFirst === false) {
					this.todayData = e
					this.isFirst = true
				}
				//点击当日信息
				this.currentTodayData = e
				console.log("日历点击",this.currentTodayData);
				//日历月份
				this.calendarMonth = e.month
				//当前日历月份打卡数
				this.isClockStats = this.clockData.filter(x => x.month === e.month && x.year === e.year).length
				// 当前日历月天数
				let monthDays = new Date(e.year, e.month, 0).getDate()
				//在本年当前月之前
				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++
						}
					}
					//当前日历月份未打卡数
					this.noClockStats = monthDays - this.isClockStats - weekendDates
				}
				//之前年份
				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++
						}
					}
					//当前日历月份未打卡数
					this.noClockStats = monthDays - this.isClockStats - weekendDates
				}
				//在本月
				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++
						}
					}
					this.noClockStats = this.todayData.date - this.isClockStats - weekendDates
				}
				//在本年当月之后
				if (e.year === this.todayData.year && e.month > this.todayData.month) {
					this.noClockStats = '暂无'
					this.isClockStats = '暂无'
				}
				//之后年份
				if (e.year > this.todayData.year) {
					this.noClockStats = '暂无'
					this.isClockStats = '暂无'
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.number {
		font-size: 50rpx;
		font-weight: bold;
		color: $title;
	}

	.number-detail {
		margin-top: 10rpx;
		font-size: 30rpx;
		color: $subtitle;
	}

	.state-box {
		display: flex;
		align-items: center;
		height: 200rpx;
		width: 100%;

		.state {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100%;
			margin: 20rpx;
			height: 150rpx;
			width: 150rpx;

			.state-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFF;
			}
		}

		.msg-box {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 150rpx;
			width: auto;

			.msg-text {
				color: $title;
				font-weight: bold;
				font-size: 36rpx;
				margin-left: 15rpx;
			}
		}
	}

	.calendar-container {
		height: 100%;
		width: 100%;
		background-color: #FFF;
		margin: 0 auto;
		box-sizing: border-box;
		border-radius: $border-radius;
	}

	.image {
		margin-left: auto;
		margin-right: 20rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: $border-radius;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.box_tag{
		margin-right: 20rpx;
		height: 100%;
		width: 10rpx;
		background-color: $title;
		z-index: 99;
	}
	.clock-stats{
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 180rpx;
		margin-bottom: 20rpx;
	}
</style>