Skip to content

C
CFFP-HB
Commit 596c30ac by kyle
Options

学习统计

parent a725c271
Showing with 219 additions and 29 deletions
pages/learningStatistics/learningStatistics.vue
......@@ -22,11 +22,74 @@
<view class="progressBox">
<text>0</text>
<view class="progressLine">
<view class="bgLine" :style="{width:userStudyCountList.progressBarTotal+'%'}">{{userStudyCountList.progressBarTotal}}%</view>
<view class="bgLine" :style="{width:userStudyCountList.progressBarTotal+'%'}">
<text v-if="userStudyCountList.progressBarTotal > 50">{{userStudyCountList.progressBarTotal}}%</text>
</view>
<view class="blankBox" :style="{width:(100- userStudyCountList.progressBarTotal)+'%'}" v-if="userStudyCountList.progressBarTotal <= 50">{{userStudyCountList.progressBarTotal}}%</view>
</view>
<text>100%</text>
</view>
</view>
<!-- 进度明细 -->
<view class="progressDetailBox">
<view class="progressTitleBox">
<h4><i class="iconfont icon-shalou"></i>进度明细</h4>
<i class="iconfont icon-youjiantou" @click="state.package=!state.package" :style="{transform: state.package ? 'rotate(90deg)' : 'rotate(-90deg)' }"></i>
</view>
<template v-if="state.package">
<view class="progressItemBox" v-for="(item,index) in userStudyCountList.barInfos" :key="index">
<!-- 课程大类 -->
<view class="packageItem">
<view class="progressTopBox">
<view class="no">{{index + 1}}.</view>
<view class="progressBox">
<text>0</text>
<view class="progressLine">
<view class="bgLine" :style="{width:item.progressBar+'%'}">
<text v-if="parseFloat(item.progressBar) > 50">{{item.progressBar}}%</text>
</view>
<view class="blankBox" :style="{width:(100- parseFloat(item.progressBar))+'%'}" v-if="parseFloat(item.progressBar) <= 50">{{parseFloat(item.progressBar)}}%</view>
</view>
<text>100%</text>
</view>
</view>
<view class="progressBottomBox">
<text>{{item.fileTitle}}</text>
<i class="iconfont icon-youjiantou" @click="item['state']=!item['state'];userCoursePackBar(item['state'],item.packFileId,item.orderId)" :style="{transform: item['state'] ? 'rotate(90deg)' : 'rotate(-90deg)' }"></i>
</view>
</view>
<!-- 小课 -->
<view class="fileItemBox" v-if="item['state']">
<view class="fileItem" v-for="subItem in userCoursePackBarList">
<view class="topBox progressBox">
<text class="no">0</text>
<view class="progressLine">
<view class="bgLine" :style="{width:subItem.progressBar+'%'}">
<text v-if="parseFloat(subItem.progressBar) > 50">{{subItem.progressBar}}%</text>
</view>
<view class="blankBox" :style="{width:(100- parseFloat(subItem.progressBar))+'%'}" v-if="parseFloat(subItem.progressBar) <= 50">{{subItem.progressBar}}%</view>
</view>
<text>100%</text>
</view>
<view class="bottomBox">
{{subItem.fileTitle}}
</view>
</view>
</view>
</view>
</template>
</view>
<!-- 学习明细 -->
<view class="studyDetailBox">
<h4>学习明细</h4>
<view class="lineChartBox">
</view>
<view class="calendarBox">
</view>
</view>
</view>
</template>
......@@ -39,9 +102,11 @@
userStudyCountList:{},
userCoursePackBarList:{},
userStudyTimeList:{},
packFileId:'',
orderId:'',
month:''
month:'',
state:{
package:false,
file:false
}
};
},
methods:{
......@@ -52,10 +117,13 @@
}
})
},
userCoursePackBar(){
api.userCoursePackBar({userId:this.userId,packFileId:this.packFileId,orderId:this.orderId}).then(res=>{
userCoursePackBar(state,packFileId,orderId){
if(!packFileId || !state){
return false;
}
api.userCoursePackBar({userId:this.userId,packFileId:packFileId,orderId:orderId}).then(res=>{
if(res['success']){
this.userCoursePackBarList = res['data'];
this.userCoursePackBarList = res['data']['barInfos'];
}
})
},
......@@ -97,7 +165,7 @@
border-right: 1px solid #F4F4F4;
}
}
.studyProgressBox{
.studyProgressBox,.studyDetailBox{
h4{
position: relative;
font-size: 36rpx;
......@@ -117,26 +185,114 @@
border-radius: 4rpx;
}
}
.progressBox{
}
.progressDetailBox{
.progressTitleBox{
display: flex;
align-items: center;
padding: 0 40rpx;
.progressLine{
width: 90%;
height: 60rpx;
border-radius: 36rpx;
border: 4rpx solid #0867F5;
margin: 0 20rpx;
.bgLine{
height: 100%;
background-color: #0867F5;
border-top-left-radius: 36rpx;
border-bottom-left-radius: 36rpx;
justify-content: space-between;
padding: 16rpx 36rpx;
font-size: 36rpx;
background-color: #fff;
color: #333;
.iconfont{
color: #666;
transform: rotate(90deg);
}
h4{
.iconfont{
color: #0A2F99;
margin-right: 16rpx;
}
}
}
.progressItemBox{
padding: 18rpx 10rpx;
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
border-radius: 10rpx;
margin: 20rpx 36rpx;
.packageItem{
.progressTopBox{
display: flex;
align-items: center;
justify-content: center;
color: #fff;
.no{
max-width: 3ch;
margin-right: 10rpx;
color: #000;
font-size: 30rpx;
}
.progressBox{
width: calc(100% - 3ch);
padding: 0;
}
}
.progressBottomBox{
color: #333;
text-align: center;
margin: 10rpx auto;
.iconfont{
display: inline-block;;
color: #666;
transform: rotate(-90deg);
}
}
}
.fileItemBox{
border-radius: 10rpx;
margin: 10rpx;
.fileItem{
padding: 20rpx 0;
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
margin-bottom: 20rpx;
.topBox{
display: flex;
justify-content: flex-start;
.no{
max-width: 3ch;
}
.progressLine{
height: 40rpx;
}
}
.bottomBox{
text-align: center;
color: #666;
font-size: 24rpx;
margin-top: 10rpx;
}
}
}
}
}
.progressBox{
display: flex;
align-items: center;
padding: 0 40rpx;
color: #666;
.progressLine{
position: relative;
width: 90%;
height: 60rpx;
border-radius: 36rpx;
border: 4rpx solid #0867F5;
margin: 0 20rpx;
display: flex;
align-items: center;
overflow: hidden;
.bgLine{
height: 100%;
background-color: #0867F5;
border-top-left-radius: 36rpx;
border-bottom-left-radius: 36rpx;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
position: relative;
}
.blankBox{
}
}
}
......
static/font/demo_index.html
......@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">沙漏</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xea82;</span>
<div class="name">24gf-playCircle</div>
<div class="code-name">&amp;#xea82;</div>
......@@ -294,9 +300,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1669109385781') format('woff2'),
url('iconfont.woff?t=1669109385781') format('woff'),
url('iconfont.ttf?t=1669109385781') format('truetype');
src: url('iconfont.woff2?t=1669254238919') format('woff2'),
url('iconfont.woff?t=1669254238919') format('woff'),
url('iconfont.ttf?t=1669254238919') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -323,6 +329,15 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-shalou"></span>
<div class="name">
沙漏
</div>
<div class="code-name">.icon-shalou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-24gf-playCircle"></span>
<div class="name">
24gf-playCircle
......@@ -684,6 +699,14 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shalou"></use>
</svg>
<div class="name">沙漏</div>
<div class="code-name">#icon-shalou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-24gf-playCircle"></use>
</svg>
<div class="name">24gf-playCircle</div>
......
static/font/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 3749283 */
src: url('iconfont.woff2?t=1669109385781') format('woff2'),
url('iconfont.woff?t=1669109385781') format('woff'),
url('iconfont.ttf?t=1669109385781') format('truetype');
src: url('iconfont.woff2?t=1669254238919') format('woff2'),
url('iconfont.woff?t=1669254238919') format('woff'),
url('iconfont.ttf?t=1669254238919') format('truetype');
}
.iconfont {
......@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-shalou:before {
content: "\e62e";
}
.icon-24gf-playCircle:before {
content: "\ea82";
}
......
static/font/iconfont.json
......@@ -6,6 +6,13 @@
"description": "",
"glyphs": [
{
"icon_id": "2023263",
"name": "沙漏",
"font_class": "shalou",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "7594157",
"name": "24gf-playCircle",
"font_class": "24gf-playCircle",
......
static/font/iconfont.ttf
No preview for this file type
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