Files
student-h5/src/views/pathmap/PathmapPage.vue
2023-02-06 18:56:55 +08:00

775 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="pathmap">
<div class="main">
<div class="up">
<div class="notice">
<span class="text"
>请各位选课的同学提前阅读本课程的教学大纲与计划请各位选课的同学提前阅读本课程的教学大纲与计划</span
>
<span class="close"></span>
</div>
<div class="content">
<div class="title">{{ data?.name }}</div>
<div class="text2">
{{ data?.remark }}
</div>
</div>
</div>
<div class="down">
<div class="project_title">学习路径内容</div>
<!-- <div
class="project_first"
>
<div class="course1_first">
<div class="text8">管理者如何持续找到发力点</div>
<div class="course1_right">
<div class="circular"></div>
<div class="text9">进行中</div>
<div class="btn1"></div>
</div>
</div>
<div class="course_content">
<div class="study1">
<div class="firstclass"></div>
<div class="firstprogress">
<span class="firsttext">BOE端到端体系 - 第七章</span>
<span class="secondtext">70%</span>
<div class="progressbox">
<div class="progressboxpart"></div>
</div>
</div>
</div>
<div class="study2">
<div class="secondclass"></div>
<div class="secondprogress">
<span class="firsttext">中级产品经理项目 - 产品经理</span>
<span class="secondtext">52%</span>
<div class="progressbox">
<div class="progressboxpart"></div>
</div>
</div>
</div>
</div>
</div> -->
<div class="project_second">
<div class="course1_first">
<div class="text8">{{ data?.currentStageName }}</div>
<div class="course1_right">
<div class="circular"></div>
<div class="text9">进行中</div>
<div class="btn1"></div>
</div>
</div>
<div class="secondcontent">
<div
class="question"
v-for="(el, index) in data?.taskBoList"
:key="index"
>
<div>
<div class="issue">
{{ el.name }}
</div>
<div class="coursetag">
<div
class="tag1"
style="margin-right: 11px; margin-top: 16px"
v-if="el.flag"
>
必修
</div>
<div
class="tag2"
style="margin-right: 11px; margin-top: 16px"
v-if="!el.flag"
>
选修
</div>
<div
class="tag3"
style="margin-right: 11px; margin-top: 16px"
>
{{ types.typeName[el.type] || "" }}
</div>
</div>
</div>
<div
class="goclass"
:style="{
background: `${types.path[el.type] ? '#2478ff' : '#999'}`,
}"
@click="toFinish(el)"
>
{{
el.status === 1
? "已完成"
: types.path[el.type]
? types.toName[el.type]
: "未开放"
}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
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";
import { ROUTER } from "@/api/CONST";
const {
query: { routerId, routerName },
} = useRoute();
const router = useRouter();
const returnclick = () => {
router.back();
};
const { data } = useRequest(ROUTER_PROCESS, { routerId });
const userInfo = computed(() => store.state.userInfo);
console.log("lalalallala", data);
const activeName = ref("first");
const handleClick = (tab, event) => {
console.log(tab, event);
};
const path = { 1: "path" };
const dialogVisible = ref(false);
const dialogVisibleTip = ref("");
const types = ref({
typeName: {
1: "在线",
2: "面授",
3: "案例",
4: "作业",
5: "考试",
6: "直播",
7: "外链",
8: "讨论",
9: "活动",
10: "测评",
11: "评估",
12: "投票",
13: "项目",
},
toName: {
1: "去上课",
2: "去上课",
3: "去阅读",
4: "去完成",
5: "去完成",
6: "去观看",
7: "去查看",
8: "去讨论",
9: "去签到",
10: "去完成",
11: "去完成",
12: "去投票",
13: "去完成",
},
path: {
1: import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线
2: "/faceteach",
3: import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
4: "/homeworkpage",
5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
// 5: "/externalexam",
6: "/liveboradcast",
7: "/outerchain", //外联
// 7: ({ targetId }) => window.open(targetId, "_top"), //外联
8: "/discusspage",
9: "/activitiespage",
// 10: ({ evaType, targetId }) =>
// window.open(
// evaType == 0
// ? import.meta.env.VITE_BOE_TEST_DETAIL_URL + targetId
// : import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL +
// targetId +
// `&quizTaskKid=${routerId}&channelCode=learningpath`,
// "_top"
// ), //测评
10: "/evaluation", //测评
11: "/investigatpage",
12: "/ballotpage",
13: "/projectdetails",
},
});
function toFinish(d) {
console.log(d);
console.log(data.value.currentStageId, routerId);
if (!types.value.path[d.type]) {
ElMessage.error("暂时未开放");
return;
}
if (d.type == 2) {
let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime();
if (date1 < date2) {
dialogVisibleTip.value = "当前面授课已结束";
dialogVisible.value = true;
//return
}
}
if (d.type == 4) {
let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime();
if (date1 < date2) {
dialogVisibleTip.value = "当前作业已结束";
dialogVisible.value = true;
//return
}
}
// 直播结束时间
if (d.type == 6) {
let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime();
if (date1 < date2) {
dialogVisibleTip.value = "当前直播已结束";
dialogVisible.value = true;
//return
}
}
// 考试 停用
if (d.type == 5) {
if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
dialogVisibleTip.value = "该任务无法学习,请联系管理员进行替换!";
dialogVisible.value = true;
return;
}
// 此处判断外部考试跳转
if (d.startTime == null || d.endTime == null) {
router.push({
path: "/externalexam",
query: {
courseId: d.courseId,
},
});
return;
}
}
// 评估 停用
if (d.type == 11) {
if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
dialogVisibleTip.value = "该任务无法学习,请联系管理员进行替换!";
dialogVisible.value = true;
return;
}
}
// 其他活动 结束时间
if (d.type == 9) {
let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime();
if (date1 < date2) {
dialogVisibleTip.value = "当前活动已结束";
dialogVisible.value = true;
//return
}
}
// 在线课 停用 -- 暂时没有在线课停用标记
if (d.type == 1) {
if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
dialogVisibleTip.value = "该任务无法学习,请联系管理员进行替换!";
dialogVisible.value = true;
return;
}
}
// 面授课 停用
if (d.type == 2) {
if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习,请联系管理员进行替换。")
dialogVisibleTip.value = "该任务无法学习,请联系管理员进行替换!";
dialogVisible.value = true;
return;
}
}
if (d.type === 3) {
d.status !== 1 &&
request(STUDY_RECORD, {
studentId: userInfo.value.id,
targetId: data.value.routerId,
logo: ROUTER,
stageOrChapterId: data.value.currentStageId,
taskId: d.routerTaskId,
});
}
console.log("点击跳转", d);
if (typeof types.value.path[d.type] === "string") {
types.value.path[d.type] &&
types.value.path[d.type].startsWith("http") &&
window.open(types.value.path[d.type] + d.targetId, "_top");
types.value.path[d.type] &&
types.value.path[d.type].startsWith("/") &&
router.push({
path: types.value.path[d.type],
query: {
id: d.routerTaskId,
type: ROUTER,
infoId: routerId,
courseId: d.courseId,
pName: data.value.name,
sName: data.value.currentStageName,
chapterOrStageId: data.value.currentStageId,
studentId: userInfo.value.id,
status: d.status,
targetId: d.targetId,
evaType: d.evaType,
btype: 2,
},
});
} else if (typeof types.value.path[d.type] === "function") {
console.log("ddddddd", d);
types.value.path[d.type](d);
// console.log("types.value.path[d.type](d)", d);
}
}
</script>
<style lang="scss">
.pathmap {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
.main {
width: 100%;
display: flex;
flex-direction: column;
//justify-content: center;
.up {
width: 100%;
height: 162px;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
background-color: rgba(255, 255, 255, 1);
.notice {
background-color: rgba(255, 251, 238, 1);
width: 100%;
height: 25px;
display: flex;
justify-content: center;
position: relative;
.text {
//display: flex;
height: 25px;
//position: absolute;
color: rgba(255, 158, 0, 1);
padding: 6px 41px 6.5px 15.5px;
font-size: 12px;
//line-height: 24px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.close {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 9.5px;
height: 9.5px;
background-image: url(../../assets/image/pathmap/close.png);
margin-top: 10px;
margin-right: 16px;
margin-bottom: 8px;
}
}
.content {
width: 90%;
display: flex;
flex-direction: column;
.title {
margin-top: 15.5px;
font-size: 14px;
font-weight: 700;
line-height: 21.6px;
color: rgba(4, 36, 60, 1);
}
.text2 {
display: flex;
margin-top: 10px;
margin-bottom: 22.5px;
font-size: 13px;
color: rgba(51, 51, 48, 1);
line-height: 24px;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
.down {
width: 100%;
margin-top: 11.5px;
//height: 529px;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
background-color: rgba(255, 255, 255, 1);
.project_title {
width: calc(100% - 36.5px);
display: flex;
font-size: 16px;
font-weight: 500;
line-height: 12px;
color: rgba(13, 35, 58, 1);
padding: 17px 0 17px 36.5px;
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
}
.project_first {
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 18px;
.course1_first {
width: 100%;
height: 35px;
display: flex;
justify-content: content;
border-radius: 10px;
background-color: #f9f9f9;
.text8 {
display: flex;
flex: 1;
margin-top: 11px;
margin-left: 20px;
margin-bottom: 10.5px;
height: 13.5px;
font-size: 14px;
font-weight: 600;
color: #333330;
}
.course1_right {
display: flex;
position: relative;
width: 60px;
height: 13.5px;
margin-top: 15px;
// margin-right: 10.5px;
.circular {
position: absolute;
top: 1px;
right: 63px;
width: 8.5px;
height: 8.5px;
border-radius: 7px;
border: 1px solid #0060ff;
}
.text9 {
display: flex;
justify-content: content;
position: absolute;
width: 40px;
height: 13.5px;
top: 0;
//left: 20px;
right: 18.5px;
line-height: 13.5px;
color: #0060ff;
font-size: 13px;
font-weight: 600;
}
.btn1 {
width: 7px;
height: 6px;
position: absolute;
top: 3px;
right: 6px;
background-image: url(../../assets/image/pathmap/btn.png);
}
}
}
.course_content {
width: 90%;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 26.5px;
.study1 {
display: flex;
//justify-content: center;
width: 100%;
margin-bottom: 15px;
.firstclass {
display: flex;
width: 74px;
height: 43px;
background-image: url(../../assets/image/pathmap/firstclass.png);
}
.firstprogress {
display: flex;
flex: 1;
position: relative;
margin-left: 9.5px;
.firsttext {
position: absolute;
//top: 6px;
display: flex;
font-size: 13px;
line-height: 30.29px;
color: rgba(110, 123, 132, 1);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.secondtext {
position: absolute;
//top: 6px;
right: 0;
font-size: 12px;
line-height: 30.29px;
color: rgba(39, 122, 255, 1);
}
.progressbox {
width: 100%;
position: absolute;
display: flex;
height: 6.4px;
bottom: 4px;
background-color: rgba(232, 241, 254, 1);
border-radius: 2px;
.progressboxpart {
width: 70%;
height: 6.4px;
border-radius: 2px;
background: linear-gradient(
-180deg,
rgba(36, 120, 255, 1),
rgba(80, 147, 255, 1)
);
}
}
}
}
.study2 {
display: flex;
width: 100%;
margin-bottom: 15px;
.secondclass {
width: 74px;
height: 43px;
background-image: url(../../assets/image/pathmap/secondclass.png);
}
.secondprogress {
display: flex;
flex: 1;
position: relative;
margin-left: 9.5px;
.firsttext {
position: absolute;
//top: 6px;
display: flex;
font-size: 13px;
line-height: 30.29px;
color: rgba(110, 123, 132, 1);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.secondtext {
position: absolute;
//top: 6px;
right: 0;
font-size: 12px;
line-height: 30.29px;
color: rgba(39, 122, 255, 1);
}
.progressbox {
width: 100%;
position: absolute;
display: flex;
height: 6.4px;
bottom: 4px;
background-color: rgba(232, 241, 254, 1);
border-radius: 2px;
.progressboxpart {
width: 52%;
height: 6.4px;
border-radius: 2px;
background: linear-gradient(
-180deg,
rgba(36, 120, 255, 1),
rgba(80, 147, 255, 1)
);
}
}
}
}
}
}
.project_second {
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10.5px;
.course1_first {
width: 100%;
height: 35px;
display: flex;
justify-content: content;
border-radius: 10px;
background-color: #f9f9f9;
.text8 {
display: flex;
flex: 1;
margin-top: 11px;
margin-left: 20px;
margin-bottom: 10.5px;
height: 13.5px;
font-size: 14px;
font-weight: 600;
color: #333330;
}
.course1_right {
display: flex;
position: relative;
width: 60px;
height: 13.5px;
margin-top: 15px;
// margin-right: 10.5px;
.circular {
position: absolute;
top: 1px;
right: 63px;
width: 8.5px;
height: 8.5px;
border-radius: 7px;
border: 1px solid #0060ff;
}
.text9 {
display: flex;
justify-content: content;
position: absolute;
width: 40px;
height: 13.5px;
top: 0;
//left: 20px;
right: 18.5px;
line-height: 13.5px;
color: #0060ff;
font-size: 13px;
font-weight: 600;
}
.btn1 {
width: 7px;
height: 6px;
position: absolute;
top: 3px;
right: 6px;
background-image: url(../../assets/image/pathmap/btn.png);
}
}
}
.secondcontent {
width: 90%;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 10px;
.question {
width: 100%;
display: flex;
position: relative;
height: 72px;
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.issue {
width: 100%;
display: flex;
font-size: 13px;
line-height: 30.29px;
color: rgba(110, 123, 132, 1);
}
.coursetag {
display: flex;
flex-wrap: wrap;
}
.goclass {
width: 63px;
height: 23px;
background: #2478ff;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
border-radius: 4px;
font-size: 14px;
font-weight: 800;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
// margin-right: 37px;
cursor: pointer;
}
// .tag1 {
// position: absolute;
// left: 0;
// bottom: 14.5px;
// display: flex;
// justify-content: center;
// align-items: center;
// font-size: 13px;
// color: rgba(203, 128, 231, 1);
// border: 0.5px solid rgba(203, 128, 231, 1);
// line-height: 19.2px;
// //padding: 0 10px;
// }
// .tag2 {
// position: absolute;
// left: 92px;
// bottom: 14.5px;
// display: flex;
// justify-content: center;
// align-items: center;
// font-size: 13px;
// color: rgba(136, 157, 238, 1);
// border: 0.5px solid rgba(136, 157, 238, 1);
// line-height: 19.2px;
// //padding: 0 10px;
// }
// .tag3 {
// position: absolute;
// left: 0;
// bottom: 14.5px;
// display: flex;
// justify-content: center;
// align-items: center;
// font-size: 13px;
// color: rgba(104, 206, 234, 1);
// border: 0.5px solid rgba(104, 206, 234, 1);
// line-height: 19.2px;
// //padding: 0 10px;
// }
}
}
}
}
}
}
</style>