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>{{16}}</p>
					<p class="text">出勤天数</p>
				</div>
				<div class="cn_pre">
					<p>{{416}}</p>
					<p class="text">总工时</p>
				</div>
				<div class="cn_pre">
					<p>{{46}}</p>
					<p class="text">餐补次数</p>
				</div>
			</div>
			<div class="c_calendar">
				<Calendar ref="calendarRef" @selectDay="selectDay"></Calendar>
			</div>
			<div class="c_tip">当日班次：{{'固定上下班'}} 班次 {{'08:30-17:30'}}</div>
			<div class="c_tip">出勤统计：打卡{{2}}次，工时{{10}}小时</div>
			<div class="c_time">
				<image :src="imgBase+'clockingin/time_line.png'"></image>
				<div class="ct_info">
					<div class="cti_pre">
						<div class="ctip_left">上班 {{'08:19'}}</div>
						<div class="ctip_right">
							<image :src="imgBase+'clockingin/location_inactive.png'"></image>
							<span>{{'谷锐特设备自动化有限公司'}}</span>
						</div>
					</div>
					<div class="cti_pre">
						<div class="ctip_left">下班 {{'20:30'}}</div>
						<div class="ctip_right">
							<image :src="imgBase+'clockingin/location_inactive.png'"></image>
							<span>{{'谷锐特设备自动化有限公司'}}</span>
						</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 {
				currentDay:'',
				currentTime:'',
				show:false,
				yearMonth:new Date().Format('yyyy-MM'),
				minDate:'',
				maxDate:'',
			}
		},
		onLoad() {
			this.currentDay = new Date().Format('yyyy MM.dd');
			this.currentTime = new Date().Format('yyyy-MM-dd hh:mm');
		},
		mounted() {
			let d = new Date();
			this.minDate = new Date(d.getFullYear()-1,d.getMonth()+1,d.getDate()).getTime();
			this.maxDate = new Date().getTime();	
		},
		methods:{
			selectDay(obj){
				this.currentDay = new Date(obj.year,obj.month-1,1).Format('yyyy MM.dd');
			},
			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.$refs.calendarRef.getDataByMonth(year,month);
				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>