|
@@ -0,0 +1,338 @@
|
|
|
+<template>
|
|
|
+ <div class="visitList">
|
|
|
+ <van-sticky>
|
|
|
+ <m-header v-if="headerStatus" :isFixed="false" />
|
|
|
+ <search @onSearch="search" placeholder="学生姓名或手机号">
|
|
|
+ <template #left>
|
|
|
+ <van-dropdown-menu style="padding-right: .1rem" :close-on-click-outside="false" active-color="#01C1B5">
|
|
|
+ <van-dropdown-item title="训练时间" ref="item" class="visitTime">
|
|
|
+ <van-cell title="开始时间" is-link @click="onChangeDate('showStart')" :value="formatStartTime"></van-cell>
|
|
|
+ <van-cell title="结束时间" is-link @click="onChangeDate('showEnd')" :value="formatEndTime"></van-cell>
|
|
|
+ <div class="btnWrap">
|
|
|
+ <div class="cancelBtn" @click="cancelBtn">重置</div>
|
|
|
+ <div class="okBtn" @click="okBtn">确定</div>
|
|
|
+ </div>
|
|
|
+ </van-dropdown-item>
|
|
|
+ </van-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </search>
|
|
|
+ </van-sticky>
|
|
|
+
|
|
|
+ <van-list
|
|
|
+ v-model="loading"
|
|
|
+ v-if="dataShow"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="- 没有更多了 -"
|
|
|
+ :immediate-check="false"
|
|
|
+ style="padding-top: .12rem;"
|
|
|
+ @load="getList"
|
|
|
+ >
|
|
|
+ <van-cell-group class="data-content" v-for="(item, index) in list" :key="index" @click="onHref(item)">
|
|
|
+ <van-cell style="padding: 16px 12px; 12px" :center="true">
|
|
|
+ <template #title>
|
|
|
+ <div class="teacher_info">
|
|
|
+ <img class="logo" v-if="item.avatar" :src="item.avatar" alt="" />
|
|
|
+ <img class="logo" v-else src="../../assets/images/icon_student.png" alt="" />
|
|
|
+ <p style="color: #1a1a1a; font-size: .14rem;">{{ item.username }}</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <p style="font-size: 14px; color: #808080;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.musicGroupName }}</p>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell is-link :clickable="false" center style="padding: 12px 12px 16px">
|
|
|
+ <template #title>
|
|
|
+ <van-grid :border="false" column-num="4" :clickable="true">
|
|
|
+ <van-grid-item text="训练时长">
|
|
|
+ <template #icon>{{ item.totalPlayTime }}分钟</template>
|
|
|
+ </van-grid-item>
|
|
|
+ <van-grid-item text="训练天数">
|
|
|
+ <template #icon><span style="color: #01C1B5">{{ item.trainDay }}天</span></template>
|
|
|
+ </van-grid-item>
|
|
|
+ <van-grid-item text="训练次数">
|
|
|
+ <template #icon><span style="color: #01C1B5">{{ item.trainDay }}次</span></template>
|
|
|
+ </van-grid-item>
|
|
|
+ <van-grid-item text="评测次数">
|
|
|
+ <template #icon><span style="color: #FF802C">{{ item.recordNum }}次</span></template>
|
|
|
+ </van-grid-item>
|
|
|
+ </van-grid>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
+ </van-list>
|
|
|
+ <m-empty v-else msg="暂无训练统计" />
|
|
|
+
|
|
|
+ <van-popup v-model="dataForm.status" position="bottom" :style="{ height: '40%' }">
|
|
|
+ <van-datetime-picker
|
|
|
+ v-model="dataForm.currentDate"
|
|
|
+ :min-date="dataForm.minDate"
|
|
|
+ :max-date="dataForm.maxDate"
|
|
|
+ :formatter="formatter"
|
|
|
+ @cancel="dataForm.status = false"
|
|
|
+ type="date"
|
|
|
+ @confirm="chioseDate"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import MHeader from "@/components/MHeader";
|
|
|
+import MEmpty from '@/components/MEmpty';
|
|
|
+import Search from '@/components/Search';
|
|
|
+import dayjs from "dayjs";
|
|
|
+import { browser } from "@/common/common";
|
|
|
+import { countStudentTrain } from './api.js'
|
|
|
+export default {
|
|
|
+ components: { MHeader, MEmpty, Search },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ headerStatus: true,
|
|
|
+ dataForm: {
|
|
|
+ // 时间下拉框
|
|
|
+ type: null,
|
|
|
+ status: false,
|
|
|
+ minDate: new Date(2000, 0, 1),
|
|
|
+ maxDate: new Date(2025, 10, 1),
|
|
|
+ currentDate: new Date(),
|
|
|
+ },
|
|
|
+ purposeStatus: true,
|
|
|
+ startDate: null,
|
|
|
+ endDate: null,
|
|
|
+ showStart: false,
|
|
|
+ showEnd: false,
|
|
|
+ formatEndTime: null,
|
|
|
+ formatStartTime: null,
|
|
|
+ list: [],
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ params: {
|
|
|
+ search: null,
|
|
|
+ page: 1,
|
|
|
+ rows: 20,
|
|
|
+ },
|
|
|
+ dataShow: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let params = this.$route.query;
|
|
|
+ if (params.Authorization) {
|
|
|
+ localStorage.setItem("Authorization", decodeURI(params.Authorization));
|
|
|
+ localStorage.setItem("userInfo", decodeURI(params.Authorization));
|
|
|
+ }
|
|
|
+ if (browser().android || browser().iPhone) {
|
|
|
+ this.headerStatus = false;
|
|
|
+ }
|
|
|
+ document.title = '训练统计'
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ search(val) {
|
|
|
+ this.params.search = val
|
|
|
+ this.onResetList()
|
|
|
+ },
|
|
|
+ onResetList() {
|
|
|
+ this.list = [];
|
|
|
+ this.params.page = 1;
|
|
|
+ this.dataShow = true;
|
|
|
+ this.loading = true;
|
|
|
+ this.finished = false;
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ onHref(item) {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/trainDetail',
|
|
|
+ query: {
|
|
|
+ userId: item.userId,
|
|
|
+ username: item.username
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancelBtn() {
|
|
|
+ this.formatStartTime = null;
|
|
|
+ this.formatEndTime = null;
|
|
|
+ this.onResetList()
|
|
|
+ this.$refs.item.toggle();
|
|
|
+ },
|
|
|
+ okBtn() {
|
|
|
+ if(this.formatStartTime && this.formatEndTime) {
|
|
|
+ this.onResetList()
|
|
|
+ }
|
|
|
+ this.$refs.item.toggle();
|
|
|
+ },
|
|
|
+ onChangeDate(type) {
|
|
|
+ let dataForm = this.dataForm
|
|
|
+ if(type == 'showEnd') {
|
|
|
+ if(this.formatStartTime) {
|
|
|
+ dataForm.minDate = new Date(dayjs(this.formatStartTime))
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ dataForm.currentDate = this.formatEndTime ? new Date(dayjs(this.formatEndTime)) : new Date()
|
|
|
+ }, 500)
|
|
|
+ } else if(type == 'showStart') {
|
|
|
+ dataForm.minDate = new Date(2000, 0, 1)
|
|
|
+ setTimeout(() => {
|
|
|
+ dataForm.currentDate = this.formatStartTime ? new Date(dayjs(this.formatStartTime)) : new Date()
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ dataForm.status = true
|
|
|
+ dataForm.type = type
|
|
|
+ },
|
|
|
+ chioseDate(value) {
|
|
|
+ let dataForm = this.dataForm
|
|
|
+ if(dataForm.type == 'showStart') {
|
|
|
+ this.formatStartTime = dayjs(value).format('YYYY/MM/DD')
|
|
|
+ if(this.formatEndTime && dayjs(value).unix() > dayjs(this.formatEndTime).unix()) {
|
|
|
+ this.formatEndTime = null
|
|
|
+ }
|
|
|
+ } else if(dataForm.type == 'showEnd') {
|
|
|
+ this.formatEndTime = dayjs(value).format('YYYY/MM/DD')
|
|
|
+ }
|
|
|
+ dataForm.status = false
|
|
|
+ },
|
|
|
+ // onTypeChange() {
|
|
|
+ // this.onResetList()
|
|
|
+ // },
|
|
|
+ onPurposeChange() {
|
|
|
+ this.onResetList()
|
|
|
+ },
|
|
|
+ async getList() {
|
|
|
+ let params = this.params;
|
|
|
+ if(this.formatStartTime && this.formatEndTime) {
|
|
|
+ params.startTime = this.formatStartTime
|
|
|
+ params.endTime = this.formatEndTime
|
|
|
+ } else {
|
|
|
+ params.startTime = null
|
|
|
+ params.endTime = null
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ let res = await countStudentTrain(params)
|
|
|
+ let result = res.data;
|
|
|
+ this.loading = false;
|
|
|
+ params.page = result.pageNo;
|
|
|
+ this.list = this.list.concat(result.rows);
|
|
|
+ if (params.page >= result.totalPage) {
|
|
|
+ this.finished = true;
|
|
|
+ }
|
|
|
+ this.params.page++;
|
|
|
+ // 判断是否有数据
|
|
|
+ if (this.list.length <= 0) {
|
|
|
+ this.dataShow = false;
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ this.finished = true;
|
|
|
+ this.dataShow = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatter(type, val) {
|
|
|
+ if (type === "year") {
|
|
|
+ return `${val}年`;
|
|
|
+ } else if (type === "month") {
|
|
|
+ return `${val}月`;
|
|
|
+ } else if (type == "day") {
|
|
|
+ return `${val}日`;
|
|
|
+ }
|
|
|
+ return val;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+@import url("../../assets/commonLess/variable.less");
|
|
|
+
|
|
|
+.visitList {
|
|
|
+ min-height: 100vh;
|
|
|
+ .visitTime {
|
|
|
+ .van-cell__right-icon{
|
|
|
+ line-height: .36rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.van-dropdown-menu__bar {
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+.data-content {
|
|
|
+ margin: .15rem .15rem 0;
|
|
|
+ border-radius: .1rem;
|
|
|
+ overflow: hidden;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .van-row-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ /deep/.van-grid-item__content {
|
|
|
+ padding: .03rem
|
|
|
+ }
|
|
|
+ /deep/.van-grid-item__content {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ /deep/.van-grid-item__icon-wrapper {
|
|
|
+ font-size: .15rem;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ /deep/.van-grid-item__text {
|
|
|
+ font-size: .14rem;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ .teacher_info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ margin-right: .1rem;
|
|
|
+ width: .4rem;
|
|
|
+ height: .4rem;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// .cellGroup {
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// line-height: .61rem;
|
|
|
+// .logo {
|
|
|
+// width: 0.35rem;
|
|
|
+// height: 0.35rem;
|
|
|
+// // margin-right: 0.12rem;
|
|
|
+// border-radius: 100%;
|
|
|
+// }
|
|
|
+// .type {
|
|
|
+// line-height: 1.2;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// /deep/.van-cell__title {
|
|
|
+// font-size: 0.14rem;
|
|
|
+// color: @mFontColor;
|
|
|
+// flex: 1 auto;
|
|
|
+// }
|
|
|
+.btnWrap {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ .cancelBtn {
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ background: #eeeff3;
|
|
|
+ color: @mColor;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .okBtn {
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ background: @mColor;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+// .van-cell{
|
|
|
+// color: #1A1A1A;
|
|
|
+// line-height: .36rem!important;
|
|
|
+// font-size: .16rem;
|
|
|
+// }
|
|
|
+// /deep/.van-col--9 {
|
|
|
+// display: flex;
|
|
|
+// }
|
|
|
+// /deep/.van-col--5 {
|
|
|
+// text-align: center;
|
|
|
+// }
|
|
|
+</style>
|