yuanqu_ui/work/pages/record/detail.vue

<template>
	<view :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar color="#ffffff" left-icon="left" title="打卡记录" :background-color="backgroundColor"
				:border="false" statusBar='true' fixed="true" @clickLeft='getBack'>
			</uni-nav-bar>
		</view>
		<image :src="navbg" class="navbg"></image>
		<view class="zxmain">
			<!-- <view class="locktop" @click="getNormal">
				<view class="locktopl">本月异常考勤</view>
				<view class="locktopr">
					您有
					<text>{{ abnormainfo.count||0 }}</text>
					条考勤异常记录，去处理
				</view>
				<image :src="rimg" class="locktopi"></image>
			</view> -->
			<view class="lock_header" v-if="checkPermi(['system:clock:personage:month'])">
				<view class="lock_headerth">
					<view class="tit">本月考勤记录</view>
					<!-- <view class="txt" @click="cords">
						<text>详细记录</text>
					</view> -->
				</view>
				<view class="lock_headerthbt">
					<view>
						<text class="tit cicr2">{{countinfo.cd}}</text>
						<text class="txt">迟到</text>
					</view>
					<view>
						<text class="tit cicr4">{{countinfo.zt}}</text>
						<text class="txt">早退</text>
					</view>
					<view>
						<text class="tit cicr3">{{countinfo.wq}}</text>
						<text class="txt">外勤</text>
					</view>
					<view>
						<text class="tit cicr5">{{countinfo.wdk}}</text>
						<text class="txt">未打卡</text>
					</view>
				</view>
			</view>
			<view class="ytbox">
				<view class="ytop flexc">
					<view class="tit" v-if="dataobj.name">{{dataobj.name.charAt(0)}}</view>
					<view class="cent">
						<view class="ctit">{{dataobj.name}}</view>
						<view class="ctime">最新打卡：{{timeday}}</view>
					</view>
				</view>
				<!-- 日历 -->
				<view class="mb24">
					<lunc-calendar ref="calendar" :recordDate="recordDate"  :showLunar="false" :configWeek="configWeek" :configHoliday="configHoliday" :firstDayOfWeek="firstDayOfWeek" :showMonthBg="false" :showShrink="true" :signList="signList" 
						@dayChange="dayChange" weekType="" @monthChange="monthChange" @getIsSelDayFn="getIsSelDayFn" @shrinkClick="shrinkClick">
					</lunc-calendar>
				</view>
				<view class="tips">出勤统计：打卡
				<block v-if="datainfo.am&&datainfo.pm">2</block>
				<block v-else-if="datainfo.am||datainfo.pm">1</block>
				<block v-else>0</block>次，上下班时间：{{dataobj.workTime}}</view>
				<!-- 休息 -->
				<view  class="restbox" v-if="datainfo.holidaytype=='NO'||weekflag&&datainfo.holidaytype!='YES'">
					<image :src="restimg"></image>
					<view>今日休息</view>
					<view>无需打卡哟~</view>
				</view>
				<!-- 步骤条 -->
				<view class="mb16 plr18" v-if="!datainfo.holidaytype||datainfo.holidaytype!='NO'||datainfo.holidaytype=='NO'&&(!datainfo.am||!datainfo.pm)">
					<view class="steps">
						<view class="cir"></view>
						<view class="stepsa">
							<view class="steptit">上班打卡</view>
							<view class="steptxt">
								<image :src="cirimg"></image>
								<view v-if="datainfo.am">{{datainfo.am}}<block v-if="datainfo.amex!=5">已打卡</block></view>
								<view class="tip" v-if="datainfo.amex>1&&datainfo.amex<5">
									<block v-if="datainfo.amex==2">外勤</block>
									<block v-if="datainfo.amex==3">迟到</block>
									<block v-if="datainfo.amex==4">早退</block>
								</view>
							</view>
						</view>
					</view>
					<view class="steps">
						<view class="cir"></view>
						<view class="stepsa">
							<view class="steptit">下班打卡</view>
							<view class="steptxt">
								<image :src="cirimg"></image>
								<view v-if="datainfo.pm">{{datainfo.pm}}<block v-if="datainfo.pmex!=5">已打卡</block></view>
								<view class="tip" v-if="datainfo.pmex>1&&datainfo.pmex<5">
									<block v-if="datainfo.pmex==2">外勤</block>
									<block v-if="datainfo.pmex==3">迟到</block>
									<block v-if="datainfo.pmex==4">早退</block>
								</view>	
							</view>
						</view>
					</view>
				</view>
				
				<view class="tips">统计截至 {{kaTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {getDictionaryFn} from "@/api/mine/register.js"
	import {getClockRl} from "@/api/mine/work.js"
	import {getClockCountper} from "@/api/work/check.js"
	import luncCalendar from "@/work/components/lunc-calendar/lunc-calendar.vue"
	export default {
		components: {luncCalendar},
		data() {
			return {
				cirimg:require("@/static/images/home/chose.png"),
				navbg:require("@/static/images/navbg.png"),
				restimg:require('@/work/static/clock/rest.png'),
				backgroundColor: "transparent",
				datainfo:{},
				dataobj:{},
				abnormainfo:[0,2,3,5],
				nvaHeight: 44,
				marTop: 0, //距离顶部的距离
				stubarHeight: 0, //
				visitName:'',
				
				signList: [],
				configWeek:[],
				configHoliday:'Y',
				firstDayOfWeek:'sunday',
				// dayflag:false,
				// month:'',
				// year:'',
				kaTime:'',
				changetime:'',//改变的日期
				timeday:'',//选择的日期
				// visitDate:'',
				userId:'',
				recordDate:'',
				countinfo:{},//统计,
				weekflag:false,
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#0491FD'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		onLoad: function(e) {
			if(e.data){
				var data=JSON.parse(decodeURIComponent(e.data))
				this.userId=data.userId;
				this.recordDate=data.recordDate;
				this.getCalendarList()
				this.timeWeek(data.recordDate)
			}
			uni.getSystemInfo({
				success: (e) => {
					this.stubarHeight = Number(e.statusBarHeight);
					this.nvaHeight = Number(e.statusBarHeight) + 44;
				}
			})
			this.time();
			if(checkPermi(['system:clock:personage:month'])){
				this.getClockCountper()
			}
		},
		onShow() {},
		methods: {
			checkPermi,
			checkRole,
			getBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getClockCountper(){
				var params = {
					userId: this.userId,
					recordDate: this.recordDate,
				}
				if(this.changetime){
					params.recordDate=this.changetime
				}
				getClockCountper(params).then(res => {
					if (res.code == 200) {
						this.countinfo=res.data;
					} else {
						this.$toast(res.msg)
					}
				})
			},
			dayChange(e){
				var week=e.week;
				// 周末标红
				if (week == 0 || week == 6){
					this.weekflag=true
				}else{
					this.weekflag=false
				}
				if(e.daySign&&e.daySign.length){
					var daySign=e.daySign[0];
					this.datainfo=JSON.parse(JSON.stringify(daySign))
				}
			},
			time() {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				var h = date.getHours();
				var min = date.getMinutes();
				var s = date.getSeconds();
				var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
				var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				var yearStr = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
				var timeStr = (h < 10 ? '0' + h : h) + ':' + (min < 10 ? '0' + min : min) + ':' + (s < 10 ? '0' + s : s);
				
				
				this.timeday = yearStr;
				this.kaTime =yearStr+' '+ timeStr;
				// 年,月,日, 星期几 时分秒
			},
			timeWeek(data){
				var date = new Date(data);
				var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
				if(week==0||week==6){
					this.weekflag=true;
				}else{
					this.weekflag=false
				}
			},
			monthChange(e){
				var y=e.year;
				var m=e.month;
				var time=y + '-' + m + '-' + '01'
				this.changetime=time
				this.getCalendarList(time)
				this.getClockCountper()
				// if(y==this.year&&m==this.month){
				// 	this.getCalendarList()
				// 	this.changetime='';
				// }else{
				// 	var time=y + '-' + m + '-' + '01'
				// 	this.changetime=time
				// 	this.getCalendarList(time)
				// }
			},
			// 选中的日期
			getIsSelDayFn(e){
				if(e.sign&&e.sign.length){
					var date=e.sign[0].date;
					var daySign=e.sign[0];
					this.datainfo=JSON.parse(JSON.stringify(daySign))
					// if(date==this.recordDate){
					// 	var daySign=e.sign[0];
					// 	this.datainfo=JSON.parse(JSON.stringify(daySign))
					// }
				}
				
			},
			shrinkClick(e){
				console.log(e,3)
			},
			getNormal(){
				this.$tab.navigateTo("/work/pages/clock/abnormal")
			},
			cords(){
				// this.$tab.navigateTo("/work/pages/clock/abnormal")
			},
			init() {
				// 门卫
				// getDictionaryFn('is_read').then(res=>{
				// 	if(res.code==200){
				// 		this.ydztlist = res.data.map(v => {
				// 			return {
				// 				label: v.dictLabel,
				// 				value: v.dictValue
				// 			}
				// 		})
				// 	}
				// })
			},
			getCalendarList() {
				var params = {
					userId: this.userId,
					recordDate: this.recordDate,
				}
				if(this.changetime){
					params.recordDate=this.changetime
				}
				getClockRl(params).then(res => {
					if (res.code == 200) {
						var data=res.data;
						this.dataobj=res.data;
						var holidays=[];
						if(data.holidays&&data.holidays.length){
							holidays=data.holidays
						}
						if(data.rlData&&data.rlData.length){
							var newArr=JSON.parse(JSON.stringify(data.rlData))
							var tree=[]
							newArr.forEach(ite=>{
								const matchingData = holidays.find(d => d.holidayDate == ite.date);
								var obj=JSON.parse(JSON.stringify(ite))
								if(matchingData){
									obj.holidaytype=matchingData.type;
									tree.push(obj)	
								}else{
									tree.push(obj)	
								}
								if(ite.date==this.recordDate){
									this.datainfo=JSON.parse(JSON.stringify(obj))
								}
							})
							this.signList=JSON.parse(JSON.stringify(tree));
							// Object.keys(newArr).some((key) => {
							// 	if(newArr[key].date==this.recordDate){
							// 		this.datainfo=JSON.parse(JSON.stringify(newArr[key]))
							// 		return
							// 	}
								
							// })
						}
					} else {
						this.$toast(res.msg)
					}
				})

			},
		},

	}
</script>
<style>
/* 	page {
		background: #ffffff;
	} */
</style>
<style lang="scss" scoped>
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 692rpx;}	
.zxmain{position: relative;padding: 20rpx 32rpx 40rpx;box-sizing: border-box;display: flex;flex-direction: column;}
.ytbox{width: 684rpx;margin: 0 auto;padding-top: 24rpx;position: relative;flex: 1;overflow: auto;background-color: #ffffff;padding-bottom: 12rpx;border-radius: 14rpx;
	.ytop{padding: 16rpx 0 24rpx 16rpx;
		.tit{width: 62rpx;height: 62rpx;background: #0391FD;border-radius: 6rpx;font-weight: 500;
	font-size: 34rpx;color: #FFFFFF;margin-right: 18rpx;text-align: center;line-height: 62rpx;flex: 0 0 auto;}
		.cent{
			flex: 1;
			.ctit{font-weight: bold;font-size: 28rpx;color: #161616;margin-bottom: 6rpx;}
			.ctime{font-weight: 500;font-size: 18rpx;color: #666666;}
		}
	}
	.tips{font-weight: 500;font-size: 26rpx;color: #888888;padding-left: 34rpx;margin-bottom: 24rpx;}
	// 步骤条
	.steps{position: relative;display: flex;padding-bottom:40rpx;
		&::after{
			content: '';position: absolute;left:6rpx;top: 34rpx;bottom: 4rpx;background-color: #DADADA;width: 2rpx;
		}
		.cir{width: 14rpx;height: 14rpx;background: #AFAFAF;border-radius: 50%;flex: 0 0 auto;margin-right: 38rpx;margin-top: 13rpx;}
		.stepsa{flex: 1;
			.steptit{font-weight: bold;font-size: 28rpx;color: #161616;margin-bottom: 20rpx;}
			.steptxt{display: flex;
				image{width: 20rpx;height: 20rpx;margin-right: 14rpx;flex: 0 0 auto;margin-top: 7rpx;}
				view{font-weight: bold;font-size: 26rpx;color: #888888;}
				.tip{border-radius: 12rpx;font-weight: 500;font-size: 16rpx;color: #F87C29;border: 2rpx solid #F87C29;height: 28rpx;box-sizing: border-box;display: flex;align-items: center;padding: 0 8rpx;margin-left: 12rpx;flex: 0 0 auto;margin-top: 6rpx;}
			}
		}
	}
}
.locktop{
	background: #FFFFFF;
	box-shadow: 0px 0px 12rpx 0px rgba(153,152,152,0.39);
	border-radius: 14rpx;display: flex;align-items: center;padding: 40rpx 32rpx;margin-bottom: 30rpx;
	.locktopl{font-size: 26rpx;font-weight: bold;color: #343434;flex: 1 0 auto;margin-right: 16rpx;}
	.locktopr{font-size: 22rpx;color: #1678ff;flex: 0 1 auto;
		text{font-size: 28rpx;color: #F16435;font-weight: bold;}
	}
	.locktopi{width: 10rpx;height: 18rpx;flex: 0 0 auto;margin-left: 16rpx;}
 }
.cof{color: #ff0000 !important;}
// 标识点
.cicr2{colorr: $uni-katype2 !important;}//迟到
.cicr3{color: $uni-katype3 !important;}//外勤
.cicr4{color: $uni-katype4 !important;}//早退
.cicr5{color: $uni-katype5 !important;}//旷工
	 
.lock_header {
	background-color: #ffffff;
	margin-bottom: 30rpx;min-height: 220rpx;padding: 32rpx 34rpx 20rpx;box-shadow: 0px 0px 12rpx 0px rgba(153, 152, 152, 0.39);border-radius: 14rpx;box-sizing: border-box;
	.lock_headerth {display: flex;justify-content: space-between;align-items: center;
	  .tit{font-size: 26rpx;font-weight: bold;color: #343434;}
	 .txt{display: flex;align-items: center;
	    text {font-size: 26rpx;font-weight: 400;color: #1678ff;}
	    image {width: 10rpx; height: 18rpx;margin-left: 10rpx;}
	  }
	}
	.lock_headerthbt {display: flex;justify-content: space-between;
	  view {flex: 1;text-align: center;display: flex;flex-direction: column;align-items: center;padding: 26rpx 0 20rpx;
	    .tit{margin-bottom: 16rpx;font-size: 34rpx;font-weight: bold;color: #343434;}
	    .txt{font-size: 22rpx;font-weight: 400;color: #343434;
	    }
	  }
    }
  }
.restbox{display: flex;flex-direction: column;align-items: center;margin-bottom: 48rpx;padding-top: 40rpx;
	image{width: 396rpx;height: 264rpx;margin-bottom: 20rpx;}
	view{font-weight: 500;font-size: 26rpx;color: #343434;}
}
</style>