mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-08 02:16:43 +08:00
857 lines
30 KiB
Vue
857 lines
30 KiB
Vue
<template>
|
||
<div class="page-ranking">
|
||
|
||
<div class="page-ranking-col experience">
|
||
<div class="exp-hear">
|
||
<div class="exp-hear-text">
|
||
经验值排行榜
|
||
<el-tooltip placement="top" effect="light">
|
||
<div slot="content" style="line-height:13px;">
|
||
所有用户经验值TOP排行榜单，通过学习、贡献等行为可以获得经验值 。</br></br>
|
||
系统已经根据您在4月23日新系统上线之后产生的学习数据对经验值进行</br>
|
||
<span style="line-height:15px;">了初始化，更早的数据以及老系统中产生的数据，将在2022年底一次性</span></br>
|
||
补充到您的经验值中，请您耐心等待。
|
||
</div>
|
||
<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
|
||
</el-tooltip>
|
||
<span class="exp-hear-textbor"></span>
|
||
</div>
|
||
<div class="exp-hear-xiala">
|
||
<el-dropdown trigger="click" @command="experienceCommand">
|
||
<span class="el-dropdown-link pointer">
|
||
{{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="now">当前</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">
|
||
{{isNow ? '当前' : '累计'}}排名 : <span> {{currentUserRankingTotalData.rankNo}}</span>
|
||
</div>
|
||
<div class="myexperience">
|
||
{{isNow ? '当前' : '累计'}}经验值 : <span>{{currentUserRankingTotalData.rankValue}}</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="exp-table" style="margin-top:20px;">
|
||
<div class="table-hear">
|
||
<div style="margin-left:5px">排名</div>
|
||
<div style="margin-left:5px">姓名</div>
|
||
<div class="bm">经验值</div>
|
||
</div>
|
||
<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="`${webBaseUrl}/images/rank1.png`" alt=""/>
|
||
<img v-if="index ==1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
|
||
<img v-if="index ==2" :src="`${webBaseUrl}/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">{{cutOrgNamePath(ran.authorInfo.orgInfo)}}</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="jy tab-jy">
|
||
<div v-if="experience.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.total}}</div>
|
||
<div v-if="experience.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.months}}</div>
|
||
<div v-if="experience.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.years}}</div>
|
||
<div v-if="experience.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.weeks}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="experience.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
|
||
<div v-if="experience.data.rankingNo>5" class="omit">
|
||
<div>.</div> <div>.</div> <div>.</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div v-if="experience.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||
<div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{experience.data.rankingNo}}</div>
|
||
<div class="tab-name" v-if="userInfo.aid">
|
||
<author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
|
||
<div>
|
||
<span style="color: #0059FF;">{{userInfo.name}}</span>
|
||
<div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="jy tab-jy">
|
||
<div v-if="experience.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.total}}</div>
|
||
<div v-if="experience.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.months}}</div>
|
||
<div v-if="experience.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.years}}</div>
|
||
<div v-if="experience.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.weeks}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-ranking-col Duration">
|
||
<div class="exp-hear">
|
||
<div class="exp-hear-text">
|
||
学习时长排行榜
|
||
<el-tooltip placement="top" effect="light">
|
||
<div slot="content">所有用户学习时长TOP排行榜单，统计单位为小时</div>
|
||
<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
|
||
</el-tooltip>
|
||
<span class="exp-hear-textbor"></span>
|
||
</div>
|
||
<div class="exp-hear-xiala">
|
||
<el-dropdown trigger="click" @command="durationCommand">
|
||
<span class="el-dropdown-link pointer">
|
||
{{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="now">当前</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">
|
||
{{isStudyTime ? '当前' : '累计'}}排名 : <span> {{learningDurationTotalData.rankNo}}</span>
|
||
</div>
|
||
<div class="myexperience">
|
||
{{isStudyTime ? '当前' : '累计'}}学习时长: <span> {{formatSecondToHour(learningDurationTotalData.rankValue)}}</span> h
|
||
</div>
|
||
</div>
|
||
<div class="exp-table" style="margin-top:20px;">
|
||
<div class="table-hear">
|
||
<div style="margin-left:5px">排名</div>
|
||
<div style="margin-left:5px">姓名</div>
|
||
<div style="margin-left:25%;">学习时长:小时</div>
|
||
</div>
|
||
<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="`${webBaseUrl}/images/rank1.png`" alt=""/>
|
||
<img v-if="idx ==1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
|
||
<img v-if="idx ==2" :src="`${webBaseUrl}/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">{{cutOrgNamePath(lan.authorInfo.orgInfo)}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="jy tab-jy">
|
||
<div v-if="learningDuration.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.total)}}</div>
|
||
<div v-if="learningDuration.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.months)}}</div>
|
||
<div v-if="learningDuration.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.years)}}</div>
|
||
<div v-if="learningDuration.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.weeks)}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="learningDuration.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
|
||
<div v-if="learningDuration.data.rankingNo>5" class="omit">
|
||
<div>.</div> <div>.</div> <div>.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="learningDuration.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||
<div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{learningDuration.data.rankingNo}}</div>
|
||
<div class="tab-name" v-if="userInfo.aid">
|
||
<author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
|
||
<div>
|
||
<span style="color: #0059FF;">{{userInfo.name}}</span>
|
||
<div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="jy tab-jy">
|
||
<div v-if="learningDuration.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.total)}}</div>
|
||
<div v-if="learningDuration.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.months)}}</div>
|
||
<div v-if="learningDuration.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.years)}}</div>
|
||
<div v-if="learningDuration.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.weeks)}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="page-ranking-col Duration">
|
||
<div class="exp-hear study-info">
|
||
<div class="exp-hear-text">
|
||
学习天数排行榜
|
||
<el-tooltip placement="top" effect="light">
|
||
<div slot="content">所有用户学习天数TOP排行榜单，每活跃学习1天可累计学习天数</div>
|
||
<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
|
||
</el-tooltip>
|
||
<span class="exp-hear-textbor" style="background:#f1b48f !important"></span>
|
||
</div>
|
||
<div class="exp-hear-xiala">
|
||
<el-dropdown trigger="click" @command="daysCommand">
|
||
<span class="el-dropdown-link pointer">
|
||
{{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="now">当前</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">
|
||
{{isStudyDay ? '当前' : '累计'}}排名 : <span> {{learningDaysTotalData.rankNo}}</span>
|
||
</div>
|
||
<div class="myexperience">
|
||
{{isStudyDay ? '当前' : '累计'}}学习天数 : <span>{{learningDaysTotalData.rankValue}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="exp-table" style="margin-top:20px;">
|
||
<div class="table-hear">
|
||
<div style="margin-left:5px">排名</div>
|
||
<div style="margin-left:5px">姓名</div>
|
||
<div style="margin-left:41%;">学习天数</div>
|
||
</div>
|
||
<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="`${webBaseUrl}/images/rank1.png`" alt=""/>
|
||
<img v-if="inx ==1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
|
||
<img v-if="inx ==2" :src="`${webBaseUrl}/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">{{cutOrgNamePath(day.authorInfo.orgInfo)}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="jy tab-jy">
|
||
<div v-if="learningDays.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.total}}</div>
|
||
<div v-if="learningDays.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.weeks}}</div>
|
||
<div v-if="learningDays.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.months}}</div>
|
||
<div v-if="learningDays.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.years}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="learningDays.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
|
||
<div v-if="learningDays.data.rankingNo>5" class="omit">
|
||
<div>.</div> <div>.</div> <div>.</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div v-if="learningDays.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
||
<div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{learningDays.data.rankingNo}}</div>
|
||
<div class="tab-name" v-if="userInfo.aid">
|
||
<author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
|
||
<div>
|
||
<span style="color: #0059FF;">{{userInfo.name}}</span>
|
||
<div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="jy tab-jy">
|
||
<div v-if="learningDays.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.total}}</div>
|
||
<div v-if="learningDays.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.weeks}}</div>
|
||
<div v-if="learningDays.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.months}}</div>
|
||
<div v-if="learningDays.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.years}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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';
|
||
import {translate,experienceValue,formatSecondToHour,cutOrgNamePath} from "@/utils/tools.js";
|
||
export default {
|
||
computed: {
|
||
...mapGetters(['userInfo']),
|
||
|
||
},
|
||
components: {authorImg},
|
||
data(){
|
||
return{
|
||
experienceValue,
|
||
cutOrgNamePath:cutOrgNamePath,
|
||
current:{},
|
||
currentUserRankingTotalData:{
|
||
rankNo:0, // 经验值累计排名
|
||
rankValue:0 ,// 经验值累计,
|
||
endValue:0 // 累计经验值进度条最大值
|
||
},
|
||
translate,
|
||
formatSecondToHour:formatSecondToHour,
|
||
experience:{
|
||
field:'now',
|
||
name:'当前',
|
||
data:{
|
||
rankingNo:0,
|
||
total:0
|
||
},
|
||
list:[],
|
||
},
|
||
learningDuration:{
|
||
field:'now',
|
||
name:'当前',
|
||
data:{
|
||
rankingNo:0,
|
||
total:0
|
||
},
|
||
list:[],
|
||
},
|
||
learningDurationTotalData:{
|
||
rankNo:0, // 学习时长累计排名
|
||
rankValue:0 // 累计学习时长
|
||
},
|
||
learningDaysTotalData:{
|
||
rankNo:0, // 学习天数累计排名
|
||
rankValue:0 // 累计学习天数
|
||
},
|
||
learningDays:{
|
||
field:'total',
|
||
name:'累计',
|
||
data:{
|
||
rankingNo:0,
|
||
total:0
|
||
},
|
||
list:[],
|
||
},
|
||
isNow: false,
|
||
isStudyTime: false,
|
||
isStudyDay: false,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getExperience();
|
||
this.getDuration();
|
||
this.getDays();
|
||
},
|
||
methods:{
|
||
|
||
// 经验值排行榜（下拉框事件）
|
||
experienceCommand(e) {
|
||
this.isNow = false
|
||
this.experience.field = e;
|
||
this.experience.name = this.translate(e)
|
||
this.getExperience();
|
||
},
|
||
// 学习时长（下拉框事件）
|
||
durationCommand(e) {
|
||
this.isStudyTime = false
|
||
this.learningDuration.field = e;
|
||
this.learningDuration.name = this.translate(e)
|
||
this.getDuration();
|
||
},
|
||
// 学习天数（下拉框事件）
|
||
daysCommand(e) {
|
||
this.isStudyDay = false
|
||
this.learningDays.field = e;
|
||
this.learningDays.name = this.translate(e)
|
||
this.getDays();
|
||
},
|
||
getExperience() {//经验值
|
||
let data = {
|
||
aid:this.userInfo.aid,// #用户id
|
||
statType:21, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||
field:this.experience.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||
num:10,// #显示的条数
|
||
}
|
||
if(data.field == 'now'){
|
||
data.statType = 20
|
||
data.field = 'total'
|
||
this.experience.field = 'total'
|
||
this.isNow = true
|
||
}
|
||
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;
|
||
if(this.experience.field == 'total') {
|
||
this.current = this.experienceValue(res.result.currentUserRankingData.total);
|
||
this.currentUserRankingTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
|
||
this.currentUserRankingTotalData.rankValue = res.result.currentUserRankingData.total;
|
||
this.currentUserRankingTotalData.endValue = this.current.endValue;
|
||
}
|
||
}
|
||
this.current.total=res.result.currentUserRankingData.total;//当前用户的经验值是固定的
|
||
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)
|
||
const noReapetIds = [...new Set(ids)];
|
||
apiUser.getByIds(noReapetIds).then(rs => {
|
||
if (rs.status == 200) {
|
||
const listData = []
|
||
rs.result.forEach((item, index) => {
|
||
res.result.rankingData.forEach(author => {
|
||
if (author.aid == item.aid) {
|
||
author.authorInfo = item;
|
||
listData.push(author)
|
||
}
|
||
});
|
||
});
|
||
this.experience.list = listData.sort((a,b)=>{
|
||
return b.total-a.total
|
||
}).slice(0,5);
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
getDuration() {//学习时长
|
||
let data = {
|
||
aid:this.userInfo.aid,// #用户id
|
||
statType:12, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||
field:this.learningDuration.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||
num:10,// #显示的条数
|
||
}
|
||
if(data.field == 'now'){
|
||
data.statType = 10
|
||
data.field = 'total'
|
||
this.learningDuration.field = 'total'
|
||
this.isStudyTime = true
|
||
}
|
||
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;
|
||
if(data.field == 'total'){
|
||
this.learningDurationTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
|
||
this.learningDurationTotalData.rankValue = res.result.currentUserRankingData.total;
|
||
}
|
||
}
|
||
|
||
|
||
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)
|
||
const noReapetIds = [...new Set(ids)];
|
||
apiUser.getByIds(noReapetIds).then(rs => {
|
||
if (rs.status == 200) {
|
||
const listData = []
|
||
rs.result.forEach((item, index) => {
|
||
res.result.rankingData.forEach(author => {
|
||
if (author.aid == item.aid) {
|
||
author.authorInfo = item;
|
||
listData.push(author)
|
||
}
|
||
});
|
||
});
|
||
this.learningDuration.list = listData.sort((a,b)=>{
|
||
return b.total-a.total
|
||
}).slice(0,5);
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
//学习天数
|
||
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:10,// #显示的条数
|
||
}
|
||
if(data.field == 'now'){
|
||
data.statType = 13
|
||
data.field = 'total'
|
||
this.learningDays.field = 'total'
|
||
this.isStudyDay = true
|
||
}
|
||
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;
|
||
if(data.field == 'total'){
|
||
this.learningDaysTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
|
||
this.learningDaysTotalData.rankValue = res.result.currentUserRankingData.total;
|
||
}
|
||
}
|
||
|
||
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)
|
||
const noReapetIds = [...new Set(ids)];
|
||
apiUser.getByIds(noReapetIds).then(rs => {
|
||
if (rs.status == 200) {
|
||
const listData = []
|
||
rs.result.forEach((item, index) => {
|
||
res.result.rankingData.forEach(author => {
|
||
if (author.aid == item.aid) {
|
||
author.authorInfo = item;
|
||
listData.push(author)
|
||
}
|
||
});
|
||
});
|
||
this.learningDays.list = listData.sort((a,b)=>{
|
||
return b.total-a.total
|
||
}).slice(0,5);
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
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>
|
||
|
||
<style lang="scss" scoped>
|
||
//只是控制布局
|
||
.page-ranking{
|
||
padding:15px 18px;
|
||
display:flex;
|
||
overflow-x: auto;
|
||
}
|
||
::v-deep .el-dropdown-menu__item:not(.is-disabled):hover{
|
||
background-color: #fff !important;
|
||
color: #0059FF !important;
|
||
}
|
||
::v-deep.el-dropdown-menu {
|
||
border: none !important;
|
||
}
|
||
.page-ranking-col{
|
||
min-width: 430px;
|
||
//padding-right:30px;
|
||
padding-right: 5%;
|
||
}
|
||
|
||
.omit{
|
||
padding-left: 13px;
|
||
div{
|
||
font-size: 30px;
|
||
line-height: 10px;
|
||
color: #D8D8D8;
|
||
}
|
||
}
|
||
.exp-table{
|
||
//width: 100%;
|
||
padding-left: 25px;
|
||
padding-right: 10px;
|
||
.table-hear{
|
||
display: flex;
|
||
div{
|
||
// margin-right: 13%;
|
||
min-width: 60px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
.bm{
|
||
// flex: 1;
|
||
margin-left: 46%;
|
||
// float: right;
|
||
}
|
||
.jy{
|
||
margin-left: auto;
|
||
text-align: right;
|
||
margin-right: 0;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
.myselftext{
|
||
height: 75px;
|
||
padding: 0 25px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.myranking{
|
||
// flex: 1;
|
||
line-height: 75px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
span{
|
||
color: #333;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
.myexperience{
|
||
// text-align: right;
|
||
line-height: 75px;
|
||
// margin-left: auto;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
span{
|
||
color: #333;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
.tab-jy{
|
||
padding-top: 10px;
|
||
padding-right: 10px;
|
||
div{
|
||
line-height: 28px;
|
||
width: 70px;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
height: 28px;
|
||
background: #F7F8FA;
|
||
border-radius: 14px;
|
||
}
|
||
}
|
||
.tab-bm{
|
||
font-size: 12px !important;
|
||
color: #666666;
|
||
margin-top: 7px;
|
||
}
|
||
.exp-table .table-hear div{
|
||
min-width: 65px !important;
|
||
}
|
||
.tab-name{
|
||
min-width: 65px;
|
||
display: flex;
|
||
::v-deep .item-author{
|
||
min-width: 54px !important;
|
||
}
|
||
img{
|
||
width: 40px;
|
||
height: 40px;
|
||
vertical-align: middle;
|
||
}
|
||
span{
|
||
color: #333333;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
}
|
||
.tab-rank{
|
||
width: 54px;
|
||
img{
|
||
width: 40px;
|
||
height: 40px;
|
||
|
||
}
|
||
}
|
||
.experience{
|
||
.exp-hear{
|
||
//width: 100%;
|
||
height: 65px;
|
||
background: url('../../../public/images/expbg.png') no-repeat 100% / 100%;
|
||
.exp-hear-text{
|
||
float: left;
|
||
line-height: 65px;
|
||
margin-left: 25px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
position: relative;
|
||
z-index: 888;
|
||
.exp-hear-textbor{
|
||
width: 108px;
|
||
height: 10px;
|
||
background: #9CC7FC;
|
||
border-radius: 9px;
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: 0;
|
||
z-index: -1;
|
||
top: 60%;
|
||
}
|
||
}
|
||
.exp-hear-xiala{
|
||
line-height: 65px;
|
||
float: right;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
}
|
||
|
||
.exp-bar{
|
||
//width: 100%;
|
||
h6{
|
||
font-size: 14px;
|
||
color: #666666;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
margin-left: 50px;
|
||
}
|
||
.exp-barname{
|
||
//width: 100%;
|
||
padding: 20px 35px;
|
||
display: flex;
|
||
span{
|
||
flex: 1;
|
||
}
|
||
}
|
||
.exp-barbox{
|
||
//width: 100%;
|
||
height: 8px;
|
||
// background: #ECF1FE;
|
||
border-radius: 6px;
|
||
margin-left: 25px;
|
||
margin-top: 3px;
|
||
position: relative;
|
||
z-index: 1;
|
||
::v-deep .el-progress__text{
|
||
display: none;
|
||
}
|
||
.exp-bar-cont{
|
||
width: 230px;
|
||
height: 6px;
|
||
background: #0059FF;
|
||
border-radius: 6px;
|
||
opacity: 0.56;
|
||
position: absolute;
|
||
left: 0;
|
||
z-index: 999;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
.Duration{
|
||
|
||
.study-info{
|
||
height: 62px !important;
|
||
background: url('../../../public/images/study-info.png') no-repeat 100% / 100% !important;
|
||
}
|
||
.exp-hear{
|
||
//width: 100%;
|
||
height: 62px;
|
||
background: url('../../../public/images/Durbg.png') no-repeat 100% / 100%;
|
||
.exp-hear-text{
|
||
float: left;
|
||
line-height: 62px;
|
||
margin-left: 25px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
position: relative;
|
||
z-index: 888;
|
||
.exp-hear-textbor{
|
||
width: 130px;
|
||
height: 10px;
|
||
background: #FDAFB3 ;
|
||
border-radius: 9px;
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: 0;
|
||
z-index: -1;
|
||
top: 60%;
|
||
}
|
||
}
|
||
.exp-hear-xiala{
|
||
line-height: 65px;
|
||
float: right;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|