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 @@ ...@@ -22,11 +22,74 @@
<view class="progressBox"> <view class="progressBox">
<text>0</text> <text>0</text>
<view class="progressLine"> <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> </view>
<text>100%</text> <text>100%</text>
</view> </view>
</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> </view>
</template> </template>
...@@ -39,9 +102,11 @@ ...@@ -39,9 +102,11 @@
userStudyCountList:{}, userStudyCountList:{},
userCoursePackBarList:{}, userCoursePackBarList:{},
userStudyTimeList:{}, userStudyTimeList:{},
packFileId:'', month:'',
orderId:'', state:{
month:'' package:false,
file:false
}
}; };
}, },
methods:{ methods:{
...@@ -52,10 +117,13 @@ ...@@ -52,10 +117,13 @@
} }
}) })
}, },
userCoursePackBar(){ userCoursePackBar(state,packFileId,orderId){
api.userCoursePackBar({userId:this.userId,packFileId:this.packFileId,orderId:this.orderId}).then(res=>{ if(!packFileId || !state){
return false;
}
api.userCoursePackBar({userId:this.userId,packFileId:packFileId,orderId:orderId}).then(res=>{
if(res['success']){ if(res['success']){
this.userCoursePackBarList = res['data']; this.userCoursePackBarList = res['data']['barInfos'];
} }
}) })
}, },
...@@ -97,7 +165,7 @@ ...@@ -97,7 +165,7 @@
border-right: 1px solid #F4F4F4; border-right: 1px solid #F4F4F4;
} }
} }
.studyProgressBox{ .studyProgressBox,.studyDetailBox{
h4{ h4{
position: relative; position: relative;
font-size: 36rpx; font-size: 36rpx;
...@@ -117,26 +185,114 @@ ...@@ -117,26 +185,114 @@
border-radius: 4rpx; border-radius: 4rpx;
} }
} }
.progressBox{ }
.progressDetailBox{
.progressTitleBox{
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 40rpx; justify-content: space-between;
.progressLine{ padding: 16rpx 36rpx;
width: 90%; font-size: 36rpx;
height: 60rpx; background-color: #fff;
border-radius: 36rpx; color: #333;
border: 4rpx solid #0867F5; .iconfont{
margin: 0 20rpx; color: #666;
.bgLine{ transform: rotate(90deg);
height: 100%; }
background-color: #0867F5; h4{
border-top-left-radius: 36rpx; .iconfont{
border-bottom-left-radius: 36rpx; 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; display: flex;
align-items: center; align-items: center;
justify-content: center; .no{
color: #fff; 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 @@ ...@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <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> <span class="icon iconfont">&#xea82;</span>
<div class="name">24gf-playCircle</div> <div class="name">24gf-playCircle</div>
<div class="code-name">&amp;#xea82;</div> <div class="code-name">&amp;#xea82;</div>
...@@ -294,9 +300,9 @@ ...@@ -294,9 +300,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1669109385781') format('woff2'), src: url('iconfont.woff2?t=1669254238919') format('woff2'),
url('iconfont.woff?t=1669109385781') format('woff'), url('iconfont.woff?t=1669254238919') format('woff'),
url('iconfont.ttf?t=1669109385781') format('truetype'); url('iconfont.ttf?t=1669254238919') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -323,6 +329,15 @@ ...@@ -323,6 +329,15 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <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> <span class="icon iconfont icon-24gf-playCircle"></span>
<div class="name"> <div class="name">
24gf-playCircle 24gf-playCircle
...@@ -684,6 +699,14 @@ ...@@ -684,6 +699,14 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <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> <use xlink:href="#icon-24gf-playCircle"></use>
</svg> </svg>
<div class="name">24gf-playCircle</div> <div class="name">24gf-playCircle</div>
......
static/font/iconfont.css
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3749283 */ font-family: "iconfont"; /* Project id 3749283 */
src: url('iconfont.woff2?t=1669109385781') format('woff2'), src: url('iconfont.woff2?t=1669254238919') format('woff2'),
url('iconfont.woff?t=1669109385781') format('woff'), url('iconfont.woff?t=1669254238919') format('woff'),
url('iconfont.ttf?t=1669109385781') format('truetype'); url('iconfont.ttf?t=1669254238919') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-shalou:before {
content: "\e62e";
}
.icon-24gf-playCircle:before { .icon-24gf-playCircle:before {
content: "\ea82"; content: "\ea82";
} }
......
static/font/iconfont.json
...@@ -6,6 +6,13 @@ ...@@ -6,6 +6,13 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "2023263",
"name": "沙漏",
"font_class": "shalou",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "7594157", "icon_id": "7594157",
"name": "24gf-playCircle", "name": "24gf-playCircle",
"font_class": "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