mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-09 10:56:47 +08:00
481 lines
13 KiB
Vue
481 lines
13 KiB
Vue
<template>
|
|
<div class="evaluation">
|
|
<ReturnHead text="测评详情"></ReturnHead>
|
|
<!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->
|
|
<!-- <div class="top" :style="{ display: closeBtn ? 'flex' : 'none' }">
|
|
<div class="topin">
|
|
<div class="topsa">
|
|
{{ data?.liveNotice }}
|
|
</div>
|
|
<img
|
|
class="topimg"
|
|
@click="isShowClose"
|
|
src="../../assets/image/liveboradcast/cha.png"
|
|
/>
|
|
</div>
|
|
</div> -->
|
|
<div class="notice" style="margin-top: 0">
|
|
<div class="noticebox">
|
|
<!-- <div class="avator">
|
|
<img class="avaimg" :src="teacherInfo.avatar" />
|
|
<div class="avaname">{{ data.userInfoBo?.userName }}</div>
|
|
</div> -->
|
|
<div class="mani">
|
|
<div class="joininfo">【测评】{{ data?.evaluationName }}</div>
|
|
<div class="contenttitle">
|
|
<img class="timeimg" src="../../assets/image/ballotpage/time.png" />
|
|
<div class="timee">
|
|
{{ data?.evaluationStartTime + " 至 " + data?.evaluationEndTime }}
|
|
</div>
|
|
</div>
|
|
<div class="timebox">
|
|
<div class="samez" style="margin-left: 18px">
|
|
{{ hour }}
|
|
</div>
|
|
<div class="samey">时</div>
|
|
<div class="samez">
|
|
{{ minute }}
|
|
</div>
|
|
<div class="samey">分</div>
|
|
<div class="samez">
|
|
{{ seconds }}
|
|
</div>
|
|
<div class="samey">秒</div>
|
|
</div>
|
|
<div class="midline"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notice">
|
|
<div class="noticebox">
|
|
<div class="mani">
|
|
<div class="joininfo">测评说明</div>
|
|
<div class="line"></div>
|
|
<div class="contentone">
|
|
<div class="actinner">
|
|
{{ data?.evaluationExplain }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btnbox">
|
|
<div class="submitbtn" @click="goOuterChain">去查看</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ReturnHead from "@/components/ReturnHead.vue";
|
|
import { computed, reactive, toRefs, onUnmounted, ref, watch } from "vue";
|
|
import img from "@/assets/image/uploadimg.png";
|
|
import { request, useRequest } from "@/api/request";
|
|
import {
|
|
EVALUATION_DETAIL,
|
|
STUDY_RECORD,
|
|
EvaluationToLearn,
|
|
QueryEvaluationTaskStatusOne,
|
|
} from "@/api/api";
|
|
import { useRoute } from "vue-router/dist/vue-router";
|
|
import { useRouter } from "vue-router";
|
|
import { useUserInfo } from "@/api/utils";
|
|
import { ElMessage } from "element-plus";
|
|
import dayjs from "dayjs";
|
|
import store from "@/store";
|
|
const {
|
|
query: {
|
|
courseId: evaluationId,
|
|
evaType,
|
|
targetId,
|
|
chapterOrStageId,
|
|
infoId,
|
|
btype,
|
|
quizTaskId,
|
|
type,
|
|
},
|
|
} = useRoute();
|
|
const router = useRouter();
|
|
onUnmounted(() => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
});
|
|
const { data } = useRequest(EVALUATION_DETAIL, { evaluationId, type }, (e) => {
|
|
if (e.code === 6) {
|
|
router.push({
|
|
path: "/notpath",
|
|
});
|
|
}
|
|
});
|
|
console.log("测评信息222", data);
|
|
|
|
const userInfo = computed(() => store.state.userInfo);
|
|
//作业倒计时
|
|
let hour = ref(0);
|
|
let minute = ref(0);
|
|
let seconds = ref(0);
|
|
let timer = setInterval(() => {
|
|
if (data && data.value && data.value.evaluationEndTime) {
|
|
let endTime = parseInt(
|
|
new Date(data.value.evaluationEndTime).getTime() / 1000
|
|
);
|
|
let nowTime = parseInt(new Date().getTime() / 1000);
|
|
if (endTime > nowTime) {
|
|
hour.value = parseInt(
|
|
dayjs(data.value.evaluationEndTime).diff(dayjs(), "minute") / 60
|
|
);
|
|
minute.value = parseInt(
|
|
dayjs(data.value.evaluationEndTime).diff(dayjs(), "minute") % 60
|
|
);
|
|
seconds.value = parseInt(
|
|
dayjs(data.value.evaluationEndTime).diff(dayjs(), "seconds") -
|
|
(hour.value * 60 + minute.value) * 60
|
|
);
|
|
} else {
|
|
clearInterval(timer);
|
|
}
|
|
}
|
|
}, 1000);
|
|
|
|
const goOuterChain = () => {
|
|
console.log("点击去查看", quizTaskId);
|
|
if (quizTaskId == null) {
|
|
request(EvaluationToLearn, {
|
|
businessType: btype == 1 ? "project" : "learningpath",
|
|
chapterId: chapterOrStageId,
|
|
courseId: evaluationId,
|
|
quizKid: data.value.evaluationTypeId,
|
|
routerOrProjectId: infoId,
|
|
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);
|
|
});
|
|
} else {
|
|
request(QueryEvaluationTaskStatusOne, {
|
|
quizTaskId: quizTaskId,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
if (res.code == 200) {
|
|
if (res.data.complete_status == 2) {
|
|
ElMessage.error("您已完成测评");
|
|
return;
|
|
} else {
|
|
// 重新查询跳转
|
|
// 调用接口 跳转页面
|
|
console.log("我是查询测评跳转链接所传递得参数", {
|
|
businessType: btype === 2 ? "learningpath" : "project",
|
|
chapterId: chapterOrStageId,
|
|
courseId: evaluationId,
|
|
quizKid: data.value.evaluationTypeId,
|
|
routerOrProjectId: infoId,
|
|
studentId: userInfo.value.id,
|
|
studentName: userInfo.value.realName,
|
|
});
|
|
request(EvaluationToLearn, {
|
|
businessType: btype == 1 ? "project" : "learningpath",
|
|
chapterId: chapterOrStageId,
|
|
courseId: evaluationId,
|
|
quizKid: data.value.evaluationTypeId,
|
|
routerOrProjectId: infoId,
|
|
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);
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
|
|
// window.open(
|
|
// evaType == 0
|
|
// ? window.location.protocol +
|
|
// import.meta.env.VITE_BOE_TEST_DETAIL_URL +
|
|
// targetId
|
|
// : window.location.protocol +
|
|
// import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL +
|
|
// targetId +
|
|
// `&quizTaskKid=${routerId}&channelCode=learningpath`,
|
|
// "_top"
|
|
// ); //测评
|
|
};
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style lang="scss">
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
content: " ";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.evaluation {
|
|
width: 100%;
|
|
.top {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 25px;
|
|
background-color: #fffbee;
|
|
.topin {
|
|
// text-align: center;
|
|
width: 90%;
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.topsa {
|
|
color: #ff9e00;
|
|
line-height: 25px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.topimg {
|
|
height: 10px;
|
|
width: 10px;
|
|
margin-top: 7px;
|
|
}
|
|
}
|
|
}
|
|
.notice {
|
|
width: 100%;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// // margin-top: -17.5px;
|
|
padding-bottom: 24px;
|
|
margin-top: 20px;
|
|
background: #fff;
|
|
.noticebox {
|
|
width: 100%;
|
|
background: #fff;
|
|
// border-radius: 4px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
.avator {
|
|
display: flex;
|
|
position: absolute;
|
|
right: 29px;
|
|
top: 30px;
|
|
// background-color:red;
|
|
// z-index: 999;
|
|
.avaimg {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
}
|
|
.avaname {
|
|
line-height: 30px;
|
|
margin-left: 8px;
|
|
color: #0d233a;
|
|
}
|
|
}
|
|
.line {
|
|
width: 100%;
|
|
height: 0;
|
|
border-top: 1px solid #f1f2f3;
|
|
margin-top: 17px;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
.mani {
|
|
width: 90%;
|
|
margin-top: 20px;
|
|
// position:relative;
|
|
.joininfo {
|
|
color: #0d233a;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.contenttitle {
|
|
width: 100%;
|
|
// height:10px;
|
|
margin-top: 15px;
|
|
// background-color: #bfa;
|
|
display: flex;
|
|
.timeimg {
|
|
width: 12.8px;
|
|
height: 13px;
|
|
}
|
|
.timee {
|
|
color: #6e7b84;
|
|
font-size: 14px;
|
|
line-height: 13px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
.midline {
|
|
height: 0;
|
|
border-top: 1px solid #f1f2f3;
|
|
width: 100%;
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.timebox {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 49px;
|
|
background-color: #f2f5f7;
|
|
margin-top: 17.5px;
|
|
margin-bottom: 27.5px;
|
|
border-radius: 10px;
|
|
.samez {
|
|
color: #0060ff;
|
|
font-size: 18px;
|
|
line-height: 49px;
|
|
margin-left: 13px;
|
|
}
|
|
.samey {
|
|
color: #6e7b84;
|
|
font-size: 14px;
|
|
line-height: 49px;
|
|
|
|
margin-left: 13px;
|
|
}
|
|
}
|
|
.detailin {
|
|
width: 100%;
|
|
// height: 100px;
|
|
// background-color: red;
|
|
display: flex;
|
|
justify-content: center;
|
|
.in {
|
|
margin-left: 20px;
|
|
width: 86%;
|
|
color: #6e7b84;
|
|
line-height: 30px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
.contentone {
|
|
margin-top: 43px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
// height: 200px;
|
|
.actinner {
|
|
// background-color: red;
|
|
color: #6e7b84;
|
|
font-size: 13px;
|
|
line-height: 30px;
|
|
}
|
|
.de {
|
|
width: 100%;
|
|
height: 34px;
|
|
border-radius: 10px;
|
|
background-color: #f2f5f7;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.deal {
|
|
color: #333330;
|
|
font-weight: bold;
|
|
line-height: 34px;
|
|
margin-left: 21px;
|
|
font-size: 14px;
|
|
}
|
|
.rightpng {
|
|
width: 6px;
|
|
height: 11px;
|
|
margin-right: 6px;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
.ballotjoincontainer {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
.ballotjoin {
|
|
width: 85%;
|
|
// height:100px;
|
|
// background-color: #bfa;
|
|
.ballotitem {
|
|
.upitem {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left {
|
|
display: flex;
|
|
.leftimg {
|
|
width: 4.5px;
|
|
height: 14.5px;
|
|
margin-top: 1px;
|
|
}
|
|
.leftcontent {
|
|
margin-left: 9px;
|
|
color: #6e7b84;
|
|
font-size: 13px;
|
|
line-height: 30px;
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
.btn {
|
|
background-color: #2478ff;
|
|
color: #fff;
|
|
width: 64px;
|
|
height: 21px;
|
|
border-radius: 10px;
|
|
border: 0;
|
|
font-size: 12px;
|
|
line-height: 19px;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
.thinline {
|
|
width: 100%;
|
|
border-top: 1px solid #f1f2f3;
|
|
margin-top: 17px;
|
|
margin-bottom: 17px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btnbox {
|
|
width: 301.5px;
|
|
height: 33px;
|
|
background-color: #2478ff;
|
|
border-radius: 6px;
|
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
|
font-size: 14px;
|
|
margin: 30px auto 0 auto;
|
|
text-align: center;
|
|
line-height: 33px;
|
|
.submitbtn {
|
|
border: none;
|
|
border-radius: 6px;
|
|
background-color: #2478ff;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|