Commit f9e705c1 authored by lvtz's avatar lvtz

fix工作台课程分析饼图

parent c362ebd5
......@@ -58,16 +58,10 @@ Page({
windowWidth: app.globalData.windowWidth,
windowHeight: app.globalData.windowHeight,
total:0,
ringChart:{
1:'',
2:'',
3:''
},
todocallTotal:0,
modalshow: false,
modelHideClass: false,
analyzeDashStatic: {},//面板数据
hideCanvasRing: true,
guideDailogShow: false,
guideIndex: 1
},
......@@ -102,53 +96,6 @@ Page({
}, 200)
}
},
onReady(){
let that = this;
let query = wx.createSelectorQuery();
let watchTop = 0;
query.select('.ring-chart-box').boundingClientRect()
query.exec(res=>{
watchTop = res[0].top + 20;
this.data.watchTop = watchTop;
// ringchart进入页面一般都看不到
// if(watchTop<this.data.windowHeight-120){
// this.setData({
// hideCanvasRing: false
// })
// }else{
// this.setData({
// hideCanvasRing: true
// })
// }
})
},
onPageScroll(e){
let that = this;
let watchTop = this.data.watchTop;
let scrollTop = e.scrollTop;
if(watchTop>this.data.windowHeight){
if(scrollTop >= Math.abs(watchTop-this.data.windowHeight-300)){
this.setData({
hideCanvasRing: false
})
}else{
this.setData({
hideCanvasRing: true
})
}
}else{
if(scrollTop >= Math.abs(this.data.windowHeight-watchTop+20)){
this.setData({
hideCanvasRing: false
})
}else{
this.setData({
hideCanvasRing: true
})
}
}
},
analyzeDashboardGet(){
let date = new Date();
let today = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate());
......@@ -416,12 +363,12 @@ Page({
}).then((res)=>{
const {code, data} = res;
if(code == 200){
data.list.forEach((ele) => {
ele.calc_rate = `${(ele.course_time_rate*100).toFixed(2)}`;
})
this.setData({
classCours:data.list
classCours: data.list
})
data.list.forEach((ele,index) => {
this.initRingChart(index+1,ele)
});
}
}).catch((res)=>{
......@@ -465,42 +412,6 @@ Page({
dataLabel: false
});
},
initRingChart(index,data){
let canvasWidth = (this.data.windowWidth-48)/3;
this.data.ringChart[index] = new wxCharts({
animation: true,
canvasId: `ringCanvas${index}`,
type: 'ring',
extra: {
ringWidth: 14,
pie: {
offsetAngle: -90
}
},
title: {
name: `${(data.course_time_rate*100).toFixed(2)}%`,
color: '#000000',
fontSize: 12
},
series: [{
name: '已完成',
data: data.course_time_rate*100,
stroke: false,
color: '#FFB97A',
}, {
name: '除去已完成',
data: 100 - data.course_time_rate*100,
stroke: false,
color: '#FFEBD9',
}],
disablePieStroke: true,
width: canvasWidth,
height: 200,
dataLabel: false,
legend: false,
padding: 0
});
},
nextGuide(e){
const { index } = e.currentTarget.dataset;
if(index == 5){
......
......@@ -152,33 +152,17 @@
<text class="subtitle-text">(近6个月)</text>
</view>
<view class="chart-box" wx:if="{{classCours.length>0}}">
<view class="chart-item" wx:if="{{classCours[0]}}">
<view class="canvas-box" >
<canvas canvas-id="ringCanvas1" class="ringcanvas" hidden="{{modalshow || hideCanvasRing}}"></canvas>
<block wx:for="{{classCours}}" wx:key="index">
<view class="chart-item">
<view class="canvas-box2" style="background-image: conic-gradient(#FFB97A 0 {{item.calc_rate}}%, #FFEBD9 {{item.calc_rate}}% 100%)">
<view class="num">{{item.calc_rate}}%</view>
</view>
<view class="content-box">
<view class="name">{{item.title}}</view>
<view class="count">{{item.course_time}}课时</view>
</view>
</view>
<view class="content-box">
<view class="name" >{{classCours[0].title}}</view>
<view class="count" >{{classCours[0].course_time}}课时</view>
</view>
</view>
<view class="chart-item" wx:if="{{classCours[1]}}">
<view class="canvas-box" >
<canvas canvas-id="ringCanvas2" class="ringcanvas" hidden="{{modalshow || hideCanvasRing}}"></canvas>
</view>
<view class="content-box">
<view class="name" >{{classCours[1].title}}</view>
<view class="count" >{{classCours[1].course_time}}课时</view>
</view>
</view>
<view class="chart-item" wx:if="{{classCours[2]}}">
<view class="canvas-box" >
<canvas canvas-id="ringCanvas3" class="ringcanvas" hidden="{{modalshow || hideCanvasRing}}"></canvas>
</view>
<view class="content-box">
<view class="name" >{{classCours[2].title}}</view>
<view class="count" >{{classCours[2].course_time}}课时</view>
</view>
</view>
</block>
</view>
<view class="empty-content" wx:else>
<view class="empty-text">暂无课程分析数据~</view>
......
......@@ -310,17 +310,52 @@ page{
.ring-chart-box .chart-box{
display: flex;
position: relative;
padding: 55rpx 0 5rpx
}
.ring-chart-box .chart-box .chart-item .canvas-box2{
width: 170rpx;
height: 170rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.ring-chart-box .chart-box .chart-item .canvas-box2::after{
content: '';
width: 180rpx;
height: 180rpx;
border-radius: 50%;
border: 1px solid #FFB97A;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.ring-chart-box .chart-box .chart-item .canvas-box2 .num{
width: 110rpx;
height: 110rpx;
color: #000;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 50%;
}
.ring-chart-box .chart-box .chart-item{
flex: 1;
/* overflow: hidden; */
max-width: 33.33%;
padding: 20rpx 0;
width: 33.33%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ring-chart-box .chart-box .chart-item .canvas-box{
position: relative;
height: 85px;
/* margin-top: -120rpx; */
}
.ring-chart-box .chart-box .chart-item .canvas-box::after{
content: '';
......@@ -335,7 +370,8 @@ page{
}
.content-box{
position: relative;
/* margin-top: -120rpx; */
padding-top: 24rpx;
width: 100%;
}
.ring-chart-box .chart-box .chart-item .name{
font-size: 24rpx;
......@@ -347,6 +383,7 @@ page{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
padding: 0 5rpx;
}
.ring-chart-box .chart-box .chart-item .count{
font-size:24rpx;
......@@ -715,4 +752,6 @@ cover-view{
}
.guide-step5 .guide-line{
top: 710rpx;
}
\ No newline at end of file
}
export default {
imageRoot: 'https://cdn.img.shangjiadao.cn/qingxiao/daka/images/',
host: 'https://qxapi.qingxiao.online/daka',
host2: 'https://wx.m.shangjiadao.cn',
// host: 'https://qxapi.qingxiao.online/daka',
// host2: 'https://wx.m.shangjiadao.cn',
storageVersion: '5.0',
imageVersion: '20191104',
// host: 'https://clock.wp53.cn',
// host2: 'https://test.wp53.cn',
host: 'https://clock.wp53.cn',
host2: 'https://test.wp53.cn',
appId: 'wxc1246ea029394785',
miniProgram: {
clock: 'wxdeee20e52a1fd7ee'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment