hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-11 11:56:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

排行榜完成

Browse Source
This commit is contained in:
zhaofang
2022-09-26 17:55:13 +08:00
parent 8b2c1afabd
commit 154af6e634
6 changed files with 378 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/Durbg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
public/images/expbg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
public/images/homeWu/u-wu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/images/study-info.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

39
src/views/ucurrency/Index.vue
View File

@@ -10,13 +10,20 @@
<h6>U币历史记录</h6><span>（最多保留近7天的记录）</span> <h6>U币历史记录</h6><span>（最多保留近7天的记录）</span>
<div style="width:100%;height:290px" ref="chart"></div> <div style="width:100%;height:290px" ref="chart"></div>
</div> </div>
<div class="my-Recording" v-for="(day, index) in uCoinRecord" :key="index"> <div v-if="uCoinRecord.length > 0">
<h3>{{day.dayNmae}}</h3> <div class="my-Recording" v-for="(day, index) in uCoinRecord" :key="index">
<div class="Recording-info" v-for="info in day.list"> <h3>{{day.dayNmae}}</h3>
<div class="info-tit">{{getUType(info.eventKey)}}</div> <div class="Recording-info" v-for="info in day.list">
<div class="info-Gold"><img src="../../../public/images/Uimg.png" alt="">{{info.uvalue > 0? '+':''}} {{info.uvalue}}</div> <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> </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>
</div> </div>
@@ -29,7 +36,7 @@
<div class="exp-hear-xiala"> <div class="exp-hear-xiala">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link pointer"> <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> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="total">累计</el-dropdown-item> <el-dropdown-item command="total">累计</el-dropdown-item>
@@ -45,7 +52,7 @@
我的排名 : <span> {{currentUserRankingData.rankingNo}}</span> 我的排名 : <span> {{currentUserRankingData.rankingNo}}</span>
</div> </div>
<div class="myexperience"> <div class="myexperience">
我的经验值 : <span> {{currentUserRankingData.total}}</span> 我的经验值 : <span>{{currentUserRankingData.total || currentUserRankingData.months || currentUserRankingData.years || currentUserRankingData.weeks}}</span>
</div> </div>
</div> </div>
<div class="exp-bar"> <div class="exp-bar">
@@ -83,7 +90,7 @@
<div class="omit"> <div class="omit">
<div>.</div> <div>.</div> <div>.</div> <div>.</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 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="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> <div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">{{currentUserRankingData.authorInfo.orgInfo}}</div>
@@ -194,6 +201,7 @@
data(){ data(){
return{ return{
cycle:'total', cycle:'total',
name:'累计',
getUType, getUType,
dialogVisible:false, dialogVisible:false,
tableData:[ tableData:[
@@ -220,8 +228,21 @@
this.getRanking(); this.getRanking();
}, },
methods:{ 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) { handleCommand(e) {
this.cycle = e; this.cycle = e;
this.name = this.translate(e)
this.getRanking(); this.getRanking();
}, },
getRanking() { getRanking() {
@@ -242,10 +263,8 @@
} }
this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData]) this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
this.currentUserRankingData = res.result.currentUserRankingData; this.currentUserRankingData = res.result.currentUserRankingData;
console.log(this.currentUserRankingData,'this.currentUserRankingData');
const ids= []; const ids= [];
res.result.rankingData.forEach(item=>{ res.result.rankingData.forEach(item=>{
item.aid = '952948626497724414'
ids.push(item.aid) ids.push(item.aid)
item.authorInfo = { item.authorInfo = {
aid: "", aid: "",

532
src/views/user/ranking.vue
View File

@@ -1,31 +1,33 @@
<template> <template>
<div style="padding:26px 40px;display:flex;overflow-x: auto;"> <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">
<div class="exp-hear-text"> <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> <span class="exp-hear-textbor"></span>
</div> </div>
<div class="exp-hear-xiala"> <div class="exp-hear-xiala">
<el-dropdown trigger="click"> <el-dropdown trigger="click" @command="experienceCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
累计<i class="el-icon-arrow-down el-icon--right"></i> {{experience.name}}<i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item>累计</el-dropdown-item> <el-dropdown-item command="total">累计</el-dropdown-item>
<el-dropdown-item>本周</el-dropdown-item> <el-dropdown-item command="weeks">本周</el-dropdown-item>
<el-dropdown-item>本月</el-dropdown-item> <el-dropdown-item command="months">本月</el-dropdown-item>
<el-dropdown-item>本年</el-dropdown-item> <el-dropdown-item command="years">本年</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<div class="myselftext"> <div class="myselftext">
<div class="myranking"> <div class="myranking">
我的排名 : <span> 128</span> 我的排名 : <span> {{experience.data.rankingNo}}</span>
</div> </div>
<div class="myexperience"> <div class="myexperience">
我的经验值 : <span> 367</span> 我的经验值 : <span>{{experience.data.total || experience.data.months || experience.data.years || experience.data.weeks}}</span>
</div> </div>
</div> </div>
<div class="exp-bar"> <div class="exp-bar">
@@ -46,44 +48,23 @@
<!-- <div class="jy">经验值</div> --> <!-- <div class="jy">经验值</div> -->
</div> </div>
<div style="height:450px;overflow-y:auto"> <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="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 src="../../../public/images/rank1.png" alt=""></div> <div class="tab-rank" >
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div> <img v-if="index ==0" src="../../../public/images/rank1.png" alt=""/>
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div> <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 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 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> </div>
</div> </div>
</div> </div>
@@ -91,42 +72,49 @@
<div>.</div> <div>.</div> <div>.</div> <div>.</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">
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</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"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div> <div class="tab-name" v-if="experience.data.authorInfo && experience.data.authorInfo.aid">
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div> <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 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>
</div> </div>
</div> </div>
<di class="Duration">
<div class="Duration" style="margin-right:72px">
<div class="exp-hear"> <div class="exp-hear">
<div class="exp-hear-text"> <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> <span class="exp-hear-textbor"></span>
</div> </div>
<div class="exp-hear-xiala"> <div class="exp-hear-xiala">
<el-dropdown trigger="click"> <el-dropdown trigger="click" @command="durationCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
累计<i class="el-icon-arrow-down el-icon--right"></i> {{learningDuration.name}}<i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item>累计</el-dropdown-item> <el-dropdown-item command="total">累计</el-dropdown-item>
<el-dropdown-item>本周</el-dropdown-item> <el-dropdown-item command="weeks">本周</el-dropdown-item>
<el-dropdown-item>本月</el-dropdown-item> <el-dropdown-item command="months">本月</el-dropdown-item>
<el-dropdown-item>本年</el-dropdown-item> <el-dropdown-item command="years">本年</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<div class="myselftext"> <div class="myselftext">
<div class="myranking"> <div class="myranking">
我的排名 : <span> 128</span> 我的排名 : <span> {{learningDuration.data.rankingNo}}</span>
</div> </div>
<div class="myexperience"> <div class="myexperience">
我的经验值 : <span> 367</span> 我的学习时长: <span> {{learningDuration.data.total || learningDuration.data.months || learningDuration.data.years || learningDuration.data.weeks}}</span>
</div> </div>
</div> </div>
<div class="exp-table"> <div class="exp-table">
@@ -134,47 +122,24 @@
<div style="margin-left:5px">排名</div> <div style="margin-left:5px">排名</div>
<div style="margin-left:5px">姓名</div> <div style="margin-left:5px">姓名</div>
<div class="bm">部门</div> <div class="bm">部门</div>
<div class="jy">经验值</div>
</div> </div>
<div style="height:500px;overflow-y:auto"> <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="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 src="../../../public/images/rank1.png" alt=""></div> <div class="tab-rank">
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div> <img v-if="idx ==0" src="../../../public/images/rank1.png" alt=""/>
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div> <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 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 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> </div>
</div> </div>
</div> </div>
@@ -182,41 +147,47 @@
<div>.</div> <div>.</div> <div>.</div> <div>.</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">
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</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"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div> <div class="tab-name" v-if="learningDuration.data.authorInfo && learningDuration.data.authorInfo.aid">
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div> <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 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> </div>
</div> </div>
</di> </div>
<di class="Duration">
<div class="exp-hear"> <div class="Duration">
<div class="exp-hear study-info">
<div class="exp-hear-text"> <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> <span class="exp-hear-textbor" style="background:#f1b48f !important"></span>
</div> </div>
<div class="exp-hear-xiala"> <div class="exp-hear-xiala">
<el-dropdown trigger="click"> <el-dropdown trigger="click" @command="daysCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
累计<i class="el-icon-arrow-down el-icon--right"></i> {{learningDays.name}}<i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item>累计</el-dropdown-item> <el-dropdown-item command="total">累计</el-dropdown-item>
<el-dropdown-item>本周</el-dropdown-item> <el-dropdown-item command="weeks">本周</el-dropdown-item>
<el-dropdown-item>本月</el-dropdown-item> <el-dropdown-item command="months">本月</el-dropdown-item>
<el-dropdown-item>本年</el-dropdown-item> <el-dropdown-item command="years">本年</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<div class="myselftext"> <div class="myselftext">
<div class="myranking"> <div class="myranking">
我的排名 : <span> 128</span> 我的排名 : <span> {{learningDays.data.rankingNo}}</span>
</div> </div>
<div class="myexperience"> <div class="myexperience">
我的经验值 : <span> 367</span> 我的学习天数 : <span>{{learningDays.data.total || learningDays.data.months || learningDays.data.years || learningDays.data.weeks}}</span>
</div> </div>
</div> </div>
<div class="exp-table"> <div class="exp-table">
@@ -224,47 +195,25 @@
<div style="margin-left:5px">排名</div> <div style="margin-left:5px">排名</div>
<div style="margin-left:5px">姓名</div> <div style="margin-left:5px">姓名</div>
<div class="bm">学习天数</div> <div class="bm">学习天数</div>
<!-- <div class="jy">经验值</div> -->
</div> </div>
<div style="height:500px;overflow-y:auto"> <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="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 src="../../../public/images/rank1.png" alt=""></div> <div class="tab-rank" >
<div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span></div> <img v-if="inx ==0" src="../../../public/images/rank1.png" alt=""/>
<div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div> <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 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 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> </div>
</div> </div>
</div> </div>
@@ -272,25 +221,233 @@
<div>.</div> <div>.</div> <div>.</div> <div>.</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">
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</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"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div> <div class="tab-name" v-if="learningDays.data.authorInfo && learningDays.data.authorInfo.aid">
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div> <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 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> </div>
</div> </div>
</di> </div>
</div> </div>
</template> </template>
<script> <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 { export default {
computed: {
...mapGetters(['userInfo']),
},
components: {authorImg},
data(){ data(){
return{ 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> </script>
@@ -310,14 +467,15 @@ export default {
display: flex; display: flex;
div{ div{
// margin-right: 13%; // margin-right: 13%;
min-width: 90px; min-width: 52px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
} }
.bm{ .bm{
flex: 1; // flex: 1;
margin-left: 20px; margin-left: 50%;
// float: right;
} }
.jy{ .jy{
margin-left: auto; margin-left: auto;
@@ -375,9 +533,15 @@ export default {
} }
} }
.tab-bm{ .tab-bm{
line-height: 40px; font-size: 12px !important;
color: #666666;
margin-top: 7px;
} }
.tab-name{ .tab-name{
display: flex;
::v-deep .item-author{
min-width: 54px !important;
}
img{ img{
width: 40px; width: 40px;
height: 40px; height: 40px;
@@ -400,8 +564,7 @@ export default {
} }
} }
.experience{ .experience{
flex: 1; min-width: 400px;
margin-right: 118px;
.exp-hear{ .exp-hear{
width: 100%; width: 100%;
@@ -478,15 +641,18 @@ export default {
} }
} }
.Duration{ .Duration{
margin-right: 118px; min-width: 400px;
flex: 1; .study-info{
height: 62px !important;
background: url('../../../public/images/study-info.png') no-repeat 100% / 100% !important;
}
.exp-hear{ .exp-hear{
width: 100%; width: 100%;
height: 65px; height: 62px;
background: url('../../../public/images/Durbg.png') no-repeat 100% / 100%; background: url('../../../public/images/Durbg.png') no-repeat 100% / 100%;
.exp-hear-text{ .exp-hear-text{
float: left; float: left;
line-height: 65px; line-height: 62px;
margin-left: 25px; margin-left: 25px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;