hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-10 03:16:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:增加项目-积分排行榜/个人完成度排行榜/小组完成度排行榜

Browse Source
This commit is contained in:
wyx
2023-02-07 18:34:43 +08:00
parent 005309aa82
commit 8208ed2cd4
6 changed files with 220 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/views/project/ProjectDetails.vue
View File

@@ -244,6 +244,137 @@
</div>
</div>
<!-- 个人信息及学习进度 -->
<!-- 学员积分及个人完成度排行榜 -->
<div class="detailRB">
<div class="info">
<div style="display:flex;justify-content: space-between;align-items: center;height: 56px;padding-left: 27px;padding-right: 27px;">
<div
@click="tabChange(1)"
style="font-size: 14px;color: rgba(51, 51, 51, 1);font-weight: 600;cursor: pointer;"
:style="{}"
>积分排行榜</div>
<!-- <div style="font-size: 14px;color: rgba(51, 51, 51, 1);font-weight: 600;">完成度排行榜</div> -->
<el-select
@change="choiceStatus"
v-model="stateValue"
class="m-2"
mode="tags"
placeholder="完成度排行榜"
style="width: 130px;border: 0px solid red !important; box-shadow:none !important; ">
<el-option
v-for="item in studyProgress"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<!-- line -->
<div style="display: flex;height: 1px;background-color: #ecf5ff;justify-content: space-between;">
<div v-if="tabValue==1" style="width:90px;height: 2px;background-color: #409EFF;margin-left: 18px;"></div>
<div v-else style="width:90px;height: 2px;background-color: rgba(0,0,0,0);margin-left: 18px;"></div>
<div v-if="tabValue!==1" style="width:146px;height: 2px;background-color: #409EFF;margin-right: 18px;"></div>
<div v-else style="width:146px;height: 2px;background-color: rgba(0,0,0,0);margin-right: 18px;"></div>
</div>
<!-- line -->
<div style="width: 100%;display: flex;flex-direction: column;height: 66px;justify-content: center;">
<div style="display: flex;justify-content: space-between;">
<div style="width:90px;margin-left: 50px;font-size: 14px;color: rgba(103, 125, 134, 1);">我的排名：{{ myIndex }}</div>
<div style="width:146px;margin-right: -30px;font-size: 14px;color: rgba(103, 125, 134, 1);">
{{tabValue==1?"项目积分 ：":"完成度 ："}} {{ tabValue==1? myPoint : myRateStr }}
</div>
</div>
</div>
<!-- 排行榜列表 -->
<div style="display: flex;padding-top: 30px;padding-bottom: 100px;background: linear-gradient(0deg, rgba(36,120,255,0) 0%, rgba(36,120,255,0.15) 100%);">
<div style="display: flex;justify-content: center;align-items: center;width: 100%;">
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;">排名</div>
<div style="margin-left: 110px;margin-right: 110px;font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;">名称</div>
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;">{{tabValue==1?"积分":"进度"}}</div>
</div>
</div>
<!-- 学员列表 -->
<div>
<div
v-for="(item,i) in tableRankData" :key="i"
style="display: flex;justify-content: center;align-items: center;width: 100%;position: relative;top:-60px;margin-bottom: 38px;">
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;width:30%;display: flex;justify-content: center;align-items: center;position: relative;">
{{ i + 1 == 1 || i + 1 == 2 || i + 1 == 3 ? '': i + 1 }}
<img
v-if="i + 1 == 1"
style="width: 24px; height: 24px;"
src="../../assets/image/rank1.png"
/>
<img
v-if="i + 1 == 2"
style="width: 24px; height: 24px;"
src="../../assets/image/rank2.png"
/>
<img
v-if="i + 1 == 3"
style="width: 24px; height: 24px;"
src="../../assets/image/rank3.png"
/>
<img
v-if="i + 1 == myIndex"
style="width: 24px; height: 24px;position: absolute;left:110px;"
src="../../assets/image/rankme.png"
/>
</div>
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;width:34%;display: flex;justify-content: center;align-items: center;">
<img
style="width: 28px; height: 28px;border-radius: 28px;"
:src="item.avatar"
/>
{{item.name}}
</div>
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;width:30%;display: flex;justify-content: center;align-items: center;">
{{tabValue==1?item.pointsCount:item.rateStr}}
</div>
</div>
<!-- 我的排名 -->
<div
v-if="myIndex > tableRankData.length"
style="display: flex;justify-content: center;align-items: center;width: 100%;position: relative;top:-60px;margin-bottom: 38px;">
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;width:30%;display: flex;justify-content: center;align-items: center;">
{{ '...' }}
</div>
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;width:34%;display: flex;justify-content: center;align-items: center;">
{{''}}
</div>
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;width:30%;display: flex;justify-content: center;align-items: center;">
{{''}}
</div>
</div>
<div
v-if="myIndex > tableRankData.length"
style="display: flex;justify-content: center;align-items: center;width: 100%;position: relative;top:-60px;margin-bottom: 38px;">
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;width:30%;display: flex;justify-content: center;align-items: center;">
{{ myIndex }}
<img
style="width: 24px; height: 24px;position: absolute;left:110px;"
src="../../assets/image/rankme.png"
/>
</div>
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;width:34%;display: flex;justify-content: center;align-items: center;">
<img
style="width: 28px; height: 28px;border-radius: 28px;"
:src="tableRankData[myIndex-1].avatar"
/>
{{tableRankData[myIndex-1].name}}
</div>
<div style="font-size: 14px;color:rgba(36, 120, 255, 1);font-weight: 600;width:30%;display: flex;justify-content: center;align-items: center;">
{{tabValue==1?tableRankData[myIndex-1].pointsCount:tableRankData[myIndex-1].rateStr}}
</div>
</div>
</div>
</div>
</div>
<!-- 学员积分及个人完成度排行榜 -->
</div>
</div>
<!-- 详细信息 -->
@@ -278,7 +409,9 @@ import {
ROUTER_PROCESS,
LINK_DETAILS,
STUDY_RECORD,
EvaluationToLearn
EvaluationToLearn,
CompletionList,
PointList
} from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import store from "@/store";
@@ -296,6 +429,86 @@ const { data } = useRequest(PROJECT_PROCESS, {
projectId: projectId || courseId,
});
const studyProgress = [
{
value:2,
label:"个人完成度"
},
{
value:3,
label:"小组完成度"
}
];
const stateValue = ref(undefined)
// 完成度选择
const myRate = ref('')
const myRateStr = ref('')
const choiceStatus = (e) => {
console.log(e)
tabValue.value = e
stateValue.value = e
if(e==2){
// 获取个人完成度
request(CompletionList, {projectId:projectId,type:0}).then(res=>{
console.log('获取个人完成度---》', res)
if(res.code==200){
tableRankData.value = res.data.datas
myIndex.value = res.data.myIndex
myRate.value = res.data.myRate
myRateStr.value = res.data.myRateStr
}
}).catch(err=>{
console.log(err)
});
}else{
// 获取小组完成度
request(CompletionList, {projectId:projectId,type:1}).then(res=>{
console.log('获取小组完成度---》', res)
if(res.code==200){
tableRankData.value = res.data.datas
myIndex.value = res.data.myIndex
myRate.value = res.data.myRate
myRateStr.value = res.data.myRateStr
}
}).catch(err=>{
console.log(err)
});
}
}
// Tab 展示 --- 默认展示积分排行榜 1 个人完成度 2 小组完成度 3
const tabValue = ref(1)
const tabChange = (tabs) => {
stateValue.value = undefined;
tabValue.value = tabs;
// 获取项目积分
request(PointList, {projectId:projectId}).then(res=>{
console.log('我是获取的项目积分---》', res)
if(res.code==200){
tableRankData.value = res.data.datas
myIndex.value = res.data.myIndex
myPoint.value = res.data.myPointsCount
}
}).catch(err=>{
console.log(err)
});
}
const tableRankData = ref([])
const myIndex = ref('')
const myPoint = ref('')
// 获取项目积分
request(PointList, {projectId:projectId}).then(res=>{
console.log('我是获取的项目积分---》', res)
if(res.code==200){
tableRankData.value = res.data.datas
myIndex.value = res.data.myIndex
myPoint.value = res.data.myPointsCount
}
}).catch(err=>{
console.log(err)
});
console.log("datadata", data);
const loading = ref(false);