mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-11 20:06:49 +08:00
-- 路径图详情修改
This commit is contained in:
yuping
@@ -11,44 +11,38 @@
|
||||
<!-- 详细信息 -->
|
||||
<div class="detailinfo">
|
||||
<div class="detailL">
|
||||
<div v-for="(i, k) in data.chapterProcessList" :key="k">
|
||||
<div>
|
||||
<div class="title">
|
||||
<div class="titleL">{{ i.chapterName }}</div>
|
||||
<div class="titleL">{{ data.currentStageName }}</div>
|
||||
<div class="titleR" :style="{ display: 'flex' }">
|
||||
<img src="../../assets/image/pathdetails/circle.png" />
|
||||
<div class="titleRT">进行中</div>
|
||||
</div>
|
||||
<div
|
||||
class="titleR"
|
||||
:style="{ display: i.status === 2 ? 'flex' : 'none' }"
|
||||
>
|
||||
<img src="../../assets/image/pathdetails/circle2.png" />
|
||||
<div class="titleRT" style="color: rgba(102, 102, 102, 1)">
|
||||
未开始
|
||||
<img
|
||||
:src="data.currentChapterCnt?circle:circle2"/>
|
||||
<div class="titleRT" :style="{color:data.currentChapterCnt?'':'rgba(102, 102, 102, 1)'}">
|
||||
{{ data.currentChapterCnt ? '进行中' : '未开始' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="course"
|
||||
v-for="(value, index) in i.taskProcessList.filter(
|
||||
class="course"
|
||||
v-for="(value, index) in data.taskBoList?.filter(
|
||||
(e) => !whiteTypes(e.type)
|
||||
)"
|
||||
:key="index"
|
||||
:key="index"
|
||||
>
|
||||
<div style="width: 70%">
|
||||
<div class="coursename" :title="value.name">{{ value.name }}</div>
|
||||
<div class="coursetag">
|
||||
<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
|
||||
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>
|
||||
@@ -66,17 +60,17 @@
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div
|
||||
class="progressBox"
|
||||
:style="{ display: value.type === 1 ? 'block' : 'none' }"
|
||||
class="progressBox"
|
||||
:style="{ display: value.type === 1 ? 'block' : 'none' }"
|
||||
>
|
||||
<div>当前进度</div>
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<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)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
@@ -89,13 +83,13 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #277aff;
|
||||
margin-left: 10px;
|
||||
"
|
||||
:style="{
|
||||
:style="{
|
||||
color: {
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
@@ -112,18 +106,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="goclass"
|
||||
:style="{
|
||||
class="goclass"
|
||||
:style="{
|
||||
background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
|
||||
}"
|
||||
@click="toFinish(value, i.chapterName, i.chapterId)"
|
||||
@click="toFinish(value)"
|
||||
>
|
||||
{{
|
||||
value.status === 1
|
||||
? "已完成"
|
||||
: types.path[value.type]
|
||||
? types.toName[value.type]
|
||||
: "未开放"
|
||||
? "已完成"
|
||||
: types.path[value.type]
|
||||
? types.toName[value.type]
|
||||
: "未开放"
|
||||
}}
|
||||
</div>
|
||||
<!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
|
||||
@@ -186,18 +180,18 @@
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<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="box"></div>
|
||||
</div>
|
||||
<!-- todo #路径详情 个人信息缺少img和介绍-->
|
||||
<div
|
||||
class="teacheritem"
|
||||
:style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
|
||||
class="teacheritem"
|
||||
:style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
|
||||
>
|
||||
<img class="peopleimg" :src="`/upload${userInfo.avatar}`" />
|
||||
<img class="peopleimg" :src="`/upload${userInfo.avatar}`"/>
|
||||
<div style="margin-left: 17px">
|
||||
<div class="teacherName">
|
||||
<div style="margin-right: 5px">
|
||||
@@ -214,8 +208,8 @@
|
||||
<div class="info" style="padding-top: 20px">
|
||||
<div class="title">
|
||||
<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="box"></div>
|
||||
@@ -231,10 +225,10 @@
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<el-progress
|
||||
:percentage="parseInt(data.totalProgress * 100)"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
:percentage="parseInt(data.currentChapterCnt/data.totalChapterCnt * 100)"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
{
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
@@ -242,13 +236,13 @@
|
||||
3: 'rgba(59, 94, 251, 1)',
|
||||
4: 'rgba(57, 219, 183, 1)',
|
||||
5: 'rgba(57, 219, 183, 1)',
|
||||
}[(parseInt(data.totalProgress) * 100) / 20]
|
||||
}[(parseInt(data.currentChapterCnt/data.totalChapterCnt)* 100) / 20]
|
||||
"
|
||||
/>
|
||||
</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: {
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
@@ -256,10 +250,10 @@
|
||||
3: 'rgba(59, 94, 251, 1)',
|
||||
4: 'rgba(57, 219, 183, 1)',
|
||||
5: 'rgba(57, 219, 183, 1)',
|
||||
}[parseInt((data.totalProgress * 100) / 20)],
|
||||
}[parseInt((data.currentChapterCnt/data.totalChapterCnt * 100) / 20)],
|
||||
}"
|
||||
>
|
||||
{{ parseInt(data.totalProgress * 100) }}%
|
||||
{{ parseInt(data.currentChapterCnt/data.totalChapterCnt * 100) }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -270,10 +264,10 @@
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<el-progress
|
||||
:percentage="parseInt(data.compulsoryProgress * 100)"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
:percentage="parseInt(data.currentReqCnt/data.totalReqCnt * 100)"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
{
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
@@ -281,18 +275,18 @@
|
||||
3: 'rgba(59, 94, 251, 1)',
|
||||
4: 'rgba(57, 219, 183, 1)',
|
||||
5: 'rgba(57, 219, 183, 1)',
|
||||
}[parseInt((data.compulsoryProgress * 100) / 20)]
|
||||
}[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)]
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #277aff;
|
||||
margin-left: 10px;
|
||||
"
|
||||
:style="{
|
||||
:style="{
|
||||
color: {
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
@@ -300,10 +294,10 @@
|
||||
3: 'rgba(59, 94, 251, 1)',
|
||||
4: 'rgba(57, 219, 183, 1)',
|
||||
5: 'rgba(57, 219, 183, 1)',
|
||||
}[parseInt((data.compulsoryProgress * 100) / 20)],
|
||||
}[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)],
|
||||
}"
|
||||
>
|
||||
{{ parseInt(data.compulsoryProgress * 100) }}%
|
||||
{{ parseInt(data.currentReqCnt/data.totalReqCnt * 100) }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -318,40 +312,31 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref, watch } from "vue";
|
||||
import word from "@/assets/image/file/word.png";
|
||||
import ppt from "@/assets/image/file/ppt.png";
|
||||
import pdf from "@/assets/image/file/pdf.png";
|
||||
import zip from "@/assets/image/file/zip.png";
|
||||
import md from "@/assets/image/file/md.png";
|
||||
import medal1 from "@/assets/image/medal/medal1.png";
|
||||
import medal2 from "@/assets/image/medal/medal2.png";
|
||||
import medal3 from "@/assets/image/medal/medal3.png";
|
||||
import img from "@/assets/image/uploadimg.png";
|
||||
import { boeRequest, useRequest, request } from "@/api/request";
|
||||
import { ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD } from "@/api/api";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useUserInfo } from "@/api/utils";
|
||||
import {computed, reactive, ref, watch} from "vue";
|
||||
import circle from '../../assets/image/pathdetails/circle.png';
|
||||
import circle2 from '../../assets/image/pathdetails/circle2.png';
|
||||
import {boeRequest, useRequest, request} from "@/api/request";
|
||||
import {ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD} from "@/api/api";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {ElMessage} from "element-plus";
|
||||
import store from "@/store";
|
||||
|
||||
const {
|
||||
query: { routerId, routerName },
|
||||
query: {routerId, routerName},
|
||||
} = useRoute();
|
||||
const router = useRouter();
|
||||
const returnclick = () => {
|
||||
router.back();
|
||||
};
|
||||
const { data } = useRequest(ROUTER_PROCESS, { routerId });
|
||||
console.log("data", data);
|
||||
const {data} = useRequest(ROUTER_PROCESS, {routerId});
|
||||
const userInfo = computed(() => store.state.userInfo);
|
||||
console.log("userInfo", userInfo);
|
||||
|
||||
const activeName = ref("first");
|
||||
|
||||
const handleClick = (tab, event) => {
|
||||
console.log(tab, event);
|
||||
};
|
||||
const path = { 1: "path" };
|
||||
const path = {1: "path"};
|
||||
|
||||
const types = ref({
|
||||
typeName: {
|
||||
@@ -391,56 +376,54 @@ const types = ref({
|
||||
4: "/homeworkpage",
|
||||
5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
|
||||
6: "/livebroadcast",
|
||||
7: ({ courseId }) =>
|
||||
request(LINK_DETAILS(courseId), {}).then(({ data: { linkAddress } }) =>
|
||||
window.open(linkAddress)
|
||||
), //外联
|
||||
7: ({courseId}) =>
|
||||
request(LINK_DETAILS(courseId), {}).then(({data: {linkAddress}}) =>
|
||||
window.open(linkAddress)
|
||||
), //外联
|
||||
8: "/discusspage",
|
||||
9: "/moreactive",
|
||||
10: ({ evaType, targetId }) =>
|
||||
window.open(
|
||||
(evaType == 0
|
||||
? import.meta.env.VITE_BOE_TEST_DETAIL_URL
|
||||
: import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL) + targetId
|
||||
), //测评
|
||||
10: ({evaType, targetId}) =>
|
||||
window.open(
|
||||
(evaType == 0
|
||||
? import.meta.env.VITE_BOE_TEST_DETAIL_URL
|
||||
: import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL) + targetId
|
||||
), //测评
|
||||
11: "/surveydetail",
|
||||
12: "/ballotpage",
|
||||
13: "/projectdetails",
|
||||
},
|
||||
});
|
||||
|
||||
function toFinish(d, sName, chapterId) {
|
||||
function toFinish(d) {
|
||||
if (!types.value.path[d.type]) {
|
||||
ElMessage.error("暂时未开放");
|
||||
return;
|
||||
}
|
||||
if (d.type == 3 || d.type == 7) {
|
||||
if (d.type === 3 || d.type === 7) {
|
||||
request(STUDY_RECORD, {
|
||||
studentId: data.value.userInfoBo.userId,
|
||||
targetId: data.value.routerId,
|
||||
logo: 1,
|
||||
stageOrChapterId: chapterId,
|
||||
stageOrChapterId: data.value.currentStageId,
|
||||
taskId: d.routerTaskId,
|
||||
});
|
||||
}
|
||||
if (typeof types.value.path[d.type] === "string") {
|
||||
console.log("dddddd", d);
|
||||
|
||||
types.value.path[d.type] &&
|
||||
types.value.path[d.type].startsWith("http") &&
|
||||
window.open(types.value.path[d.type] + d.targetId);
|
||||
types.value.path[d.type].startsWith("http") &&
|
||||
window.open(types.value.path[d.type] + d.targetId);
|
||||
types.value.path[d.type] &&
|
||||
types.value.path[d.type].startsWith("/") &&
|
||||
router.push({
|
||||
path: types.value.path[d.type],
|
||||
query: {
|
||||
id: d.routerTaskId,
|
||||
type: 1,
|
||||
courseId: d.courseId,
|
||||
pName: data.value.name,
|
||||
sName,
|
||||
},
|
||||
});
|
||||
types.value.path[d.type].startsWith("/") &&
|
||||
router.push({
|
||||
path: types.value.path[d.type],
|
||||
query: {
|
||||
id: d.routerTaskId,
|
||||
type: 1,
|
||||
courseId: d.courseId,
|
||||
pName: data.value.name,
|
||||
sName:data.currentStageName,
|
||||
},
|
||||
});
|
||||
} else if (typeof types.value.path[d.type] === "function") {
|
||||
console.log("ddddddd", d);
|
||||
types.value.path[d.type](d);
|
||||
|
||||
Reference in New Issue
Block a user