|
@@ -1,38 +1,244 @@
|
|
|
-const app = getApp();
|
|
|
+const app = getApp()
|
|
|
+import * as echarts from '../../../commpents/ec-canvas/echarts'
|
|
|
Page({
|
|
|
- /**
|
|
|
- * 页面的初始数据
|
|
|
- */
|
|
|
data: {
|
|
|
frameStyle: { useTop: true, name: '出勤情况', leftArrow: true, useBar: false },
|
|
|
+ // 学校
|
|
|
+ zhSchool: '',
|
|
|
+ school_id: '',
|
|
|
+ schoolList: [],
|
|
|
},
|
|
|
- // 跳转菜单
|
|
|
+ // 返回
|
|
|
back(e) {
|
|
|
wx.navigateBack({ delta: 1 })
|
|
|
},
|
|
|
-
|
|
|
+ // 选择学校
|
|
|
+ schoolChange: function (e) {
|
|
|
+ const that = this;
|
|
|
+ let data = that.data.schoolList[e.detail.value];
|
|
|
+ if (data) {
|
|
|
+ that.setData({ school_id: data.school_id });
|
|
|
+ that.setData({ zhSchool: data.school_id_name });
|
|
|
+ }
|
|
|
+ that.watchLogin();
|
|
|
+ },
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function (options) {
|
|
|
-
|
|
|
},
|
|
|
- /**
|
|
|
- * 生命周期函数--监听页面初次渲染完成
|
|
|
- */
|
|
|
- onReady: function () {
|
|
|
-
|
|
|
+ // 监听用户是否登录
|
|
|
+ watchLogin: async function () {
|
|
|
+ const that = this;
|
|
|
+ wx.getStorage({
|
|
|
+ key: 'user',
|
|
|
+ success: async res => {
|
|
|
+ that.setData({
|
|
|
+ ec: {
|
|
|
+ onInit: that.initChart
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 学校
|
|
|
+ const school = await app.$get(`/rss`, { student_id: res.data.info.id });
|
|
|
+ if (school.errcode == '0' && school.total > 0) {
|
|
|
+ that.setData({ schoolList: school.data })
|
|
|
+ }
|
|
|
+ // 模拟请求
|
|
|
+ var times = setTimeout(async function () {
|
|
|
+ if (that.data.school_id) {
|
|
|
+ const arr = await app.$get(`/statistics/studentLearning`, { school_id: that.data.school_id, student_id: res.data.info.id });
|
|
|
+ if (arr.errcode == '0') {
|
|
|
+ that.data.data1 = arr.data.signs;
|
|
|
+ that.data.data2 = arr.data.minutes;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ clearTimeout(times);
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ fail: async res => {
|
|
|
+ wx.redirectTo({ url: '/pages/index/index' })
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
+ // 折线图
|
|
|
+ initChart(canvas, width, height, dpr) {
|
|
|
+ let that = this;
|
|
|
+ // 由于请求数据有延迟所以写一个时间函数,当数据存在的时候再执行绘制
|
|
|
+ var times = setInterval(function () {
|
|
|
+ var data1 = that.data.data1;
|
|
|
+ var data2 = that.data.data2;
|
|
|
+ if (data1 && data2) {
|
|
|
+ clearInterval(times)
|
|
|
+ const chart = echarts.init(canvas, null, {
|
|
|
+ width: width,
|
|
|
+ height: height,
|
|
|
+ devicePixelRatio: dpr // new
|
|
|
+ });
|
|
|
+ canvas.setChart(chart);
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ,
|
|
|
+ formatter: function (params) {
|
|
|
+ let html = params[0].name + "<br>";
|
|
|
+ for (let i = 0; i < params.length; i++) {
|
|
|
+ html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params[i].color + ';"></span>'
|
|
|
+ if (params[i].seriesName == "签到数") {
|
|
|
+ html += params[i].seriesName + ":" + params[i].value + "%<br>";
|
|
|
+ }
|
|
|
+ if (params[i].seriesName == "时长") {
|
|
|
+ html += params[i].seriesName + ":" + params[i].value + "小时<br>";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return html;
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
+ legend: {
|
|
|
+ textStyle: { color: '#4CA6A3' },
|
|
|
+ x: 'right',
|
|
|
+ data: [{ name: '签到数', icon: 'rect' }, { name: '时长', icon: 'rect' }]
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '2%',
|
|
|
+ right: '2%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ // 设置x轴线的属性
|
|
|
+ axisLabel: {
|
|
|
+ //x轴文字的配置
|
|
|
+ show: true,
|
|
|
+ interval: 0,//使x轴文字显示全
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#4CA6A3', // 设置x轴字体颜色
|
|
|
+ width: 2, // 设置x轴字体宽度
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '时长',
|
|
|
+ position: 'left',
|
|
|
+ alignTicks: true,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#293C55'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} 小时'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ alignTicks: true,
|
|
|
+ nameGap: 10,
|
|
|
+ nameRotate: 0,
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#293C55'
|
|
|
+ },
|
|
|
+ splitLine: { show: false },//去除网格线
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ interval: 10,
|
|
|
+ // 设置轴线的属性
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#293C55',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '签到数',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ areaStyle: {},
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#25DEDB",//折线点的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: "#25DEDB"//折线的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: { // 该属性设置可以使这下图区域颜色达到渐变的效果
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#25DEDB'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#ffe'
|
|
|
+ }])
|
|
|
+ },
|
|
|
+ data: data1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '时长',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ areaStyle: {},
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#E96C44",//折线点的颜色
|
|
|
+ lineStyle: {
|
|
|
+ color: "#E96C44"//折线的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: { // 该属性设置可以使这下图区域颜色达到渐变的效果
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#E96C44'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#ffe'
|
|
|
+ }])
|
|
|
+ },
|
|
|
+ data: data2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ chart.setOption(option, true);
|
|
|
+ return chart;
|
|
|
+ }
|
|
|
+ }, 100)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
+ */
|
|
|
+ onReady: function () { },
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow: function () {
|
|
|
const that = this;
|
|
|
-
|
|
|
+ // 监听用户是否登录
|
|
|
+ that.watchLogin();
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+ /**
|
|
|
+ * 页面上拉触底事件的处理函数
|
|
|
+ */
|
|
|
/**
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
*/
|
|
@@ -54,17 +260,11 @@ Page({
|
|
|
|
|
|
},
|
|
|
|
|
|
- /**
|
|
|
- * 页面上拉触底事件的处理函数
|
|
|
- */
|
|
|
- onReachBottom: function () {
|
|
|
-
|
|
|
- },
|
|
|
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
- onShareAppMessage: function () {
|
|
|
+ onShareAppMessage: function (res) {
|
|
|
|
|
|
- }
|
|
|
+ },
|
|
|
})
|