construction_site_supervision/pages/attendance/attendance_detail/statistics/statistics.vue

<template>
	<view>
		<view class="tabs">
			<view :class="`tab-item ${type==0?'active':''}`" @tap="switchTab(0)">日</view>
			<view :class="`tab-item ${type==1?'active':''}`" @tap="switchTab(1)">周</view>
			<view :class="`tab-item ${type==2?'active':''}`" @tap="switchTab(2)">月</view>
		</view>
		<view class="sizedbox" style="height: 60rpx;"></view>
		<view class="attendance-list">
			<view class="attendance-item" v-for="(item ,index) in statisticsList" :key="index">
				<view class="time" v-if="type==0">
					20220708
				</view>
				<view class="time" v-if="type==1">
					2022七月第一周
				</view>
				<view class="time" v-if="type==2">
					2022年1月
				</view>
				<view class="desc-item">
					<view class="key">应出勤人数：</view>
					<view class="value">{{item.should}}</view>
				</view>
				<view class="desc-item">
					<view class="key">实际出勤人数：</view>
					<view class="value">{{item.actu}}</view>
				</view>
				<view class="desc-item">
					<view class="key">出勤率：</view>
					<view class="value">{{item.ratio}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0, // 0：日，1：周，2：月
				statisticsList: [{
					should: 345,
					actu: 340,
					ratio: 80,
					time: 1663140428270
				}, {
					should: 345,
					actu: 340,
					ratio: 80,
					time: 1663140428270
				}, {
					should: 345,
					actu: 340,
					ratio: 80,
					time: 1663140428270
				}, {
					should: 345,
					actu: 340,
					ratio: 80,
					time: 1663140428270
				}, {
					should: 345,
					actu: 340,
					ratio: 80,
					time: 1663140428270
				}, {
					should: 345,
					actu: 340,
					ratio: 80,
					time: 1663140428270
				}, {
					should: 345,
					actu: 340,
					ratio: 80,
					time: 1663140428270
				}, {
					should: 345,
					actu: 340,
					ratio: 80,
					time: 1663140428270
				}, ]
			}
		},
		methods: {
			switchTab(index) {
				this.type = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		position: fixed;
		width: 750rpx;
		box-sizing: border-box;
		z-index: 99;
		display: flex;
		justify-content: space-between;
		padding: 0 200rpx 0;
		align-items: center;
		height: 60rpx;
		background-color: #f6f6f6;

		.tab-item {
			font-size: 28rpx;
			color: #8F959E;
			font-weight: 400;

			&.active {
				color: #0F40F5;
			}
		}

	}

	.attendance-list {
		padding: 20rpx;

		.attendance-item {
			border-radius: 8rpx;
			padding: 28rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			position: relative;

			.time {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 26rpx;
			}

			.desc-item {
				display: flex;

				&:not(:last-child) {
					margin-bottom: 20rpx;
				}

				.key {
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #8F959E;
					line-height: 30rpx;
					font-weight: 400;
				}

				.value {
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #333333;
					line-height: 30rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>