hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-06 09:26:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

排行榜接口对接

Browse Source
This commit is contained in:
zhaofang
2022-11-02 16:00:04 +08:00
parent a25860fb65
commit 4bb3ffc1ed
3 changed files with 254 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
components/author-img/author-img.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<view class="item-author">
<view>
<u-avatar v-if="avatar && avatar!=''" shape="circle" :size="40" :src="fileBaseUrl + avatar" ></u-avatar>
<view v-else>
<view v-if="sex == null" class="peo"></view>
<view v-else>
<view class="peo" v-if="sex === 1 "><image src="../../static/images/man.png" alt=""></view>
<view class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
avatar:{
type:String,
default:''
},
name:{
type:String,
default:''
},
showInfo:{
type:Boolean,
default:false
},
showCode:{
type:Boolean,
default:false
},
info:{
type:String,
default:''
},
sex:{
type:Number,
default:null
}
},
data(){
return {
fileBaseUrl:this.$config.fileUrl,
userAvatar:'',
// sex:null,
}
},
computed:{
avatarText(){
let text=this.name;
if(text){
let len=text.length;
if(text.length>2){
text=text.substring(len-2);
}
}
return text;
}
},
mounted() {
this.userAvatar=this.avatar;
},
watch:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.peo{
width: 40px;
height: 40px;
image{
width: 100%;
height: 100%;
border-radius: 50%;
vertical-align: middle;
}
}
.uavatar{
border:1px solid #73adfe;
background-color: #d9e9ff;
color:#73adfe;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
.uavatar-scale{
transform:scale(0.8);
}
}
.item-author{
font-size: 14upx;
display: inline-block;
vertical-align: middle;
}
</style>

197
pages/my/rankingList.vue
View File

@@ -11,8 +11,8 @@
}"></u-tabs>
<view v-show="activeTab == 0">
<view class="box-info-top">
<text class="top-text">我的排名：<text class="text-num">128</text></text>
<text class="top-text" style="margin-left: 30upx;">我的经验值：<text class="text-num">367</text></text>
<text class="top-text">我的排名：<text class="text-num">{{experience.data.rankingNo}}</text></text>
<text class="top-text" style="margin-left: 30upx;">我的经验值：<text class="text-num">{{experience.data.total}}</text></text>
</view>
<view class="ran-table">
<view class="ran-table-haeder">
@@ -20,7 +20,7 @@
<view class="table-cell-tow">姓名</view>
<view class="table-cell-three">经验值</view>
</view>
<view class="ran-table-body" v-for="(item, index) in 5">
<view class="ran-table-body" v-for="(exper, index) in experience.list">
<view class="table-cell-one">
<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
@@ -28,34 +28,35 @@
<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name">小张</text>
<text class="table-cell-tow-org">(数据资产部)</text>
<author-img :avatar="exper.authorInfo.avatar" :sex="exper.authorInfo.sex"></author-img>
<text class="table-cell-tow-name">{{exper.authorInfo.name}}</text>
<text class="table-cell-tow-org">({{cutOrgNamePath(exper.authorInfo.orgInfo)}})</text>
</view>
<view class="table-cell-three">1073</view>
<view class="table-cell-three">{{exper.total}}</view>
</view>
<view class="ranking-dote">
<view class="ranking-dote" v-if="experience.data.rankingNo>5">
<view>.</view>
<view>.</view>
<view>.</view>
</view>
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;">
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;" v-if="experience.data.rankingNo>5">
<view class="table-cell-one">
<text class="cell-one-index" style="color:#326DFF">128</text>
<text class="cell-one-index" style="color:#326DFF">{{experience.data.rankingNo}}</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name" style="color:#326DFF">小张</text>
<text class="table-cell-tow-org" style="color:#326DFF">(数据资产部)</text>
<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
<!-- <image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image> -->
<text class="table-cell-tow-name" style="color:#326DFF">{{userInfo.name}}</text>
<text class="table-cell-tow-org" style="color:#326DFF">({{cutOrgNamePath(userInfo.departFullName)}})</text>
</view>
<view class="table-cell-three" style="color:#326DFF">1073</view>
<view class="table-cell-three" style="color:#326DFF">{{experience.data.total}}</view>
</view>
</view>
</view>
</view>
<view v-show="activeTab == 1">
<view class="box-info-top">
<text class="top-text">我的排名：<text class="text-num">128</text></text>
<text class="top-text" style="margin-left: 30upx;">我的学习时长：<text class="text-num">367</text>h</text>
<text class="top-text">我的排名：<text class="text-num">{{learningDuration.data.rankingNo}}</text></text>
<text class="top-text" style="margin-left: 30upx;">我的学习时长：<text class="text-num">{{formatSecondToHour(learningDuration.data.total)}}</text>h</text>
</view>
<view class="ran-table">
<view class="ran-table-haeder">
@@ -63,7 +64,7 @@
<view class="table-cell-tow">姓名</view>
<view class="table-cell-three">学习时长(h)</view>
</view>
<view class="ran-table-body" v-for="(item, index) in 5">
<view class="ran-table-body" v-for="(learning, index) in learningDuration.list">
<view class="table-cell-one">
<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
@@ -71,34 +72,35 @@
<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name">小张</text>
<text class="table-cell-tow-org">(数据资产部)</text>
<author-img :avatar="learning.authorInfo.avatar" :sex="learning.authorInfo.sex"></author-img>
<text class="table-cell-tow-name">{{learning.authorInfo.name}}</text>
<text class="table-cell-tow-org">({{cutOrgNamePath(learning.authorInfo.orgInfo)}})</text>
</view>
<view class="table-cell-three">1073</view>
<view class="table-cell-three">{{formatSecondToHour(learning.total)}}</view>
</view>
<view class="ranking-dote">
<view class="ranking-dote" v-if="learningDuration.data.rankingNo > 5">
<view>.</view>
<view>.</view>
<view>.</view>
</view>
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;">
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;" v-if="learningDuration.data.rankingNo > 5">
<view class="table-cell-one">
<text class="cell-one-index" style="color:#326DFF">128</text>
<text class="cell-one-index" style="color:#326DFF">{{learningDuration.data.rankingNo}}</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name" style="color:#326DFF">小张</text>
<text class="table-cell-tow-org" style="color:#326DFF">(数据资产部)</text>
<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
<!-- <image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image> -->
<text class="table-cell-tow-name" style="color:#326DFF">{{userInfo.name}}</text>
<text class="table-cell-tow-org" style="color:#326DFF">({{cutOrgNamePath(userInfo.departFullName)}})</text>
</view>
<view class="table-cell-three" style="color:#326DFF">1073</view>
<view class="table-cell-three" style="color:#326DFF">{{formatSecondToHour(learningDuration.data.total)}}</view>
</view>
</view>
</view>
<view v-show="activeTab == 2">
<view class="box-info-top">
<text class="top-text">我的排名：<text class="text-num">128</text></text>
<text class="top-text" style="margin-left: 30upx;">我的学习天数：<text class="text-num">367</text></text>
<text class="top-text">我的排名：<text class="text-num">{{learningDays.data.rankingNo}}</text></text>
<text class="top-text" style="margin-left: 30upx;">我的学习天数：<text class="text-num">{{learningDays.data.total}}</text></text>
</view>
<view class="ran-table">
<view class="ran-table-haeder">
@@ -106,7 +108,7 @@
<view class="table-cell-tow">姓名</view>
<view class="table-cell-three">学习天数</view>
</view>
<view class="ran-table-body" v-for="(item, index) in 5">
<view class="ran-table-body" v-for="(days, index) in learningDays.list">
<view class="table-cell-one">
<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
@@ -114,27 +116,27 @@
<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name">小张</text>
<text class="table-cell-tow-org">(数据资产部)</text>
<author-img :avatar="days.authorInfo.avatar" :sex="days.authorInfo.sex"></author-img>
<text class="table-cell-tow-name">{{days.authorInfo.name}}</text>
<text class="table-cell-tow-org">({{cutOrgNamePath(days.authorInfo.orgInfo)}})</text>
</view>
<view class="table-cell-three">1073</view>
<view class="table-cell-three">{{days.total}}</view>
</view>
<view class="ranking-dote">
<view class="ranking-dote" v-if="learningDays.data.rankingNo > 5">
<view>.</view>
<view>.</view>
<view>.</view>
</view>
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;">
<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;" v-if="learningDays.data.rankingNo > 5">
<view class="table-cell-one">
<text class="cell-one-index" style="color:#326DFF">128</text>
<text class="cell-one-index" style="color:#326DFF">{{learningDays.data.rankingNo}}</text>
</view>
<view class="table-cell-tow">
<image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image>
<text class="table-cell-tow-name" style="color:#326DFF">小张</text>
<text class="table-cell-tow-org" style="color:#326DFF">(数据资产部)</text>
<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
<text class="table-cell-tow-name" style="color:#326DFF">{{userInfo.name}}</text>
<text class="table-cell-tow-org" style="color:#326DFF">({{cutOrgNamePath(userInfo.departFullName)}})</text>
</view>
<view class="table-cell-three" style="color:#326DFF">1073</view>
<view class="table-cell-three" style="color:#326DFF">{{learningDays.data.total}}</view>
</view>
</view>
</view>
@@ -146,9 +148,12 @@
<script>
import apiUser from "@/api/system/user.js";
import apiStat from '@/api/phase2/stat.js';
import {cutOrgNamePath,formatSecondToHour} from '@/utils/tools.js'
export default {
data() {
return {
formatSecondToHour,
cutOrgNamePath,
tabList:[
{ name: '经验值'},
{ name: '学习时长'},
@@ -157,6 +162,33 @@
activeTab:0,
rankingList:{},
userInfo:{},
learningDays:{
field:'total',
name:'累计',
data:{
rankingNo:0,
total:0
},
list:[],
},
experience:{
field:'total',
name:'累计',
data:{
rankingNo:0,
total:0
},
list:[],
},
learningDuration:{
field:'total',
name:'累计',
data:{
rankingNo:0,
total:0
},
list:[],
},
}
},
onPullDownRefresh() {
@@ -168,7 +200,10 @@
onLoad(options) {
this.$store.dispatch('GetUserInfo').then(rs => {
this.userInfo = rs;
console.log(rs,'rs')
this.getExperience();
this.getDuration();
this.getDays();
});
},
@@ -180,7 +215,7 @@
let data = {
aid:this.userInfo.aid,// #用户id
statType:20, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
field:'todays',// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
field:'total',// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
num:5,// #显示的条数
}
apiStat.getRanking(data).then(res=>{
@@ -193,16 +228,8 @@
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)
@@ -214,7 +241,7 @@
sex: null
}
})
// this.getUserData(ids,res.result.rankingData)
this.getUserData(ids,res.result.rankingData)
this.experience.list = res.result.rankingData;
}
})
@@ -223,28 +250,14 @@
let data = {
aid:this.userInfo.aid,// #用户id
statType:10, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
field:this.learningDuration.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
field:'total',// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
num:5,// #显示的条数
}
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)
@@ -256,8 +269,8 @@
sex: null
}
})
// this.getUserData(ids,res.result.rankingData)
// this.learningDuration.list = res.result.rankingData;
this.getUserData(ids,res.result.rankingData)
this.learningDuration.list = res.result.rankingData;
}
})
},
@@ -266,25 +279,13 @@
let data = {
aid:this.userInfo.aid,// #用户id
statType:11, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
field:this.learningDays.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
field:'total',// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
num:5,// #显示的条数
}
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;
// }
this.learningDays.data = res.result.currentUserRankingData;
}
const ids= [];
@@ -298,11 +299,30 @@
sex: null
}
})
// this.getUserData(ids,res.result.rankingData)
// this.learningDays.list = res.result.rankingData;
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);
}
});
},
}
}
@@ -372,6 +392,11 @@
}
}
.table-cell-tow{
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;-webkit-line-clamp: 1;
word-break:break-all;
// flex: 100%;
width: 100%;
.table-cell-tow-name{

38
utils/tools.js
View File

@@ -200,3 +200,41 @@ export function userAvatarText(text) {
}
return text;
}
/**截取机构名称路径namePath最后两段，不包含第一个 */
export const cutOrgNamePath = (namePath) => {
let newName=namePath;
if(newName){
let names=newName.split('/');
let len=names.length;
//使用最后两们
if(len>1){
//newName=names[len-2]+'/'+names[len-1];
newName=names[1];
}
}
return newName;
};
/**
* 将秒转换成小时
* @author wn
* @date 2022.10.18
* @param {Object} second 秒
* @@return 小时
*/
export function formatSecondToHour(second) {
var n = 1; // 保留小数位
second = Number(second);
var h = second / 3600;
h = h.toFixed(n);
if(isNaN(h)){
h = 0;
}
return h;
}
// 秒换成时分秒
export function getHMS(time) {
const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600)
const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
return hour + ':' + min + ':' + sec
}