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

feat:增加项目/学习路径图的简介和关卡说明

Browse Source
This commit is contained in:
wuyx
2022-12-23 15:54:28 +08:00
parent 819c4148b0
commit 70c441e343
2 changed files with 618 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<div class="pathdetails" style="padding: 30px"> <div class="pathdetails" style="padding: 30px">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="crumb"> <div class="crumb">
<div>{{data.name}}</div> <div>{{ data.name }}</div>
<div style="margin-left: 6px; margin-right: 6px">/</div> <div style="margin-left: 6px; margin-right: 6px">/</div>
<div style="font-weight: 700">项目详情</div> <div style="font-weight: 700">项目详情</div>
@@ -116,7 +116,7 @@
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="课程公告" name="first"> <el-tab-pane label="课程公告" name="first">
<div class="notice"> <div class="notice">
{{ data.remark || "暂无公告" }} {{ data.notice || "暂无公告" }}
</div> </div>
</el-tab-pane> </el-tab-pane>
<!-- <!--
@@ -238,11 +238,7 @@
</div> </div>
<!-- 详细信息 --> <!-- 详细信息 -->
<!-- 弹框提示信息 --> <!-- 弹框提示信息 -->
<el-dialog <el-dialog title="" top="347px" v-model="dialogVisible" :show-close="false"
title=""
top="347px"
v-model="dialogVisible"
:show-close="false"
style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;" style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
width="502px"> width="502px">
<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div> <div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
@@ -375,7 +371,7 @@ const dialogVisibleTip = ref('该任务无法学习，请联系管理员进行
// } // }
function introductionPro() { function introductionPro() {
dialogVisibleTip.value =data.value.remark; dialogVisibleTip.value = data.value.remark;
dialogVisible.value = true; dialogVisible.value = true;
} }
@@ -386,7 +382,7 @@ function toFinish(d, sName, chapterId) {
let date1 = new Date(d.endTime).getTime(); let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime(); let date2 = new Date().getTime();
if (date1 < date2) { if (date1 < date2) {
dialogVisibleTip.value ='当前作业已结束'; dialogVisibleTip.value = '当前作业已结束';
dialogVisible.value = true; dialogVisible.value = true;
// ElMessage.error("当前作业已结束") // ElMessage.error("当前作业已结束")
return return
@@ -397,7 +393,7 @@ function toFinish(d, sName, chapterId) {
let date1 = new Date(d.endTime).getTime(); let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime(); let date2 = new Date().getTime();
if (date1 < date2) { if (date1 < date2) {
dialogVisibleTip.value ='当前直播已结束'; dialogVisibleTip.value = '当前直播已结束';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -406,7 +402,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 5) { if (d.type == 5) {
if (d.taskStatus == 1 || d.taskStatus == 2) { if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习，请联系管理员进行替换。") // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习，请联系管理员进行替换！'; dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -415,7 +411,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 11) { if (d.type == 11) {
if (d.taskStatus == 1 || d.taskStatus == 2) { if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习，请联系管理员进行替换。") // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习，请联系管理员进行替换！'; dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -425,7 +421,7 @@ function toFinish(d, sName, chapterId) {
let date1 = new Date(d.endTime).getTime(); let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime(); let date2 = new Date().getTime();
if (date1 < date2) { if (date1 < date2) {
dialogVisibleTip.value ='当前活动已结束'; dialogVisibleTip.value = '当前活动已结束';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -434,7 +430,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 1) { if (d.type == 1) {
if (d.taskStatus == 1 || d.taskStatus == 2) { if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习，请联系管理员进行替换。") // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习，请联系管理员进行替换！'; dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -443,7 +439,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 2) { if (d.type == 2) {
if (d.taskStatus == 1 || d.taskStatus == 2) { if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习，请联系管理员进行替换。") // ElMessage.error("该任务无法学习，请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习，请联系管理员进行替换！'; dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -492,11 +488,13 @@ function whiteTypes(type) {
.el-dialog__header { .el-dialog__header {
display: none; display: none;
} }
.crumb { .crumb {
color: #fff; color: #fff;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
.return { .return {
position: absolute; position: absolute;
right: 10%; right: 10%;

157
src/views/roadmap/PathDetails.vue
View File

@@ -16,7 +16,7 @@
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="pdname"> <div class="pdname">
{{ userInfo.bandDesc }} {{ userInfo.bandDesc }}
<span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">简介 <span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">关卡说明
<span style="position: relative;top:1px;left:-3px;cursor: pointer;">></span> <span style="position: relative;top:1px;left:-3px;cursor: pointer;">></span>
</span> </span>
</div> </div>
@@ -27,35 +27,22 @@
<div class="title"> <div class="title">
<div class="titleL">{{ data.currentStageName }}</div> <div class="titleL">{{ data.currentStageName }}</div>
<div class="titleR" :style="{ display: 'flex' }"> <div class="titleR" :style="{ display: 'flex' }">
<img <img :src="data.currentChapterCnt ? circle : circle2" />
:src="data.currentChapterCnt?circle:circle2"/> <div class="titleRT" :style="{ color: data.currentChapterCnt ? '' : 'rgba(102, 102, 102, 1)' }">
<div class="titleRT" :style="{color:data.currentChapterCnt?'':'rgba(102, 102, 102, 1)'}">
{{ data.currentChapterCnt ? '进行中' : '未开始' }} {{ data.currentChapterCnt ? '进行中' : '未开始' }}
</div> </div>
</div> </div>
</div> </div>
<div <div class="course" v-for="(value, index) in data.taskBoList?.filter(
class="course"
v-for="(value, index) in data.taskBoList?.filter(
(e) => !whiteTypes(e.type) (e) => !whiteTypes(e.type)
)" )" :key="index">
:key="index"
>
<div style="width: 70%"> <div style="width: 70%">
<div class="coursename" :title="value.name">{{ value.name }}</div> <div class="coursename" :title="value.name">{{ value.name }}</div>
<div class="coursetag"> <div class="coursetag">
<div <div class="tag1" style="margin-right: 11px; margin-top: 16px" v-if="value.flag">
class="tag1"
style="margin-right: 11px; margin-top: 16px"
v-if="value.flag"
>
必修 必修
</div> </div>
<div <div class="tag2" style="margin-right: 11px; margin-top: 16px" v-if="!value.flag">
class="tag2"
style="margin-right: 11px; margin-top: 16px"
v-if="!value.flag"
>
选修 选修
</div> </div>
<div class="tag3" style="margin-right: 11px; margin-top: 16px"> <div class="tag3" style="margin-right: 11px; margin-top: 16px">
@@ -71,18 +58,11 @@
<!-- {{ item.name }}--> <!-- {{ item.name }}-->
<!-- </div>--> <!-- </div>-->
</div> </div>
<div <div class="progressBox" :style="{ display: value.type === 1 ? 'block' : 'none' }">
class="progressBox"
:style="{ display: value.type === 1 ? 'block' : 'none' }"
>
<div>当前进度</div> <div>当前进度</div>
<div class="progress"> <div class="progress">
<div style="width: 291px"> <div style="width: 291px">
<el-progress <el-progress :percentage="value.currentRatio" :show-text="false" :stroke-width="8" :color="
:percentage="value.currentRatio"
:show-text="false"
:stroke-width="8"
:color="
{ {
0: 'rgba(238, 112, 108, 1)', 0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)', 1: 'rgba(255, 151, 38, 1)',
@@ -91,17 +71,14 @@
4: 'rgba(57, 219, 183, 1)', 4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)', 5: 'rgba(57, 219, 183, 1)',
}[parseInt(value.currentRatio / 20)] }[parseInt(value.currentRatio / 20)]
" " />
/>
</div> </div>
<div <div style="
style="
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #277aff; color: #277aff;
margin-left: 10px; margin-left: 10px;
" " :style="{
:style="{
color: { color: {
0: 'rgba(238, 112, 108, 1)', 0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)', 1: 'rgba(255, 151, 38, 1)',
@@ -110,20 +87,15 @@
4: 'rgba(57, 219, 183, 1)', 4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)', 5: 'rgba(57, 219, 183, 1)',
}[parseInt(value.currentRatio / 20)], }[parseInt(value.currentRatio / 20)],
}" }">
>
{{ value.currentRatio }}% {{ value.currentRatio }}%
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div <div class="goclass" :style="{
class="goclass"
:style="{
background: `${types.path[value.type] ? '#2478ff' : '#999'}`, background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
}" }" @click="toFinish(value)">
@click="toFinish(value)"
>
{{ {{
value.status === 1 value.status === 1
? "已完成" ? "已完成"
@@ -191,19 +163,13 @@
<div class="detailRB"> <div class="detailRB">
<div class="info"> <div class="info">
<div class="title"> <div class="title">
<img <img style="width: 21px; height: 20px" src="../../assets/image/pathdetails/info.png" />
style="width: 21px; height: 20px"
src="../../assets/image/pathdetails/info.png"
/>
<div class="text" style="margin-left: 7px">个人信息</div> <div class="text" style="margin-left: 7px">个人信息</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<!-- todo #路径详情 个人信息缺少img和介绍--> <!-- todo #路径详情 个人信息缺少img和介绍-->
<div <div class="teacheritem" :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }">
class="teacheritem" <img class="peopleimg" :src="userInfo.avatar" />
:style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
>
<img class="peopleimg" :src="userInfo.avatar"/>
<div style="margin-left: 17px"> <div style="margin-left: 17px">
<div class="teacherName"> <div class="teacherName">
<div style="margin-right: 5px"> <div style="margin-right: 5px">
@@ -219,10 +185,7 @@
</div> </div>
<div class="info" style="padding-top: 20px"> <div class="info" style="padding-top: 20px">
<div class="title"> <div class="title">
<img <img style="width: 18px; height: 17px" src="../../assets/image/pathdetails/study.png" />
style="width: 18px; height: 17px"
src="../../assets/image/pathdetails/study.png"
/>
<div class="text" style="margin-left: 9px">学习进度</div> <div class="text" style="margin-left: 9px">学习进度</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -236,11 +199,8 @@
<div>总进度</div> <div>总进度</div>
<div class="progress"> <div class="progress">
<div style="width: 291px"> <div style="width: 291px">
<el-progress <el-progress :percentage="parseInt(data.currentChapterCnt / data.totalChapterCnt * 100)"
:percentage="parseInt(data.currentChapterCnt/data.totalChapterCnt * 100)" :show-text="false" :stroke-width="8" :color="
:show-text="false"
:stroke-width="8"
:color="
{ {
0: 'rgba(238, 112, 108, 1)', 0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)', 1: 'rgba(255, 151, 38, 1)',
@@ -248,13 +208,10 @@
3: 'rgba(59, 94, 251, 1)', 3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)', 4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)', 5: 'rgba(57, 219, 183, 1)',
}[(parseInt(data.currentChapterCnt/data.totalChapterCnt)* 100) / 20] }[(parseInt(data.currentChapterCnt / data.totalChapterCnt) * 100) / 20]
" " />
/>
</div> </div>
<div <div style="font-size: 14px; font-weight: 500; margin-left: 10px" :style="{
style="font-size: 14px; font-weight: 500; margin-left: 10px"
:style="{
color: { color: {
0: 'rgba(238, 112, 108, 1)', 0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)', 1: 'rgba(255, 151, 38, 1)',
@@ -262,10 +219,9 @@
3: 'rgba(59, 94, 251, 1)', 3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)', 4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)', 5: 'rgba(57, 219, 183, 1)',
}[parseInt((data.currentChapterCnt/data.totalChapterCnt * 100) / 20)], }[parseInt((data.currentChapterCnt / data.totalChapterCnt * 100) / 20)],
}" }">
> {{ parseInt(data.currentChapterCnt / data.totalChapterCnt * 100) }}%
{{ parseInt(data.currentChapterCnt/data.totalChapterCnt * 100) }}%
</div> </div>
</div> </div>
</div> </div>
@@ -275,11 +231,8 @@
<div>必修进度</div> <div>必修进度</div>
<div class="progress"> <div class="progress">
<div style="width: 291px"> <div style="width: 291px">
<el-progress <el-progress :percentage="parseInt(data.currentReqCnt / data.totalReqCnt * 100)" :show-text="false"
:percentage="parseInt(data.currentReqCnt/data.totalReqCnt * 100)" :stroke-width="8" :color="
:show-text="false"
:stroke-width="8"
:color="
{ {
0: 'rgba(238, 112, 108, 1)', 0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)', 1: 'rgba(255, 151, 38, 1)',
@@ -287,18 +240,15 @@
3: 'rgba(59, 94, 251, 1)', 3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)', 4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)', 5: 'rgba(57, 219, 183, 1)',
}[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)] }[parseInt((data.currentReqCnt / data.totalReqCnt * 100) / 20)]
" " />
/>
</div> </div>
<div <div style="
style="
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #277aff; color: #277aff;
margin-left: 10px; margin-left: 10px;
" " :style="{
:style="{
color: { color: {
0: 'rgba(238, 112, 108, 1)', 0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)', 1: 'rgba(255, 151, 38, 1)',
@@ -306,10 +256,9 @@
3: 'rgba(59, 94, 251, 1)', 3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)', 4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)', 5: 'rgba(57, 219, 183, 1)',
}[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)], }[parseInt((data.currentReqCnt / data.totalReqCnt * 100) / 20)],
}" }">
> {{ parseInt(data.currentReqCnt / data.totalReqCnt * 100) }}%
{{ parseInt(data.currentReqCnt/data.totalReqCnt * 100) }}%
</div> </div>
</div> </div>
</div> </div>
@@ -321,11 +270,7 @@
</div> </div>
<!-- 详细信息 --> <!-- 详细信息 -->
<!-- 弹框提示信息 --> <!-- 弹框提示信息 -->
<el-dialog <el-dialog title="" top="347px" v-model="dialogVisible" :show-close="false"
title=""
top="347px"
v-model="dialogVisible"
:show-close="false"
style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;" style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
width="502px"> width="502px">
<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div> <div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
@@ -338,37 +283,37 @@
</template> </template>
<script setup> <script setup>
import {computed, reactive, ref, watch} from "vue"; import { computed, reactive, ref, watch } from "vue";
import circle from '../../assets/image/pathdetails/circle.png'; import circle from '../../assets/image/pathdetails/circle.png';
import circle2 from '../../assets/image/pathdetails/circle2.png'; import circle2 from '../../assets/image/pathdetails/circle2.png';
import {boeRequest, useRequest, request} from "@/api/request"; import { boeRequest, useRequest, request } from "@/api/request";
import {ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD} from "@/api/api"; import { ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD } from "@/api/api";
import {useRoute, useRouter} from "vue-router"; import { useRoute, useRouter } from "vue-router";
import {ElMessage} from "element-plus"; import { ElMessage } from "element-plus";
import store from "@/store"; import store from "@/store";
const { const {
query: {routerId, routerName}, query: { routerId, routerName },
} = useRoute(); } = useRoute();
const router = useRouter(); const router = useRouter();
const returnclick = () => { const returnclick = () => {
router.back(); router.back();
}; };
const {data} = useRequest(ROUTER_PROCESS, {routerId}); const { data } = useRequest(ROUTER_PROCESS, { routerId });
const userInfo = computed(() => store.state.userInfo); const userInfo = computed(() => store.state.userInfo);
console.log('lalalallala', data)
const activeName = ref("first"); const activeName = ref("first");
const handleClick = (tab, event) => { const handleClick = (tab, event) => {
console.log(tab, event); console.log(tab, event);
}; };
const path = {1: "path"}; const path = { 1: "path" };
const dialogVisible = ref(false); const dialogVisible = ref(false);
const dialogVisibleTip = ref(''); const dialogVisibleTip = ref('');
function introductionPro() { function introductionPro() {
dialogVisibleTip.value =data.value.remark; dialogVisibleTip.value = data.value.chapterRemark ? data.value.chapterRemark : '暂无说明';
dialogVisible.value = true; dialogVisible.value = true;
} }
@@ -410,13 +355,13 @@ const types = ref({
4: "/homeworkpage", 4: "/homeworkpage",
5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试 5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
6: "/livebroadcast", 6: "/livebroadcast",
7: ({courseId}) => 7: ({ courseId }) =>
request(LINK_DETAILS(courseId), {}).then(({data: {linkAddress}}) => request(LINK_DETAILS(courseId), {}).then(({ data: { linkAddress } }) =>
window.open(linkAddress) window.open(linkAddress)
), //外联 ), //外联
8: "/discusspage", 8: "/discusspage",
9: "/moreactive", 9: "/moreactive",
10: ({evaType, targetId}) => 10: ({ evaType, targetId }) =>
window.open( window.open(
(evaType == 0 (evaType == 0
? import.meta.env.VITE_BOE_TEST_DETAIL_URL ? import.meta.env.VITE_BOE_TEST_DETAIL_URL
@@ -455,7 +400,7 @@ function toFinish(d) {
type: 1, type: 1,
courseId: d.courseId, courseId: d.courseId,
pName: data.value.name, pName: data.value.name,
sName:data.value.currentStageName, sName: data.value.currentStageName,
}, },
}); });
} else if (typeof types.value.path[d.type] === "function") { } else if (typeof types.value.path[d.type] === "function") {