waterElectricityMinApp/pagesClockIn/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" :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('/pagesClockIn/home/home')">
				<cover-image class="tab_img" v-if="pageUrl=='pagesClockIn/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=='pagesClockIn/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('/pagesClockIn/stat/stat')">
				<cover-image class="tab_img" v-if="pageUrl=='pagesClockIn/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=='pagesClockIn/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('/pagesClockIn/my/my')">
				<cover-image class="tab_img" v-if="pageUrl=='pagesClockIn/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=='pagesClockIn/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/chocolate-progress-bar/chocolate-progress-bar.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: null,
				// 环形图总数
				progress_total: null,
				// 当前时间
				nowTime: "",
				// 打卡异常次数
				fail_count: 0,
				// 打卡成功次数
				success_count: 0,
				// 异常人员名单当前页
				page: 1,
				// 异常人员名单总条数
				total: 0,
				// 环形图显示隐藏控制
				showBar: false,
				// 当前页面的路由地址
				pageUrl: "",
				showTabBar: true,
				timer: null
			};
		},
		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
				}
			},
		},
		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
			}, 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"
			},

			// 获取我的月打卡次数
			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)
				this.nowTime = e.fulldate + " " + "00:00:00"
				if (this.current == 0) {
					this.getProportion()
				} else {
					// this.list2 = []
					// this.page_my = 1
					this.getRulesList()
				}
			},
			// 分段器点击回调
			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: {
										'Authorization': uni.getStorageSync("token"),
										'platform': 2,
										'Accept-Language': 'zh-CN,zh;q=0.9'
									}
								})
								// console.log(res);
								if (res.code == 200) {
									uni.showToast({
										title: "通知成功"
									})
								}
							}
						}
					});
				} else {
					uni.showToast({
						title: "当前异常人员名单为空，无法通知",
						icon: 'none'
					})
				}
			},
			// 点击查看明细回调
			handleLookDetail() {
				// console.log(this.nowTime);
				uni.navigateTo({
					url: `/pagesClockIn/particulars/particulars?nowTime_day=${this.nowTime}&type=1`
				})
			},

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

			// 往后选择年份回调
			handleDoubleLeft() {
				if (this.year <= 2000) {
					uni.showToast({
						title: "不能选择2000年之前",
						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 >= 2025) {
					uni.showToast({
						title: "不能选择2025年之后",
						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 <= 2000) {
						uni.showToast({
							title: "不能选择2000年之前",
							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 >= 2025) {
						uni.showToast({
							title: "不能选择2025年之后",
							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: 0 30rpx;
				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;

				.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>