149 lines
4.2 KiB
JavaScript
149 lines
4.2 KiB
JavaScript
// subpackage/teacher/student-fitness-detail/student-fitness-detail.js
|
|
import uCharts from '../../../utils/chart/u-charts';
|
|
import { getReport } from '../../../utils/serve/parent';
|
|
|
|
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 list = (res.data && res.data.categoryScoreList) || [];
|
|
const fitnessItems = list.map(item => ({
|
|
...item,
|
|
unit: UNIT_MAP[item.name] || '',
|
|
}));
|
|
this.setData({
|
|
fitnessReport: list,
|
|
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 radarCWidth = info.windowWidth * 0.86;
|
|
const radarCHeight = info.windowWidth * 0.86;
|
|
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 || [];
|
|
const categories = list.map(i => i.name);
|
|
const prevData = list.map(i => i.prevScore || 0);
|
|
const currentData = list.map(i => i.lastScore || 0);
|
|
|
|
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' },
|
|
{ name: '本次成绩', data: currentData, color: '#E74C3C' },
|
|
],
|
|
pixelRatio: that.data.pixelRatio,
|
|
animation: true,
|
|
background: 'rgba(0,0,0,0)',
|
|
color: ['#4A90E2', '#E74C3C'],
|
|
padding: [0, 0, 0, 10],
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
float: 'center',
|
|
fontSize: 12,
|
|
lineHeight: 11,
|
|
margin: 5,
|
|
itemGap: 20,
|
|
},
|
|
extra: {
|
|
radar: {
|
|
gridType: 'radar',
|
|
gridColor: '#CCCCCC',
|
|
gridCount: 4,
|
|
opacity: 0.15,
|
|
gridEvenShow: true,
|
|
gridOddShow: true,
|
|
labelShow: true,
|
|
labelColor: '#333',
|
|
fontSize: 13,
|
|
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() {},
|
|
})
|