代码提交_12_31
This commit is contained in:
parent
2f1d5d0488
commit
f4ed699e12
|
|
@ -103,3 +103,40 @@ export const getPracticeTopic = (data) => {
|
|||
`/Handler/Boat.ashx?action=theorylist&lianxi=1`, { params: data }
|
||||
);
|
||||
}
|
||||
|
||||
//提交练习
|
||||
export const submitPracticeTopic = (data) => {
|
||||
return axios({
|
||||
url: `/Handler/Boat.ashx?action=savelianxi`,
|
||||
data: data,
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
});
|
||||
}
|
||||
|
||||
//通过id获取考试记录
|
||||
export const getPracticeRecords = (data) => {
|
||||
return axios.get(
|
||||
`/Handler/Boat.ashx?action=querylianxilist`, { params: data }
|
||||
);
|
||||
}
|
||||
|
||||
//查询考试详情
|
||||
export const getPracticeDetails = (data) => {
|
||||
return axios.get(
|
||||
`/Handler/Boat.ashx?action=querylianxidetails`, { params: data }
|
||||
);
|
||||
}
|
||||
//查询考试人名
|
||||
export const getUserName = (data) => {
|
||||
return axios.get(
|
||||
`/Handler/Boat.ashx?action=queryuser`, { params: data }
|
||||
);
|
||||
}
|
||||
|
||||
//通过resultId查询考试基本详情
|
||||
export const getDetailsMap = (data) => {
|
||||
return axios.get(
|
||||
`/Handler/Boat.ashx?action=querylianxiresult`, { params: data }
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 760 B |
Binary file not shown.
|
After Width: | Height: | Size: 293 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -254,6 +254,12 @@ const routes = [
|
|||
path:'/practiceSuccess',
|
||||
name:'practiceSuccess',
|
||||
component:()=>import("../views/examModule/practiceSuccess.vue")
|
||||
},
|
||||
//考试详情页
|
||||
{
|
||||
path:'/examDetails',
|
||||
name:'examDetails',
|
||||
component:()=>import("../views/examModule/examDetails.vue")
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,985 @@
|
|||
<script>
|
||||
import {
|
||||
getPracticeTopic,
|
||||
getTopicDetail,
|
||||
getTestCache,
|
||||
saveTestCache,
|
||||
submitPracticeTopic,
|
||||
getUserName,
|
||||
getPracticeDetails,
|
||||
} from "@/api/user";
|
||||
import { sortString } from "@/util/tools";
|
||||
|
||||
export default {
|
||||
name: "examDetails",
|
||||
data() {
|
||||
return {
|
||||
// 题目详情
|
||||
testContent: {
|
||||
testType: "多选题",
|
||||
question:
|
||||
"1、以社会主义核心价值观为引领，发展社会主义先进文化，弘扬革命文化，传承中华优秀传统文化，满足人民日益增长的精神文化需求，巩固全党全国各族人民团结奋斗的共同思想基础，不断提升（ ）。",
|
||||
score: "10",
|
||||
your_answer: "",
|
||||
blanks_answer: [],
|
||||
options: [
|
||||
{
|
||||
item_letter: "A",
|
||||
item: "国家文化软实力和中华文化影响力",
|
||||
},
|
||||
{
|
||||
item_letter: "B",
|
||||
item: "国家文化硬实力和中华文化影响力",
|
||||
},
|
||||
{
|
||||
item_letter: "C",
|
||||
item: "国家文化硬实力和中华传统文化影响力",
|
||||
},
|
||||
{
|
||||
item_letter: "D",
|
||||
item: "国家文化硬实力和中华传统文化",
|
||||
},
|
||||
],
|
||||
},
|
||||
testList: [],
|
||||
//题目数量
|
||||
testTypeNum: [
|
||||
{
|
||||
type: "单选题",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: "多选题",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: "判断题",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: "填空题",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: "简答题",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
optionIndex: -1, // 选中的选项
|
||||
examDialogShow: false,
|
||||
// 考试请求参数
|
||||
params: {
|
||||
result_id: "",
|
||||
},
|
||||
// 题量总数
|
||||
questionTotal: 0,
|
||||
passScore: 0, //及格分
|
||||
score: 0, //总分
|
||||
minute: 0, //剩余时间
|
||||
number: 0, //第几题
|
||||
isCache: false, //是否获取完缓存
|
||||
testTitle: "", //试卷名称
|
||||
user_id: "", //用户ID
|
||||
user_name: "", //用户名称
|
||||
countdown: "", //剩余时间
|
||||
timer: "", //定时器
|
||||
inputArr: 0, //填空题输入框长度
|
||||
fileList: [
|
||||
{
|
||||
name: "food.jpeg",
|
||||
url:
|
||||
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||||
},
|
||||
{
|
||||
name: "food2.jpeg",
|
||||
url:
|
||||
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//查询考试人名
|
||||
getUser() {
|
||||
this.user_id = this.$route.query.user_id;
|
||||
getUserName({ user_id: this.$route.query.user_id })
|
||||
.then((res) => {
|
||||
this.user_name = res.data.data.real_name;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
// 选项点击事件
|
||||
// optionClick(event, index, item) {
|
||||
// // 单选题
|
||||
// if (this.testContent.testType === "多选题") {
|
||||
// // 多选题
|
||||
// if (event.target.className.includes("optionSelect")) {
|
||||
// event.target.className = "exam-left-test-option";
|
||||
|
||||
// this.testList[this.number - 1].your_answer = this.testList[
|
||||
// this.number - 1
|
||||
// ].your_answer.replace(item.item_letter + ",", "");
|
||||
// } else {
|
||||
// if (
|
||||
// this.testList[this.number - 1].your_answer.indexOf(item.item_letter) === -1
|
||||
// ) {
|
||||
// this.testList[this.number - 1].your_answer += item.item_letter + ",";
|
||||
// }
|
||||
// event.target.className = "exam-left-test-option optionSelect";
|
||||
// }
|
||||
// } else {
|
||||
// if (event.target.className.includes("optionSelect")) {
|
||||
// event.target.className = "exam-left-test-option";
|
||||
// this.$set(this.testList[this.number - 1], "your_answer", "");
|
||||
// } else {
|
||||
// // 单选题、判断题
|
||||
// this.$refs.option.forEach((el) => {
|
||||
// el.className = "exam-left-test-option";
|
||||
// });
|
||||
// event.target.className = "exam-left-test-option optionSelect";
|
||||
// this.$set(this.testList[this.number - 1], "your_answer", item.item_letter);
|
||||
// }
|
||||
|
||||
// // this.testList[this.number - 1].your_answer = item.item_letter
|
||||
// }
|
||||
// },
|
||||
//输入框输入事件
|
||||
handleInput(index) {
|
||||
// this.inputArr = index;
|
||||
},
|
||||
inputValue(value) {
|
||||
this.$set(
|
||||
this.testList[this.number - 1],
|
||||
"your_answer",
|
||||
this.testContent.your_answer
|
||||
);
|
||||
},
|
||||
sparseArrayToNull(arr, length) {
|
||||
if (arr[length - 1] == undefined) {
|
||||
arr[length - 1] = undefined;
|
||||
}
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i] === undefined) {
|
||||
// 检查稀疏数组的空洞
|
||||
arr[i] = "null";
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
//交卷按钮
|
||||
handPaper() {
|
||||
// this.examDialogShow = true;
|
||||
this.$router.push("/examModule?" + this.user_id);
|
||||
},
|
||||
//确定交卷按钮
|
||||
submitTest() {
|
||||
let list = this.testList.map((el) => {
|
||||
if (el.kind == "填空题") {
|
||||
const parts = el.question.split("_");
|
||||
let inputNum = this.generateArray(parts);
|
||||
// let filteredArr = el.blanks_answer.filter(
|
||||
// (item) => item !== undefined && item !== null
|
||||
// );
|
||||
return {
|
||||
your_answer:
|
||||
el.blanks_answer.length != 0
|
||||
? this.sparseArrayToNull(el.blanks_answer, inputNum).join("__")
|
||||
: "", // 将数组元素通过 '__' 连接成字符串
|
||||
theory_base_id: el.theory_base_id,
|
||||
};
|
||||
} else if (el.kind == "简答题") {
|
||||
return {
|
||||
your_answer: el.your_answer,
|
||||
theory_base_id: el.theory_base_id,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
your_answer: el.your_answer.includes(",")
|
||||
? sortString(el.your_answer).slice(0, -1)
|
||||
: el.your_answer,
|
||||
theory_base_id: el.theory_base_id,
|
||||
};
|
||||
}
|
||||
});
|
||||
let params = sessionStorage.getItem("params");
|
||||
let data = JSON.parse(params);
|
||||
data.list_item_answer = list;
|
||||
let formData = new FormData();
|
||||
formData.append("data", JSON.stringify(data));
|
||||
submitPracticeTopic(formData).then((res) => {
|
||||
localStorage.removeItem("countdownEndTime");
|
||||
this.$router.push("/practiceSuccess");
|
||||
});
|
||||
},
|
||||
//答题卡数据获取
|
||||
getCardData() {
|
||||
// 考试信息
|
||||
this.testTitle = this.$route.query.exam_name; //考试名称
|
||||
// 试卷id
|
||||
this.params.result_id = this.$route.query.id;
|
||||
this.score = this.$route.query.score; //得分
|
||||
this.minute = this.$route.query.examine_time; //考试时间
|
||||
this.passScore = this.$route.query.pass_score; //及格分
|
||||
getPracticeDetails(this.params).then((res) => {
|
||||
// 总数
|
||||
this.questionTotal = res.data.data.length;
|
||||
res.data.data.forEach((el) => {
|
||||
this.testTypeNum.forEach((item) => {
|
||||
if (el.kind === item.type) {
|
||||
item.children.push(el);
|
||||
}
|
||||
});
|
||||
});
|
||||
this.testTypeNum.forEach((item, index) => {
|
||||
this.testList.push(...item.children);
|
||||
item.children.forEach((el) => {
|
||||
// 回答的问题
|
||||
// el.your_answer = "";
|
||||
el.blanks_answer = [];
|
||||
if (el.kind === "单选题") {
|
||||
el.number = el.no;
|
||||
} else if (el.kind === "多选题") {
|
||||
el.number = el.no + this.testTypeNum[0].children.length;
|
||||
} else if (el.kind === "判断题") {
|
||||
el.number =
|
||||
el.no +
|
||||
this.testTypeNum[0].children.length +
|
||||
this.testTypeNum[1].children.length;
|
||||
} else if (el.kind === "填空题") {
|
||||
el.number =
|
||||
el.no +
|
||||
this.testTypeNum[0].children.length +
|
||||
this.testTypeNum[1].children.length +
|
||||
this.testTypeNum[2].children.length;
|
||||
} else if (el.kind === "简答题") {
|
||||
el.number =
|
||||
el.no +
|
||||
this.testTypeNum[0].children.length +
|
||||
this.testTypeNum[1].children.length +
|
||||
this.testTypeNum[2].children.length +
|
||||
this.testTypeNum[3].children.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
// 获取缓存数据
|
||||
this.getCacheData();
|
||||
this.testClick(this.testList[0]);
|
||||
});
|
||||
},
|
||||
// 题目点击
|
||||
testClick(item) {
|
||||
console.log(item, "item");
|
||||
// 保存缓存
|
||||
this.saveCacheData();
|
||||
this.testContent.options = [];
|
||||
this.testContent.question = "";
|
||||
this.testContent.score = item.score;
|
||||
this.testContent.right_answer = item.right_answer;
|
||||
this.testContent.blanks_answer = item.your_answer_desc
|
||||
// 第几个题目
|
||||
this.number = item.number;
|
||||
// 分数赋值
|
||||
// this.testContent.score = item.per_score;
|
||||
this.testContent.testType = item.kind;
|
||||
getTopicDetail({ theoryBaseId: item.theory_base_id }).then((res) => {
|
||||
this.testContent.question = res.data.data.question;
|
||||
this.testContent.options = res.data.data.items;
|
||||
});
|
||||
|
||||
// 当前答案
|
||||
this.testContent.your_answer = item.your_answer;
|
||||
// this.testContent.blanks_answer = item.blanks_answer;
|
||||
},
|
||||
// 获取缓存数据
|
||||
getCacheData() {
|
||||
let params = sessionStorage.getItem("params");
|
||||
let data = JSON.parse(params);
|
||||
let formData = {
|
||||
user_id: data.user_id,
|
||||
batch_id: data.batch_id,
|
||||
};
|
||||
getTestCache(formData).then((res) => {
|
||||
if (res.data.state) {
|
||||
res.data.data.list_item_answer.forEach((val) => {
|
||||
this.testList.forEach((ele) => {
|
||||
if (val.theory_base_id === ele.theory_base_id) {
|
||||
this.$set(ele, "your_answer", val.your_answer);
|
||||
// ele.your_answer = val.your_answer
|
||||
}
|
||||
});
|
||||
});
|
||||
this.testContent.your_answer = this.testList[0].your_answer;
|
||||
} else {
|
||||
}
|
||||
|
||||
this.isCache = true;
|
||||
});
|
||||
},
|
||||
// 保存缓存数据
|
||||
saveCacheData() {
|
||||
let list = this.testList.map((el) => {
|
||||
return {
|
||||
your_answer: el.your_answer,
|
||||
theory_base_id: el.theory_base_id,
|
||||
};
|
||||
});
|
||||
let params = sessionStorage.getItem("params");
|
||||
let data = JSON.parse(params);
|
||||
data.list_item_answer = list.filter((el) => {
|
||||
return el.your_answer;
|
||||
});
|
||||
let formData = new FormData();
|
||||
formData.append("data", JSON.stringify(data));
|
||||
// 保存缓存
|
||||
saveTestCache(formData);
|
||||
},
|
||||
// 下一题点击
|
||||
nextClick() {
|
||||
if (this.number === this.questionTotal) {
|
||||
return;
|
||||
}
|
||||
this.number++;
|
||||
let data = this.testList[this.number - 1];
|
||||
this.testClick(data);
|
||||
},
|
||||
// 上一题点击
|
||||
preClick() {
|
||||
if (this.number === 1 || this.number === 0) {
|
||||
return;
|
||||
}
|
||||
this.number--;
|
||||
let data = this.testList[this.number - 1];
|
||||
this.testClick(data);
|
||||
},
|
||||
|
||||
generateArray(arr) {
|
||||
let count = 0;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (i % 2 === 1) {
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return count;
|
||||
},
|
||||
|
||||
//文件处理
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getCardData();
|
||||
//获取用户名
|
||||
this.getUser();
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 将题目字符串按“-”分割，形成一个包含文本和输入框的数组
|
||||
questionParts() {
|
||||
let num = 0;
|
||||
const parts = this.testContent.question.split("_");
|
||||
return parts.map((part, index) => {
|
||||
if (index % 2 === 1) {
|
||||
num++;
|
||||
}
|
||||
return {
|
||||
type: index % 2 === 1 ? "input" : "text",
|
||||
value: part,
|
||||
index: num,
|
||||
totalInput: this.generateArray(parts),
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"testContent.options"(newVal, oldVal) {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="exam">
|
||||
<div class="exam-box">
|
||||
<div class="exam-left">
|
||||
<div class="exam-test-title">{{ testTitle }}</div>
|
||||
<div class="exam-left-top">
|
||||
<div class="exam-left-num">{{ number }}/{{ questionTotal }}</div>
|
||||
<div class="exam-left-type">{{ testContent.testType }}</div>
|
||||
<span>({{ testContent.score }}分)</span>
|
||||
<div v-if="testContent.testType === '单选题'" class="exam-left-msc">
|
||||
每题只有一个正确答案
|
||||
</div>
|
||||
<div v-else-if="testContent.testType === '多选题'" class="exam-left-msc">
|
||||
每题只有两个以上正确答案
|
||||
</div>
|
||||
</div>
|
||||
<!-- 题干 -->
|
||||
<div class="exam-left-test">
|
||||
<div class="exam-left-test-title">
|
||||
<div v-if="testContent.testType === '填空题'" class="exam-left-test-blanks">
|
||||
<div v-for="(char, index) in questionParts" :key="index">
|
||||
<span v-if="char.type !== 'input'">{{ char.value }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
:disabled="true"
|
||||
v-model="testContent.blanks_answer[char.index - 1]"
|
||||
@input="handleInput(char.totalInput)"
|
||||
type="text"
|
||||
placeholder="请输入答案"
|
||||
class="answer-input"
|
||||
></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>{{ testContent.question }}</div>
|
||||
</div>
|
||||
<div v-if="testContent.testType === '多选题'" class="exam-left-test-content">
|
||||
<div
|
||||
v-for="(item, index) in testContent.options"
|
||||
ref="option"
|
||||
:class="
|
||||
testContent.your_answer.includes(item.item_letter) ? 'optionSelect' : ''
|
||||
"
|
||||
class="exam-left-test-option"
|
||||
@click="optionClick($event, index, item)"
|
||||
>
|
||||
{{ item.item_letter }}丶{{ item.item }}
|
||||
</div>
|
||||
<div class="exam-left-test-result">
|
||||
<span>得分：{{ testContent.score }}</span>
|
||||
<span>您的答案：{{ testContent.your_answer }}</span>
|
||||
<span>正确答案：{{ testContent.right_answer }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="testContent.testType === '简答题'"
|
||||
class="exam-left-test-content"
|
||||
>
|
||||
<div class="exam-left-test-shortAnswer">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="14"
|
||||
placeholder="请输入内容"
|
||||
v-model="testContent.your_answer"
|
||||
@input="inputValue"
|
||||
>
|
||||
</el-input>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
style="color: #658cf6; font-size: 16px"
|
||||
>
|
||||
<img src="@/assets/image/attachment.png" style="width: 16px" />
|
||||
附件上传</el-button
|
||||
>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="exam-left-test-content">
|
||||
<div
|
||||
v-for="(item, index) in testContent.options"
|
||||
ref="option"
|
||||
:class="testContent.your_answer === item.item_letter ? 'optionSelect' : ''"
|
||||
class="exam-left-test-option"
|
||||
@click="optionClick($event, index, item)"
|
||||
>
|
||||
{{ item.item_letter }}丶{{ item.item }}
|
||||
</div>
|
||||
|
||||
<div class="exam-left-test-result">
|
||||
<span>得分：{{ testContent.score }}</span>
|
||||
<span>您的答案：{{ testContent.your_answer }}</span>
|
||||
<span>正确答案：{{ testContent.right_answer }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
<div class="exam-left-btn">
|
||||
<div
|
||||
:class="number === 1 ? 'exam-left-btn-pre' : 'exam-left-btn-next'"
|
||||
@click="preClick"
|
||||
>
|
||||
上一题
|
||||
</div>
|
||||
<div
|
||||
:class="
|
||||
number === questionTotal ? 'exam-left-btn-pre' : 'exam-left-btn-next'
|
||||
"
|
||||
style="margin-left: 164px"
|
||||
@click="nextClick"
|
||||
>
|
||||
下一题
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exam-right">
|
||||
<div class="exam-right-title">答题卡</div>
|
||||
<div class="exam-right-card">
|
||||
<div class="exam-right-card-score">
|
||||
<span>{{ user_name }}</span>
|
||||
<span>{{ minute }} </span>
|
||||
</div>
|
||||
<div class="exam-right-card-time">
|
||||
<span>{{ score }}分</span>
|
||||
<img src="@/assets/image/nojg.png" v-if="score < passScore" />
|
||||
<img src="@/assets/image/jg.png" v-else />
|
||||
</div>
|
||||
<div class="exam-right-card-line"></div>
|
||||
<div v-if="isCache" class="exam-right-card-box">
|
||||
<div v-for="(item, index) in testTypeNum" class="exam-right-card-num">
|
||||
<span class="exam-right-card-num-title"
|
||||
><span class="type">{{ item.type }}</span>
|
||||
<span>(共{{ item.children.length }}题)</span></span
|
||||
>
|
||||
<div class="exam-right-card-num-item">
|
||||
<span
|
||||
ref="answer"
|
||||
v-for="s in item.children"
|
||||
:class="{
|
||||
selectQuestion: s.result_desc == '对',
|
||||
border: s.number === number,
|
||||
}"
|
||||
:style="{
|
||||
'background-color':
|
||||
(s.result_desc == '错' && s.kind != '简答题') ||
|
||||
(s.result_desc == '缺' && s.kind != '简答题')
|
||||
? 'rgba(135, 85, 96)'
|
||||
: 'rgba(101, 140, 246, 0.6)',
|
||||
}"
|
||||
@click="testClick(s)"
|
||||
>{{ s.no }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit" @click="handPaper"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.exam-test-title {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-weight: 700;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.exam {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
//提示弹窗
|
||||
&-dialog {
|
||||
width: 807px;
|
||||
height: 391px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background-image: url("../../assets/image/prompt.png");
|
||||
background-size: 100% 100%;
|
||||
|
||||
&-title {
|
||||
text-align: center;
|
||||
margin-right: 25px;
|
||||
margin-top: 7px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin-top: 113px;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
&-btn {
|
||||
display: flex;
|
||||
margin-top: 97px;
|
||||
justify-content: center;
|
||||
|
||||
div {
|
||||
width: 157px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&-light {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-image: url("../../assets/image/highlight-btn.png");
|
||||
}
|
||||
|
||||
&-dark {
|
||||
margin-right: 82px;
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
background-image: url("../../assets/image/dark-btn.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
&-left::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-left {
|
||||
position: relative;
|
||||
width: 1325px;
|
||||
height: 858px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/image/test.png");
|
||||
|
||||
&-top {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-type {
|
||||
border: 2px solid rgba(101, 140, 246, 1);
|
||||
color: rgba(101, 140, 246, 1);
|
||||
padding: 0 7px;
|
||||
margin-left: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-type + span {
|
||||
margin: 0 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&-num {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
line-height: 52px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 114px;
|
||||
height: 52px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/image/test-num.png");
|
||||
}
|
||||
|
||||
&-msc {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
// 试卷内容
|
||||
&-test {
|
||||
margin-top: 33px;
|
||||
padding: 0 50px;
|
||||
//题目
|
||||
&-title {
|
||||
font-size: 24px;
|
||||
line-height: 44px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
&-blanks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
::v-deep .el-input__inner {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
font-size: 20px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
&-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 选项
|
||||
&-content {
|
||||
margin-top: 40px;
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
&-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
margin-top: 10px;
|
||||
color: #ff5858;
|
||||
}
|
||||
span:nth-child(3) {
|
||||
margin-top: 10px;
|
||||
color: #4fe979;
|
||||
}
|
||||
}
|
||||
&-shortAnswer {
|
||||
background: url("../../assets/image/shortAnswer.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 305px;
|
||||
::v-deep .el-textarea__inner {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
::v-deep .upload-demo {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
// flex-direction: column-reverse;
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
}
|
||||
::v-deep .el-upload--picture-card {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
box-sizing: border-box;
|
||||
width: 9.25rem;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
line-height: 30px;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -35px;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.optionSelect {
|
||||
background-color: rgba(101, 140, 246, 0.55);
|
||||
}
|
||||
|
||||
&-option {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
background-image: url("../../assets/image/test-option.png");
|
||||
padding-left: 34px;
|
||||
display: flex;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
//按钮
|
||||
&-btn {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
display: flex;
|
||||
margin-left: -239px;
|
||||
left: 50%;
|
||||
|
||||
&-pre,
|
||||
&-next {
|
||||
width: 157px;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-pre {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
background-image: url("../../assets/image/dark-btn.png");
|
||||
}
|
||||
|
||||
&-next {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-image: url("../../assets/image/highlight-btn.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
position: relative;
|
||||
width: 441px;
|
||||
height: 858px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/image/test-card.png");
|
||||
|
||||
//答题卡名称
|
||||
&-title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&-card {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
padding: 46px;
|
||||
//提交按钮
|
||||
.submit {
|
||||
width: 157px;
|
||||
height: 44px;
|
||||
margin: 20px auto;
|
||||
//left: 50%;
|
||||
//margin-left: -78px;
|
||||
//bottom: 50px;
|
||||
background-image: url("../../assets/image/closeDetails.png");
|
||||
cursor: pointer;
|
||||
}
|
||||
&-lenged {
|
||||
width: 400px;
|
||||
height: 80px;
|
||||
background-color: rgba(149, 149, 149, 0.2);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
margin-left: -200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div {
|
||||
span {
|
||||
font-size: 14px;
|
||||
margin-right: 26px;
|
||||
span:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
i {
|
||||
width: 18px;
|
||||
height: 10px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.current {
|
||||
border: 2px solid rgba(101, 140, 246, 1);
|
||||
}
|
||||
.notDone {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.have {
|
||||
background-color: rgba(64, 253, 137, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-score {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&-line {
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
margin: 22px 0;
|
||||
}
|
||||
|
||||
&-time {
|
||||
margin-top: 37px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
span:nth-child(1) {
|
||||
color: rgba(255, 189, 34, 1);
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
//题目容器
|
||||
&-box {
|
||||
position: relative;
|
||||
height: 516px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// 滚动条
|
||||
&-box::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
left: -50px;
|
||||
width: 7px; //修改滚动条宽度
|
||||
background-color: rgba(107, 126, 177, 0.2);
|
||||
}
|
||||
|
||||
&-box::-webkit-scrollbar-thumb {
|
||||
border-radius: 7px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(107, 126, 177, 1);
|
||||
}
|
||||
|
||||
// 题目数量
|
||||
&-num {
|
||||
&-title {
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.type {
|
||||
border: 2px solid rgba(101, 140, 246, 1);
|
||||
color: rgba(101, 140, 246, 1);
|
||||
padding: 0 7px;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.border {
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgba(101, 140, 246, 1);
|
||||
}
|
||||
.selectQuestion {
|
||||
background-color: rgba(64, 253, 137, 0.2) !important;
|
||||
}
|
||||
|
||||
span {
|
||||
//display:inline-block ;
|
||||
margin: 0 11px 14px 0;
|
||||
width: 58px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
span:nth-child(5n) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,6 +5,7 @@ import {
|
|||
savaTestAnswer,
|
||||
getTestCache,
|
||||
saveTestCache,
|
||||
submitPracticeTopic,
|
||||
} from "@/api/user";
|
||||
import { sortString } from "@/util/tools";
|
||||
|
||||
|
|
@ -80,6 +81,19 @@ export default {
|
|||
endTime: "",
|
||||
countdown: "", //剩余时间
|
||||
timer: "", //定时器
|
||||
inputArr: 0, //填空题输入框长度
|
||||
fileList: [
|
||||
{
|
||||
name: "food.jpeg",
|
||||
url:
|
||||
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||||
},
|
||||
{
|
||||
name: "food2.jpeg",
|
||||
url:
|
||||
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -120,16 +134,26 @@ export default {
|
|||
},
|
||||
//输入框输入事件
|
||||
handleInput(index) {
|
||||
// let filteredArr = this.testContent.blanks_answer.filter(
|
||||
// (item) => item !== undefined && item !== null
|
||||
// );
|
||||
console.log("value", index, this.testContent.blanks_answer,);
|
||||
index.forEach(item => {
|
||||
console.log(filteredArr[item-1]);
|
||||
});
|
||||
if (this.testContent.testType == "填空题") {
|
||||
|
||||
// this.inputArr = index;
|
||||
},
|
||||
inputValue(value) {
|
||||
this.$set(
|
||||
this.testList[this.number - 1],
|
||||
"your_answer",
|
||||
this.testContent.your_answer
|
||||
);
|
||||
},
|
||||
sparseArrayToNull(arr, length) {
|
||||
if (arr[length - 1] == undefined) {
|
||||
arr[length - 1] = undefined;
|
||||
}
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i] === undefined) {
|
||||
// 检查稀疏数组的空洞
|
||||
arr[i] = "null";
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
//交卷按钮
|
||||
handPaper() {
|
||||
|
|
@ -138,13 +162,22 @@ export default {
|
|||
//确定交卷按钮
|
||||
submitTest() {
|
||||
let list = this.testList.map((el) => {
|
||||
console.log(el, "el");
|
||||
if (el.question_kind == "填空题") {
|
||||
let filteredArr = el.blanks_answer.filter(
|
||||
(item) => item !== undefined && item !== null
|
||||
);
|
||||
const parts = el.question.split("_");
|
||||
let inputNum = this.generateArray(parts);
|
||||
// let filteredArr = el.blanks_answer.filter(
|
||||
// (item) => item !== undefined && item !== null
|
||||
// );
|
||||
return {
|
||||
your_answer: filteredArr.join("__"), // 将数组元素通过 '__' 连接成字符串
|
||||
your_answer:
|
||||
el.blanks_answer.length != 0
|
||||
? this.sparseArrayToNull(el.blanks_answer, inputNum).join("__")
|
||||
: "", // 将数组元素通过 '__' 连接成字符串
|
||||
theory_base_id: el.theory_base_id,
|
||||
};
|
||||
} else if (el.question_kind == "简答题") {
|
||||
return {
|
||||
your_answer: el.your_answer,
|
||||
theory_base_id: el.theory_base_id,
|
||||
};
|
||||
} else {
|
||||
|
|
@ -158,13 +191,12 @@ export default {
|
|||
});
|
||||
let params = sessionStorage.getItem("params");
|
||||
let data = JSON.parse(params);
|
||||
console.log(list);
|
||||
data.list_item_answer = list;
|
||||
let formData = new FormData();
|
||||
formData.append("data", JSON.stringify(data));
|
||||
savaTestAnswer(formData).then((res) => {
|
||||
submitPracticeTopic(formData).then((res) => {
|
||||
localStorage.removeItem("countdownEndTime");
|
||||
this.$router.push("/practiceSuccess");
|
||||
this.$router.push("/practiceSuccess?score=" + res.data.data.score+'&result_id='+res.data.data.result_id);
|
||||
});
|
||||
},
|
||||
//答题卡数据获取
|
||||
|
|
@ -350,12 +382,22 @@ export default {
|
|||
// 格式化为两位数
|
||||
return value < 10 ? `0${value}` : value;
|
||||
},
|
||||
generateArray(n) {
|
||||
let result = [];
|
||||
for (let i = 1; i <= n; i++) {
|
||||
result.push(i);
|
||||
generateArray(arr) {
|
||||
let count = 0;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (i % 2 === 1) {
|
||||
count++;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
return count;
|
||||
},
|
||||
|
||||
//文件处理
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -372,12 +414,17 @@ export default {
|
|||
computed: {
|
||||
// 将题目字符串按“-”分割，形成一个包含文本和输入框的数组
|
||||
questionParts() {
|
||||
let num = 0;
|
||||
const parts = this.testContent.question.split("_");
|
||||
return parts.map((part, index) => {
|
||||
if (index % 2 === 1) {
|
||||
num++;
|
||||
}
|
||||
return {
|
||||
type: index % 2 === 1 ? "input" : "text",
|
||||
value: part,
|
||||
index: this.generateArray(parts.filter((value, i) => i % 2 === 1).length),
|
||||
index: num,
|
||||
totalInput: this.generateArray(parts),
|
||||
};
|
||||
});
|
||||
},
|
||||
|
|
@ -420,8 +467,8 @@ export default {
|
|||
<span v-if="char.type !== 'input'">{{ char.value }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="testContent.blanks_answer[index]"
|
||||
@input="handleInput(char.index)"
|
||||
v-model="testContent.blanks_answer[char.index - 1]"
|
||||
@input="handleInput(char.totalInput)"
|
||||
type="text"
|
||||
placeholder="请输入答案"
|
||||
class="answer-input"
|
||||
|
|
@ -443,7 +490,38 @@ export default {
|
|||
{{ item.item_letter }}丶{{ item.item }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="testContent.testType === '简答题'"
|
||||
class="exam-left-test-content"
|
||||
>
|
||||
<div class="exam-left-test-shortAnswer">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="14"
|
||||
placeholder="请输入内容"
|
||||
v-model="testContent.your_answer"
|
||||
@input="inputValue"
|
||||
>
|
||||
</el-input>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
style="color: #658cf6; font-size: 16px"
|
||||
>
|
||||
<img src="@/assets/image/attachment.png" style="width: 16px" />
|
||||
附件上传</el-button
|
||||
>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="exam-left-test-content">
|
||||
<div
|
||||
v-for="(item, index) in testContent.options"
|
||||
|
|
@ -680,6 +758,7 @@ export default {
|
|||
background: transparent;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
&-content::-webkit-scrollbar {
|
||||
|
|
@ -692,7 +771,40 @@ export default {
|
|||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
&-shortAnswer {
|
||||
background: url("../../assets/image/shortAnswer.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 305px;
|
||||
::v-deep .el-textarea__inner {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
::v-deep .upload-demo {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
// flex-direction: column-reverse;
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
}
|
||||
::v-deep .el-upload--picture-card {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
box-sizing: border-box;
|
||||
width: 9.25rem;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
line-height: 30px;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -35px;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.optionSelect {
|
||||
background-color: rgba(101, 140, 246, 0.55);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { GetSubjectType, GetPractice } from "@/api/user";
|
||||
import { GetSubjectType, GetPractice, getPracticeRecords } from "@/api/user";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
|
|
@ -18,6 +18,8 @@ export default {
|
|||
// 考试场次
|
||||
testList: [],
|
||||
total: 0, //总数
|
||||
isVisible: false, //考试记录弹窗
|
||||
examRecordsTable: [], //考试记录表格
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -25,14 +27,6 @@ export default {
|
|||
onQuery() {
|
||||
this.getTestList();
|
||||
},
|
||||
examClick(item, index) {
|
||||
// 状态切换页码初始化
|
||||
this.form.PageIndex = 1;
|
||||
this.examIndex = index;
|
||||
this.form.state = item.state;
|
||||
// 切换状态重新发送请求
|
||||
this.getTestList();
|
||||
},
|
||||
getTestList() {
|
||||
GetPractice(this.form).then((res) => {
|
||||
this.testList = res.data.data;
|
||||
|
|
@ -57,6 +51,38 @@ export default {
|
|||
sessionStorage.setItem("testMsg", JSON.stringify(testMsg));
|
||||
sessionStorage.setItem("params", JSON.stringify(data));
|
||||
},
|
||||
//练习记录
|
||||
enterExamRecords(row) {
|
||||
let dataMap = {
|
||||
batch_id: row.batch_id,
|
||||
user_id: this.form.user_id,
|
||||
};
|
||||
getPracticeRecords(dataMap)
|
||||
.then((res) => {
|
||||
this.examRecordsTable = res.data.data;
|
||||
this.isVisible = true;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
//查看考试详情
|
||||
goDetails(row){
|
||||
console.log(row,'行');
|
||||
this.$router.push(
|
||||
`/examDetails?id=${row.result_id}&score=${row.score}&user_id=${this.form.user_id}&examine_time=${row.examine_time}&exam_name=${row.exam_name}&pass_score=${row.pass_score}`
|
||||
);
|
||||
let data = {
|
||||
user_id: this.form.user_id,
|
||||
batch_id: row.result_id,
|
||||
list_item_answer: [],
|
||||
};
|
||||
sessionStorage.setItem("params", JSON.stringify(data));
|
||||
},
|
||||
//关闭练习记录
|
||||
closeExamRecords() {
|
||||
this.isVisible = false;
|
||||
},
|
||||
currentChange(current) {
|
||||
this.form.PageIndex = current;
|
||||
this.getTestList();
|
||||
|
|
@ -93,6 +119,15 @@ export default {
|
|||
console.log(err);
|
||||
});
|
||||
},
|
||||
//表格样式
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
if (rowIndex % 2 == 1) {
|
||||
return "warning-row";
|
||||
} else {
|
||||
return "success-row";
|
||||
}
|
||||
return "";
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 用户id赋值
|
||||
|
|
@ -148,7 +183,11 @@ export default {
|
|||
<div class="test-box-site-item-btn">
|
||||
<!-- <span> 考试记录 </span> -->
|
||||
<span>
|
||||
<img src="@/assets/image/ksjl.png" />
|
||||
<img
|
||||
src="@/assets/image/ksjl.png"
|
||||
v-show="item.ks_count > 0"
|
||||
@click="enterExamRecords(item)"
|
||||
/>
|
||||
</span>
|
||||
<!-- <div class="time" v-if="item.batch_state.trim() === '未开始'">
|
||||
{{ getCountdown(item.start_time) }}
|
||||
|
|
@ -167,11 +206,39 @@ export default {
|
|||
@current-change="currentChange"
|
||||
:current-page="form.PageIndex"
|
||||
layout="prev, pager, next"
|
||||
:page-size="8"
|
||||
:page-size="form.PageSize"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<!-- 考试记录弹窗 -->
|
||||
<div class="examRecords" v-if="isVisible">
|
||||
<div class="examRecords-title">
|
||||
<span>考试记录</span>
|
||||
<img src="@/assets/image/close.png" @click="closeExamRecords" />
|
||||
</div>
|
||||
<div class="diyTable">
|
||||
<el-table
|
||||
class="my-el-table"
|
||||
:data="examRecordsTable"
|
||||
height="320"
|
||||
:header-cell-style="{
|
||||
background: 'rgba(131, 129, 177, 0.5) !important',
|
||||
color: '#ededed !important',
|
||||
}"
|
||||
:row-class-name="tableRowClassName"
|
||||
>
|
||||
<el-table-column type="index" label="序号" align="center" />
|
||||
<el-table-column prop="examine_time" label="考试时间" align="center" />
|
||||
<el-table-column prop="score" label="考试成绩" align="center" />
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="small" @click="goDetails(scope.row)">查看详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -388,5 +455,87 @@ export default {
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.examRecords {
|
||||
position: fixed; /* Stay in place */
|
||||
// z-index: 1; /* Sit on top */
|
||||
left: 28%;
|
||||
top: 30%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 807px; /* Could be more or less, depending on screen size */
|
||||
height: 391px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 0 20px;
|
||||
background: url("@/assets/image/examRecords.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
animation: popup-enter 0.7s ease-out forwards;
|
||||
&-title {
|
||||
height: 40px;
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
span {
|
||||
left: 42%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes popup-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.diyTable {
|
||||
margin-top: 20px;
|
||||
}
|
||||
::v-deep .my-el-table {
|
||||
overflow-x: hidden;
|
||||
.el-table__header-wrapper {
|
||||
.el-table__header {
|
||||
width: calc(100% + 32px) !important;
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
width: calc(100% + 20px) !important;
|
||||
.el-table__body {
|
||||
width: calc(100% + 20px) !important;
|
||||
}
|
||||
}
|
||||
.el-table__body tr:hover > td {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
// 去掉table表格底部白色线条
|
||||
::v-deep .el-table::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell,
|
||||
::v-deep .el-table th.el-table__cell.is-leaf {
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-table__row.warning-row {
|
||||
background: rgba(60, 58, 74, 0.15) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table__row.success-row {
|
||||
background: rgba(131, 129, 177, 0.2) !important;
|
||||
}
|
||||
::v-deep .el-table tr {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<script>
|
||||
import { getDetailsMap } from "@/api/user";
|
||||
export default {
|
||||
name: "practiceSuccess",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
score: 0,
|
||||
detailsMap: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 进入考场选择页面
|
||||
|
|
@ -11,6 +15,28 @@ export default {
|
|||
let data = JSON.parse(params);
|
||||
this.$router.push("/examModule?" + data.user_id);
|
||||
},
|
||||
//进入详情页面
|
||||
goDetails() {
|
||||
let params = sessionStorage.getItem("params");
|
||||
let data = JSON.parse(params);
|
||||
this.$router.push(
|
||||
`/examDetails?id=${this.detailsMap.result_id}&score=${this.detailsMap.score}&user_id=${data.user_id}&examine_time=${this.detailsMap.examine_time}&exam_name=${this.detailsMap.exam_name}&pass_score=${this.detailsMap.pass_score}`
|
||||
);
|
||||
},
|
||||
//通过resultId获取需要传到详情页的数据
|
||||
getDetailsData() {
|
||||
getDetailsMap({ result_id: this.$route.query.result_id })
|
||||
.then((res) => {
|
||||
this.detailsMap = res.data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.score = this.$route.query.score;
|
||||
this.getDetailsData();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -20,11 +46,11 @@ export default {
|
|||
<div class="success-page">
|
||||
<div class="success-font">您已成功交卷，请继续下一场考试。</div>
|
||||
<div class="success-score">
|
||||
<p class="score">60</p>
|
||||
<p class="score">{{ score }}</p>
|
||||
<p class="unit">分</p>
|
||||
</div>
|
||||
<div class="success-btn">
|
||||
<img src="@/assets/image/viewAnalysis.png" />
|
||||
<img @click="goDetails" src="@/assets/image/viewAnalysis.png" />
|
||||
<img @click="determine" src="@/assets/image/returnList.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue