mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-07 01:46:45 +08:00
1263 lines
38 KiB
Vue
1263 lines
38 KiB
Vue
<template>
|
|
<div class="projectdetails">
|
|
<!-- <ReturnHead-->
|
|
<!-- text="项目详情"-->
|
|
<!-- :showfile="true"-->
|
|
<!-- :courseId="projectId || courseId"-->
|
|
<!-- :type="1"-->
|
|
<!-- :gohome="type == 1 ? true : false"-->
|
|
<!-- ></ReturnHead>-->
|
|
<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 ? data?.remark : "-" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="project_title">项目内容</div>
|
|
<div
|
|
class="project_second"
|
|
v-for="(item, key) in data?.stageProcessList"
|
|
:key="key"
|
|
>
|
|
<div v-if="item.id == '0' && item.taskProcessList?.length == 0"></div>
|
|
<div
|
|
v-else
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div class="course1_first">
|
|
<div class="text8">{{ item.stageName }}</div>
|
|
|
|
<!-- 当前任务已结束的时候显示下面 -->
|
|
<div class="course1_right" :style="{ display: 'flex' }">
|
|
<div
|
|
style="
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 8px;
|
|
border: 2px solid #999;
|
|
"
|
|
:style="
|
|
item.statusName === '已完成' || item.statusName === '进行中'
|
|
? 'border: 2px solid #0060ff'
|
|
: 'border: 1px solid #999;'
|
|
"
|
|
></div>
|
|
<div
|
|
class="text9"
|
|
:style="
|
|
item.statusName === '已完成' || item.statusName === '进行中'
|
|
? 'color:#0060ff'
|
|
: 'color:#999'
|
|
"
|
|
>
|
|
{{
|
|
item.statusName ||
|
|
(data.unlockMode === 1 ? "未开始" : "未解锁")
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="secondcontent">
|
|
<div
|
|
class="question"
|
|
v-for="(el, index) in item.taskProcessList
|
|
.sort((a, b) => {
|
|
return a.id - b.id;
|
|
})
|
|
.filter((e) => !whiteTypes(e.type))"
|
|
:key="index"
|
|
:style="{ height: el.type === 1 ? '90px' : '72px' }"
|
|
>
|
|
<div style="width: calc(100% - 80px)">
|
|
<div class="issue" :title="el.name">
|
|
{{ el.name }}
|
|
</div>
|
|
<div v-if="el.type === 1" class="progressBox">
|
|
<!-- <div>当前进度</div> -->
|
|
<div
|
|
class="progress"
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 3px;
|
|
"
|
|
>
|
|
<div style="width: 200px">
|
|
<el-progress
|
|
:percentage="parseInt(el.currentRatio)"
|
|
:show-text="false"
|
|
:stroke-width="8"
|
|
:color="
|
|
{
|
|
0: 'rgba(238, 112, 108, 1)',
|
|
1: 'rgba(255, 151, 38, 1)',
|
|
2: 'rgba(39, 122, 255, 1)',
|
|
3: 'rgba(59, 94, 251, 1)',
|
|
4: 'rgba(57, 219, 183, 1)',
|
|
5: 'rgba(57, 219, 183, 1)',
|
|
}[parseInt(parseInt(el.currentRatio) / 20)]
|
|
"
|
|
/>
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #277aff;
|
|
margin-left: 10px;
|
|
"
|
|
:style="{
|
|
color: {
|
|
0: 'rgba(238, 112, 108, 1)',
|
|
1: 'rgba(255, 151, 38, 1)',
|
|
2: 'rgba(39, 122, 255, 1)',
|
|
3: 'rgba(59, 94, 251, 1)',
|
|
4: 'rgba(57, 219, 183, 1)',
|
|
5: 'rgba(57, 219, 183, 1)',
|
|
}[parseInt(parseInt(el.currentRatio) / 20)],
|
|
}"
|
|
>
|
|
{{ parseInt(el.currentRatio) }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="coursetag">
|
|
<div
|
|
class="tag1"
|
|
style="margin-right: 11px; margin-top: 3px"
|
|
v-if="el.flag"
|
|
>
|
|
必修
|
|
</div>
|
|
<div
|
|
class="tag2"
|
|
style="margin-right: 11px; margin-top: 3px"
|
|
v-if="!el.flag"
|
|
>
|
|
选修
|
|
</div>
|
|
<div
|
|
class="tag3"
|
|
style="margin-right: 11px; margin-top: 3px"
|
|
>
|
|
{{ TASK_TYPES.typeName[el.type] || "" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dropdown trigger="click">
|
|
<!-- <div class="goclass" @click="toFinish(el, item.stageName, item.id)" :style="{ background: el.statusName !== '已结束' &&(el.statusName || data.unlockMode === 1) ? '#2478ff' : '#999' }">
|
|
{{el.statusName || (data.unlockMode === 1 ? TASK_TYPES.toName[el.type] : "未解锁")}}
|
|
</div> -->
|
|
<div v-if="data.unlockMode === 1" class="goclass" @click="toFinish(el, item.stageName, item.id, item.studyModel)" :style="{ background: (el.statusName !== '已结束' && (el.statusName || item.studyModel==0)) ? '#2478ff' : '#999' }">
|
|
{{ el.statusName || (item.studyModel==0 ? TASK_TYPES.toName[el.type] : '未解锁')}}
|
|
</div>
|
|
<div v-else class="goclass" @click="toFinish(el, item.stageName, item.id, item.studyModel)" :style="{ background: (el.statusName !== '已结束' && el.statusName) ? '#2478ff' : '#999' }">
|
|
{{ el.statusName || '未解锁' }}
|
|
</div>
|
|
<!-- <template #dropdown v-if="el.type===2 && el.targetId?.split(',')?.length > 1">
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item v-for="(name,key) in el.targetName?.split(',')" :key="key" @click="toOffcoursePlanPage(el.targetId?.split(',')[key])">{{ name }}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template> -->
|
|
</el-dropdown>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="last">
|
|
<div class="project_title">数据排行</div>
|
|
<div class="ranking">
|
|
<div class="rankingbox">
|
|
<div class="ranknumber">
|
|
<div class="describe">积分</div>
|
|
<div class="number">12</div>
|
|
<div class="describe_part">名</div>
|
|
</div>
|
|
<div class="ranknumber">
|
|
<div class="describe">完成度</div>
|
|
<div class="number">21</div>
|
|
<div class="describe_part">名</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<!-- 开课列表弹框 -->
|
|
<el-dialog title="" top="120px" v-model="openCourseVisible" :show-close="false"
|
|
style="display:flex;justify-content:center;align-items:center;min-height: 320px;padding:0;border-radius: 4px;"
|
|
width="80%">
|
|
<div style="display: flex;justify-content:space-between;align-items:center;margin-bottom: 22px;width: 100%;">
|
|
<div style="width:88px;color:#333333;font-size: 16px;font-weight: 600;">开课列表</div>
|
|
<div
|
|
@click="openCourseVisible = false"
|
|
style="font-size: 12px;cursor:pointer;">X</div>
|
|
</div>
|
|
<div style="width: 100%;min-height:210px;margin-top: 12px;">
|
|
<div
|
|
v-for="item,key in openCourseList"
|
|
style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 12px;background: rgb(247, 251, 253);height: 40px;padding: 5px;border-radius: 5px;">
|
|
<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 200px;">{{ item }}</div>
|
|
<div
|
|
@click="toOffcoursePlanPage(openCourseIdList[key])"
|
|
style="width:60px;height:30px;text-align:center;line-height:30px;background:#0078fc;border-radius:5px;color:#fff;cursor: pointer;">去上课</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, reactive, ref, watch, onMounted } from "vue";
|
|
import { ElLoading } from "element-plus";
|
|
import { useRequest, request } from "@/api/request";
|
|
import {
|
|
PROJECT_PROCESS,
|
|
STUDY_RECORD,
|
|
PROJECT_DETAIL,
|
|
SubmitExternalExam,
|
|
UPDATE_CURRENT_TASK,
|
|
checkStudentExist,
|
|
EvaluationToLearn,
|
|
QueryEvaluationTaskStatusOne
|
|
} from "@/api/api";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import store from "@/store";
|
|
import { ElMessage } from "element-plus";
|
|
import ReturnHead from "@/components/ReturnHead.vue";
|
|
import { PROJECT, TASK_TYPES } from "@/api/CONST";
|
|
import dayjs from "dayjs";
|
|
import { useStore } from "vuex";
|
|
import { changeTime } from "@/api/method";
|
|
const {
|
|
query: { courseId, projectId, type, infoId, chapterOrStageId, id },
|
|
} = useRoute();
|
|
const router = useRouter();
|
|
const { commit, dispatch, state } = useStore();
|
|
const data = computed(() => state.projectInfo);
|
|
useRequest(PROJECT_PROCESS, { projectId: projectId, type }, (e) => {
|
|
useRequest(
|
|
checkStudentExist,
|
|
{
|
|
targetId: type == 1 ? projectId : infoId,
|
|
type: type,
|
|
chapterId: chapterOrStageId,
|
|
courseId: id,
|
|
},
|
|
(res) => {
|
|
console.log("判断任务是否删除", res);
|
|
if (res.code === 7) {
|
|
router.push({
|
|
path: "/loseefficacy",
|
|
});
|
|
} else {
|
|
if (res.code === 6) {
|
|
router.push({
|
|
path: "/notpath",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
);
|
|
});
|
|
watch(data, () => {
|
|
if (data.value.code === 6) {
|
|
router.push({
|
|
path: "/notpath",
|
|
});
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
dispatch("getProjectInfo", { projectId, type });
|
|
});
|
|
watch(
|
|
() => data.value.stageProcessList,
|
|
() => {
|
|
if (data.value.stageProcessList) {
|
|
data.value.stageProcessList.forEach((t) => {
|
|
t.stageStatusName = getTaskStatus(t);
|
|
});
|
|
console.log("改变data", data);
|
|
}
|
|
},
|
|
{ deep: true }
|
|
);
|
|
// watch(data, () => {
|
|
// console.log("data.value.projectId", data.value);
|
|
// if (data && data.value && !data.value.projectId) {
|
|
// ElMessage.warning("您不是此项目的学员");
|
|
// console.log("您不是此项目的学员");
|
|
// // window.open(
|
|
// // import.meta.env.VITE_BOE_BASE_URL + "/mobile/pages/index/index",
|
|
// // "_self"
|
|
// // );
|
|
// }
|
|
// });
|
|
|
|
function getTaskStatus(d) {
|
|
if (data.value.status !== 3) {
|
|
return "已结束";
|
|
}
|
|
if (
|
|
dayjs().isBefore(dayjs(d.beginTime)) ||
|
|
!d.taskProcessList?.filter((t) => t.status === 1)?.length
|
|
) {
|
|
return "未开始";
|
|
}
|
|
if (dayjs().isAfter(dayjs(data.value.endTime))) {
|
|
return "已结束";
|
|
}
|
|
if (
|
|
d.taskProcessList?.filter((t) => t.status === 1)?.length ===
|
|
d.taskProcessList?.length
|
|
) {
|
|
return "已完成";
|
|
}
|
|
return "进行中";
|
|
}
|
|
console.log("datadata", data);
|
|
const openCourseVisible = ref(false);
|
|
const openCourseList = ref([]);
|
|
const openCourseIdList = ref([]);
|
|
|
|
const userInfo = computed(() => store.state.userInfo);
|
|
const activeName = ref("first");
|
|
const handleClick = (tab, event) => {
|
|
console.log(tab, event);
|
|
};
|
|
const path = { 1: "path" };
|
|
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: window.location.protocol + import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线
|
|
2: ({ targetId }) => window.open(`${location.protocol}//${location.host}${import.meta.env.VITE_BASE_API}/stu/project/redirectDetail?courseId=${targetId}`, "_top"),
|
|
3: window.location.protocol + import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
|
|
4: "/homeworkpage",
|
|
5: window.location.protocol + import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
|
|
// 5: "/externalexam",
|
|
6: "/livebroadcast",
|
|
7: "/outerchain", //外联
|
|
8: "/discusspage",
|
|
9: "/moreactive",
|
|
// 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=${projectId}&channelCode=project`,
|
|
// "_top"
|
|
// ), //测评
|
|
10: "/evaluation", //测评
|
|
11: "/investigatpage",
|
|
12: "/ballotpage",
|
|
13: "/projectdetails",
|
|
},
|
|
});
|
|
|
|
const dialogVisible = ref(false);
|
|
const dialogVisibleTip = ref("该任务无法学习，请联系管理员进行替换！");
|
|
|
|
// 判断当前任务已结束及时间意义上的结束 提示用户
|
|
function judgeTaskIsEnd(type, endTimes, status) {
|
|
// type 任务类型 endTime 结束时间 status 任务状态 (状态 0 未完成 1 已完成 2 未开始 3 已结束)
|
|
console.log("judgeTaskIsEnd", type, endTimes, status);
|
|
let isEnd = false;
|
|
let nowTime = new Date().getTime();
|
|
let endTime = new Date().getTime(changeTime(endTimes));
|
|
console.log("endTime---------", endTime);
|
|
switch (type) {
|
|
case 1:
|
|
status == -1
|
|
? (isEnd = true)
|
|
: nowTime > endTime
|
|
? (isEnd = true)
|
|
: (isEnd = false);
|
|
break;
|
|
case 3:
|
|
status == -1
|
|
? (isEnd = true)
|
|
: nowTime > endTime
|
|
? (isEnd = true)
|
|
: (isEnd = false);
|
|
break;
|
|
case 5:
|
|
status == -1
|
|
? (isEnd = true)
|
|
: nowTime > endTime
|
|
? (isEnd = true)
|
|
: (isEnd = false);
|
|
break;
|
|
case 7:
|
|
status == -1
|
|
? (isEnd = true)
|
|
: nowTime > endTime
|
|
? (isEnd = true)
|
|
: (isEnd = false);
|
|
break;
|
|
case 10:
|
|
status == -1
|
|
? (isEnd = true)
|
|
: nowTime > endTime
|
|
? (isEnd = true)
|
|
: (isEnd = false);
|
|
break;
|
|
}
|
|
return isEnd;
|
|
}
|
|
|
|
function toFinish(d, sName, chapterOrStageId,studyModel) {
|
|
if (studyModel != 0 && !d.statusName) {
|
|
ElMessage.warning("当前未解锁")
|
|
return
|
|
}
|
|
if(d.statusName == '未解锁'|| d.statusName == ''||!d.hasOwnProperty('statusName')){
|
|
ElMessage.warning("当前未解锁")
|
|
return
|
|
}
|
|
if (d.type === 2) {
|
|
if(!d.targetId){
|
|
return ElMessage.error("还未添加开课,请联系管理员！")
|
|
}
|
|
if(d.targetId.split(',').length>1){
|
|
openCourseList.value = d.targetName?.split(',');
|
|
openCourseIdList.value = d.targetId?.split(',');
|
|
openCourseVisible.value = true;
|
|
return
|
|
}
|
|
}
|
|
if (judgeTaskIsEnd(d.type, data.value.endTime, data.value.status)) {
|
|
ElMessage.error("当前任务已结束");
|
|
return;
|
|
}
|
|
if (d.type == 2) {
|
|
let date1 = new Date(changeTime(d.endTime)).getTime();
|
|
let date2 = new Date().getTime();
|
|
if (date1 < date2) {
|
|
ElMessage.warning("当前面授课已结束");
|
|
return;
|
|
//return
|
|
}
|
|
}
|
|
// 作业过期判断
|
|
if (d.type == 4) {
|
|
let date1 = new Date(changeTime(d.endTime)).getTime();
|
|
let date2 = new Date().getTime();
|
|
if (date1 < date2) {
|
|
ElMessage.warning("当前作业已结束");
|
|
return;
|
|
}
|
|
}
|
|
// 直播结束时间
|
|
if (d.type == 6) {
|
|
let date1 = new Date(changeTime(d.endTime)).getTime();
|
|
let date2 = new Date().getTime();
|
|
if (date1 < date2) {
|
|
ElMessage.warning("当前直播已结束");
|
|
return;
|
|
}
|
|
}
|
|
// 考试 停用
|
|
if (d.type == 5) {
|
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
|
// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
|
|
ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
|
|
return;
|
|
}
|
|
// 此处判断外部考试跳转
|
|
if (d.examType == 2) {
|
|
// 点击即更新状态 进行中 chapterOrStageId
|
|
request(SubmitExternalExam, {
|
|
chapterId: chapterOrStageId,
|
|
externalId: d.courseId,
|
|
externalName: d.name,
|
|
targetId: data.value.projectId,
|
|
studentNo: userInfo.value.userNo,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
router.push({
|
|
path: "/externalexam",
|
|
query: {
|
|
courseId: d.courseId,
|
|
type: PROJECT,
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
// 评估 停用
|
|
if (d.type == 11) {
|
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
|
ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
|
|
return;
|
|
}
|
|
}
|
|
// 其他活动 结束时间
|
|
if (d.type == 9) {
|
|
let date1 = new Date(changeTime(d.endTime)).getTime();
|
|
let date2 = new Date().getTime();
|
|
if (date1 < date2) {
|
|
ElMessage.warning("当前活动已结束");
|
|
return;
|
|
}
|
|
}
|
|
// 在线课 停用 -- 暂时没有在线课停用标记
|
|
if (d.type == 1) {
|
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
|
ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
|
|
return;
|
|
}
|
|
}
|
|
// 面授课 停用
|
|
if (d.type == 2) {
|
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
|
ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
|
|
return;
|
|
}
|
|
}
|
|
if (d.type == 10) {
|
|
if (d.quizTaskId == null) {
|
|
// 肯定没有完成测评
|
|
// 调用接口 跳转页面
|
|
request(EvaluationToLearn, {
|
|
"businessType": "project",
|
|
"chapterId": chapterOrStageId,
|
|
"courseId": d.courseId,
|
|
"quizKid": d.targetId,
|
|
"routerOrProjectId": projectId,
|
|
"studentId": userInfo.value.id,
|
|
"studentName": userInfo.value.realName
|
|
}).then(res => {
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
let jumpUrl = res.data.quizUrl
|
|
// 此处写跳转url
|
|
window.open(jumpUrl, '_top')
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
return
|
|
} else {
|
|
// 进行中 或者 已完成
|
|
// 调用接口 判断当前测评状态 跳转页面
|
|
console.log('我是查询测评跳转链接所传递得参数', {
|
|
"quizTaskId": d.quizTaskId
|
|
})
|
|
request(QueryEvaluationTaskStatusOne, {
|
|
"quizTaskId": d.quizTaskId
|
|
}).then(res => {
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
if (res.data.complete_status == 2) {
|
|
ElMessage.error("您已完成测评")
|
|
return
|
|
} else {
|
|
// 重新查询跳转
|
|
// 调用接口 跳转页面
|
|
request(EvaluationToLearn, {
|
|
"businessType": "project",
|
|
"chapterId": chapterOrStageId,
|
|
"courseId": d.courseId,
|
|
"quizKid": d.targetId,
|
|
"routerOrProjectId": projectId,
|
|
"studentId": userInfo.value.id,
|
|
"studentName": userInfo.value.realName
|
|
}).then(res => {
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
let jumpUrl = res.data.quizUrl
|
|
// 此处写跳转url
|
|
window.open(jumpUrl, '_top')
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
return
|
|
}
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
return
|
|
}
|
|
}
|
|
|
|
if (!TASK_TYPES.path[d.type]) {
|
|
ElMessage.error("暂时未开放");
|
|
return;
|
|
}
|
|
if (d.type === 3) return ElMessage.warning("请在pc端查看");
|
|
//更新学员当前任务
|
|
request(UPDATE_CURRENT_TASK, {
|
|
id: d.id,
|
|
type: PROJECT,
|
|
pid: projectId,
|
|
name: d.name,
|
|
});
|
|
|
|
if (typeof TASK_TYPES.path[d.type] === "string") {
|
|
console.log("TASK_TYPES.path[d.type]", TASK_TYPES.path[d.type]);
|
|
TASK_TYPES.path[d.type] &&
|
|
TASK_TYPES.path[d.type].startsWith("http") &&
|
|
window.open(TASK_TYPES.path[d.type] + d.targetId, "_top");
|
|
TASK_TYPES.path[d.type] &&
|
|
TASK_TYPES.path[d.type].startsWith("/") &&
|
|
router.push({
|
|
path: TASK_TYPES.path[d.type],
|
|
query: {
|
|
id: d.id,
|
|
type: PROJECT,
|
|
infoId: data.value.projectId,
|
|
courseId: d.courseId,
|
|
pName: data.value.name,
|
|
sName,
|
|
chapterOrStageId: chapterOrStageId,
|
|
studentId: userInfo.value.id,
|
|
status: d.status,
|
|
targetId: d.targetId,
|
|
evaType: d.evaType,
|
|
btype: 1,
|
|
quizTaskId: d.quizTaskId,
|
|
},
|
|
});
|
|
} else if (typeof TASK_TYPES.path[d.type] === "function") {
|
|
if (d.type == 5) {
|
|
|
|
if (isIOS()){
|
|
// 模拟点击跳转
|
|
const url = TASK_TYPES.path[d.type](d) + d.targetId
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
// a.target = "_blank";
|
|
a.click();
|
|
|
|
window.location.href = url
|
|
return
|
|
}
|
|
|
|
// 保底解决兼容问题
|
|
window.open(url, "_top");
|
|
} else {
|
|
TASK_TYPES.path[d.type](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.id,
|
|
// type: PROJECT,
|
|
// infoId: data.value.projectId,
|
|
// courseId: d.courseId,
|
|
// pName: data.value.name,
|
|
// sName,
|
|
// chapterOrStageId: chapterOrStageId,
|
|
// studentId: userInfo.value.id,
|
|
// status: d.status,
|
|
// targetId: d.targetId,
|
|
// evaType: d.evaType,
|
|
// btype: 1,
|
|
// },
|
|
// });
|
|
// } else if (typeof types.value.path[d.type] === "function") {
|
|
// types.value.path[d.type](d);
|
|
// }
|
|
}
|
|
|
|
function isIOS() {
|
|
return [
|
|
'iPad Simulator',
|
|
'iPhone Simulator',
|
|
'iPod Simulator',
|
|
'iPad',
|
|
'iPhone',
|
|
'iPod'
|
|
].includes(navigator.platform) ||
|
|
// iPad on iOS 13 detection
|
|
(navigator.userAgent.includes("Mac") && "ontouchend" in document);
|
|
}
|
|
|
|
function toOffcoursePlanPage(id) {
|
|
window.open(`${location.protocol}//${location.host}${import.meta.env.VITE_BASE_API}/stu/project/redirectDetail?courseId=${id}`, '_top')
|
|
}
|
|
|
|
function whiteTypes(type) {
|
|
return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
|
|
}
|
|
// 查询当前阶段所有任务是否都完成
|
|
const queryAllStatus = (data) => {
|
|
// status === 1 已完成
|
|
console.log(data);
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (data[i].status !== 1) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.projectdetails {
|
|
.el-dialog__body{
|
|
width: 80%;
|
|
}
|
|
.el-dialog__header{
|
|
display: none;
|
|
}
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.main {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
//justify-content: center;
|
|
//margin-top: 10px;
|
|
.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: 80px;
|
|
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%;
|
|
font-size: 13px;
|
|
line-height: 30.29px;
|
|
color: rgba(110, 123, 132, 1);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.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;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.last {
|
|
width: 100%;
|
|
margin-top: 11.5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: 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);
|
|
}
|
|
.ranking {
|
|
width: 90%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 14px;
|
|
border-radius: 10px;
|
|
background-color: rgba(242, 245, 247, 1);
|
|
margin-bottom: 13.5px;
|
|
.rankingbox {
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.ranknumber {
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
border-bottom: 0.5px solid rgba(223, 223, 223, 1);
|
|
.describe {
|
|
display: flex;
|
|
position: absolute;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
color: rgba(51, 51, 48, 1);
|
|
}
|
|
.number {
|
|
display: flex;
|
|
position: absolute;
|
|
right: 23.5px;
|
|
font-size: 21px;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
color: rgba(0, 96, 255, 1);
|
|
}
|
|
.describe_part {
|
|
display: flex;
|
|
position: absolute;
|
|
right: 0;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
color: rgba(51, 51, 48, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|