mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 03:46:44 +08:00
排行榜完成
This commit is contained in:
zhaofang
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 7.8 KiB |
BIN
public/images/homeWu/u-wu.png
Normal file
BIN
public/images/homeWu/u-wu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/images/study-info.png
Normal file
BIN
public/images/study-info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
@@ -10,13 +10,20 @@
|
||||
<h6>U币历史记录</h6><span>（最多保留近7天的记录）</span>
|
||||
<div style="width:100%;height:290px" ref="chart"></div>
|
||||
</div>
|
||||
<div class="my-Recording" v-for="(day, index) in uCoinRecord" :key="index">
|
||||
<h3>{{day.dayNmae}}</h3>
|
||||
<div class="Recording-info" v-for="info in day.list">
|
||||
<div class="info-tit">{{getUType(info.eventKey)}}</div>
|
||||
<div class="info-Gold"><img src="../../../public/images/Uimg.png" alt="">{{info.uvalue > 0? '+':''}} {{info.uvalue}}</div>
|
||||
<div v-if="uCoinRecord.length > 0">
|
||||
<div class="my-Recording" v-for="(day, index) in uCoinRecord" :key="index">
|
||||
<h3>{{day.dayNmae}}</h3>
|
||||
<div class="Recording-info" v-for="info in day.list">
|
||||
<div class="info-tit">{{getUType(info.eventKey)}}</div>
|
||||
<div class="info-Gold"><img src="../../../public/images/Uimg.png" alt="">{{info.uvalue > 0? '+':''}} {{info.uvalue}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="home-no-list">
|
||||
<img class="img" style="width:76px;height:76px" src="/images/homeWu/u-wu.png" alt="" srcset="">
|
||||
<p class="text">最近7天你可能太忙了，快开始 努力获得U币吧</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -29,7 +36,7 @@
|
||||
<div class="exp-hear-xiala">
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link pointer">
|
||||
累计<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
{{name}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="total">累计</el-dropdown-item>
|
||||
@@ -45,7 +52,7 @@
|
||||
我的排名 : <span> {{currentUserRankingData.rankingNo}}</span>
|
||||
</div>
|
||||
<div class="myexperience">
|
||||
我的经验值 : <span> {{currentUserRankingData.total}}</span>
|
||||
我的经验值 : <span>{{currentUserRankingData.total || currentUserRankingData.months || currentUserRankingData.years || currentUserRankingData.weeks}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-bar">
|
||||
@@ -83,7 +90,7 @@
|
||||
<div class="omit">
|
||||
<div>.</div> <div>.</div> <div>.</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-if="currentUserRankingData.authorInfo && currentUserRankingData.authorInfo.aid">
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >{{currentUserRankingData.rankingNo}}</div>
|
||||
<div class="tab-name"><author-img :avatar="currentUserRankingData.authorInfo.avatar" :aid="currentUserRankingData.authorInfo.aid" :sex="currentUserRankingData.authorInfo.sex"></author-img> <span style="color: #0059FF;">{{currentUserRankingData.authorInfo.name}}</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">{{currentUserRankingData.authorInfo.orgInfo}}</div>
|
||||
@@ -194,6 +201,7 @@
|
||||
data(){
|
||||
return{
|
||||
cycle:'total',
|
||||
name:'累计',
|
||||
getUType,
|
||||
dialogVisible:false,
|
||||
tableData:[
|
||||
@@ -220,8 +228,21 @@
|
||||
this.getRanking();
|
||||
},
|
||||
methods:{
|
||||
translate(field) {
|
||||
let name = '';
|
||||
switch (field) {
|
||||
case 'total':name = '累计'; break;
|
||||
case 'weeks':name = '本周'; break;
|
||||
case 'months':name = '本月'; break;
|
||||
case 'years':name = '本年'; break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return name;
|
||||
},
|
||||
handleCommand(e) {
|
||||
this.cycle = e;
|
||||
this.name = this.translate(e)
|
||||
this.getRanking();
|
||||
},
|
||||
getRanking() {
|
||||
@@ -242,10 +263,8 @@
|
||||
}
|
||||
this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
|
||||
this.currentUserRankingData = res.result.currentUserRankingData;
|
||||
console.log(this.currentUserRankingData,'this.currentUserRankingData');
|
||||
const ids= [];
|
||||
res.result.rankingData.forEach(item=>{
|
||||
item.aid = '952948626497724414'
|
||||
ids.push(item.aid)
|
||||
item.authorInfo = {
|
||||
aid: "",
|
||||
|
||||
@@ -1,31 +1,33 @@
|
||||
<template>
|
||||
<div style="padding:26px 40px;display:flex;overflow-x: auto;">
|
||||
<div class="experience">
|
||||
|
||||
<div class="experience" style="margin-right:72px">
|
||||
<div class="exp-hear">
|
||||
<div class="exp-hear-text">
|
||||
经验值排行榜
|
||||
经验值排行榜<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
|
||||
<span class="exp-hear-textbor"></span>
|
||||
</div>
|
||||
<div class="exp-hear-xiala">
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
累计<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>累计</el-dropdown-item>
|
||||
<el-dropdown-item>本周</el-dropdown-item>
|
||||
<el-dropdown-item>本月</el-dropdown-item>
|
||||
<el-dropdown-item>本年</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<el-dropdown trigger="click" @command="experienceCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{experience.name}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="total">累计</el-dropdown-item>
|
||||
<el-dropdown-item command="weeks">本周</el-dropdown-item>
|
||||
<el-dropdown-item command="months">本月</el-dropdown-item>
|
||||
<el-dropdown-item command="years">本年</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myselftext">
|
||||
<div class="myranking">
|
||||
我的排名 : <span> 128</span>
|
||||
我的排名 : <span> {{experience.data.rankingNo}}</span>
|
||||
</div>
|
||||
<div class="myexperience">
|
||||
我的经验值 : <span> 367</span>
|
||||
我的经验值 : <span>{{experience.data.total || experience.data.months || experience.data.years || experience.data.weeks}}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-bar">
|
||||
@@ -46,44 +48,23 @@
|
||||
<!-- <div class="jy">经验值</div> -->
|
||||
</div>
|
||||
<div style="height:450px;overflow-y:auto">
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank1.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(ran,index) in experience.list" :key="ran.id">
|
||||
<div class="tab-rank" >
|
||||
<img v-if="index ==0" src="../../../public/images/rank1.png" alt=""/>
|
||||
<img v-if="index ==1" src="../../../public/images/rank2.png" alt=""/>
|
||||
<img v-if="index ==2" src="../../../public/images/rank3.png" alt=""/>
|
||||
<div v-if="index >2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{index+1}}</div>
|
||||
</div>
|
||||
<div class="tab-name">
|
||||
<author-img :avatar="ran.authorInfo.avatar" :aid="ran.authorInfo.aid" :sex="ran.authorInfo.sex"></author-img>
|
||||
<div>
|
||||
<span>{{ran.authorInfo.name}}</span>
|
||||
<div class="tab-bm">{{ran.authorInfo.orgInfo}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank2.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank3.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">4</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">5</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.total}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,42 +72,49 @@
|
||||
<div>.</div> <div>.</div> <div>.</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >{{experience.data.rankingNo}}</div>
|
||||
<div class="tab-name" v-if="experience.data.authorInfo && experience.data.authorInfo.aid">
|
||||
<author-img :avatar="experience.data.authorInfo.avatar" :aid="experience.data.authorInfo.aid" :sex="experience.data.authorInfo.sex"></author-img>
|
||||
<div>
|
||||
<span style="color: #0059FF;">{{experience.data.authorInfo.name}}</span>
|
||||
<div class="tab-bm" style="color: #0059FF;">{{experience.data.authorInfo.orgInfo}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">1093</div>
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.total}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<di class="Duration">
|
||||
|
||||
<div class="Duration" style="margin-right:72px">
|
||||
<div class="exp-hear">
|
||||
<div class="exp-hear-text">
|
||||
学习时长排行榜
|
||||
学习时长排行榜<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
|
||||
<span class="exp-hear-textbor"></span>
|
||||
</div>
|
||||
<div class="exp-hear-xiala">
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
累计<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>累计</el-dropdown-item>
|
||||
<el-dropdown-item>本周</el-dropdown-item>
|
||||
<el-dropdown-item>本月</el-dropdown-item>
|
||||
<el-dropdown-item>本年</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<el-dropdown trigger="click" @command="durationCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{learningDuration.name}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="total">累计</el-dropdown-item>
|
||||
<el-dropdown-item command="weeks">本周</el-dropdown-item>
|
||||
<el-dropdown-item command="months">本月</el-dropdown-item>
|
||||
<el-dropdown-item command="years">本年</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myselftext">
|
||||
<div class="myranking">
|
||||
我的排名 : <span> 128</span>
|
||||
我的排名 : <span> {{learningDuration.data.rankingNo}}</span>
|
||||
</div>
|
||||
<div class="myexperience">
|
||||
我的经验值 : <span> 367</span>
|
||||
我的学习时长: <span> {{learningDuration.data.total || learningDuration.data.months || learningDuration.data.years || learningDuration.data.weeks}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-table">
|
||||
@@ -134,47 +122,24 @@
|
||||
<div style="margin-left:5px">排名</div>
|
||||
<div style="margin-left:5px">姓名</div>
|
||||
<div class="bm">部门</div>
|
||||
<div class="jy">经验值</div>
|
||||
</div>
|
||||
<div style="height:500px;overflow-y:auto">
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank1.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(lan,idx) in learningDuration.list" :key="lan.id">
|
||||
<div class="tab-rank">
|
||||
<img v-if="idx ==0" src="../../../public/images/rank1.png" alt=""/>
|
||||
<img v-if="idx ==1" src="../../../public/images/rank2.png" alt=""/>
|
||||
<img v-if="idx ==2" src="../../../public/images/rank3.png" alt=""/>
|
||||
<div v-if="idx >2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{idx+1}}</div>
|
||||
</div>
|
||||
<div class="tab-name">
|
||||
<author-img :avatar="lan.authorInfo.avatar" :aid="lan.authorInfo.aid" :sex="lan.authorInfo.sex"></author-img>
|
||||
<div>
|
||||
<span>{{lan.authorInfo.name}}</span>
|
||||
<div class="tab-bm">{{lan.authorInfo.orgInfo}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank2.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank3.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">4</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">5</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">{{lan.total}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -182,41 +147,47 @@
|
||||
<div>.</div> <div>.</div> <div>.</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >{{learningDuration.data.rankingNo}}</div>
|
||||
<div class="tab-name" v-if="learningDuration.data.authorInfo && learningDuration.data.authorInfo.aid">
|
||||
<author-img :avatar="learningDuration.data.authorInfo.avatar" :aid="learningDuration.data.authorInfo.aid" :sex="learningDuration.data.authorInfo.sex"></author-img>
|
||||
<div>
|
||||
<span style="color: #0059FF;">{{learningDuration.data.authorInfo.name}}</span>
|
||||
<div class="tab-bm" style="color: #0059FF;">{{learningDuration.data.authorInfo.orgInfo}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">1093</div>
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDuration.data.total}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</di>
|
||||
<di class="Duration">
|
||||
<div class="exp-hear">
|
||||
</div>
|
||||
|
||||
<div class="Duration">
|
||||
<div class="exp-hear study-info">
|
||||
<div class="exp-hear-text">
|
||||
学习天数排行榜
|
||||
<span class="exp-hear-textbor"></span>
|
||||
学习天数排行榜<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
|
||||
<span class="exp-hear-textbor" style="background:#f1b48f !important"></span>
|
||||
</div>
|
||||
<div class="exp-hear-xiala">
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
累计<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>累计</el-dropdown-item>
|
||||
<el-dropdown-item>本周</el-dropdown-item>
|
||||
<el-dropdown-item>本月</el-dropdown-item>
|
||||
<el-dropdown-item>本年</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<el-dropdown trigger="click" @command="daysCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{learningDays.name}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="total">累计</el-dropdown-item>
|
||||
<el-dropdown-item command="weeks">本周</el-dropdown-item>
|
||||
<el-dropdown-item command="months">本月</el-dropdown-item>
|
||||
<el-dropdown-item command="years">本年</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myselftext">
|
||||
<div class="myranking">
|
||||
我的排名 : <span> 128</span>
|
||||
我的排名 : <span> {{learningDays.data.rankingNo}}</span>
|
||||
</div>
|
||||
<div class="myexperience">
|
||||
我的经验值 : <span> 367</span>
|
||||
我的学习天数 : <span>{{learningDays.data.total || learningDays.data.months || learningDays.data.years || learningDays.data.weeks}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-table">
|
||||
@@ -224,47 +195,25 @@
|
||||
<div style="margin-left:5px">排名</div>
|
||||
<div style="margin-left:5px">姓名</div>
|
||||
<div class="bm">学习天数</div>
|
||||
<!-- <div class="jy">经验值</div> -->
|
||||
</div>
|
||||
<div style="height:500px;overflow-y:auto">
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank1.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span></div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(day,inx) in learningDays.list" :key="day.id">
|
||||
<div class="tab-rank" >
|
||||
<img v-if="inx ==0" src="../../../public/images/rank1.png" alt=""/>
|
||||
<img v-if="inx ==1" src="../../../public/images/rank2.png" alt=""/>
|
||||
<img v-if="inx ==2" src="../../../public/images/rank3.png" alt=""/>
|
||||
<div v-if="inx >2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{inx+1}}</div>
|
||||
</div>
|
||||
<div class="tab-name">
|
||||
<author-img :avatar="day.authorInfo.avatar" :aid="day.authorInfo.aid" :sex="day.authorInfo.sex"></author-img>
|
||||
<div>
|
||||
<span>{{day.authorInfo.name}}</span>
|
||||
<div class="tab-bm" style="margin-left:30px;">{{day.authorInfo.orgInfo}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank2.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div class="tab-rank" ><img src="../../../public/images/rank3.png" alt=""></div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">4</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">5</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">{{day.total}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -272,25 +221,233 @@
|
||||
<div>.</div> <div>.</div> <div>.</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</div>
|
||||
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div>
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >{{learningDays.data.rankingNo}}</div>
|
||||
<div class="tab-name" v-if="learningDays.data.authorInfo && learningDays.data.authorInfo.aid">
|
||||
<author-img :avatar="learningDays.data.authorInfo.avatar" :aid="learningDays.data.authorInfo.aid" :sex="learningDays.data.authorInfo.sex"></author-img>
|
||||
<div>
|
||||
<span style="color: #0059FF;">{{learningDays.data.authorInfo.name}}</span>
|
||||
<div class="tab-bm" style="color: #0059FF;">{{learningDays.data.authorInfo.orgInfo}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">1093</div>
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.total}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</di>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apiUser from "@/api/system/user.js";
|
||||
import apiStat from '@/api/phase2/stat.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
import authorImg from '@/components/Portal/authorImg.vue';
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['userInfo']),
|
||||
|
||||
},
|
||||
components: {authorImg},
|
||||
data(){
|
||||
return{
|
||||
|
||||
experience:{
|
||||
field:'total',
|
||||
name:'累计',
|
||||
data:{
|
||||
rankingNo:0,
|
||||
total:0
|
||||
},
|
||||
list:[],
|
||||
},
|
||||
learningDuration:{
|
||||
field:'total',
|
||||
name:'累计',
|
||||
data:{
|
||||
rankingNo:0,
|
||||
total:0
|
||||
},
|
||||
list:[],
|
||||
},
|
||||
learningDays:{
|
||||
field:'total',
|
||||
name:'累计',
|
||||
data:{
|
||||
rankingNo:0,
|
||||
total:0
|
||||
},
|
||||
list:[],
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getExperience();
|
||||
this.getDuration();
|
||||
this.getDays();
|
||||
},
|
||||
methods:{
|
||||
translate(field) {
|
||||
let name = '';
|
||||
switch (field) {
|
||||
case 'total':name = '累计'; break;
|
||||
case 'weeks':name = '本周'; break;
|
||||
case 'months':name = '本月'; break;
|
||||
case 'years':name = '本年'; break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return name;
|
||||
},
|
||||
experienceCommand(e) {
|
||||
this.experience.field = e;
|
||||
this.experience.name = this.translate(e)
|
||||
this.getExperience();
|
||||
},
|
||||
durationCommand(e) {
|
||||
this.learningDuration.field = e;
|
||||
this.learningDuration.name = this.translate(e)
|
||||
this.getDuration();
|
||||
},
|
||||
daysCommand(e) {
|
||||
this.learningDays.field = e;
|
||||
this.learningDays.name = this.translate(e)
|
||||
this.getExperience();
|
||||
},
|
||||
getExperience() {//经验值
|
||||
let data = {
|
||||
aid:this.userInfo.aid,// #用户id
|
||||
statType:20, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||||
field:this.experience.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||||
num:4,// #显示的条数
|
||||
}
|
||||
apiStat.getRanking(data).then(res=>{
|
||||
if(res.status==200){
|
||||
if(res.result.currentUserRankingData) {
|
||||
res.result.currentUserRankingData.authorInfo={
|
||||
aid: "",
|
||||
name: "",
|
||||
orgInfo: "",
|
||||
avatar: "",
|
||||
sex: null
|
||||
}
|
||||
this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
|
||||
this.experience.data = res.result.currentUserRankingData;
|
||||
}
|
||||
const ids= [];
|
||||
res.result.rankingData.forEach(item=>{
|
||||
ids.push(item.aid)
|
||||
item.authorInfo = {
|
||||
aid: "",
|
||||
name: "",
|
||||
orgInfo: "",
|
||||
avatar: "",
|
||||
sex: null
|
||||
}
|
||||
})
|
||||
this.getUserData(ids,res.result.rankingData)
|
||||
this.experience.list = res.result.rankingData;
|
||||
}
|
||||
})
|
||||
},
|
||||
getDuration() {//学习时长
|
||||
let data = {
|
||||
aid:this.userInfo.aid,// #用户id
|
||||
statType:10, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||||
field:this.learningDuration.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||||
num:4,// #显示的条数
|
||||
}
|
||||
apiStat.getRanking(data).then(res=>{
|
||||
if(res.status==200){
|
||||
if(res.result.currentUserRankingData) {
|
||||
res.result.currentUserRankingData.authorInfo={
|
||||
aid: "",
|
||||
name: "",
|
||||
orgInfo: "",
|
||||
avatar: "",
|
||||
sex: null
|
||||
}
|
||||
this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
|
||||
this.learningDuration.data = res.result.currentUserRankingData;
|
||||
}
|
||||
|
||||
|
||||
const ids= [];
|
||||
res.result.rankingData.forEach(item=>{
|
||||
ids.push(item.aid)
|
||||
item.authorInfo = {
|
||||
aid: "",
|
||||
name: "",
|
||||
orgInfo: "",
|
||||
avatar: "",
|
||||
sex: null
|
||||
}
|
||||
})
|
||||
this.getUserData(ids,res.result.rankingData)
|
||||
this.learningDuration.list = res.result.rankingData;
|
||||
}
|
||||
})
|
||||
},
|
||||
getDays() {//学习天数
|
||||
let data = {
|
||||
aid:this.userInfo.aid,// #用户id
|
||||
statType:11, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||||
field:this.learningDays.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||||
num:4,// #显示的条数
|
||||
}
|
||||
apiStat.getRanking(data).then(res=>{
|
||||
if(res.status==200){
|
||||
if(res.result.currentUserRankingData) {
|
||||
res.result.currentUserRankingData.authorInfo={
|
||||
aid: "",
|
||||
name: "",
|
||||
orgInfo: "",
|
||||
avatar: "",
|
||||
sex: null
|
||||
}
|
||||
this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData]);
|
||||
this.learningDays.data = res.result.currentUserRankingData;
|
||||
}
|
||||
|
||||
const ids= [];
|
||||
res.result.rankingData.forEach(item=>{
|
||||
ids.push(item.aid)
|
||||
item.authorInfo = {
|
||||
aid: "",
|
||||
name: "",
|
||||
orgInfo: "",
|
||||
avatar: "",
|
||||
sex: null
|
||||
}
|
||||
})
|
||||
this.getUserData(ids,res.result.rankingData)
|
||||
this.learningDays.list = res.result.rankingData;
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserData(ids,list) {
|
||||
const noReapetIds = [...new Set(ids)];
|
||||
apiUser.getByIds(noReapetIds).then(res => {
|
||||
if (res.status == 200) {
|
||||
list.forEach((item, index) => {
|
||||
res.result.some(author => {
|
||||
if (author.aid == item.aid) {
|
||||
item.authorInfo = author;
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -310,14 +467,15 @@ export default {
|
||||
display: flex;
|
||||
div{
|
||||
// margin-right: 13%;
|
||||
min-width: 90px;
|
||||
min-width: 52px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
.bm{
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
// flex: 1;
|
||||
margin-left: 50%;
|
||||
// float: right;
|
||||
}
|
||||
.jy{
|
||||
margin-left: auto;
|
||||
@@ -375,9 +533,15 @@ export default {
|
||||
}
|
||||
}
|
||||
.tab-bm{
|
||||
line-height: 40px;
|
||||
font-size: 12px !important;
|
||||
color: #666666;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.tab-name{
|
||||
display: flex;
|
||||
::v-deep .item-author{
|
||||
min-width: 54px !important;
|
||||
}
|
||||
img{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@@ -400,8 +564,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.experience{
|
||||
flex: 1;
|
||||
margin-right: 118px;
|
||||
min-width: 400px;
|
||||
|
||||
.exp-hear{
|
||||
width: 100%;
|
||||
@@ -478,15 +641,18 @@ export default {
|
||||
}
|
||||
}
|
||||
.Duration{
|
||||
margin-right: 118px;
|
||||
flex: 1;
|
||||
min-width: 400px;
|
||||
.study-info{
|
||||
height: 62px !important;
|
||||
background: url('../../../public/images/study-info.png') no-repeat 100% / 100% !important;
|
||||
}
|
||||
.exp-hear{
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
height: 62px;
|
||||
background: url('../../../public/images/Durbg.png') no-repeat 100% / 100%;
|
||||
.exp-hear-text{
|
||||
float: left;
|
||||
line-height: 65px;
|
||||
line-height: 62px;
|
||||
margin-left: 25px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
Reference in New Issue
Block a user