454 lines
12 KiB
JavaScript
454 lines
12 KiB
JavaScript
// pages/teacher/count/count.js
|
|
import uCharts from '../../../utils/chart/u-charts';
|
|
const {
|
|
getClassList,
|
|
getProjectList,
|
|
getTongji,
|
|
getStudentTongji,
|
|
getStudentList,
|
|
getClassRoomRecord,
|
|
getClassRoomReportDetails
|
|
} = require("../../../utils/serve/teacher");
|
|
const tabService = require("../../../utils/tab-serve");
|
|
const app = getApp()
|
|
var uChartsInstance = {};
|
|
Page({
|
|
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
classList: [], //班级列表
|
|
nowClass: {}, //当前选择班级
|
|
page: 1,
|
|
studentList: [],
|
|
hasMore: true,
|
|
projectList: [],
|
|
nowProject: {},
|
|
gradeList: ['不及格', '及格', '良好', '优秀'],
|
|
nowGrade: '不及格',
|
|
num: 0, //总人数
|
|
rank: {},
|
|
isTrainer: false,
|
|
courseList: [], //教练课堂记录
|
|
nowCourse: {},
|
|
showDialog: false,
|
|
clickCouse: {}, //选中的教练课程
|
|
nowCourseDetail: {},
|
|
cWidth: 330,
|
|
cHeight: 280,
|
|
pixelRatio: 2,
|
|
// 体测报告
|
|
activeTab: 0, // 0-课堂报告 1-体测报告
|
|
fitnessClassList: [], // 体测班级列表
|
|
nowFitnessClass: {}, // 当前体测班级
|
|
fitnessStudentList: [], // 体测学生列表
|
|
fitnessLoading: false,
|
|
courseLoading: false,
|
|
},
|
|
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
async onLoad(options) {
|
|
wx.showLoading({
|
|
title: '',
|
|
})
|
|
if (wx.getStorageSync('roleId') && wx.getStorageSync('roleId') == 4) {
|
|
await this.getTrainClass(true)
|
|
await this.getFitnessClasses()
|
|
} else {
|
|
await this.getClass()
|
|
}
|
|
wx.hideLoading()
|
|
},
|
|
|
|
// 切换 Tab
|
|
switchTab(e) {
|
|
const tab = e.currentTarget.dataset.tab
|
|
if(tab === this.data.activeTab) return
|
|
console.log('切换tab', tab)
|
|
this.setData({ activeTab: tab })
|
|
if(tab == 0 && !!this.data.nowCourse.id){
|
|
this.drawCharts(this)
|
|
}
|
|
},
|
|
|
|
// 获取体测班级列表
|
|
async getFitnessClasses() {
|
|
const res = await getClassList()
|
|
if (res && res.data && res.data.length > 0) {
|
|
this.setData({
|
|
fitnessClassList: res.data,
|
|
nowFitnessClass: res.data[0]
|
|
}, () => {
|
|
this.getFitnessStudents()
|
|
})
|
|
}
|
|
},
|
|
|
|
// 体测班级切换
|
|
fitnessPicker(e) {
|
|
const nowFitnessClass = this.data.fitnessClassList[Number(e.detail.value)]
|
|
this.setData({ nowFitnessClass }, () => {
|
|
this.getFitnessStudents()
|
|
})
|
|
},
|
|
|
|
// 获取体测学生列表
|
|
async getFitnessStudents() {
|
|
if (!this.data.nowFitnessClass.classId) return
|
|
this.setData({ fitnessLoading: true })
|
|
const res = await getStudentList({
|
|
pageIndex: 1,
|
|
pageSize: 200,
|
|
classId: this.data.nowFitnessClass.classId
|
|
})
|
|
this.setData({
|
|
fitnessStudentList: (res && res.data && res.data.datas) ? res.data.datas : (res && res.data ? res.data : []),
|
|
fitnessLoading: false
|
|
})
|
|
},
|
|
|
|
// 计算课堂详情展示字段
|
|
_buildCourseDetail(data) {
|
|
const d = data || {}
|
|
const age = d.age || 0
|
|
const hrMax = 220 - age
|
|
const moderateHR = Math.round(hrMax * 0.6)
|
|
const highHR = Math.round(hrMax * 0.75)
|
|
const heartRange = `${d.minHR || 0}-${d.maxHR || 0}次/分`
|
|
const avgHeart = d.avgHR || 0
|
|
const highDuration = `${d.highIntensity || 0}分钟`
|
|
const highRatio = `${d.highIntensityDurationRatio || 0}%`
|
|
return { ...d, heartRange, avgHeart, highDuration, highRatio, _moderateHR: moderateHR, _highHR: highHR }
|
|
},
|
|
|
|
clickCouse(e) {
|
|
this.setData({
|
|
clickCouse: e.currentTarget.dataset.item
|
|
})
|
|
},
|
|
|
|
async sureClickCouse() {
|
|
const that = this
|
|
if (!this.data.clickCouse.id) return app.showToast('请选择课程后再确认哦~')
|
|
this.setData({ showDialog: false, courseLoading: true })
|
|
const res = await getClassRoomReportDetails(this.data.clickCouse.id)
|
|
const detail = this._buildCourseDetail(res.data)
|
|
that.setData({
|
|
nowCourse: this.data.clickCouse,
|
|
clickCouse: {},
|
|
nowCourseDetail: detail,
|
|
courseLoading: false,
|
|
},()=>{
|
|
this.drawCharts(this)
|
|
})
|
|
},
|
|
|
|
showDialog() {
|
|
this.setData({
|
|
showDialog: true
|
|
})
|
|
},
|
|
|
|
closeDialog() {
|
|
this.setData({
|
|
showDialog: false
|
|
})
|
|
},
|
|
|
|
//获取班级列表
|
|
async getClass() {
|
|
const res = await getClassList()
|
|
this.setData({
|
|
classList: res.data,
|
|
nowClass: res.data[0]
|
|
}, async () => {
|
|
await this.getProject()
|
|
this.getStudent()
|
|
})
|
|
},
|
|
|
|
//获取教练课堂记录 刷新 加载更多
|
|
async getTrainClass(isRefresh) {
|
|
const that = this
|
|
let refresh = isRefresh && isRefresh.type != "scrolltolower"
|
|
console.log(isRefresh)
|
|
console.log('aaaaaaaaaaa',refresh)
|
|
if (!this.data.hasMore && !refresh) return //非刷新且没有
|
|
if (refresh) this.setData({ courseLoading: true })
|
|
const res = await getClassRoomRecord({
|
|
pageIndex: this.data.page,
|
|
PageSize: 20,
|
|
})
|
|
if(res.data.datas.length > 0){
|
|
const detail = await getClassRoomReportDetails(this.data.nowCourse.id ? this.data.nowCourse.id : res.data.datas[0].id)
|
|
this.setData({
|
|
nowCourseDetail: this.data.nowCourse.id ? this.data.nowCourseDetail: this._buildCourseDetail(detail.data),
|
|
courseLoading: false,
|
|
},()=>{
|
|
that.drawCharts(that)
|
|
})
|
|
} else {
|
|
if (refresh) this.setData({ courseLoading: false })
|
|
}
|
|
this.setData({
|
|
courseList: refresh ? res.data.datas : [...this.data.courseList, ...res.data.datas],
|
|
page: this.data.page + 1,
|
|
hasMore: res.data.total > (this.data.page) * 20,
|
|
nowCourse: (!!this.data.nowCourse && !this.data.nowCourse.id) || refresh ? res.data.datas[0] : this.data.nowCourse,
|
|
})
|
|
},
|
|
|
|
//获取项目列表
|
|
async getProject() {
|
|
if(!this.data.nowClass || !this.data.nowClass.gradeId) return
|
|
const res = await getProjectList(this.data.nowClass.gradeId)
|
|
this.setData({
|
|
projectList: res.data,
|
|
nowProject: res.data[0]
|
|
})
|
|
},
|
|
|
|
//获取学生列表 刷新 加载更多
|
|
async getStudent(isRefresh) {
|
|
if (!this.data.nowClass || !this.data.nowClass.classId) return
|
|
if (!this.data.hasMore && !isRefresh) return //非刷新且没有
|
|
const res = await getTongji({
|
|
ClassId: this.data.nowClass.classId,
|
|
CategoryValue: this.data.nowProject.id || 2,
|
|
Rank: this.data.nowGrade,
|
|
PageIndex: isRefresh ? 1 : this.data.page,
|
|
PageSize: 50
|
|
})
|
|
console.log(res.data.studentlist.total)
|
|
|
|
this.setData({
|
|
page: this.data.page + 1,
|
|
hasMore: res.data.studentlist.total > this.data.page * 50,
|
|
studentList: isRefresh ? res.data.studentlist.datas : [...this.data.studentList, ...res.data.studentlist.datas],
|
|
total: res.data.headTotal,
|
|
rank: res.data.rankDic
|
|
})
|
|
},
|
|
|
|
pickerChange(e) {
|
|
const that = this
|
|
this.setData({
|
|
[e.currentTarget.dataset.key]: this.data[e.currentTarget.dataset.id][Number(e.detail.value)]
|
|
}, async () => {
|
|
if (e.currentTarget.dataset.key == 'nowClass') {
|
|
await that.getProject()
|
|
}
|
|
that.getStudent(true)
|
|
})
|
|
},
|
|
|
|
goDetail(e) {
|
|
wx.navigateTo({
|
|
url: '/subpackage/teacher/count-detail/count-detail?id=' + e.currentTarget.dataset.item.studentNo + '&classId=' + this.data.nowClass.classId,
|
|
})
|
|
},
|
|
|
|
|
|
drawCharts(that) {
|
|
const query = wx.createSelectorQuery().in(that);
|
|
console.log('重新绘图',that.data.nowCourseDetail)
|
|
query.select('#mycanvas').fields({
|
|
node: true,
|
|
size: true
|
|
}).exec(res => {
|
|
if (res[0]) {
|
|
const canvas = res[0].node;
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = res[0].width * that.data.pixelRatio;
|
|
canvas.height = res[0].height * that.data.pixelRatio;
|
|
uChartsInstance['mycanvas'] = new uCharts({
|
|
type: "line",
|
|
context: ctx,
|
|
width: that.data.cWidth * that.data.pixelRatio,
|
|
height: that.data.cHeight * that.data.pixelRatio,
|
|
categories: that.data.nowCourseDetail.heartRateTrend.axisX,
|
|
series: [{
|
|
data: that.data.nowCourseDetail.heartRateTrend.axisY
|
|
}, ],
|
|
pixelRatio: that.data.pixelRatio,
|
|
animation: true,
|
|
background: "#FFFFFF",
|
|
color: that.data.chartType == 1 ? ["#FFA30C"] : that.data.chartType == 2 ? ["#6CB7FB"] : ["#FF4949"],
|
|
padding: [15, 15, 10, 15],
|
|
enableScroll: true,
|
|
enableMarkLine: true,
|
|
// touchMoveLimit: 24,
|
|
legend: {
|
|
show: false,
|
|
fontColor: "#37b7e8"
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
itemCount: 5,
|
|
scrollShow: true,
|
|
fontSize: 12,
|
|
lineHeight: 30,
|
|
axisLineColor: "#f1f1f1",
|
|
fontColor: "#000",
|
|
scrollColor: "#f6ecc9",
|
|
scrollBackgroundColor: "#F4F6F8"
|
|
},
|
|
yAxis: {
|
|
gridType: "dash",
|
|
gridColor: "#F1F1F1",
|
|
// data: [{
|
|
// min: 40,
|
|
// // axisLine: false,
|
|
// fontSize: 12
|
|
// }]
|
|
},
|
|
extra: {
|
|
markLine: {
|
|
type: 'dash',
|
|
dashLength: 6,
|
|
data: [
|
|
{
|
|
value: that.data.nowCourseDetail._moderateHR,
|
|
lineColor: '#FFA30C',
|
|
showLabel: true,
|
|
labelText: '中强度',
|
|
labelFontColor: '#FFA30C',
|
|
labelBgColor: '#FFF8EC',
|
|
labelBgOpacity: 0.9,
|
|
labelAlign: 'left',
|
|
labelFontSize: 11
|
|
},
|
|
{
|
|
value: that.data.nowCourseDetail._highHR,
|
|
lineColor: '#FF4949',
|
|
showLabel: true,
|
|
labelText: '高强度',
|
|
labelFontColor: '#FF4949',
|
|
labelBgColor: '#FFF0F0',
|
|
labelBgOpacity: 0.9,
|
|
labelAlign: 'left',
|
|
labelFontSize: 11
|
|
}
|
|
]
|
|
},
|
|
line: {
|
|
type: "curve",
|
|
width: 2,
|
|
activeType: "hollow",
|
|
onShadow: true,
|
|
linearType: "custom",
|
|
},
|
|
tooltip: {
|
|
showBox: false
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
console.error("[uCharts]: 未获取到 context");
|
|
}
|
|
});
|
|
},
|
|
tap(e) {
|
|
uChartsInstance[e.target.id].touchLegend(e);
|
|
uChartsInstance[e.target.id].showToolTip(e);
|
|
},
|
|
|
|
touchstart(e){
|
|
uChartsInstance[e.target.id].scrollStart(e);
|
|
},
|
|
touchmove(e){
|
|
uChartsInstance[e.target.id].scroll(e);
|
|
},
|
|
touchend(e){
|
|
uChartsInstance[e.target.id].scrollEnd(e);
|
|
uChartsInstance[e.target.id].touchLegend(e);
|
|
uChartsInstance[e.target.id].showToolTip(e);
|
|
},
|
|
|
|
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady() {
|
|
const cWidth = 315 / 375 * wx.getWindowInfo().windowWidth;;
|
|
//这里的 500 对应 css .charts 的 height
|
|
const cHeight = 220 / 375 * wx.getWindowInfo().windowWidth;
|
|
console.log(wx.getWindowInfo())
|
|
const pixelRatio = wx.getWindowInfo().pixelRatio
|
|
this.setData({ cWidth, cHeight ,pixelRatio});
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {
|
|
this.setData({
|
|
isTrainer: wx.getStorageSync('roleId') && wx.getStorageSync('roleId') == 4
|
|
})
|
|
tabService.updateIndex(this, 2)
|
|
},
|
|
|
|
goStudentList(e){
|
|
wx.navigateTo({
|
|
url: '/subpackage/teacher/report-detail/report-detail?id='+this.data.nowCourse.id +'&studentNo='+e.currentTarget.dataset.item.studentNo,
|
|
})
|
|
},
|
|
|
|
// 体测报告 - 跳转学生体测详情
|
|
goFitnessDetail(e) {
|
|
const item = e.currentTarget.dataset.item
|
|
wx.navigateTo({
|
|
url: '/subpackage/teacher/student-fitness-detail/student-fitness-detail?studentNo=' + item.studentNo + '&classId=' + this.data.nowFitnessClass.classId
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
async onPullDownRefresh() {
|
|
this.setData({ page: 1, hasMore: true })
|
|
if (this.data.isTrainer) {
|
|
if (this.data.activeTab === 0) {
|
|
await this.getTrainClass(true)
|
|
} else if (this.data.activeTab === 1) {
|
|
await this.getFitnessStudents()
|
|
}
|
|
} else {
|
|
await this.getClass()
|
|
}
|
|
wx.stopPullDownRefresh()
|
|
app.showToast('刷新成功')
|
|
},
|
|
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom() {
|
|
console.log('加载')
|
|
},
|
|
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage() {
|
|
|
|
}
|
|
}) |