|
|
@@ -0,0 +1,337 @@
|
|
|
+<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}`
|
|
|
+ })
|
|
|
+ } 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>
|
