|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div class="m-container">
|
|
<div class="m-container">
|
|
<h2>
|
|
<h2>
|
|
- <el-page-header @back="onCancel" content="练习时长详情"></el-page-header>
|
|
|
|
|
|
+ <el-page-header @back="onCancel" content="观看时长详情"></el-page-header>
|
|
</h2>
|
|
</h2>
|
|
|
|
|
|
<div class="m-core">
|
|
<div class="m-core">
|
|
@@ -65,6 +65,7 @@
|
|
<el-table
|
|
<el-table
|
|
:data="tableList"
|
|
:data="tableList"
|
|
:header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
:header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
|
|
+ @sort-change="onSortChange"
|
|
>
|
|
>
|
|
<!-- <el-table-column width="120px" align="center" prop="id" label="排名">
|
|
<!-- <el-table-column width="120px" align="center" prop="id" label="排名">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
@@ -78,76 +79,95 @@
|
|
prop="teacherName"
|
|
prop="teacherName"
|
|
label="声部老师"
|
|
label="声部老师"
|
|
></el-table-column>
|
|
></el-table-column>
|
|
- <el-table-column align="center" prop="normalNum" label="会员人数">
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ prop="memberNum"
|
|
|
|
+ sortable="custom"
|
|
|
|
+ label="会员人数"
|
|
|
|
+ width="100px"
|
|
|
|
+ >
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <div>{{ scope.row.normalNum }}人</div>
|
|
|
|
|
|
+ <div>{{ scope.row.memberNum }}人</div>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column
|
|
<el-table-column
|
|
align="center"
|
|
align="center"
|
|
- prop="trainStudentNum"
|
|
|
|
- label="练习人数"
|
|
|
|
|
|
+ prop="noPlayNum"
|
|
|
|
+ sortable="custom"
|
|
|
|
+ label="无练习人数"
|
|
|
|
+ width="120px"
|
|
>
|
|
>
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <div>{{ scope.row.trainStudentNum }}人</div>
|
|
|
|
|
|
+ <div>{{ scope.row.noPlayNum }}人</div>
|
|
</template></el-table-column
|
|
</template></el-table-column
|
|
>
|
|
>
|
|
- <el-table-column align="center" prop="trainRate" label="练习率">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <div>{{ scope.row.trainRate }}%</div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
|
|
|
|
- <el-table-column align="center" label="≤10分钟">
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ prop="playTimeLess10"
|
|
|
|
+ sortable="custom"
|
|
|
|
+ label="0-10分钟"
|
|
|
|
+ width="120px"
|
|
|
|
+ >
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <div>{{ scope.row.train0 }}人</div>
|
|
|
|
|
|
+ <div>{{ scope.row.playTimeLess10 }}人</div>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column align="center" label="10~60分钟">
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ prop="playTimeLess60"
|
|
|
|
+ sortable="custom"
|
|
|
|
+ label="10-60分钟"
|
|
|
|
+ width="120px"
|
|
|
|
+ >
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <div>{{ scope.row.train1 }}人</div>
|
|
|
|
|
|
+ <div>{{ scope.row.playTimeLess60 }}人</div>
|
|
</template></el-table-column
|
|
</template></el-table-column
|
|
>
|
|
>
|
|
|
|
|
|
- <el-table-column align="center" label="60~120分钟">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <div>{{ scope.row.train2 }}人</div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column align="center" prop="id" label="120~240分钟">
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ prop="playTimeLess120"
|
|
|
|
+ sortable="custom"
|
|
|
|
+ label="60-120分钟"
|
|
|
|
+ width="120px"
|
|
|
|
+ >
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <div>{{ scope.row.train3 }}人</div>
|
|
|
|
|
|
+ <div>{{ scope.row.playTimeLess120 }}人</div>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column align="center" prop="id" label="≥240分钟">
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ prop="playTimeLess240"
|
|
|
|
+ sortable="custom"
|
|
|
|
+ label="120-240分钟"
|
|
|
|
+ width="130px"
|
|
|
|
+ >
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <div>{{ scope.row.train4 }}人</div>
|
|
|
|
|
|
+ <div>{{ scope.row.playTimeLess240 }}人</div>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column
|
|
<el-table-column
|
|
align="center"
|
|
align="center"
|
|
- prop="avgTrainTime"
|
|
|
|
- label="平均练习时长(会员)"
|
|
|
|
- width="100px"
|
|
|
|
|
|
+ prop="playTimeRather240"
|
|
|
|
+ sortable="custom"
|
|
|
|
+ label=">240分钟"
|
|
|
|
+ width="120px"
|
|
>
|
|
>
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <div>{{ scope.row.avgTrainTime }}分钟</div>
|
|
|
|
|
|
+ <div>{{ scope.row.playTimeRather240 }}人</div>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column
|
|
<el-table-column
|
|
align="center"
|
|
align="center"
|
|
- prop="trainAvgTrainTime"
|
|
|
|
- label="平均练习时长(练习)"
|
|
|
|
|
|
+ prop="avgPlayTime"
|
|
|
|
+ sortable="custom"
|
|
|
|
+ label="平均时长"
|
|
width="100px"
|
|
width="100px"
|
|
>
|
|
>
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <div>{{ scope.row.trainAvgTrainTime }}分钟</div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column align="center" prop="id" label="练习达标占比">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <div>{{ scope.row.trainStandRate }}%</div>
|
|
|
|
|
|
+ <div>{{ scope.row.avgPlayTime }}分钟</div>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
@@ -170,7 +190,7 @@ import saveform from "@/components/save-form";
|
|
import dayjs from "dayjs";
|
|
import dayjs from "dayjs";
|
|
import histogram from "v-charts/lib/histogram.common";
|
|
import histogram from "v-charts/lib/histogram.common";
|
|
import { getNowDateAndMonday, getNowDateAndSunday } from "@/utils/utils";
|
|
import { getNowDateAndMonday, getNowDateAndSunday } from "@/utils/utils";
|
|
-import { cloudTeacherSumDetail } from "../api";
|
|
|
|
|
|
+import { api_studentCoursewarePlayRecordDetail } from "../api";
|
|
let nowTime = new Date();
|
|
let nowTime = new Date();
|
|
nowTime =
|
|
nowTime =
|
|
nowTime.getFullYear() +
|
|
nowTime.getFullYear() +
|
|
@@ -202,11 +222,13 @@ export default {
|
|
.subtract(1, "day")
|
|
.subtract(1, "day")
|
|
.format("YYYY-MM-DD")
|
|
.format("YYYY-MM-DD")
|
|
],
|
|
],
|
|
- organId: ""
|
|
|
|
|
|
+ organId: "",
|
|
|
|
+ sort: null,
|
|
|
|
+ asc: null
|
|
},
|
|
},
|
|
tableList: [],
|
|
tableList: [],
|
|
activeName: "first",
|
|
activeName: "first",
|
|
- specialList: [],
|
|
|
|
|
|
+ // specialList: [],
|
|
pageInfo: {
|
|
pageInfo: {
|
|
// 分页规则
|
|
// 分页规则
|
|
limit: 10, // 限制显示条数
|
|
limit: 10, // 限制显示条数
|
|
@@ -219,16 +241,48 @@ export default {
|
|
async mounted() {
|
|
async mounted() {
|
|
const query = this.$route.query;
|
|
const query = this.$route.query;
|
|
this.searchForm.organId = query.organId ? Number(query.organId) : "";
|
|
this.searchForm.organId = query.organId ? Number(query.organId) : "";
|
|
|
|
+ this.searchForm.dates = query.dates
|
|
|
|
+ ? JSON.parse(query.dates)
|
|
|
|
+ : [
|
|
|
|
+ dayjs()
|
|
|
|
+ .subtract(1, "day")
|
|
|
|
+ .format("YYYY-MM-DD"),
|
|
|
|
+ dayjs()
|
|
|
|
+ .subtract(1, "day")
|
|
|
|
+ .format("YYYY-MM-DD")
|
|
|
|
+ ];
|
|
await this.$store.dispatch("setBranchs");
|
|
await this.$store.dispatch("setBranchs");
|
|
- const arr = [36, 39, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 54, 56];
|
|
|
|
- this.specialList = this.selects.branchs.filter(item => {
|
|
|
|
- return arr.indexOf(item.id) == -1;
|
|
|
|
- });
|
|
|
|
|
|
+ // const arr = [36, 39, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 54, 56];
|
|
|
|
+ // this.specialList = this.selects.branchs.filter(item => {
|
|
|
|
+ // return arr.indexOf(item.id) == -1;
|
|
|
|
+ // });
|
|
// this.searchForm.dates.push(getNowDateAndMonday(nowTime));
|
|
// this.searchForm.dates.push(getNowDateAndMonday(nowTime));
|
|
// this.searchForm.dates.push(getNowDateAndSunday(nowTime));
|
|
// this.searchForm.dates.push(getNowDateAndSunday(nowTime));
|
|
this.getList();
|
|
this.getList();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ onSortChange(val) {
|
|
|
|
+ const template = {
|
|
|
|
+ memberNum: 1,
|
|
|
|
+ noPlayNum: 2,
|
|
|
|
+ playTimeLess10: 3,
|
|
|
|
+ playTimeLess60: 4,
|
|
|
|
+ playTimeLess120: 5,
|
|
|
|
+ playTimeLess240: 6,
|
|
|
|
+ playTimeRather240: 7,
|
|
|
|
+ avgPlayTime: 8
|
|
|
|
+ };
|
|
|
|
+ this.searchForm.sort = template[val.prop];
|
|
|
|
+ if (val.order === "ascending") {
|
|
|
|
+ this.searchForm.asc = true;
|
|
|
|
+ } else if (val.order === "descending") {
|
|
|
|
+ this.searchForm.asc = false;
|
|
|
|
+ } else {
|
|
|
|
+ this.searchForm.asc = null;
|
|
|
|
+ this.searchForm.sort = null;
|
|
|
|
+ }
|
|
|
|
+ this.getList();
|
|
|
|
+ },
|
|
exportQuestion() {
|
|
exportQuestion() {
|
|
const { dates, organId } = this.searchForm;
|
|
const { dates, organId } = this.searchForm;
|
|
Export(
|
|
Export(
|
|
@@ -260,7 +314,7 @@ export default {
|
|
onCancel() {
|
|
onCancel() {
|
|
this.$store.dispatch("delVisitedViews", this.$route);
|
|
this.$store.dispatch("delVisitedViews", this.$route);
|
|
this.$router.push({
|
|
this.$router.push({
|
|
- path: "/cloudDate?tabrouter=exerciseDuration"
|
|
|
|
|
|
+ path: "/coursewareDate"
|
|
});
|
|
});
|
|
},
|
|
},
|
|
onReSet() {
|
|
onReSet() {
|
|
@@ -269,8 +323,6 @@ export default {
|
|
page: 1
|
|
page: 1
|
|
};
|
|
};
|
|
this.$refs.searchForm.resetFields();
|
|
this.$refs.searchForm.resetFields();
|
|
- // this.searchForm.dates.push(getNowDateAndMonday(nowTime));
|
|
|
|
- // this.searchForm.dates.push(getNowDateAndSunday(nowTime));
|
|
|
|
this.getList();
|
|
this.getList();
|
|
},
|
|
},
|
|
getDefaultTime() {
|
|
getDefaultTime() {
|
|
@@ -295,14 +347,16 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
async getList() {
|
|
async getList() {
|
|
- // cloudTeacherSumDetail
|
|
|
|
|
|
+ // api_studentCoursewarePlayRecordDetail
|
|
try {
|
|
try {
|
|
- const { dates, organId } = this.searchForm;
|
|
|
|
|
|
+ const { dates, organId, sort, asc } = this.searchForm;
|
|
let params = {
|
|
let params = {
|
|
|
|
+ sort,
|
|
|
|
+ asc,
|
|
...getTimes(dates, ["startDate", "endDate"]),
|
|
...getTimes(dates, ["startDate", "endDate"]),
|
|
organId
|
|
organId
|
|
};
|
|
};
|
|
- const res = await cloudTeacherSumDetail({
|
|
|
|
|
|
+ const res = await api_studentCoursewarePlayRecordDetail({
|
|
page: this.pageInfo.page,
|
|
page: this.pageInfo.page,
|
|
rows: this.pageInfo.limit,
|
|
rows: this.pageInfo.limit,
|
|
...params
|
|
...params
|