mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-06 09:26:46 +08:00
672 lines
20 KiB
Vue
672 lines
20 KiB
Vue
<template>
|
||
<div class="Investigat">
|
||
<!-- <TitleHead text="【调研】管理者进阶腾飞班 - 培训阶段性调研"></TitleHead> -->
|
||
<ReturnHead text="评估详情"></ReturnHead>
|
||
<div class="header_wrap" v-if="data?.projectInfoList && data?.falseS && type != 1">
|
||
<div v-if="level != 0 && data?.projectInfoList[0]?.projectName">项目名称：{{ data?.projectInfoList[0]?.projectName || '' }}</div>
|
||
<div v-if="data?.projectInfoList[0]?.courseName">开课名称：{{ data.projectInfoList[0]?.courseName || '' }}</div>
|
||
<div v-if="data?.projectInfoList[0]?.teacherName">培训讲师：{{ data?.projectInfoList.map(item => item?.teacherName).join('，') }}</div>
|
||
</div>
|
||
<div class="notice">
|
||
<div class="noticebox">
|
||
<div class="mani">
|
||
<div
|
||
class="question"
|
||
v-for="(value, index) in questionList"
|
||
:key="index"
|
||
:style="{ 'margin-top': '20px' }"
|
||
>
|
||
<div v-if="value.questionType == '4'">
|
||
<div class="text">{{ value.assessmentScTitle }}</div>
|
||
<div class="answerLcontainer">
|
||
<div class="answerL">
|
||
<div>{{value.minimumEvaluation?value.minimumEvaluation:'完全没用'}}</div>
|
||
<div>{{value.highestEvaluation?value.highestEvaluation:'非常有帮助/启发'}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="answer">
|
||
<div class="answerC">
|
||
<div class="itemwrap">
|
||
<div
|
||
class="answerCitem"
|
||
v-for="(item, key) in orderArr(
|
||
value.assessmentMinScore,
|
||
value.assessmentMaxScore
|
||
)"
|
||
:key="key"
|
||
:style="{
|
||
background:
|
||
value.selectAnswer === item + 1
|
||
? 'rgba(86, 163, 249, 1)'
|
||
: 'rgba(86, 163, 249, 0)',
|
||
color:
|
||
value.selectAnswer === item + 1
|
||
? '#fff'
|
||
: 'rgba(86, 163, 249, 1)',
|
||
}"
|
||
@click="
|
||
() => {
|
||
if (data.isSubmit) {
|
||
return;
|
||
}
|
||
value.selectAnswer = item + 1;
|
||
}
|
||
"
|
||
>
|
||
<div>{{ item + 1 }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="value.questionType == '1'">
|
||
<div class="question" style="margin-top: 20px">
|
||
<div class="text">{{ value?.singleStemName }}</div>
|
||
<div
|
||
v-for="(values, indexs) in value.assessmentSingleChoiceVoList"
|
||
:key="indexs"
|
||
:style="{ 'margin-top': '22px' }"
|
||
@click="
|
||
() => {
|
||
if (data.isSubmit) {
|
||
return;
|
||
}
|
||
value.assessmentSingleChoiceVoList.forEach((e) => {
|
||
e.select = false;
|
||
});
|
||
values.select = true;
|
||
}
|
||
"
|
||
>
|
||
<div style="display: flex; align-items: center">
|
||
<img
|
||
style="width: 14px; height: 14px"
|
||
:src="values.select ? checkbox : checkbox2"
|
||
/>
|
||
<div
|
||
class="people"
|
||
style="
|
||
font-size: 13px;
|
||
margin-left: 7px;
|
||
margin-top: -2.5px;
|
||
"
|
||
>
|
||
{{ values.singleOptionName }}
|
||
</div>
|
||
</div>
|
||
<img
|
||
v-if="values.singleOptionPictureAddress"
|
||
:src="fielPath + values.singleOptionPictureAddress"
|
||
style="
|
||
width: 70px;
|
||
height: 70px;
|
||
margin-left: 20px;
|
||
margin-top: 10px;
|
||
"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="value.questionType == '2'">
|
||
<div class="question" style="margin-top: 20px">
|
||
<div class="text">{{ value?.multipleStemName }}</div>
|
||
<div
|
||
v-for="(values, indexs) in value.multipleChoiceVoList"
|
||
:key="indexs"
|
||
:style="{ 'margin-top': '22px' }"
|
||
@click="
|
||
() => {
|
||
if (data.isSubmit) {
|
||
return;
|
||
}
|
||
values.select = !values.select;
|
||
}
|
||
"
|
||
>
|
||
<div style="display: flex; align-items: center">
|
||
<img
|
||
style="width: 14px; height: 14px"
|
||
:src="values.select ? checkbox : checkbox2"
|
||
/>
|
||
<div
|
||
class="people"
|
||
style="
|
||
font-size: 13px;
|
||
margin-left: 7px;
|
||
margin-top: -2.5px;
|
||
"
|
||
>
|
||
{{ values.multipleOptionName }}
|
||
</div>
|
||
</div>
|
||
<img
|
||
v-if="values.multipleOptionPictureAddress"
|
||
:src="
|
||
values.multipleOptionPictureAddress
|
||
? fielPath + values.multipleOptionPictureAddress
|
||
: ''
|
||
"
|
||
style="
|
||
width: 70px;
|
||
height: 70px;
|
||
margin-left: 20px;
|
||
margin-top: 10px;
|
||
"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="value.questionType == '3'">
|
||
<div class="question" style="margin-top: 21px">
|
||
<div class="text">{{ value.assessmentQaTitle }}</div>
|
||
<div style="margin-top: 21px; position: relative">
|
||
<div class="inputcon">
|
||
<el-input
|
||
style="width: 87%"
|
||
v-model="value.content"
|
||
:autosize="{ minRows: 5, maxRows: 5 }"
|
||
resize="none"
|
||
maxlength="200"
|
||
type="textarea"
|
||
:readonly="!!data.isSubmit"
|
||
/>
|
||
</div>
|
||
<div class="words">{{ value.content?.length || 0 }}/200</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
style="display: flex; justify-content: center; width: 100%"
|
||
v-if="
|
||
data.essayQuestionVoList?.length ||
|
||
data.multipleStemVoList?.length ||
|
||
data.scoringQuestionVoList?.length ||
|
||
data.singleStemVoList?.length
|
||
"
|
||
>
|
||
<div
|
||
v-if="projectStatus && projectEndTime"
|
||
style="width: 100%; display: flex; justify-content: center"
|
||
>
|
||
<div
|
||
v-if="
|
||
projectStatus !== '3' &&
|
||
new Date(changeTime(projectEndTime)).getTime() >
|
||
new Date().getTime()
|
||
"
|
||
class="submit"
|
||
@click="emptyValuePromp"
|
||
:style="{ background: data.isSubmit ? '#999' : '#2478ff' }"
|
||
>
|
||
提交
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-else
|
||
style="width: 100%; display: flex; justify-content: center"
|
||
>
|
||
<div
|
||
class="submit"
|
||
@click="emptyValuePromp"
|
||
:style="{ background: data.isSubmit ? '#999' : '#2478ff' }"
|
||
>
|
||
提交
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog v-model="centerDialogVisible" title="" width="70%" center :show-close="false" :align-center="true">
|
||
<div style="text-align: center;font-size:16px;"> <span style="color:black">
|
||
您已完成评估
|
||
</span></div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button class="cancel"
|
||
style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
|
||
@click="centerDialogVisible = false">取消</el-button>
|
||
<el-button class="back"
|
||
style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
|
||
type="primary" @click="centerDialogVisible = false">
|
||
确定
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 提示用户有未填选项 -->
|
||
<el-dialog v-model="isEmptyValue" title="" width="70%" center :show-close="false" :align-center="true">
|
||
<div style="text-align: center;font-size:12px;"> <span style="color:black">
|
||
您还有未完成的评估题目，请继续完成！
|
||
</span></div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button class="cancel"
|
||
style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
|
||
@click="isEmptyValue = false">取消</el-button>
|
||
<el-button class="back"
|
||
style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
|
||
type="primary" @click="isEmptyValue = false">
|
||
确定
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, toRefs, watch,onMounted } from "vue";
|
||
import checkbox from "@/assets/image/checkbox.png";
|
||
import checkbox2 from "@/assets/image/checkbox2.png";
|
||
import { useRoute, useRouter } from "vue-router/dist/vue-router";
|
||
import { request, usePage, useRequest } from "@/api/request";
|
||
import {
|
||
ASSESSMENT_QUERY,
|
||
ASSESSMENT_SUBMIT,
|
||
TASK_NO_COMMIT,
|
||
checkStudentExist,
|
||
} from "@/api/api";
|
||
import { ElMessage } from "element-plus";
|
||
import ReturnHead from "@/components/ReturnHead.vue";
|
||
import dayjs from "dayjs";
|
||
import { changeTime } from "@/api/method";
|
||
const fielPath = ref(import.meta.env.VITE_FILE_PATH);
|
||
const {
|
||
query: {
|
||
courseId,
|
||
id: taskId,
|
||
infoId,
|
||
type,
|
||
chapterOrStageId,
|
||
projectStatus,
|
||
projectEndTime,
|
||
isSubmitTrue,
|
||
level
|
||
},
|
||
} = useRoute();
|
||
const router = useRouter();
|
||
const returnclick = () => {
|
||
clearInterval(timers);
|
||
router.back();
|
||
};
|
||
|
||
const { data } = useRequest(
|
||
ASSESSMENT_QUERY(courseId),
|
||
{
|
||
id: courseId,
|
||
type,
|
||
chapterOrStageId,
|
||
targetId: infoId ? infoId : 0,
|
||
},(res)=>{
|
||
if(res.data.projectInfoList.length == 0){
|
||
res.data.projectInfoList=[
|
||
{teacherName: '', courseName: '', projectName: ''}
|
||
]
|
||
res.data.falseS = false
|
||
}else{
|
||
res.data.falseS = true
|
||
}
|
||
if (res.code === 6) {
|
||
router.push({
|
||
path: "/NotProject2",
|
||
});
|
||
} },
|
||
(e) => {
|
||
useRequest(
|
||
checkStudentExist,
|
||
{
|
||
targetId: infoId,
|
||
type: type,
|
||
chapterId: chapterOrStageId,
|
||
courseId: taskId,
|
||
},
|
||
(res) => {
|
||
console.log("判断任务是否删除", res);
|
||
if (res.code === 7) {
|
||
router.push({
|
||
path: "/loseefficacy",
|
||
});
|
||
} else {
|
||
if (res.code === 6) {
|
||
router.push({
|
||
path: "/notpath",
|
||
});
|
||
}
|
||
}
|
||
}
|
||
);
|
||
}
|
||
);
|
||
|
||
console.log("我是查询评估的参数", {
|
||
id: courseId,
|
||
type,
|
||
chapterOrStageId,
|
||
targetId: infoId ? infoId : 0,
|
||
});
|
||
console.log("我是需要排序得题目", data);
|
||
|
||
// 答题时间
|
||
const answerTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
||
|
||
console.log("录入首次进入页面时间", answerTime);
|
||
|
||
// 数组去空对象
|
||
function formateArr(datas) {
|
||
let allArr = [];
|
||
for (let i = 0; i < datas.length; i++) {
|
||
for (let j = 0; j < datas[i].length; j++) {
|
||
allArr.push(datas[i][j]);
|
||
}
|
||
}
|
||
let newarr = allArr.sort((a, b) => {
|
||
return a.orderNumber - b.orderNumber;
|
||
});
|
||
console.log("我是排序后的题目", newarr);
|
||
return newarr;
|
||
}
|
||
|
||
const questionList = ref([]);
|
||
|
||
const timers = setInterval(() => {
|
||
console.log(data);
|
||
console.log(data.value.id);
|
||
if (data.value.id) {
|
||
clearInterval(timers);
|
||
console.log([
|
||
data.value.essayQuestionVoList,
|
||
data.value.multipleStemVoList,
|
||
data.value.scoringQuestionVoList,
|
||
data.value.singleStemVoList,
|
||
]);
|
||
questionList.value = formateArr([
|
||
data.value.essayQuestionVoList,
|
||
data.value.multipleStemVoList,
|
||
data.value.scoringQuestionVoList,
|
||
data.value.singleStemVoList,
|
||
]);
|
||
}
|
||
}, 1000);
|
||
|
||
setTimeout(() => {
|
||
clearInterval(timers);
|
||
}, 30000);
|
||
|
||
// 生成数组
|
||
function orderArr(a, b) {
|
||
let arrs = [];
|
||
for (let i = 0; i < 10; i++) {
|
||
if (i + 1 >= a && i + 1 <= b) {
|
||
arrs.push(i);
|
||
}
|
||
}
|
||
return arrs;
|
||
}
|
||
onMounted(() => {
|
||
if(isSubmitTrue==true){
|
||
open();
|
||
return
|
||
}
|
||
useRequest(
|
||
ASSESSMENT_QUERY(courseId),{
|
||
id: courseId,
|
||
type,
|
||
chapterOrStageId,
|
||
targetId: infoId ? infoId : 0,
|
||
},(res)=>{
|
||
useRequest(TASK_NO_COMMIT, {
|
||
targetId: infoId ? infoId : 0, // 项目、路径图或开课的Id
|
||
chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0, // 关卡或者阶段Id 关卡Id不允许为空
|
||
assessmentId: courseId,
|
||
taskId: taskId ? taskId : 0,
|
||
type,
|
||
result: JSON.stringify(data.value),
|
||
beginTime: answerTime,
|
||
})
|
||
if (res.data.isSubmit) {
|
||
open();
|
||
}
|
||
})
|
||
console.log(data,'data')
|
||
});
|
||
const centerDialogVisible = ref(false);
|
||
const open = () => {
|
||
centerDialogVisible.value = true;
|
||
};
|
||
|
||
const isEmptyValue = ref(false);
|
||
function emptyValuePromp() {
|
||
if (data.value.isSubmit) {
|
||
return;
|
||
}
|
||
if (data.value.singleStemVoList?.some(t=>t?.assessmentSingleChoiceVoList?.every(s => !s?.select))) {
|
||
isEmptyValue.value = true;
|
||
// return ElMessage.warning("您有未填写的单选评估题干");
|
||
}
|
||
if (data.value.multipleStemVoList?.some(t=>t?.multipleChoiceVoList?.every(s => !s?.select))) {
|
||
isEmptyValue.value = true;
|
||
// return ElMessage.warning("您有未填写的多选评估题干");
|
||
}
|
||
if (data.value.scoringQuestionVoList?.some(s => !s?.selectAnswer)) {
|
||
isEmptyValue.value = true;
|
||
// return ElMessage.warning("您有未填写的评分评估题干");
|
||
}
|
||
if (data.value.essayQuestionVoList?.some(s => !s?.content)) {
|
||
isEmptyValue.value = true;
|
||
// return ElMessage.warning("您有未填写的简答评估题干");
|
||
}
|
||
if(!isEmptyValue.value){
|
||
submit()
|
||
}
|
||
}
|
||
|
||
|
||
function submit() {
|
||
console.log("录入首次进入页面时间", answerTime);
|
||
if (data.value.isSubmit) {
|
||
return;
|
||
}
|
||
console.log("data.value", data.value);
|
||
|
||
data.value.isSubmit = !data.value.isSubmit;
|
||
ElMessage.success("提交成功");
|
||
request(ASSESSMENT_SUBMIT, {
|
||
targetId: infoId ? infoId : 0, // 项目、路径图或开课的Id
|
||
chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0, // 关卡或者阶段Id 关卡Id不允许为空
|
||
assessmentId: courseId,
|
||
taskId: taskId ? taskId : 0,
|
||
type,
|
||
result: JSON.stringify(data.value),
|
||
beginTime: answerTime,
|
||
}).then(() => {
|
||
isEmptyValue.value = false;
|
||
open();
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
<style lang="scss">
|
||
.header_wrap{
|
||
padding: 15px 0 5px 10px;
|
||
background: #fff;
|
||
}
|
||
.clearfix:before,
|
||
.clearfix:after {
|
||
content: " ";
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
.Investigat {
|
||
width: 100%;
|
||
padding-bottom: 20px;
|
||
.notice {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
// margin-top: -17.5px;
|
||
//margin-top: 10px;
|
||
.noticebox {
|
||
// width: 90%;
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
.mani {
|
||
width: 90%;
|
||
// margin-top: 20px;
|
||
|
||
.dir {
|
||
width: 100%;
|
||
height: 20px;
|
||
// background-color: red;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: right;
|
||
font-size: 12px;
|
||
color: #2478ff;
|
||
.samegt {
|
||
margin-top: 3px;
|
||
height: 12px;
|
||
width: 12px;
|
||
}
|
||
.samege {
|
||
line-height: 12px;
|
||
}
|
||
.pre {
|
||
margin-right: 5px;
|
||
// background-size: 100%;
|
||
background-image: url(../../assets/image/ballotpage/pre.png);
|
||
}
|
||
.next {
|
||
margin-left: 5px;
|
||
// background-size: 100%;
|
||
background-image: url(../../assets/image/ballotpage/next.png);
|
||
}
|
||
}
|
||
.conn {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: right;
|
||
// background-color:yellow;
|
||
.peoplecontainer {
|
||
// background-color: yellowgreen;
|
||
display: flex;
|
||
width: 94%;
|
||
}
|
||
}
|
||
.question {
|
||
.text {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333330;
|
||
}
|
||
.answerLcontainer {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
.answerL {
|
||
width: 87%;
|
||
margin-bottom: -20px;
|
||
margin-top: 12px;
|
||
font-size: 13px;
|
||
// width: 100%;
|
||
color: #56a3f9;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.answer {
|
||
margin-top: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #56a3f9;
|
||
.answerC {
|
||
// width: 540px;
|
||
// width: 100%;
|
||
width: 86%;
|
||
height: 43px;
|
||
border: 1px solid #d7e5fd;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
// margin-left: 11px;
|
||
// margin-right: 11px;
|
||
justify-content: center;
|
||
.itemwrap {
|
||
width: 92%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.answerCitem {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 1px solid #56a3f9;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.question .answer .question .people {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #333330;
|
||
margin-left: 6px;
|
||
}
|
||
.question .words {
|
||
position: absolute;
|
||
right: 35px;
|
||
bottom: 10px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333330;
|
||
}
|
||
.inputcon {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.question .el-textarea__inner {
|
||
border-radius: 8px;
|
||
background-color: rgba(245, 246, 247, 1);
|
||
}
|
||
.submit {
|
||
// width: 126px;
|
||
width: 87%;
|
||
height: 31.5px;
|
||
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;
|
||
line-height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 10.5px;
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|