549 lines
18 KiB
JavaScript
549 lines
18 KiB
JavaScript
// subpackage/teacher/student-fitness-detail/student-fitness-detail.js
|
||
import uCharts from '../../../utils/chart/u-charts';
|
||
import { getReport } from '../../../utils/serve/parent';
|
||
import { getStudentClassRoomReport } from '../../../utils/serve/teacher';
|
||
|
||
var uChartsInstance = {};
|
||
|
||
const UNIT_MAP = {
|
||
'BMI': 'kg/m²',
|
||
'肺活量': 'ml',
|
||
'坐位体前屈': 'cm',
|
||
'立定跳远': 'cm',
|
||
'一分钟跳绳': '个',
|
||
'一分钟仰卧起坐': '个',
|
||
};
|
||
|
||
Page({
|
||
data: {
|
||
fitnessItems: [],
|
||
fitnessReport: [],
|
||
radarCWidth: 300,
|
||
radarCHeight: 300,
|
||
pixelRatio: 2,
|
||
showFitnessPopup: false,
|
||
selectedFitnessItem: null,
|
||
studentNo: '',
|
||
readyFired: false,
|
||
// Tab
|
||
activeTab: 1, // 0=课堂报告 1=体测报告
|
||
classroomSubTab: 0, // 0=月 1=季度
|
||
// 时间选择
|
||
selectedYear: 2026,
|
||
selectedMonth: 1,
|
||
selectedQuarter: 1,
|
||
showMonthPicker: false,
|
||
showQuarterPicker: false,
|
||
pickerYear: 2026,
|
||
nowYear: 0,
|
||
nowMonth: 0,
|
||
nowQuarter: 0,
|
||
monthList: [1,2,3,4,5,6,7,8,9,10,11,12],
|
||
quarterList: [
|
||
{ value: 1, label: '第一季度', months: '1-3月' },
|
||
{ value: 2, label: '第二季度', months: '4-6月' },
|
||
{ value: 3, label: '第三季度', months: '7-9月' },
|
||
{ value: 4, label: '第四季度', months: '10-12月' },
|
||
],
|
||
monthData: {},
|
||
quarterData: {},
|
||
classroomLoading: false,
|
||
},
|
||
|
||
async onLoad(options) {
|
||
const now = new Date()
|
||
const nowYear = now.getFullYear()
|
||
const nowMonth = now.getMonth() + 1
|
||
const nowQuarter = Math.ceil(nowMonth / 3)
|
||
this.setData({
|
||
studentNo: options.studentNo || '',
|
||
nowYear, nowMonth, nowQuarter,
|
||
selectedYear: nowYear,
|
||
selectedMonth: nowMonth,
|
||
selectedQuarter: nowQuarter,
|
||
pickerYear: nowYear,
|
||
})
|
||
|
||
wx.showLoading({ title: '加载中' });
|
||
await Promise.all([
|
||
this._loadFitnessReport(options.studentNo),
|
||
this.fetchMonthReport(),
|
||
])
|
||
wx.hideLoading();
|
||
},
|
||
|
||
async _loadFitnessReport(studentNo) {
|
||
try {
|
||
const res = await getReport({ studentNo: studentNo || '' });
|
||
const rawList = (res.data && res.data.categoryScoreList) || [];
|
||
const list = rawList.filter(item => !(item.name && item.name.includes('米') && item.name.includes('跑')));
|
||
|
||
const gradeId = list.length > 0 ? list[0].gradeId : null;
|
||
let radarList = list;
|
||
if (gradeId !== null && gradeId !== undefined) {
|
||
if (gradeId <= 2) {
|
||
radarList = list.filter(item => item.name !== '一分钟仰卧起坐' && item.name !== '立定跳远');
|
||
} else if (gradeId > 2 && gradeId <= 6) {
|
||
radarList = list.filter(item => item.name !== '立定跳远');
|
||
} else if (gradeId > 6) {
|
||
radarList = list.filter(item => item.name !== '一分钟跳绳');
|
||
}
|
||
}
|
||
|
||
const fitnessItems = list.map(item => ({
|
||
...item,
|
||
unit: UNIT_MAP[item.name] || '',
|
||
}));
|
||
this.setData({ fitnessReport: radarList, fitnessItems }, () => {
|
||
if (this.data.readyFired && this.data.activeTab === 1) {
|
||
this.drawRadarChart(this);
|
||
}
|
||
});
|
||
} catch (e) {
|
||
this.setData({ fitnessItems: [] });
|
||
}
|
||
},
|
||
|
||
onReady() {
|
||
const info = wx.getWindowInfo();
|
||
const pixelRatio = info.pixelRatio;
|
||
const rpxRatio = info.windowWidth / 750;
|
||
const radarCWidth = Math.floor(info.windowWidth - 2 * 30 * rpxRatio);
|
||
const radarCHeight = Math.floor(radarCWidth * 1.05);
|
||
this.setData({ radarCWidth, radarCHeight, pixelRatio, readyFired: true }, () => {
|
||
if (this.data.activeTab === 1 && this.data.fitnessReport && this.data.fitnessReport.length > 0) {
|
||
this.drawRadarChart(this);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 切换主 Tab
|
||
switchTab(e) {
|
||
const tab = Number(e.currentTarget.dataset.tab)
|
||
if (tab === this.data.activeTab) return
|
||
this.setData({ activeTab: tab }, () => {
|
||
if (tab === 1 && this.data.readyFired && this.data.fitnessReport.length > 0) {
|
||
this.drawRadarChart(this)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 切换课堂子Tab (0=月 1=季度)
|
||
switchClassroomSubTab(e) {
|
||
const tab = Number(e.currentTarget.dataset.tab)
|
||
if (tab === this.data.classroomSubTab) return
|
||
this.setData({ classroomSubTab: tab }, () => {
|
||
if (tab === 0) this.fetchMonthReport()
|
||
else if (tab === 1) this.fetchQuarterReport()
|
||
})
|
||
},
|
||
|
||
// 月份选择器
|
||
openMonthPicker() {
|
||
this.setData({ showMonthPicker: true, pickerYear: this.data.selectedYear })
|
||
},
|
||
closeMonthPicker() {
|
||
this.setData({ showMonthPicker: false })
|
||
},
|
||
selectMonth(e) {
|
||
const month = Number(e.currentTarget.dataset.month)
|
||
const { pickerYear, nowYear, nowMonth } = this.data
|
||
if (pickerYear > nowYear || (pickerYear === nowYear && month > nowMonth)) return
|
||
this.setData({ selectedMonth: month, selectedYear: pickerYear, showMonthPicker: false }, () => {
|
||
this.fetchMonthReport()
|
||
})
|
||
},
|
||
|
||
// 季度选择器
|
||
openQuarterPicker() {
|
||
this.setData({ showQuarterPicker: true, pickerYear: this.data.selectedYear })
|
||
},
|
||
closeQuarterPicker() {
|
||
this.setData({ showQuarterPicker: false })
|
||
},
|
||
selectQuarter(e) {
|
||
const quarter = Number(e.currentTarget.dataset.quarter)
|
||
const { pickerYear, nowYear, nowQuarter } = this.data
|
||
if (pickerYear > nowYear || (pickerYear === nowYear && quarter > nowQuarter)) return
|
||
this.setData({ selectedQuarter: quarter, selectedYear: pickerYear, showQuarterPicker: false }, () => {
|
||
this.fetchQuarterReport()
|
||
})
|
||
},
|
||
|
||
// 年份切换（月/季度共用）
|
||
prevPickerYear() {
|
||
this.setData({ pickerYear: this.data.pickerYear - 1 })
|
||
},
|
||
nextPickerYear() {
|
||
if (this.data.pickerYear >= this.data.nowYear) return
|
||
this.setData({ pickerYear: this.data.pickerYear + 1 })
|
||
},
|
||
|
||
_getMonthRange(year, month) {
|
||
const startTime = `${year}-${String(month).padStart(2, '0')}-01`
|
||
let endYear = year, endMonth = month + 1
|
||
if (endMonth > 12) { endYear++; endMonth = 1 }
|
||
const endTime = `${endYear}-${String(endMonth).padStart(2, '0')}-01`
|
||
return { startTime, endTime }
|
||
},
|
||
|
||
_getQuarterRange(year, quarter) {
|
||
const startMonth = (quarter - 1) * 3 + 1
|
||
let endYear = year, endMonth = quarter * 3 + 1
|
||
if (endMonth > 12) { endYear++; endMonth = 1 }
|
||
const startTime = `${year}-${String(startMonth).padStart(2, '0')}-01`
|
||
const endTime = `${endYear}-${String(endMonth).padStart(2, '0')}-01`
|
||
return { startTime, endTime }
|
||
},
|
||
|
||
_buildPeriodData(apiData) {
|
||
const d = apiData || {}
|
||
return {
|
||
heartRange: `${d.minHR || 0}-${d.maxHR || 0}次/分`,
|
||
avgHeart: d.avgHR || 0,
|
||
highDuration: `${d.highIntensity || 0}分钟`,
|
||
highRatio: `${d.highIntensityDurationRatio || 0}%`,
|
||
jumpTotal: d.totalCount || 0,
|
||
jumpDuration: d.totalDuration || 0,
|
||
jumpAvgSpeed: d.avgSpeed || 0,
|
||
jumpRecords: (d.jumpRecordList || []).map(item => ({
|
||
type: item.jumpType,
|
||
duration: `${item.totalDuration}s`,
|
||
count: item.totalCount,
|
||
})),
|
||
}
|
||
},
|
||
|
||
async fetchMonthReport() {
|
||
const { selectedYear, selectedMonth, studentNo } = this.data
|
||
const { startTime, endTime } = this._getMonthRange(selectedYear, selectedMonth)
|
||
this.setData({ classroomLoading: true })
|
||
try {
|
||
const res = await getStudentClassRoomReport({ type: 2, startTime, endTime, studentNo })
|
||
this.setData({ monthData: this._buildPeriodData(res.data) })
|
||
} catch (e) {
|
||
this.setData({ monthData: {} })
|
||
}
|
||
this.setData({ classroomLoading: false })
|
||
},
|
||
|
||
async fetchQuarterReport() {
|
||
const { selectedYear, selectedQuarter, studentNo } = this.data
|
||
const { startTime, endTime } = this._getQuarterRange(selectedYear, selectedQuarter)
|
||
this.setData({ classroomLoading: true })
|
||
try {
|
||
const res = await getStudentClassRoomReport({ type: 2, startTime, endTime, studentNo })
|
||
this.setData({ quarterData: this._buildPeriodData(res.data) })
|
||
} catch (e) {
|
||
this.setData({ quarterData: {} })
|
||
}
|
||
this.setData({ classroomLoading: false })
|
||
},
|
||
|
||
drawRadarChart(that) {
|
||
const list = that.data.fitnessReport || [];
|
||
const categories = list.map(i => {
|
||
const name = i.name || '';
|
||
if (name.length > 5) {
|
||
const mid = Math.ceil(name.length / 2);
|
||
return name.slice(0, mid) + '\n' + name.slice(mid);
|
||
}
|
||
return name;
|
||
});
|
||
const prevData = list.map(i => i.prevScore || 0);
|
||
const currentData = list.map(i => i.lastScore || 0);
|
||
// 本次成绩数据标签：显示分数 + 等级
|
||
const currentDataLabels = list.map(i => {
|
||
const score = i.lastScore != null ? i.lastScore : ''
|
||
const rank = i.rank != null ? i.rank : ''
|
||
return ''
|
||
return rank ? score + '\n' + rank : String(score)
|
||
})
|
||
|
||
// 富文本 label：名称行 + 颜色区分的成绩行（上次/本次+等级）
|
||
const labelLines = list.map(i => {
|
||
const name = i.name || '';
|
||
const lines = [];
|
||
if (name.length > 15) {
|
||
const mid = Math.ceil(name.length / 2);
|
||
lines.push(name.slice(0, mid));
|
||
lines.push(name.slice(mid));
|
||
} else {
|
||
lines.push(name);
|
||
}
|
||
const prevScore = i.prevScore != null ? String(i.prevScore) : '-';
|
||
const lastScore = i.lastScore != null ? String(i.lastScore) : '-';
|
||
const rank = i.rank ? i.rank : '';
|
||
const currentText = rank ? lastScore + rank : lastScore;
|
||
lines.push([
|
||
{ text: prevScore + '/', color: '#4A90E2' },
|
||
{ text: currentText, color: '#E74C3C' },
|
||
]);
|
||
return lines;
|
||
});
|
||
|
||
const query = wx.createSelectorQuery().in(that);
|
||
query.select('#radarCanvas').fields({ node: true, size: true }).exec(res => {
|
||
if (!res[0]) return;
|
||
const canvas = res[0].node;
|
||
const ctx = canvas.getContext('2d');
|
||
canvas.width = (res[0].width + 20) * that.data.pixelRatio;
|
||
canvas.height = (res[0].height + 20) * that.data.pixelRatio;
|
||
uChartsInstance['radarCanvas'] = new uCharts({
|
||
type: 'radar',
|
||
context: ctx,
|
||
width: that.data.radarCWidth * that.data.pixelRatio,
|
||
height: that.data.radarCHeight * that.data.pixelRatio,
|
||
categories,
|
||
series: [
|
||
{ name: '上次成绩', data: prevData, color: '#4A90E2', dataLabels: currentDataLabels },
|
||
{ name: '本次成绩', data: currentData, color: '#E74C3C', dataLabels: currentDataLabels },
|
||
],
|
||
pixelRatio: that.data.pixelRatio,
|
||
animation: true,
|
||
tapLegend: true,
|
||
background: 'rgba(0,0,0,0)',
|
||
color: ['#4A90E2', '#E74C3C'],
|
||
padding: [0, 0, 0, 20],
|
||
legend: {
|
||
show: true,
|
||
position: 'bottom',
|
||
float: 'center',
|
||
fontSize: 12,
|
||
lineHeight: 11,
|
||
margin: 0,
|
||
itemGap: 20,
|
||
},
|
||
extra: {
|
||
radar: {
|
||
gridType: that.data.fitnessReport.length === 4 ? 'circle' : 'radar',
|
||
gridColor: '#CCCCCC',
|
||
gridCount: 4,
|
||
opacity: 0.15,
|
||
gridEvenShow: true,
|
||
gridOddShow: true,
|
||
labelShow: true,
|
||
labelColor: '#333',
|
||
fontSize: 13,
|
||
labelMargin: 30,
|
||
labelPointShow: false,
|
||
max: 100,
|
||
labelLines,
|
||
},
|
||
},
|
||
});
|
||
});
|
||
},
|
||
|
||
showFitnessScore(e) {
|
||
const item = e.currentTarget.dataset.item;
|
||
this.setData({ selectedFitnessItem: item, showFitnessPopup: true });
|
||
},
|
||
|
||
closeFitnessPopup() {
|
||
this.setData({ showFitnessPopup: false, selectedFitnessItem: null });
|
||
},
|
||
|
||
goFitnessDetail() {
|
||
const item = this.data.selectedFitnessItem;
|
||
if (!item) return;
|
||
this.setData({ showFitnessPopup: false });
|
||
wx.setStorageSync('fitnessDetailItem', item);
|
||
wx.navigateTo({
|
||
url: '/subpackage/parent/fitness-detail/fitness-detail',
|
||
});
|
||
},
|
||
|
||
onShow() {},
|
||
onHide() {},
|
||
onUnload() {},
|
||
async onPullDownRefresh() {
|
||
if (this.data.activeTab === 0) {
|
||
if (this.data.classroomSubTab === 0) await this.fetchMonthReport()
|
||
else await this.fetchQuarterReport()
|
||
} else {
|
||
await this._loadFitnessReport(this.data.studentNo)
|
||
}
|
||
wx.stopPullDownRefresh()
|
||
wx.showToast({ title: '刷新成功', icon: 'none' })
|
||
},
|
||
onReachBottom() {},
|
||
onShareAppMessage() {},
|
||
})
|
||
|
||
// var uChartsInstance = {};
|
||
|
||
// const UNIT_MAP = {
|
||
// 'BMI': 'kg/m²',
|
||
// '肺活量': 'ml',
|
||
// '坐位体前屈': 'cm',
|
||
// '立定跳远': 'cm',
|
||
// '一分钟跳绳': '个',
|
||
// '一分钟仰卧起坐': '个',
|
||
// };
|
||
|
||
// Page({
|
||
// data: {
|
||
// fitnessItems: [],
|
||
// fitnessReport: [],
|
||
// radarCWidth: 300,
|
||
// radarCHeight: 300,
|
||
// pixelRatio: 2,
|
||
// showFitnessPopup: false,
|
||
// selectedFitnessItem: null,
|
||
// studentNo: '',
|
||
// readyFired: false,
|
||
// },
|
||
|
||
// async onLoad(options) {
|
||
// wx.showLoading({ title: '加载中' });
|
||
// this.setData({ studentNo: options.studentNo || '' });
|
||
// try {
|
||
// const res = await getReport({ studentNo: options.studentNo });
|
||
// const rawList = (res.data && res.data.categoryScoreList) || [];
|
||
// const list = rawList.filter(item => !(item.name && item.name.includes('米') && item.name.includes('跑')));
|
||
|
||
// // 雷达图根据 gradeId 过滤不适用的项目
|
||
// const gradeId = list.length > 0 ? list[0].gradeId : null;
|
||
// let radarList = list;
|
||
// if (gradeId !== null && gradeId !== undefined) {
|
||
// if (gradeId <= 2) {
|
||
// radarList = list.filter(item => item.name !== '一分钟仰卧起坐' && item.name !== '立定跳远');
|
||
// } else if (gradeId > 2 && gradeId <= 6) {
|
||
// radarList = list.filter(item => item.name !== '立定跳远');
|
||
// } else if (gradeId > 6) {
|
||
// radarList = list.filter(item => item.name !== '一分钟跳绳');
|
||
// }
|
||
// }
|
||
|
||
// const fitnessItems = list.map(item => ({
|
||
// ...item,
|
||
// unit: UNIT_MAP[item.name] || '',
|
||
// }));
|
||
// this.setData({
|
||
// fitnessReport: radarList,
|
||
// fitnessItems,
|
||
// }, () => {
|
||
// // 如果 onReady 已经触发，数据到位后立即绘图
|
||
// if (this.data.readyFired) {
|
||
// this.drawRadarChart(this);
|
||
// }
|
||
// });
|
||
// } catch (e) {
|
||
// this.setData({ fitnessItems: [] });
|
||
// }
|
||
// wx.hideLoading();
|
||
// },
|
||
|
||
// onReady() {
|
||
// const info = wx.getWindowInfo();
|
||
// const pixelRatio = info.pixelRatio;
|
||
// const rpxRatio = info.windowWidth / 750;
|
||
// const radarCWidth = Math.floor(info.windowWidth - 2 * 30 * rpxRatio);
|
||
// const radarCHeight = Math.floor(radarCWidth * 1.05);
|
||
// this.setData({ radarCWidth, radarCHeight, pixelRatio, readyFired: true }, () => {
|
||
// // 如果数据已经加载完，直接绘图；否则等 onLoad 回调里触发
|
||
// if (this.data.fitnessReport && this.data.fitnessReport.length > 0) {
|
||
// this.drawRadarChart(this);
|
||
// }
|
||
// });
|
||
// },
|
||
|
||
// drawRadarChart(that) {
|
||
// const list = that.data.fitnessReport || [];
|
||
// // 长文本自动换行（超过5字在中间插入换行）
|
||
// const categories = list.map(i => {
|
||
// const name = i.name || '';
|
||
// if (name.length > 5) {
|
||
// const mid = Math.ceil(name.length / 2);
|
||
// return name.slice(0, mid) + '\n' + name.slice(mid);
|
||
// }
|
||
// return name;
|
||
// });
|
||
// const prevData = list.map(i => i.prevScore || 0);
|
||
// const currentData = list.map(i => i.lastScore || 0);
|
||
// // 本次成绩数据标签：显示分数 + 等级
|
||
// const currentDataLabels = list.map(i => {
|
||
// const score = i.lastScore != null ? i.lastScore : '';
|
||
// const rank = i.rank != null ? i.rank : '';
|
||
// return rank ? score + '\n' + rank : String(score);
|
||
// });
|
||
|
||
// const query = wx.createSelectorQuery().in(that);
|
||
// query.select('#radarCanvas').fields({ node: true, size: true }).exec(res => {
|
||
// if (!res[0]) return;
|
||
// const canvas = res[0].node;
|
||
// const ctx = canvas.getContext('2d');
|
||
// canvas.width = (res[0].width + 20) * that.data.pixelRatio;
|
||
// canvas.height = (res[0].height + 20) * that.data.pixelRatio;
|
||
// uChartsInstance['radarCanvas'] = new uCharts({
|
||
// type: 'radar',
|
||
// context: ctx,
|
||
// width: that.data.radarCWidth * that.data.pixelRatio,
|
||
// height: that.data.radarCHeight * that.data.pixelRatio,
|
||
// categories,
|
||
// series: [
|
||
// { name: '上次成绩', data: prevData, color: '#4A90E2', dataLabel: false },
|
||
// { name: '本次成绩', data: currentData, color: '#E74C3C', dataLabels: currentDataLabels, textColor: '#E74C3C', textSize: 11 },
|
||
// ],
|
||
// pixelRatio: that.data.pixelRatio,
|
||
// animation: true,
|
||
// tapLegend: true,
|
||
// background: 'rgba(0,0,0,0)',
|
||
// color: ['#4A90E2', '#E74C3C'],
|
||
// padding: [0, 0, 0, 15],
|
||
// legend: {
|
||
// show: true,
|
||
// position: 'bottom',
|
||
// float: 'center',
|
||
// fontSize: 12,
|
||
// lineHeight: 11,
|
||
// margin: 0,
|
||
// itemGap: 20,
|
||
// },
|
||
// extra: {
|
||
// radar: {
|
||
// gridType: that.data.fitnessReport.length === 4 ? 'circle' : 'radar',
|
||
// gridColor: '#CCCCCC',
|
||
// gridCount: 4,
|
||
// opacity: 0.15,
|
||
// gridEvenShow: true,
|
||
// gridOddShow: true,
|
||
// labelShow: true,
|
||
// labelColor: '#333',
|
||
// fontSize: 13,
|
||
// labelMargin: 30,
|
||
// labelPointShow: false,
|
||
// max: 100,
|
||
// },
|
||
// },
|
||
// });
|
||
// });
|
||
// },
|
||
|
||
// showFitnessScore(e) {
|
||
// const item = e.currentTarget.dataset.item;
|
||
// this.setData({ selectedFitnessItem: item, showFitnessPopup: true });
|
||
// },
|
||
|
||
// closeFitnessPopup() {
|
||
// this.setData({ showFitnessPopup: false, selectedFitnessItem: null });
|
||
// },
|
||
|
||
// goFitnessDetail() {
|
||
// const item = this.data.selectedFitnessItem;
|
||
// if (!item) return;
|
||
// this.setData({ showFitnessPopup: false });
|
||
// wx.setStorageSync('fitnessDetailItem', item);
|
||
// wx.navigateTo({
|
||
// url: '/subpackage/parent/fitness-detail/fitness-detail',
|
||
// });
|
||
// },
|
||
|
||
// onShow() {},
|
||
// onHide() {},
|
||
// onUnload() {},
|
||
// onPullDownRefresh() {},
|
||
// onReachBottom() {},
|
||
// onShareAppMessage() {},
|
||
// })
|