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

src/api/api.js

@@ -81,3 +81,9 @@ export const QueryDiscussSubmitDetailByDiscussId = '/discussSubmit/queryDiscussS
 
 // 测评任务去学习
 export const EvaluationToLearn = '/evaluation/evaluationToLearn post'
+
+// 个人/小组完成度排行
+export const CompletionList = `/stu/project/rank_list/completion_list`
+
+// 积分排行榜
+export const PointList = `/stu/project/rank_list/point_list`

src/views/project/ProjectDetails.vue

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