wanzai_school_app/pages/statistics/statistics.vue

<template>
	<view class="statistics">
		<!-- 背景图片区域 -->
		<img class="img" src="../../static/images/center-bg.png" />

		<!-- 时间选择区域 -->
		<div class="picker">
			<uni-datetime-picker type="date" :clear-icon="false" v-model="time" @change="changeTime"></uni-datetime-picker>
		</div>

		<!-- 状态选择区域 -->
		<div class="type">
			<div class="type_box" :class="{ active: currentType === 1 }" @click="changeType(1)">未监听({{ info?.abnormal?.count }})</div>
			<div class="type_box" :class="{ active: currentType === 2 }" @click="changeType(2)">监听({{ info?.normal?.count }})</div>
			<div class="type_box" :class="{ active: currentType === 3 }" @click="changeType(3)">请假({{ info?.ack?.count }})</div>
		</div>

		<!-- 列表数据 -->
		<div class="list" v-if="listData.length">
			<div class="list_header">
				<div class="header_box">姓名</div>
				<div class="header_box">学号</div>
				<div v-if="currentType != 1" class="header_box">操作</div>
			</div>

			<div class="list_content">
				<div class="list_box" v-for="item in listData" :key="item.userId">
					<div class="box" @click="clickName(item)">{{ item.name }}</div>
					<div class="box">{{ item.cardNo }}</div>
					<div v-if="currentType != 1" class="box color" @click="clickDetail(item)">详情</div>
				</div>
			</div>
		</div>
		<!-- 没有数据时展示的页面 -->
		<NoData v-else />

		<!-- 详情弹窗区域 -->
		<uni-popup ref="popup" type="center" :is-mask-click="false">
			<view class="popup_box">
				<!-- 弹窗标题区域 -->
				<view class="pop_header">
					请假详情
					<view class="header_icon" @click="popup.close()">×</view>
				</view>

				<!-- 弹窗详细信息区域 -->
				<view class="pop_info">
					<view class="info_key">请假人姓名：</view>
					<view class="info_value">{{ askInfo.name }}</view>
				</view>

				<view class="pop_info">
					<view class="info_key">学号：</view>
					<view class="info_value">{{ askInfo.cardNo }}</view>
				</view>

				<view class="pop_info">
					<view class="info_key">请假时间：</view>
					<view class="info_value">{{ dayjs(askInfo.startTime).format('YYYY-MM-DD hh:mm:ss') }} - {{ dayjs(askInfo.endTime).format('YYYY-MM-DD hh:mm:ss') }}</view>
				</view>

				<view class="pop_info">
					<view class="info_key">请假说明：</view>
					<view class="info_value">{{ askInfo.reason }}</view>
				</view>

				<view class="pop_info">
					<view class="info_key">创建时间：</view>
					<view class="info_value">{{ dayjs(askInfo.initiateTime).format('YYYY-MM-DD hh:mm:ss') }}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { myRequest } from '@/utils/api.js'
import dayjs from 'dayjs'
import { decryptDes } from '@/utils/des.js'
import NoData from '@/components/noData.vue'

// 时间选择框绑定数据
const time = ref('')

// 当前状态
const currentType = ref(1)

// 展示的列表数据
const listData = ref([])
// 全部数据
const info = ref({})

// 弹窗元素标记
const popup = ref(null)

// 弹窗请假信息
const askInfo = ref({})

onLoad(() => {
	// 获取当前时间
	time.value = dayjs(Date.now()).format('YYYY-MM-DD') + ' 00:00:00'

	getData()
})

// 获取列表数据
const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartUser/statisticsCampus',
		data: {
			classId: uni.getStorageSync('userInfo').schoolClass,
			dateTime: time.value
		}
	})
	// console.log(res)
	if (res.code == 200) {
		const result = JSON.parse(decryptDes(res.data))
		// console.log(result)

		info.value = result
		if (currentType.value === 1) {
			listData.value = result.abnormal.date
		} else if (currentType.value === 2) {
			listData.value = result.normal.date
		} else if (currentType.value === 3) {
			listData.value = result.ack.date
		}
	}
}

// 切换时间时的回调
const changeTime = (v) => {
	time.value = v + ' 00:00:00'
	getData()
}

// 切换状态时的回调
const changeType = (v) => {
	if (currentType.value != v) {
		currentType.value = v
		getData()
	}
}

// 点击姓名时触发的回调
const clickName = async (item) => {
	// 获取学生相关的信息
	const res = await myRequest({
		url: '/wanzai/api/smartUser/addressBook',
		data: {
			userId: item.userId
		}
	})
	// console.log(res)
	if (res.code == 200) {
		const result = JSON.parse(decryptDes(res.data))
		// console.log(result)

		uni.navigateTo({
			url: `/pages/student/student?msg=${JSON.stringify(result)}`
		})
	}
}

// 点击详情时触发的回调
const clickDetail = (item) => {
	// console.log(item)
	if (currentType.value === 2) {
		// 跳转 轨迹
		uni.navigateTo({
			url: `/pages/track/track?id=${item.userId}&time=${time.value}`
		})
	} else if (currentType.value === 3) {
		// 弹窗
		askInfo.value = {}
		// 获取请假信息
		getAskInfo(item.userId)
		popup.value.open()
	}
}

const getAskInfo = async (userId) => {
	const res = await myRequest({
		url: '/wanzai/api/smartAttendance/ackDetail',
		data: {
			userId,
			dateTime: time.value
		}
	})
	// console.log(res)
	if (res.code == 200) {
		const result = JSON.parse(decryptDes(res.data))
		// console.log(result)
		askInfo.value = result[0]
	}
}
</script>

<style lang="scss" scoped>
.statistics {
	position: relative;
	box-sizing: border-box;
	padding: 130rpx 20rpx 0;
	height: 100vh;
	overflow: hidden;
	background-color: #f1f6fe;

	.img {
		position: absolute;
		top: -50rpx;
		right: -50rpx;
		width: 589rpx;
		height: 320rpx;
	}

	.picker {
		position: absolute;
		top: 30rpx;
		right: 20rpx;
		width: 273rpx;
		height: 80rpx;
	}

	.type {
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 710rpx;
		height: 122rpx;
		background-color: #fff;

		.type_box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 210rpx;
			height: 90rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			background-color: #f2f6fc;
		}

		.active {
			background-color: #3464ff;
			color: #fff;
		}
	}

	.list {
		padding: 30rpx 20rpx;
		margin-top: 20rpx;
		max-height: calc(100vh - 402rpx);
		font-size: 28rpx;
		background-color: #fff;

		.list_header {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			height: 73rpx;
			background-color: #f2f6fc;

			.header_box {
				width: 33%;
				text-align: center;
			}
		}

		.list_content {
			max-height: calc(100vh - 475rpx);
			overflow-y: auto;

			.list_box {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				height: 85rpx;
				border-bottom: 2rpx solid #e5e5e5;

				.box {
					width: 33%;
					text-align: center;
				}

				.color {
					color: #0061ff;
				}
			}
		}
	}

	.popup_box {
		padding-bottom: 50rpx;
		width: 710rpx;
		border-radius: 22rpx;
		background-color: #fff;

		.pop_header {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			height: 94rpx;
			font-size: 28rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.header_icon {
				position: absolute;
				top: 18rpx;
				right: 25rpx;
				font-size: 40rpx;
			}
		}

		.pop_info {
			display: flex;
			box-sizing: border-box;
			margin-top: 22rpx;
			padding: 0 35rpx;
			width: 100%;
			line-height: 42rpx;
			font-size: 28rpx;

			.info_key {
				color: #999999;
			}

			.info_value {
				flex: 1;
			}
		}
	}
}
</style>