排行榜接口对接

components/author-img/author-img.vue

@@ -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>

pages/my/rankingList.vue

@@ -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">我的排名：<text class="text-num">{{experience.data.rankingNo}}</text></text>
-					<text class="top-text" style="margin-left: 30upx;">我的经验值：<text  class="text-num">367</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>
+							<author-img :avatar="exper.authorInfo.avatar" :sex="exper.authorInfo.sex"></author-img>
-							<text class="table-cell-tow-name">小张</text>
+							<text class="table-cell-tow-name">{{exper.authorInfo.name}}</text>
-							<text class="table-cell-tow-org">(数据资产部)</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>
+							<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
-							<text class="table-cell-tow-name" style="color:#326DFF">小张</text>
+							<!-- <image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image> -->
-							<text class="table-cell-tow-org" style="color:#326DFF">(数据资产部)</text>
+							<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">我的排名：<text class="text-num">{{learningDuration.data.rankingNo}}</text></text>
-		   		<text class="top-text" style="margin-left: 30upx;">我的学习时长：<text  class="text-num">367</text>h</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>
+						<author-img :avatar="learning.authorInfo.avatar" :sex="learning.authorInfo.sex"></author-img>
-		   				<text class="table-cell-tow-name">小张</text>
+		   				<text class="table-cell-tow-name">{{learning.authorInfo.name}}</text>
-		   				<text class="table-cell-tow-org">(数据资产部)</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>
+						<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
-		   				<text class="table-cell-tow-name" style="color:#326DFF">小张</text>
+		   				<!-- <image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image> -->
-		   				<text class="table-cell-tow-org" style="color:#326DFF">(数据资产部)</text>
+		   				<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">我的排名：<text class="text-num">{{learningDays.data.rankingNo}}</text></text>
-		   		<text class="top-text" style="margin-left: 30upx;">我的学习天数：<text  class="text-num">367</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>
+						<author-img :avatar="days.authorInfo.avatar" :sex="days.authorInfo.sex"></author-img>
-		   				<text class="table-cell-tow-name">小张</text>
+		   				<text class="table-cell-tow-name">{{days.authorInfo.name}}</text>
-		   				<text class="table-cell-tow-org">(数据资产部)</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>
+						<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
-		   				<text class="table-cell-tow-name" style="color:#326DFF">小张</text>
+		   				<text class="table-cell-tow-name" style="color:#326DFF">{{userInfo.name}}</text>
-		   				<text class="table-cell-tow-org" style="color:#326DFF">(数据资产部)</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.getUserData(ids,res.result.rankingData)
-			             // this.learningDuration.list = 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={
+			                  this.learningDays.data = res.result.currentUserRankingData;
-			                      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= [];
@@ -298,11 +299,30 @@
 			                  sex: null
 			              }
 			             })
-			             // this.getUserData(ids,res.result.rankingData)
+			             this.getUserData(ids,res.result.rankingData)
-			             // this.learningDays.list = 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{

utils/tools.js

@@ -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
+}