androidCnToWechatGrt/pagesStatistics/index.vue

<template>
	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='统计' :showback="false"></cus-header>
		<div class="card">
			<div class="c_top">
				<div class="ct_left" @tap="show=true">{{currentDay}}</div>
				<div class="ct_right">统计截至{{currentTime}}</div>
			</div>
			<div class="c_nums">
				<div class="cn_pre">
					<p>{{clockDays}}</p>
					<p class="text">出勤天数</p>
				</div>
				<div class="cn_pre">
					<p>{{workHours}}</p>
					<p class="text">总工时</p>
				</div>
				<div class="cn_pre">
					<p>{{mealTimes}}</p>
					<p class="text">餐补次数</p>
				</div>
			</div>
			<div class="c_calendar">
				<Calendar ref="calendarRef" @selectDay="selectDay" @selectInfo="selectInfo"></Calendar>
			</div>
			<div class="c_tip" v-if="info.iswd">当日班次：{{'固定上下班'}} 班次 {{workingTime||'08:30'}}-{{offWorkTime||'17:30'}}</div>
			<div class="c_tip" v-else>当日班次：{{info.iswd===undefined?'- -':'休息'}}</div>
			<div class="c_tip" v-if="info.iswd!==undefined">出勤统计：打卡{{info.clockTimes||0}}次，工时{{info.workHours||0}}小时</div>
			<div class="c_tip" v-else>出勤统计：- -</div>
			<div class="c_time" v-if="info&&info.status==1">
				<image :src="imgBase+'clockingin/time_line.png'"></image>
				<div class="ct_info">
					<div class="cti_pre" v-if="info.sbTime">
						<div class="ctip_left">上班 {{info.sbTime}}</div>
						<div class="ctip_right">
							<image :src="imgBase+'clockingin/location_inactive.png'"></image>
							<span>{{'谷锐特设备自动化有限公司'}}</span>
						</div>
					</div>
					<div class="cti_pre" v-else>
						<div class="ctip_left">未打卡</div>
					</div>
					<div class="cti_pre" v-if="info.xbTime">
						<div class="ctip_left">下班 {{info.xbTime}}</div>
						<div class="ctip_right">
							<image :src="imgBase+'clockingin/location_inactive.png'"></image>
							<span>{{'谷锐特设备自动化有限公司'}}</span>
						</div>
					</div>
					<div class="cti_pre" v-else>
						<div class="ctip_left">未打卡</div>
					</div>
				</div>
			</div>
		</div>
		<u-datetime-picker :itemHeight="88" :show="show" v-model="yearMonth" mode="year-month" @confirm="confirm" @cancel="show=false" :immediateChange="true" :minDate="minDate" :maxDate="maxDate"></u-datetime-picker>
		<Tabbar :tabbarIndex="1"></Tabbar>
	</view>
</template>

<script>
	import Calendar from './components/CusCalendar/index.vue'
	import Tabbar from '@/components/CusTabbar/clock.vue'
	export default {
		components:{ Calendar,Tabbar },
		data(){
			return {
				workingTime:'',
				offWorkTime:'',
				currentDay:'',
				currentTime:'',
				clockDays:'',
				workHours:'',
				mealTimes:'',
				show:false,
				yearMonth:new Date().Format('yyyy-MM'),
				minDate:'',
				maxDate:'',
				userInfo:null,
				list:[],
				info:null,
				ruleWeeks:[],
			}
		},
		async onLoad() {
			this.currentDay = new Date().Format('yyyy MM.dd');
			this.currentTime = new Date().Format('yyyy-MM-dd hh:mm');
			if(uni.getStorageSync('userInfo')){
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			}
			await this.getRules();
			this.getUserMonthClock(new Date().getFullYear(),new Date().getMonth()+1);
		},
		mounted() {
			let d = new Date();
			this.minDate = new Date(d.getFullYear()-1,d.getMonth()+1,d.getDate()).getTime();
			this.maxDate = new Date().getTime();	
		},
		methods:{
			getRules(){
				return new Promise((resolve,reject)=>{
					this.$api.get('/wms/outsourced/attendance/rule').then(res=>{
						if(res.data.code!==0) return this.$showToast(res.data.msg)
						this.workingTime = res.data.data.workingTime.slice(0,5);
						this.offWorkTime = res.data.data.offWorkTime.slice(0,5);
						let rw = res.data?.data?.checkInOfWeek.split(',').map(r=> Number(r) - 1);
						this.ruleWeeks = rw;
						resolve()
					})
				})
			},
			getUserMonthClock(year,month){
				this.$api.get('/wms/outsourced/attendance/listByUserId',{
					outUserId:this.userInfo.id,
					queryMoth:this.yearMonth
				}).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.clockDays = res.data.data.filter(d=>d.isLeave!=3)?.length;
					this.workHours = res.data.data.reduce((a,b)=>a+Number(b.workingHours),0);
					this.mealTimes = res.data.data.reduce((a,b)=>a+Number(b.mealTimes),0);
					
					this.$refs.calendarRef.ruleWeeks = this.ruleWeeks;
					this.$refs.calendarRef.clockList = res.data.data||[];
					this.$refs.calendarRef.getDataByMonth(year,month);
				})
			},
			async selectDay(obj){
				this.currentDay = new Date(obj.year,obj.month-1,1).Format('yyyy MM.dd');
				this.$refs.calendarRef.year = obj.year;
				this.$refs.calendarRef.month = obj.month;
				this.yearMonth = new Date(obj.year,obj.month-1,1).Format('yyyy-MM');
				this.getUserMonthClock(obj.year,obj.month);
				// let idx = this.$refs.calendarList.findIndex(c=>c.month==obj.month);
				// this.$set(this.$refs.calendarList[idx],'select',true);
			},
			selectInfo(info){
				this.info = info;
			},
			confirm(e){
				this.currentDay = new Date(e.value).Format('yyyy MM.dd');
				let year = new Date(e.value).Format('yyyy');
				let month = Number(new Date(e.value).Format('MM'));
				this.$refs.calendarRef.year = year;
				this.$refs.calendarRef.month = month;
				this.yearMonth = new Date(e.value).Format('yyyy-MM');
				this.getUserMonthClock(year,month);
				this.info = {status:0}
				this.show = false;
			},
		}
	}
</script>

<style scoped lang="less">
	.tabPage{
		padding: 0 24rpx 188rpx;
		background: #F4F8FB;
		
		.card{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 40rpx 30rpx;
			margin-top: 20rpx;
			
			.c_top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.ct_left{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #1D2129;
					line-height: 45rpx;
				}
				.ct_right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #86909C;
					line-height: 33rpx;
					text-align: right;
				}
			}
			
			.c_nums{
				display: flex;
				margin-top: 54rpx;
				.cn_pre{
					width: calc(100% / 3);
					display: flex;
					flex-direction: column;
					align-items: center;
					p{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #1D2129;
						line-height: 36rpx;
						text-align: center;
						&.text{
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							line-height: 24rpx;
							margin-top: 16rpx;
						}
					}
				}
			}
		
			.c_calendar{
				border-top: 1rpx solid #EFEFEF;
				border-bottom: 1rpx solid #EFEFEF;
				margin-top: 36rpx;
				padding: 20rpx 0;
			}
			
			.c_tip{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #86909C;
				line-height: 24rpx;
				text-align: left;
				margin-top: 24rpx;
			}
			
			.c_time{
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				&>image{
					width: 10rpx;
					height: 82rpx;
				}
				.ct_info{
					margin-left: 10rpx;
					.cti_pre{
						display: flex;
						align-items: center;
						&:last-child{
							margin-top: 48rpx;
						}
						.ctip_left{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #1D2129;
							line-height: 24rpx;
						}
						.ctip_right{
							display: flex;
							align-items: center;
							margin-left: 20rpx;
							image{
								width: 24rpx;
								height: 24rpx;
							}
							span{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #86909C;
								line-height: 24rpx;
								margin-left: 8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>