warst/warst-h5/pages/attendanceClock/statistics/monthlyStatistics/index.vue

<template>
	<!--  月度统计 -->
	<view class="monthly-statistics">
		<u-navbar :placeholder="true" title="月度统计" :autoBack="true">
			<template slot="right">
				<view @click="toggleType" class="dflex acenter">
					<image
						class="nav-right-icon"
						src="@/static/images/statistics/calendar.png"
					></image>
				</view>
			</template>
		</u-navbar>
		<view class="content">
			<view class="scroll-main">
				<view class="m-header">
					<selectMonth @dateChange="dateChange"></selectMonth>
					<view class="clock-info">
						<view class="charts-box">
							<qiun-data-charts
								type="ring"
								:opts="opts"
								:chartData="chartData"
							/>
						</view>
						<view class="right-txt-box">
							<view class="row-box">
								<view class="left-title-box">
									<image
										class="h-top-img"
										src="@/static/images/attendanceClock/normal.png"
									></image>
									<text class="h-title">正常打卡</text>
								</view>
								<text class="time">
									{{ checkInfo.normalClock }}次
								</text>
							</view>

							<view class="row-box mt-15">
								<view class="left-title-box">
									<image
										class="h-top-img"
										src="@/static/images/attendanceClock/abnormal.png"
									></image>
									<text class="h-title">异常打卡</text>
								</view>
								<text class="time">
									{{ checkInfo.unusualClock }}次
								</text>
							</view>
						</view>
					</view>
				</view>

				<view class="txt-info">
					<view class="txt-item">
						<text class="top-title">应出勤次数</text>
						<view class="num-box">
							<text class="txt-num">{{ checkInfo.checkNum }}</text>
							<text class="num-unit">次</text>
						</view>
					</view>

					<view class="txt-item">
						<text class="top-title">实际出勤次数</text>
						<view class="num-box">
							<text class="txt-num">{{
								checkInfo.actualCheckNum
							}}</text>
							<text class="num-unit">次</text>
						</view>
					</view>

					<view class="txt-item">
						<text class="top-title">迟到次数</text>
						<view class="num-box">
							<text class="txt-num red">{{ checkInfo.lateNum }}</text>
							<text class="num-unit">次</text>
						</view>
					</view>

					<view class="txt-item">
						<text class="top-title">加班次数</text>
						<view class="num-box">
							<text class="txt-num">{{ checkInfo.workNum }}</text>
							<text class="num-unit">次</text>
						</view>
					</view>

					<view class="txt-item">
						<text class="top-title">加班时长</text>
						<view class="num-box">
							<text class="txt-num">{{ checkInfo.workTime }}</text>
							<text class="num-unit">小时</text>
						</view>
					</view>

					<view class="txt-item">
						<text class="top-title">早退次数</text>
						<view class="num-box">
							<text class="txt-num red">{{ checkInfo.rearNum }}</text>
							<text class="num-unit">次</text>
						</view>
					</view>

					<view class="txt-item">
						<text class="top-title">旷工次数</text>
						<view class="num-box">
							<text class="txt-num red">{{ checkInfo.awayNum }}</text>
							<text class="num-unit">次</text>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<c-button @click="goClock">
					<view class="dflex acenter">
						<image
							class="btn-icon"
							src="@/static/images/attendanceClock/clock-gray.png"
						></image>
						打卡
					</view>
				</c-button>
				<c-button type="primary">
					<view class="dflex acenter">
						<image
							class="btn-icon"
							src="@/static/images/attendanceClock/statistics-bai.png"
						></image>
						统计
					</view>
				</c-button>
			</view>
		</view>
	</view>
</template>

<script>
import selectMonth from '@/pages/attendanceClock/workContent/com/selectMonth.vue';
import { getMonthCountResult } from '@/api/attendanceClock/index.js';
export default {
	name: 'monthlyStatistics',
	components: {
		selectMonth,
	},
	data() {
		return {
			checkInfo: {},
			chartData: {},
			opts: {
				rotate: false,
				rotateLock: false,
				color: ['#FF5E59', '#436FF6'],
				padding: [5, 5, 5, 5],
				dataLabel: false,
				enableScroll: false,
				legend: {
					show: false,
					position: 'right',
					lineHeight: 25,
				},
				title: {
					name: '0天',
					fontSize: 16,
					color: '#333333',
				},
				subtitle: {
					name: '正常打卡',
					fontSize: 12,
					color: '#A2A8B8',
				},
				extra: {
					ring: {
						ringWidth: 20,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 3,
						borderColor: '#FFFFFF',
					},
				},
			},
		};
	},
	methods: {
		setChartsData() {
			const { normalClock, unusualClock, normalDate } =
				this.checkInfo;
			this.opts.title.name = normalDate + '天'; // 正常打卡(天) 转字符串否则不显示0
			let res = {
				series: [
					{
						data: [
							{ name: '异常打卡', value: unusualClock },
							{ name: '正常打卡', value: normalClock },
						],
					},
				],
			};
			this.chartData = JSON.parse(JSON.stringify(res));
		},
		async dateChange(date) {
			try {
				uni.$c.loading();
				const { data } = await getMonthCountResult(date);
				this.checkInfo = data;
				this.$nextTick(() => {
					this.setChartsData();
				});
				uni.hideLoading();
			} catch (e) {
				uni.hideLoading();
				throw new Error(e);
			}
		},
		goClock() {
			uni.redirectTo({ url: '/pages/attendanceClock/index' });
		},
		toggleType() {
			uni.redirectTo({
				url: '/pages/attendanceClock/statistics/attendStatistics/index',
			});
		},
	},
};
</script>

<style scoped lang="scss">
.monthly-statistics {
	display: flex;
	flex-direction: column;
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
		.scroll-main {
			flex: 1;
			overflow-y: auto;
			padding: 20rpx;

			.m-header {
				background-color: #fff;
				border-radius: 6px;
				.clock-info {
					display: flex;
					align-items: center;
					.charts-box {
						width: 50%;
						height: 150px;
					}
					.right-txt-box {
						flex: 1;
						margin-right: 20rpx;
						.row-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							background-color: #f8f9fc;
							padding: 20rpx;
							border-radius: 3px;

							.left-title-box {
								display: flex;
								align-items: center;
								.h-top-img {
									width: 20px;
									height: 20px;
								}
								.h-title {
									margin-left: 12rpx;
									font-size: 12px;
									color: #656972;
								}
							}

							.time {
								font-size: 14px;
								color: #436ff6;
							}
						}
					}
				}
			}

			.txt-info {
				display: flex;
				flex-wrap: wrap;
				background-color: #fff;
				border-radius: $bd-radius;
				margin-top: 20rpx;
				padding: 24px 0;

				.txt-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 33.33%;
					margin-top: 20px;
					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(3) {
						margin-top: 0px;
					}
					.top-title {
						font-size: 12px;
						color: #989ca5;
					}
					.num-box {
						.txt-num {
							font-size: 24px;
							color: #1f2229;
						}
						.red {
							color: #d9001b;
						}
						.num-unit {
							font-size: 12px;
							color: #c3c6cb;
						}
					}
				}
			}
		}

		.footer {
			display: flex;
			margin-bottom: 20rpx;
			.c-button {
				flex: 1;
			}
			.btn-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 5px;
			}
		}
	}
}
.nav-right-icon {
	width: 23px;
	height: 26px;
}
</style>