3-31-1

pages/user/dkdetail.vue

@@ -0,0 +1,526 @@
+<template>
+	<view class="content">
+		<view class="select-top">
+			<view class="">
+				本月统计
+			</view>
+			<view class="top-right">
+				<view class="select-time">
+					<picker mode="date" @change="bindDateChange" fields="month">
+						<view class="uni-input">{{showdate}}</view>
+					</picker>
+					<image src="../../static/icon/downjian.png" mode="widthFix"></image>
+				</view>
+			</view>
+		</view>
+		<view class="dk-info">
+			<view class="dk-day big">
+				<view class="dk-left">
+					{{dk_detail.clock_in ||0 }}
+				</view>
+				<view class="dk-center">
+					/
+				</view>
+				<view class="dk-right err">
+					{{dk_detail.no_clocking || 0}}
+				</view>
+			</view>
+			<view class="dk-tit">
+				<view class="dk-left">
+					需要打卡次数
+				</view>
+				<view class="dk-center">
+					/
+				</view>
+				<view class="dk-right">
+					缺卡次数
+				</view>
+			</view>
+			<view class="dk-detail">
+				<view class="detail-item green">
+					<view class="">
+						{{dk_detail.normal || 0}}
+					</view>
+					<view class="item-tit">
+						正常打卡(次)
+					</view>
+				</view>
+				<view class="detail-item">
+					<view class="">
+						{{dk_detail.early || 0}}
+					</view>
+					<view class="item-tit">
+						早退(次)
+					</view>
+				</view>
+				<view class="detail-item">
+					<view class="err">
+						{{dk_detail.late || 0}}
+					</view>
+					<view class="item-tit">
+						迟到(次)
+					</view>
+				</view>
+			</view>
+		</view>
+		<scroll-view scroll-y="true" class="yg-list" :style="{'height': height}">
+			<template v-for="item in list">
+				<view class="yg-wrap">
+					<view class="yg-name">
+						{{ item.time + ' '+ item.name}}
+					</view>
+					<view class="dk-status" :class="{'err': item.status == -1 }" @click="openDetail(item)">
+						{{item.status == 0 ? '正常': (item.status == -1 ? '异常': '正常')}}
+						<image :src="item.open? '../../static/icon/downup.png': '../../static/icon/downxia.png' " mode="">
+						</image>
+					</view>
+				</view>
+				<template v-if="item.open">
+					<view class="info-info">
+						<view class="base-left">
+							<view class="left-wrap" style="height: 267rpx;" v-for="itemt in item.time_slot">
+								<view class="">
+									{{itemt[0]}}
+								</view>
+								<view class="jg">
+
+								</view>
+								<view class="">
+									{{itemt[1]}}
+								</view>
+							</view>
+						</view>
+						<view class="base-right">
+							<view class="right-item" v-for="(clockitem,clockindex) in item.clock"
+								:class="{err: clockitem.timeResult != 'Normal' && clockitem.timeResult != 'wks','hui': clockitem.timeResult== 'wks'}">
+								<view class="item-tit">
+									{{(clockindex%2 == 0) ? '上班':'下班'}}
+								</view>
+								<view class="" v-if="clockitem.timeResult != 'wks'">
+									{{showDkTime(clockitem)}}
+								</view>
+							</view>
+						</view>
+					</view>
+				</template>
+
+			</template>
+
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				id: '',
+				dk_detail: {},
+				showdate: '',
+				height: '',
+				list: [
+
+				]
+			}
+		},
+		onLoad(opt) {
+
+			if (opt.type) {
+				this.id = this.$store.state.userInfo.staffId
+
+				console.log(this.$store.state.userInfo)
+				// this.getTime()
+			} else {
+				this.id = opt.id
+				// this.getTime()
+			}
+		},
+		onShow() {},
+		onReachBottom() {
+
+		},
+		onReady() {
+			var obj = this;
+			uni.getSystemInfo({
+				success: resu => {
+					const query = uni.createSelectorQuery();
+					query.select('.yg-list').boundingClientRect();
+					query.exec(function(res) {
+						obj.height = resu.windowHeight - res[0].top + 'px';
+					});
+				},
+				fail: res => {}
+			});
+		},
+		methods: {
+			showDkTime(item) {
+				// Normal：正常
+				// Early：早退
+				// Late：迟到
+				// SeriousLate：严重迟到
+				// Absenteeism：旷工迟到
+				//NotSigned : 未打卡
+				let str = ''
+				switch (item.timeResult) {
+					case 'NotSigned':
+						str = '缺卡'
+						break;
+					case 'Normal':
+						str = '考勤机打卡(' + item.userCheckTime.split(' ')[1] + ')(正常打卡)'
+						break;
+					case 'Early':
+						str = '考勤机打卡(' + item.userCheckTime.split(' ')[1] + ')(早退)'
+						break;
+					case 'Late':
+						str = '考勤机打卡(' + item.userCheckTime.split(' ')[1] + ')(迟到)'
+						break;
+					case 'SeriousLate':
+						str = '考勤机打卡(' + item.userCheckTime.split(' ')[1] + ')(严重迟到)'
+						break;
+					case 'Absenteeism':
+						str = '考勤机打卡(' + item.userCheckTime.split(' ')[1] + ')(旷工迟到)'
+						break;
+					default:
+						str = ''
+						// break;
+				}
+				return str
+			},
+			openDetail(item) {
+				item.open = !item.open
+			},
+			getTopDetail() {
+				this.$u.api.ExaminationDetails({
+					staffId: this.id,
+					month: this.showdate //选择月份
+				}).then(({
+					data
+				}) => {
+					console.log(data)
+					this.dk_detail = data
+				})
+			},
+			getBtmDetail() {
+				this.$u.api.scheduling_details({
+					month: this.showdate,
+					staffId: this.id,
+				}).then(({
+					data
+				}) => {
+					this.list = []
+					console.log('拿到打卡数据', data)
+					this.list = data.reverse().map(item => {
+						item.open = false
+						let dk = item.time_slot.length
+						let dkLength = dk * 2
+						// 没有开始打卡
+						if (item.status == 0) {
+							try {
+								// console.log(item.clock.length,'item.clock.length')
+								if (item.clock) {
+									if (item.clock.length < dkLength) {
+										for (let i = 0; i < dkLength; i++) {
+											console.log('进入到了这里')
+											if (!item.clock[i]) {
+												item.clock[i] = {
+													baseCheckTime: "",
+													userCheckTime: "",
+													timeResult: "wks"
+												}
+											}
+											console.log(item.clock, 'item.clock')
+										}
+									}
+
+								} else {
+									item.clock = []
+									for (let i = 0; i < dkLength; i++) {
+										item.clock[i] = {
+											baseCheckTime: "",
+											userCheckTime: "",
+											timeResult: "wks"
+										}
+									}
+								}
+
+							} catch (e) {
+								//TODO handle the exception
+								console.log(e, '错误')
+							}
+
+						}
+						// 打卡了但是异常
+						if (item.status == -1) {
+							// 一天全没打卡
+							if (!item.clock) {
+								item.clock = []
+								for (let i = 0; i < dkLength; i++) {
+									item.clock[i] = {
+										baseCheckTime: "",
+										userCheckTime: "",
+										timeResult: "NotSigned"
+									}
+								}
+							}
+							// 打了但没打完
+							if (item.clock.length < dkLength) {
+								for (let i = 0; i < dkLength; i++) {
+									if (!item.clock[i]) {
+										item.clock[i] = {
+											baseCheckTime: "",
+											userCheckTime: "",
+											timeResult: "NotSigned"
+										}
+									}
+
+								}
+							}
+						}
+						if (item.status == 1) {
+
+						}
+						return item
+					})
+					// console.log(res,'data')
+				})
+			},
+			// 选择年月
+			bindDateChange(e) {
+				let time = e.detail.value.split('-')
+				this.showdate = time[0] + '-' + time[1]
+				this.getTopDetail()
+				this.getBtmDetail()
+			},
+			// 获取当前年月
+			getTime() {
+				let date = new Date()
+				let M = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
+				console.log(M)
+				this.showdate = date.getFullYear() + '-' + M
+				this.getTopDetail()
+				this.getBtmDetail()
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.err {
+		color: #E05742;
+	}
+
+	.hui {
+		color: #aaa;
+	}
+
+	.select-top {
+		width: 100%;
+		height: 100rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border: 1px solid #F5F5F5;
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #000000;
+		padding: 0 30rpx;
+		background-color: #fff;
+
+		.top-right {
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #000000;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+
+			image {
+				width: 19rpx;
+				height: 11rpx;
+			}
+		}
+	}
+
+	.dk-info {
+		height: 326rpx;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		background-color: #fff;
+		margin-bottom: 20rpx;
+
+		.big {
+			font-size: 46rpx !important;
+			font-weight: 800;
+			color: #000000;
+			margin-bottom: 10rpx;
+		}
+
+
+
+		.dk-day,
+		.dk-tit {
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			width: 100%;
+			font-size: 26rpx;
+
+			.dk-left {
+				width: 48%;
+				text-align: right;
+			}
+
+			.dk-center {
+				width: 4%;
+				flex-shrink: 0;
+				text-align: center;
+				color: #D7D7D7;
+
+			}
+
+			.dk-right {
+				width: 48%;
+			}
+		}
+
+		.dk-detail {
+			display: flex;
+			justify-content: center;
+			width: 100%;
+			margin-top: 50rpx;
+
+			.detail-item {
+				width: 30%;
+				text-align: center;
+				font-size: 28rpx;
+				font-weight: bold;
+				color: #000000;
+
+				.item-tit {
+					margin-top: 15rpx;
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #666666;
+				}
+			}
+
+		}
+	}
+
+	.yg-list {
+		background-color: #fff;
+		width: 100%;
+
+		.yg-wrap {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 40rpx 0 30rpx;
+			height: 100rpx;
+			border-bottom: 1px solid #F2F2F2;
+			font-size: 28rpx;
+			font-weight: bold;
+			color: #000000;
+
+			.yg-name {}
+
+			.dk-status {
+				display: flex;
+				align-items: center;
+
+				image {
+					width: 19rpx;
+					height: 11rpx;
+					margin-left: 10rpx;
+				}
+			}
+		}
+	}
+
+	.info-info {
+		width: 100%;
+		// height: 267rpx;
+		background-color: #f8f8f8;
+		display: flex;
+
+		.base-left {
+			flex-shrink: 0;
+			width: 180rpx;
+			height: 100%;
+			// height: 267rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			font-size: 30rpx;
+			font-weight: 800;
+			color: #000000;
+
+			.left-wrap {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.jg {
+				width: 5rpx;
+				height: 75rpx;
+				background: #ECECEC;
+				margin: 20rpx 0;
+			}
+		}
+
+		.base-right {
+			flex-grow: 1;
+			width: 100%;
+
+			.right-wrap {
+				// height: 135rpx;
+			}
+
+			.up {
+				border-bottom: 1px solid #E4E4E4;
+			}
+
+			.right-item {
+				// height: 50%;
+				height: 135rpx;
+				padding-top: 30rpx;
+				font-size: 26rpx;
+				font-weight: 500;
+				border-bottom: 1px solid #E4E4E4;
+
+				&:last-of-type {
+					border-bottom: none;
+				}
+
+				.item-tit {
+					font-size: 30rpx;
+					font-weight: 800;
+				}
+
+			}
+		}
+	}
+
+	.select-time {
+		position: absolute;
+		top: 30rpx;
+		right: 30rpx;
+		font-size: 28rpx;
+		font-weight: 500;
+		color: #000;
+		display: flex;
+		align-items: center;
+		font-weight: bold;
+
+		image {
+			width: 17rpx;
+			margin-left: 10rpx;
+		}
+	}
+</style>