smartSchoolClockApp/pages/stat/stat.vue

<template>
	<view>
		<view class="container">
			<view class="placeholder"></view>
			<!-- 顶部分段器区域 -->
			<view class="control" v-if="flag">
				<uni-segmented-control :current="current" :values="items" styleType="text" @clickItem="onClickItem" activeColor="#0082FC"></uni-segmented-control>
			</view>
			<!-- 头部月份区域 -->
			<view class="header">
				<view class="title">
					<view class="month">{{ month }}月汇总</view>
					<view class="right" @click="goToDetail"><img src="../../static/imgs/right.png" alt="" /></view>
				</view>
				<view class="state">
					<view class="err">
						<view class="number">{{ fail_count }}</view>
						<view class="mes">异常次数（次）</view>
					</view>
					<view class="success">
						<view class="number">{{ success_count }}</view>
						<view class="mes">打卡成功（次）</view>
					</view>
				</view>
			</view>

			<!-- 日历区域 -->
			<view class="calendar">
				<view class="calendar_title">
					每日记录
					<span>（{{ month }}月）</span>
				</view>

				<view class="calendar_body"><uni-calendar :showMonth="false" @change="change" :selected="selectList" /></view>

				<view class="calendar_foot" v-if="current == 1">
					<!-- 每一条记录区域 -->
					<view class="foot_item" v-for="(item, index) in list2" :key="index">
						<view>规则：{{ item.ruleName }} {{ item.timeRange }}</view>
						<view class="box">
							<view class="circular" v-if="item.status == 4"></view>
							<view class="circular color" v-else></view>
							<view v-if="item.status == 1">未开始</view>
							<view v-if="item.status == 2">已开始</view>
							<view v-if="item.status == 3">已超时</view>
							<view v-if="item.status == 4">已打卡</view>
							<span v-if="item.status == 4">{{ format_time(item.updateTime) }}</span>
						</view>
					</view>
				</view>

				<!-- 环形图区域 -->
				<view class="progress" v-if="current == 0">
					<view class="chart"><progressBar v-if="showBar" :value="progress_proportion" :progress_txt="progress_txt" :progress_total="progress_total" /></view>

					<view class="look" @click="handleLookDetail">
						<view class="info">查看明细</view>
						<img src="../../static/imgs/right.png" />
					</view>
				</view>
			</view>

			<!-- 异常人员名单区域 -->
			<view class="errPeople" v-if="current == 0">
				<!-- 标题区域 -->
				<view class="e_header">
					<view class="left">异常人员名单</view>
					<view class="right">
						<view class="icon" @click="handleInform"><img src="../../static/imgs/notice.png" /></view>
						<view class="info" @click="handleInform">通知</view>
					</view>
				</view>

				<!-- 选择时间区域 -->
				<view class="e_calendar">
					<!-- 双左箭头区域 -->
					<view class="double" @click="handleDoubleLeft"><img src="../../static/imgs/double_left.png" /></view>
					<!-- 左箭头区域区域 -->
					<view class="single" @click="handleLeft"><img src="../../static/imgs/left.png" /></view>
					<!-- 时间区域 -->
					<view class="time">{{ year }}-{{ comMonth }}</view>
					<!-- 双右箭头区域 -->
					<view class="single2" @click="handleRight"><img src="../../static/imgs/right2.png" /></view>
					<!-- 右箭头区域 -->
					<view class="double" @click="handleDoubleRight"><img src="../../static/imgs/double_right.png" /></view>
				</view>

				<view class="e_list" v-if="errList.length">
					<view class="e_box" v-for="item in errList" :key="item.userId">
						<view class="e_img"><img :src="item.headImage || '../../static/imgs/headImage.png'" /></view>
						<view class="e_name">{{ item.name }}</view>
						<view class="e_msg">未打卡{{ item.times }}次</view>
					</view>
				</view>

				<view class="e_list2" v-else>
					<img src="../../static/imgs/nodata.png" />
					<view class="info">暂无数据</view>
				</view>
			</view>
		</view>
		<!-- 底部导航栏区域 -->
		<cover-view class="tab_bar" v-if="showTabBar">
			<cover-view class="tab_box" @click="handleGoPage('/pages/home/home')">
				<cover-image class="tab_img" v-if="pageUrl == 'pages/home/home'" src="../../static/imgs/home_active.png"></cover-image>
				<cover-image class="tab_img" v-else src="../../static/imgs/home.png"></cover-image>
				<cover-view v-if="pageUrl == 'pages/home/home'" class="tab_title_active">首页</cover-view>
				<cover-view v-else class="tab_title">首页</cover-view>
			</cover-view>
			<cover-view class="tab_box" @click="handleGoPage('/pages/stat/stat')">
				<cover-image class="tab_img" v-if="pageUrl == 'pages/stat/stat'" src="../../static/imgs/stat_active.png"></cover-image>
				<cover-image class="tab_img" v-else src="../../static/imgs/stat.png"></cover-image>
				<cover-view v-if="pageUrl == 'pages/stat/stat'" class="tab_title_active">统计</cover-view>
				<cover-view v-else class="tab_title">统计</cover-view>
			</cover-view>
			<cover-view v-if="flag" class="tab_box" @click="handleGoPage('/pages/my/my')">
				<cover-image class="tab_img" v-if="pageUrl == 'pages/my/my'" src="../../static/imgs/my_active.png"></cover-image>
				<cover-image class="tab_img" v-else src="../../static/imgs/my.png"></cover-image>
				<cover-view v-if="pageUrl == 'pages/my/my'" class="tab_title_active">我的</cover-view>
				<cover-view v-else class="tab_title">我的</cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
import progressBar from '../../components/progress/progress.vue'
export default {
	components: {
		progressBar
	},
	data() {
		return {
			// 是否为管理员或子管理员标识
			flag: false,
			// 有标记点的数组日期
			selectList: [
				// {
				// 	date: "2022-12-20",
				// 	info: '打卡'
				// },
				// {
				// 	date: "2022-12-21",
				// 	info: '未打卡',
				// 	data: {
				// 		custom: '自定义信息',
				// 		name: '自定义消息头'
				// 	}
				// }
			],
			// 个人考勤规则列表
			list2: [],
			// 分段器数组
			items: ['团队统计', '我的统计'],
			// 分段器默认索引
			current: 1,
			// 当前年份
			year: null,
			// 当前月份
			month: null,
			// 当前天数
			day: null,
			// 异常人员名单数组
			errList: [],
			// 环形图完成数量
			progress_txt: 2,
			// 环形图总数
			progress_total: 10,
			// 当前时间
			nowTime: '',
			// 打卡异常次数
			fail_count: 0,
			// 打卡成功次数
			success_count: 0,
			// 异常人员名单当前页
			page: 1,
			// 异常人员名单总条数
			total: 0,
			// 环形图显示隐藏控制
			showBar: false,
			// 当前页面的路由地址
			pageUrl: '',
			showTabBar: true,
			timer: null,
			timer2: null,
			currentYear: ''
		}
	},
	onLoad() {
		this.getTime()
	},
	onShow() {
		this.getPageUrl()
		let flag = uni.getStorageSync('manager')
		let flag2 = uni.getStorageSync('sub-administrator')
		if (flag || flag2) {
			this.flag = true
		} else {
			this.flag = false
		}
		if (this.flag) {
			this.current = 0
			this.errList = []
			this.getMonthTimes_team()
			this.getProportion()
			this.getErrList()
		} else {
			this.current = 1
			this.getMonthTimes()
			this.getRulesList()
		}
	},
	computed: {
		comMonth() {
			if (this.month) {
				let month = this.month < 10 ? '0' + this.month : this.month
				return month
			}
		},
		progress_proportion() {
			if (this.progress_total == 0) {
				return 0
			} else {
				return (this.progress_txt / this.progress_total) * 100
			}
		}
	},
	watch: {
		progress_txt() {
			this.showBar = false
			setTimeout(() => {
				this.showBar = true
			}, 10)
		},
		progress_total() {
			this.showBar = false
			setTimeout(() => {
				this.showBar = true
			}, 10)
		}
	},
	// 页面拉到底部触发函数
	onReachBottom() {
		if (this.current == 0) {
			if (this.errList.length < this.total) {
				this.page++
				this.getErrList()
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		}
	},
	onPageScroll(value) {
		if (this.timer) {
			clearInterval(this.timer)
		}

		this.timer = setTimeout(() => {
			this.showTabBar = false
			this.showTabBar = true
			this.timer = null
		}, 500)
	},
	methods: {
		getPageUrl() {
			// 获取当前打开过的页面路由数组
			let routes = getCurrentPages()
			// 获取当前页面路由，也就是最后一个打开的页面路由
			let curRoute = routes[routes.length - 1].route
			this.pageUrl = curRoute
		},
		handleGoPage(url) {
			// console.log(url);
			uni.redirectTo({
				url
			})
		},
		// 获取当前年 月 日
		getTime() {
			let date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
			this.year = year
			this.month = month
			this.day = day
			this.nowTime = year + '-' + this.comMonth + '-' + day + ' ' + '00:00:00'
			this.currentYear = year
		},

		// 获取我的月打卡次数
		async getMonthTimes() {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/month/times',
				data: {
					time: this.nowTime
				}
			})
			// console.log(res);
			if (res.code == 200) {
				this.fail_count = res.data.fail
				this.success_count = res.data.success
			}
		},

		// 获取我的团队月打卡次数
		async getMonthTimes_team() {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/month/times/team',
				data: {
					time: this.nowTime
				}
			})
			// console.log(res);
			if (res.code == 200) {
				this.fail_count = res.data.fail
				this.success_count = res.data.success
			}
		},
		// 获取团队打卡每日完成占比
		async getProportion() {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/proportion',
				data: {
					time: this.nowTime
				}
			})
			// console.log(res);
			if (res.code == 200) {
				this.progress_txt = res.data.complete
				this.progress_total = res.data.total
			}
		},

		// 获取打卡异常人员名单
		async getErrList() {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/abnormal',
				data: {
					time: this.nowTime,
					page: this.page,
					size: 9
				}
			})
			// console.log(res);
			if (res.code == 200) {
				this.total = res.data.total
				this.errList = [...this.errList, ...res.data.list]
			}
		},

		// 获取打卡规则列表
		async getRulesList() {
			// let name = uni.getStorageSync("userInfo").username
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/list/day',
				data: {
					// page: this.page_my,
					time: this.nowTime
				}
			})
			// console.log(res);
			if (res.code == 200) {
				// this.list2 = [...this.list2, ...res.data]
				this.list2 = res.data
				// this.total_my = res.data.total
			}
		},

		// 点击日历日期回调
		change(e) {
			// console.log('change 返回:', e.fulldate)
			if (this.timer2) {
				clearTimeout(this.timer2)
			}
			this.timer2 = setTimeout(() => {
				this.nowTime = e.fulldate + ' ' + '00:00:00'
				if (this.current == 0) {
					this.getProportion()
				} else {
					this.getRulesList()
				}
				this.timer2 = null
			}, 100)
		},
		// 分段器点击回调
		onClickItem(e) {
			this.fail_count = ''
			this.success_count = ''
			// this.list2 = []
			this.errList = []
			this.page = 1
			// console.log(e.currentIndex);
			this.current = e.currentIndex
			if (e.currentIndex == 0) {
				this.getMonthTimes_team()
				this.getProportion()
				this.getErrList()
			} else {
				this.getMonthTimes()
				this.getRulesList()
			}
		},
		// 点击通知回调
		handleInform() {
			if (this.total > 0) {
				uni.showModal({
					title: '提示',
					content: `当前列表中有 ${this.total} 位异常人员，确定需要全部通知吗？`,
					success: async res => {
						if (res.confirm) {
							let data = JSON.stringify(this.nowTime)
							let res = await this.$myRequest_clockIn({
								url: '/attendance/api/sign/check/in/abnormal/notify/app',
								method: 'post',
								data,
								header: {
									'content-type': 'application/json'
								}
							})
							// console.log(res);
							if (res.code == 200) {
								uni.showToast({
									title: '通知成功'
								})
							}
						}
					}
				})
			} else {
				uni.showToast({
					title: '当前异常人员名单为空，无法通知',
					icon: 'none'
				})
			}
		},
		// 点击查看明细回调
		handleLookDetail() {
			// console.log(this.nowTime);
			uni.navigateTo({
				url: `/pages/particulars/particulars?nowTime_day=${this.nowTime}&type=1`
			})
		},

		// 跳转统计详情页面
		goToDetail() {
			if (this.current == 1) {
				uni.navigateTo({
					url: `/pages/statDetail/statDetail`
				})
			} else {
				uni.navigateTo({
					url: '/pages/particulars/particulars?type=2'
				})
			}
		},

		// 往后选择年份回调
		handleDoubleLeft() {
			if (this.year <= this.currentYear - 3) {
				uni.showToast({
					title: `不能选择${this.currentYear - 3}年之前`,
					icon: 'none'
				})
			} else {
				this.year -= 1
				this.nowTime = this.year + '-' + this.comMonth + '-' + this.day + ' ' + '00:00:00'
				this.page = 1
				this.errList = []
				this.getErrList()
			}
		},
		// 往前选择年份回调
		handleDoubleRight() {
			if (this.year >= this.currentYear - 0 + 3) {
				uni.showToast({
					title: `不能选择${this.currentYear - 0 + 3}年之后`,
					icon: 'none'
				})
			} else {
				this.year += 1
				this.nowTime = this.year + '-' + this.comMonth + '-' + this.day + ' ' + '00:00:00'
				this.page = 1
				this.errList = []
				this.getErrList()
			}
		},
		// 往后选择月份回调
		handleLeft() {
			if (this.month <= 1) {
				if (this.year <= this.currentYear - 3) {
					uni.showToast({
						title: `不能选择${this.currentYear - 3}年之前`,
						icon: 'none'
					})
				} else {
					this.year -= 1
					this.month = 12
					this.nowTime = this.year + '-' + this.comMonth + '-' + this.day + ' ' + '00:00:00'
					this.page = 1
					this.errList = []
					this.getErrList()
				}
			} else {
				this.month -= 1
				this.nowTime = this.year + '-' + this.comMonth + '-' + this.day + ' ' + '00:00:00'
				this.page = 1
				this.errList = []
				this.getErrList()
			}
		},
		// 往前选择月份回调
		handleRight() {
			if (this.month >= 12) {
				if (this.year >= this.currentYear - 0 + 3) {
					uni.showToast({
						title: `不能选择${this.currentYear - 0 + 3}年之后`,
						icon: 'none'
					})
				} else {
					this.year += 1
					this.month = 1
					this.nowTime = this.year + '-' + this.comMonth + '-' + this.day + ' ' + '00:00:00'
					this.page = 1
					this.errList = []
					this.getErrList()
				}
			} else {
				this.month += 1
				this.nowTime = this.year + '-' + this.comMonth + '-' + this.day + ' ' + '00:00:00'
				this.page = 1
				this.errList = []
				this.getErrList()
			}
		},
		// 格式化时间
		format_time(timestamp) {
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var date = new Date(timestamp)
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
			var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
			let strDate = h + m
			return strDate
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: calc(100vh - 128rpx);
	// overflow-y: auto;
	background-color: #f2f2f2;

	.placeholder {
		height: 20rpx;
	}

	.control {
		margin-bottom: 20rpx;
		width: 750rpx;
		height: 90rpx;
		background-color: #fff;
	}

	.header {
		margin: 0 auto;
		width: 710rpx;
		height: 236rpx;
		background-color: #fff;

		.title {
			display: flex;
			height: 92rpx;

			.month {
				flex: 8;
				margin: 30rpx 0 0 30rpx;
				font-size: 32rpx;
				font-weight: 500;
			}

			.right {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;

				img {
					width: 15rpx;
					height: 30rpx;
				}
			}
		}

		.state {
			display: flex;
			height: 144rpx;

			.err {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.number {
					font-size: 46rpx;
					font-weight: 700;
				}

				.mes {
					font-size: 28rpx;
					color: #999999;
				}
			}

			.success {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.number {
					font-size: 46rpx;
					font-weight: 700;
				}

				.mes {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}
	}

	.calendar {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 710rpx;
		background-color: #fff;

		.calendar_title {
			padding-left: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 500;

			span {
				font-size: 26rpx;
				color: #999999;
			}
		}

		.calendar_body {
			height: 690rpx;
		}

		.calendar_foot {
			padding: 100rpx 30rpx 150rpx;
			// padding-bottom: 150rpx;

			.foot_item {
				box-sizing: border-box;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				height: 130rpx;
				font-size: 24rpx;
				color: #808080;

				.box {
					display: flex;
					align-items: center;

					.circular {
						margin-right: 18rpx;
						width: 12rpx;
						height: 12rpx;
						border-radius: 6rpx;
						background-color: #31c20e;
					}

					.color {
						background-color: #999999;
					}

					span {
						margin-left: 18rpx;
					}
				}
			}
		}

		.progress {
			position: relative;
			display: flex;
			justify-content: center;
			padding: 0 30rpx;
			height: 121px;
			background-color: #fff;

			.chart {
				margin-top: 20rpx;
				width: 170px;
				height: 100%;
			}

			.look {
				position: absolute;
				top: 40rpx;
				right: 36rpx;
				display: flex;
				align-items: center;
				width: 150rpx;
				height: 42rpx;

				.info {
					margin-right: 15rpx;
					font-size: 28rpx;
					color: #a6a6a6;
				}

				img {
					width: 16rpx;
					height: 24rpx;
				}
			}
		}
	}

	.errPeople {
		margin: 0 auto;
		margin-top: 32rpx;
		width: 710rpx;
		border-radius: 7rpx;
		background-color: #fff;

		.e_header {
			display: flex;
			align-items: center;
			width: 690rpx;
			height: 121rpx;

			.left {
				flex: 1;
				margin-left: 30rpx;
				font-size: 32rpx;
				font-weight: 500;
			}

			.right {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-right: 32rpx;

				.icon {
					margin-right: 10rpx;
					width: 26rpx;
					height: 26rpx;
					line-height: 26rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					width: 56rpx;
					height: 41rpx;
					font-size: 28rpx;
					color: #2a82e4;
				}
			}
		}

		.e_calendar {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.double {
				margin-right: 30rpx;
				width: 40rpx;
				height: 40rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.single {
				width: 40rpx;
				height: 40rpx;

				img {
					width: 80%;
					height: 70%;
				}
			}

			.single2 {
				margin-right: 30rpx;
				width: 40rpx;
				height: 40rpx;

				img {
					width: 100%;
					height: 70%;
				}
			}

			.time {
				width: 180rpx;
				height: 44rpx;
				font-size: 32rpx;
				text-align: center;
			}
		}

		.e_list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			align-items: center;
			margin-top: 20rpx;
			padding: 30rpx;
			padding-bottom: 150rpx;
			width: 630rpx;

			.e_box {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				margin-bottom: 20rpx;
				width: 180rpx;
				height: 190rpx;

				.e_img {
					width: 100rpx;
					height: 100rpx;

					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.e_name {
					width: 180rpx;
					text-align: center;
					font-size: 28rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.e_msg {
					font-size: 24rpx;
					color: #808080;
				}
			}
		}

		.e_list2 {
			margin: 0 auto;
			padding: 180rpx 0;
			text-align: center;

			img {
				width: 480rpx;
				height: 508rpx;
			}

			.info {
				padding-bottom: 50rpx;
				color: #5792f0;
			}
		}
	}
}

.tab_bar {
	z-index: 9999;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	width: 750rpx;
	height: 128rpx;
	border-top: 1rpx solid #ccc;
	background-color: #fff;

	.tab_box {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.tab_img {
			width: 54rpx;
			height: 48rpx;
			margin-bottom: 10rpx;
		}

		.tab_title {
			font-size: 20rpx;
		}

		.tab_title_active {
			font-size: 20rpx;
			color: #0082fc;
		}
	}
}

// 修改选中日期盒子圆角
::v-deep .uni-calendar-item--isDay {
	border-radius: 50rpx;
}

::v-deep .uni-calendar-item--checked {
	border-radius: 50rpx;
}
</style>