187 lines
4.7 KiB
JavaScript
187 lines
4.7 KiB
JavaScript
const { getStudentClassRoomReport } = require("../../../utils/serve/teacher");
|
|
import uCharts from '../../../utils/chart/u-charts';
|
|
|
|
var uChartsInstance = {};
|
|
// subpackage/teacher/report-detail/report-detail.js
|
|
Page({
|
|
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
reportDetail:{}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
this.setData({
|
|
studentNo:options.studentNo,
|
|
classRoomId:options.id
|
|
},()=>{
|
|
this.getReport()
|
|
})
|
|
},
|
|
|
|
async getReport(){
|
|
let params = {
|
|
classRoomId:this.data.classRoomId,
|
|
}
|
|
if(this.data.studentNo){
|
|
params.studentNo = this.data.studentNo
|
|
}
|
|
const res = await getStudentClassRoomReport(params)
|
|
this.setData({
|
|
reportDetail:res.data
|
|
},()=>{
|
|
this.drawCharts(this)
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
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});
|
|
},
|
|
|
|
drawCharts(that) {
|
|
const query = wx.createSelectorQuery().in(that);
|
|
console.log('重新绘图',that.data.reportDetail)
|
|
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.reportDetail.heartRateTrend.axisX,
|
|
series: [{
|
|
data: that.data.reportDetail.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, 0],
|
|
enableScroll: 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: {
|
|
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);
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
async onPullDownRefresh() {
|
|
await this.getReport()
|
|
wx.stopPullDownRefresh()
|
|
wx.showToast({
|
|
title: '刷新成功',
|
|
icon:'none'
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom() {
|
|
|
|
},
|
|
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage() {
|
|
|
|
}
|
|
}) |