chengdandan
/
InternetCompetition
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: chengdandan:2f1d5d0488355f1aa31cb5d06fefbcdf868b1dd8
Branches Tags
chengdandan:master
..
compare: chengdandan:b6a8ddacf15659e9513df46f4aa98acbb1425d97
Branches Tags
chengdandan:master

No commits in common. "2f1d5d0488355f1aa31cb5d06fefbcdf868b1dd8" and "b6a8ddacf15659e9513df46f4aa98acbb1425d97" have entirely different histories.
2f1d5d0488 ... b6a8ddacf1

15 changed files with 608 additions and 1938 deletions
Show Stats Expand all files Collapse all files

330
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
public/config.js
View File

@ -1,3 +1,3 @@
const config = {
url:'http://172.16.1.254:10014/'
url:'http://111.229.30.246:10014/'
}

45
src/api/user.js
View File

@ -38,68 +38,47 @@ export const getGrade = (data) => {
);
};
// 获取正确答案和默认值的接口
export const getQueryAnswer = (data) => {
export const getQueryAnswer = (data) =>{
return axios.get(
`/Handler/Config.ashx?action=queryanswer&mark=${data.mark}&user_id=${data.user_id}`
);
}
// 用户获取理论考试
export const getKnowledgeTest = (data) => {
export const getKnowledgeTest = (data) =>{
return axios.post(
`/Handler/User.ashx?action=logintheory&user_id=${data.userId}&PageIndex=${data.PageIndex}&PageSize=${data.PageSize}&State=${data.state}`
);
}
// 获取批次试卷题目列表信息
export const getTestTopic = (data) => {
export const getTestTopic = (data) =>{
return axios.post(
`/Handler/Boat.ashx?action=theorylist&batch_id=${data.id}&kind=${data.kind}`
);
}
//获取题目选项信息
export const getTopicDetail = (data) => {
export const getTopicDetail = (data) =>{
return axios.post(
`/Handler/Boat.ashx?action=theorybase&theory_base_id=${data.theoryBaseId}`
);
}
// 提交理论考试答案
export const savaTestAnswer = (data) => {
export const savaTestAnswer = (data) =>{
return axios({
url: `/Handler/Boat.ashx?action=savetheory`,
url:`/Handler/Boat.ashx?action=savetheory`,
data: data,
method: 'post',
headers: { 'Content-Type': 'multipart/form-data' }
method:'post',
headers: {'Content-Type': 'multipart/form-data'}
});
}
// 获取缓存数据
export const getTestCache = (params) => {
export const getTestCache = (params) =>{
return axios.get(
`/Handler/Boat.ashx?action=gettheorycache`, { params: params }
`/Handler/Boat.ashx?action=gettheorycache`,{params:params}
);
}
// 保存缓存数据
export const saveTestCache = (data) => {
export const saveTestCache = (data) =>{
return axios.post(
`/Handler/Boat.ashx?action=savetheorycache`, data, { headers: { 'Content-Type': 'multipart/form-data' } }
);
}
//获取科目类别
export const GetSubjectType = (data) => {
return axios.get(
`/Handler/Boat.ashx?action=GetSubjectType`, { params: data }
);
}
//获取练习列表
export const GetPractice = (data) => {
return axios.get(
`/Handler/User.ashx?action=loginlianxi`, { params: data }
);
}
//获取练习题目
export const getPracticeTopic = (data) => {
return axios.get(
`/Handler/Boat.ashx?action=theorylist&lianxi=1`, { params: data }
`/Handler/Boat.ashx?action=savetheorycache`,data,{headers: {'Content-Type': 'multipart/form-data'}}
);
}

BIN
src/assets/image/jrks.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/image/ksjl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/image/returnList.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
src/assets/image/viewAnalysis.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.0 KiB

0
src/assets/image/examModule.png → src/assets/image/选中-文字背景_07.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

18
src/router/index.js
View File

@ -236,24 +236,6 @@ const routes = [
path:'/examSelect',
name:'examSelect',
component:()=>import("../views/examination/examSelect.vue")
},
//考试模块
{
path:'/examModule',
name:'examModule',
component:()=>import("../views/examModule/index.vue")
},
//考试页面
{
path:'/examPage',
name:'examPage',
component:()=>import("../views/examModule/examPage.vue")
},
//练习交卷页面
{
path:'/practiceSuccess',
name:'practiceSuccess',
component:()=>import("../views/examModule/practiceSuccess.vue")
}
];

7
src/views/Index.vue
View File

@ -44,13 +44,8 @@
<router-link to="/ntmaintenance">网络优化-网关维护</router-link>
</div>
<div>
<router-link to="/examSelect">考试选择</router-link>
<router-link to="/examination">工业互联网试卷</router-link>
<router-link to="/successPage">考试完成</router-link>
</div>
<div>
<router-link to="/examModule">考试模块</router-link>
<router-link to="/examPage">考试模块考试页</router-link>
<router-link to="/successPage">11111111111111</router-link>
</div>
<!-- <ceshi></ceshi> -->
<!-- <CeCe></CeCe> -->

898
src/views/examModule/examPage.vue
View File

@ -1,898 +0,0 @@
<script>
import {
getPracticeTopic,
getTopicDetail,
savaTestAnswer,
getTestCache,
saveTestCache,
} from "@/api/user";
import { sortString } from "@/util/tools";
export default {
name: "examPage",
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: {
batch_id: "",
},
// 题量总数
questionTotal: 0,
passScore: 0, //及格分
totalScore: 0, //总分
minute: 0, //剩余时间
number: 0, //第几题
isCache: false, //是否获取完缓存
testTitle: "", //试卷名称
endTime: "",
countdown: "", //剩余时间
timer: "", //定时器
};
},
methods: {
// 选项点击事件
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) {
// 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 == "填空题") {
}
},
//交卷按钮
handPaper() {
this.examDialogShow = true;
},
//确定交卷按钮
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
);
return {
your_answer: filteredArr.join("__"), // 将数组元素通过 '__' 连接成字符串
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);
console.log(list);
data.list_item_answer = list;
let formData = new FormData();
formData.append("data", JSON.stringify(data));
savaTestAnswer(formData).then((res) => {
localStorage.removeItem("countdownEndTime");
this.$router.push("/practiceSuccess");
});
},
//答题卡数据获取
getCardData() {
// 考试信息
let testMsg = sessionStorage.getItem("testMsg");
this.testTitle = JSON.parse(testMsg).testTitle; //考试名称
this.endTime = JSON.parse(testMsg).endTime; //结束时间
// 试卷id
this.params.batch_id = this.$route.query.id;
this.totalScore = this.$route.query.totalScore; //总分
this.minute = this.$route.query.minute; //剩余时间
this.passScore = this.$route.query.passScore; //及格分
getPracticeTopic(this.params).then((res) => {
// 总数
this.questionTotal = res.data.data.length;
res.data.data.forEach((el) => {
this.testTypeNum.forEach((item) => {
if (el.question_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.question_kind === "单选题") {
el.number = el.no;
} else if (el.question_kind === "多选题") {
el.number = el.no + this.testTypeNum[0].children.length;
} else if (el.question_kind === "判断题") {
el.number =
el.no +
this.testTypeNum[0].children.length +
this.testTypeNum[1].children.length;
} else if (el.question_kind === "填空题") {
el.number =
el.no +
this.testTypeNum[0].children.length +
this.testTypeNum[1].children.length +
this.testTypeNum[2].children.length;
} else if (el.question_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) {
// 保存缓存
this.saveCacheData();
this.testContent.options = [];
this.testContent.question = "";
// 第几个题目
this.number = item.number;
// 分数赋值
this.testContent.score = item.per_score;
this.testContent.testType = item.question_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);
// formData.append('user_id',JSON.stringify(data.user_id))
// formData.append('batch_id',JSON.stringify(data.batch_id))
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);
},
//获取剩余时间
initializeCountdown() {
// 检查 localStorage 中是否已有保存的结束时间
const storedEndTime = localStorage.getItem("countdownEndTime");
const currentTime = Date.now();
if (storedEndTime) {
// 如果存在，计算剩余时间
const remainingTime = Math.max(0, parseInt(storedEndTime) - currentTime);
this.countdown = Math.floor(remainingTime / 1000); // 转换为秒
} else {
// 如果没有结束时间，设置新的结束时间（30分钟后）
const newEndTime = currentTime + this.minute * 60 * 1000; // 当前时间 + 30分钟
localStorage.setItem("countdownEndTime", newEndTime.toString());
this.countdown = this.minute * 60; // 设置初始倒计时时间（30分钟）
}
// 启动倒计时
this.timer = setInterval(this.updateCountdown, 1000);
},
updateCountdown() {
const currentTime = Date.now();
const storedEndTime = parseInt(localStorage.getItem("countdownEndTime"));
const remainingTime = Math.max(0, storedEndTime - currentTime);
this.countdown = Math.floor(remainingTime / 1000);
// 如果倒计时结束，清除定时器
if (remainingTime <= 0) {
clearInterval(this.timer);
this.timer = null;
localStorage.removeItem("countdownEndTime"); // 倒计时结束时清除存储
this.$message.warning("考试时间到,已自动交卷");
this.submitTest();
}
},
padZero(value) {
// 格式化为两位数
return value < 10 ? `0${value}` : value;
},
generateArray(n) {
let result = [];
for (let i = 1; i <= n; i++) {
result.push(i);
}
return result;
},
},
mounted() {
this.getCardData();
// 获取剩余时间
this.initializeCountdown();
},
beforeDestroy() {
// 清除定时器
if (this.timer) {
clearInterval(this.timer);
}
},
computed: {
// 将题目字符串按“-”分割，形成一个包含文本和输入框的数组
questionParts() {
const parts = this.testContent.question.split("_");
return parts.map((part, index) => {
return {
type: index % 2 === 1 ? "input" : "text",
value: part,
index: this.generateArray(parts.filter((value, i) => i % 2 === 1).length),
};
});
},
timeFormatted() {
// 将剩余时间转换为时:分:秒
const hours = Math.floor(this.countdown / 3600);
const minutes = Math.floor((this.countdown % 3600) / 60);
const seconds = this.countdown % 60;
return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
},
},
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
v-model="testContent.blanks_answer[index]"
@input="handleInput(char.index)"
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>
<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>
<!-- 按钮 -->
<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>总分：{{ totalScore }}分</span>
<span>及格分：{{ passScore }}</span>
<span>题量：{{ questionTotal }}</span>
</div>
<div class="exam-right-card-time">
<span>剩余时间：</span>
<span>{{ timeFormatted }}</span>
</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.your_answer, border: s.number === number }"
:style="{
'background-color':
s.blanks_answer.length != 0 ? 'rgba(64, 253, 137, 0.2)' : '',
}"
@click="testClick(s)"
>{{ s.no }}</span
>
</div>
</div>
</div>
<!-- <div class="exam-right-card-lenged">-->
<!-- <div>-->
<!-- <span><i class="have"></i>已做</span>-->
<!-- <span><i class="notDone"></i>未做</span>-->
<!-- <span><i class="current"></i>当前</span>-->
<!-- </div>-->
<!-- </div>-->
<div class="submit" @click="handPaper"></div>
</div>
</div>
</div>
<div v-if="examDialogShow" class="exam-dialog">
<div class="exam-dialog-title">提示</div>
<div class="exam-dialog-content">确定要交卷吗？交卷之后将不能再继续答题。</div>
<div class="exam-dialog-btn">
<div
class="exam-dialog-btn-light"
style="margin-right: 82px"
@click="examDialogShow = false"
>
取消
</div>
<div class="exam-dialog-btn-light" @click="submitTest">确定</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;
}
}
&-content::-webkit-scrollbar {
display: none;
}
// 选项
&-content {
margin-top: 40px;
height: 500px;
overflow-y: scroll;
}
.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/submit.png");
}
&-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;
span:nth-child(2) {
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);
}
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>

392
src/views/examModule/index.vue
View File

@ -1,392 +0,0 @@
<script>
import { GetSubjectType, GetPractice } from "@/api/user";
export default {
name: "index",
data() {
return {
typeOptions: [],
examIndex: 0,
// 获取考试数据参数
form: {
PageIndex: 1,
PageSize: 8,
state: "",
user_id: "",
SubjectType: "",
},
// 考试场次
testList: [],
total: 0, //总数
};
},
methods: {
//根据科目查询
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;
this.total = parseInt(res.data.message);
});
},
// 进入考试
enterExam(item) {
this.$router.push(
`/examPage?id=${item.batch_id}&totalScore=${item.total_score}&minute=${item.ks_minute}&passScore=${item.pass_score}`
);
let data = {
user_id: this.form.user_id,
batch_id: item.batch_id,
list_item_answer: [],
};
let testMsg = {
testTitle: item.subject, //考试名称
endTime: item.ks_minute, //考试结束时间
};
// 存储考试数据
sessionStorage.setItem("testMsg", JSON.stringify(testMsg));
sessionStorage.setItem("params", JSON.stringify(data));
},
currentChange(current) {
this.form.PageIndex = current;
this.getTestList();
},
getCountdown(time) {
let endTime = new Date(time).getTime();
let startTime = new Date().getTime();
let remainder = endTime - startTime;
let d = parseInt(remainder / 1000 / 60 / 60 / 24); //算出天数
let h = parseInt((remainder / 1000 / 60 / 60) % 24); //算出小时数
let m = parseInt((remainder / 1000 / 60) % 60); //算出分钟数
let s = parseInt((remainder / 1000) % 60); //算出秒数
h = d * 24 + h;
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
return h + "小时" + m + "分" + s + "秒后开始";
// return h+':'+m+':'+s
},
//获取科目类别
getSubjectTypeList() {
GetSubjectType()
.then((res) => {
this.typeOptions = res.data.data;
})
.catch((err) => {
console.log(err);
});
},
},
mounted() {
// 用户id赋值
// this.form.user_id = window.location.href.split("?")[1];
this.form.user_id = "USER202311172256420502";
this.getSubjectTypeList();
this.getTestList();
},
computed: {},
};
</script>
<template>
<div class="test-box">
<div class="test-box-title">考试场次选择</div>
<div class="test-box-status">
<el-form v-model="form" :inline="true">
<el-form-item label="科目类别:">
<el-select
v-model="form.SubjectType"
placeholder="请选择科目类别"
:popper-append-to-body="false"
clearable
>
<el-option
v-for="(item, index) in typeOptions"
:key="index"
:label="item"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onQuery">查询</el-button>
</el-form-item>
</el-form>
</div>
<div class="test-box-site">
<div v-for="item in testList" class="test-box-site-item">
<div class="test-box-site-item-name">
{{ item.subject }}
</div>
<div class="test-box-site-item-time">
<span>考试时长：{{ item.ks_minute }}分钟</span>
</div>
<div class="test-box-site-item-score">
<span>满分：{{ item.total_score }}分</span>
</div>
<div class="test-box-site-item-score">
<span>及格分：{{ item.pass_score }}分</span>
</div>
<div class="test-box-site-item-btn">
<!-- <span> 考试记录 </span> -->
<span>
<img src="@/assets/image/ksjl.png" />
</span>
<!-- <div class="time" v-if="item.batch_state.trim() === '未开始'">
{{ getCountdown(item.start_time) }}
</div> -->
<!-- <span @click="enterExam(item)"> 进入考试 </span> -->
<span>
<img src="@/assets/image/jrks.png" @click="enterExam(item)" />
</span>
</div>
</div>
</div>
<div class="test-no-data" v-if="!testList.length"></div>
<div class="test-box-pagination">
<span>共{{ total }}条</span>
<el-pagination
@current-change="currentChange"
:current-page="form.PageIndex"
layout="prev, pager, next"
:page-size="8"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<style lang="less" scoped>
.test-no-data {
background-image: url("../../assets/image/examSelect/not_data.png");
width: 228px;
height: 244px;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
::v-deep .el-pager li {
background-image: none;
background-color: transparent;
font-size: 14px;
font-weight: normal;
width: 34px;
height: 34px;
line-height: 34px;
}
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev {
background-color: transparent;
width: 34px;
color: #ffffff;
height: 34px;
line-height: 34px;
}
::v-deep .el-pagination button:disabled {
color: rgba(255, 255, 255, 0.3);
background-color: transparent;
}
::v-deep .el-pager li:hover {
color: #ffffff;
}
::v-deep .el-pager li.active {
background-color: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.test-box {
width: 1773px;
height: 858px;
background-image: url("../../assets/image/examSelect/test-box.png");
background-size: 100% 100%;
position: absolute;
padding: 0 68px;
box-sizing: border-box;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
//
&-pagination {
position: absolute;
display: flex;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
align-items: center;
span {
color: #ffffff;
font-size: 14px;
}
}
&-title {
position: absolute;
top: 14px;
left: 50%;
font-size: 24px;
margin-left: -72px;
color: rgba(255, 255, 255, 1);
}
// 状态的tab栏
&-status {
margin-top: 42px;
margin-bottom: 26px;
display: flex;
list-style: none;
::v-deep .el-input__inner {
background: rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
::v-deep .el-input.is-focus .el-input__inner {
border-color: rgba(255, 255, 255, 0.5);
}
::v-deep .el-select-dropdown {
left: 0 !important;
}
::v-deep .el-select-dropdown__item {
color: #fff;
}
::v-deep .el-select-dropdown__item.hover {
background: rgba(0, 0, 0, 0.7);
}
::v-deep .el-select-dropdown__list {
background: rgba(57, 57, 67);
border-color: rgba(255, 255, 255, 0.3);
}
.select {
background-image: url("../../assets/image/examSelect/select-status.png");
color: rgba(255, 255, 255, 1);
}
// li {
// background-image: url("../../assets/image/examSelect/default-status.png");
// color: rgba(255, 255, 255, 0.6);
// width: 136px;
// height: 40px;
// margin-right: 14px;
// text-align: center;
// line-height: 40px;
// }
}
// 考试场次选择
&-site {
height: 552px;
&-item {
float: left;
width: 372px;
margin-right: 49px;
margin-bottom: 49px;
height: 232px;
box-sizing: border-box;
padding: 0 18px;
background-image: url("../../assets/image/examSelect/exam-plate.png");
background-size: 100% 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-bottom: 20px;
// 理论考试名字
&-name {
font-size: 18px;
margin-top: 10px !important;
}
div {
color: rgba(255, 255, 255, 1);
font-size: 16px;
margin-top: 20px;
}
//开始时间
&-start {
display: flex;
justify-content: space-between;
margin-top: 23px !important;
span:nth-child(2) {
text-align: center;
line-height: 22px;
width: 62px;
height: 22px;
background-size: 100% 100%;
}
.end {
background-image: url("../../assets/image/examSelect/end.png");
}
.not-started {
background-image: url("../../assets/image/examSelect/not-started.png");
}
.started {
background-image: url("../../assets/image/examSelect/started.png");
}
}
// 进入考场
&-btn {
display: flex;
justify-content: flex-end;
position: relative;
margin-top: 30px !important;
padding: 0 40px;
.time {
color: rgba(101, 140, 246, 1);
font-size: 14px;
position: absolute;
top: -30px;
right: 0;
margin: 0;
}
span:nth-child(1) {
margin-right: 45px;
}
span {
// background-image: url("../../assets/image/examSelect/enter-not.png");
font-size: 14px;
width: 101px;
line-height: 28px;
color: rgba(255, 255, 255, 0.5);
text-align: center;
background-size: 100% 100%;
cursor: pointer;
}
.starting {
background-image: url("../../assets/image/examSelect/enter.png");
color: rgba(255, 255, 255, 1);
}
}
}
&-item:nth-child(4n) {
margin-right: 0;
}
}
}
</style>

87
src/views/examModule/practiceSuccess.vue
View File

@ -1,87 +0,0 @@
<script>
export default {
name: "practiceSuccess",
data() {
return {};
},
methods: {
// 进入考场选择页面
determine() {
let params = sessionStorage.getItem("params");
let data = JSON.parse(params);
this.$router.push("/examModule?" + data.user_id);
},
},
};
</script>
<template>
<div class="page">
<div class="success-page">
<div class="success-font">您已成功交卷，请继续下一场考试。</div>
<div class="success-score">
<p class="score">60</p>
<p class="unit">分</p>
</div>
<div class="success-btn">
<img src="@/assets/image/viewAnalysis.png" />
<img @click="determine" src="@/assets/image/returnList.png" />
</div>
</div>
</div>
</template>
<style scoped lang="less">
.page {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
align-items: center;
.success-page {
width: 1773px;
position: relative;
height: 858px;
background-image: url("../../assets/image/success-bg.png");
background-size: 100% 100%;
}
.success-font {
margin-top: 200px;
text-align: center;
font-size: 26px;
color: rgba(255, 255, 255, 1);
}
.success-score {
margin-top: 85px;
text-align: center;
.score {
font-weight: 700;
font-size: 72px;
color: #658cf6;
}
.unit {
font-weight: 400;
font-size: 26px;
color: #ffffff;
}
}
.success-btn {
width: 600px;
height: 44px;
line-height: 44px;
text-align: center;
font-size: 20px;
color: rgba(255, 255, 255, 1);
position: absolute;
bottom: 95px;
left: 50%;
margin-left: -300px;
// background-image: url("../../assets/image/highlight-btn.png");
display: flex;
justify-content: space-between;
img{
cursor: pointer;
}
}
}
</style>

224
src/views/examination/examSelect.vue
View File

@ -1,26 +1,27 @@
<script>
import { getKnowledgeTest } from "@/api/user";
import {getKnowledgeTest} from "@/api/user";
export default {
name: "examSelect",
name: 'examSelect',
data() {
return {
examTab: [
{
name: "全部",
state: "",
name: '全部',
state: ''
},
{
name: "未开始",
state: "0",
name: '未开始',
state: '0'
},
{
name: "进行中",
state: "1",
name: '进行中',
state: '1'
},
{
name: "已结束",
state: "2",
name: '已结束',
state: '2'
},
],
examIndex: 0,
@ -28,94 +29,90 @@ export default {
form: {
PageIndex: 1,
PageSize: 8,
state: "",
userId: "",
state: '',
userId: ''
},
// 考试场次
testList: [],
total: 0, //总数
};
total:0,//总数
}
},
methods: {
examClick(item, index) {
// 状态切换页码初始化
this.form.PageIndex = 1;
this.examIndex = index;
this.form.state = item.state;
this.form.PageIndex = 1
this.examIndex = index
this.form.state = item.state
// 切换状态重新发送请求
this.getTestList();
this.getTestList()
},
getTestList() {
getKnowledgeTest(this.form).then((res) => {
this.testList = res.data.data;
this.total = parseInt(res.data.message);
});
getKnowledgeTest(this.form).then(res => {
this.testList = res.data.data
this.total = parseInt(res.data.message)
})
},
// 进入考试
enterExam(item) {
if (item.batch_state.trim() === "进行中") {
this.$router.push(
`/examination?id=${item.batch_id}&totalScore=${item.total_score}&minute=${item.ks_minute}&passScore=${item.pass_score}`
);
enterExam(item){
if(item.batch_state.trim()==='进行中'){
this.$router.push(`/examination?id=${item.batch_id}&totalScore=${item.total_score}&minute=${item.ks_minute}&passScore=${item.pass_score}`)
let data = {
user_id: this.form.userId,
batch_id: item.batch_id,
list_item_answer: [],
};
user_id:this.form.userId,
batch_id:item.batch_id,
list_item_answer:[]
}
let testMsg = {
testTitle: item.subject_name, //考试名称
endTime: item.end_time, //考试结束时间
};
testTitle:item.subject_name, //考试名称
endTime:item.end_time //考试结束时间
}
// 存储考试数据
sessionStorage.setItem("testMsg", JSON.stringify(testMsg));
sessionStorage.setItem("params", JSON.stringify(data));
sessionStorage.setItem('testMsg',JSON.stringify(testMsg))
sessionStorage.setItem('params',JSON.stringify(data))
}
},
currentChange(current) {
this.form.PageIndex = current;
this.getTestList();
currentChange(current){
this.form.PageIndex = current
this.getTestList()
},
getCountdown(time) {
let endTime = new Date(time).getTime();
let startTime = new Date().getTime();
let remainder = endTime - startTime;
let d = parseInt(remainder / 1000 / 60 / 60 / 24); //算出天数
let h = parseInt((remainder / 1000 / 60 / 60) % 24); //算出小时数
let m = parseInt((remainder / 1000 / 60) % 60); //算出分钟数
let s = parseInt((remainder / 1000) % 60); //算出秒数
h = d * 24 + h;
if (h < 10) {
h = "0" + h;
let endTime = new Date(time).getTime()
let startTime = new Date().getTime()
let remainder = endTime - startTime
let d = parseInt(remainder / 1000 / 60 / 60 / 24) //算出天数
let h = parseInt(remainder / 1000 / 60 / 60 % 24)//算出小时数
let m = parseInt(remainder / 1000 / 60 % 60)//算出分钟数
let s = parseInt(remainder / 1000 % 60)//算出秒数
h = d*24+h
if(h<10){
h='0'+h
}
if (m < 10) {
m = "0" + m;
if(m<10){
m='0'+m
}
if (s < 10) {
s = "0" + s;
if(s<10){
s='0'+s
}
return h + "小时" + m + "分" + s + "秒后开始";
return h+'小时'+m+'分'+s+'秒后开始'
// return h+':'+m+':'+s
},
}
},
mounted() {
// 用户id赋值
this.form.userId = window.location.href.split("?")[1];
this.getTestList();
this.getTestList()
},
computed: {},
};
computed: {}
}
</script>
<template>
<div class="test-box">
<div class="test-box-title">考试场次选择</div>
<ul class="test-box-status">
<li
v-for="(item, index) in examTab"
:class="examIndex === index ? 'select' : ''"
@click="examClick(item, index)"
>
<li v-for="(item,index) in examTab" :class="examIndex===index?'select':''" @click="examClick(item,index)">
{{ item.name }}
</li>
</ul>
@ -126,8 +123,8 @@ export default {
</div>
<div class="test-box-site-item-start">
<span>开始时间：{{ item.start_time }}</span>
<span class="end" v-if="item.batch_state.trim() === '已结束'"></span>
<span class="started" v-else-if="item.batch_state.trim() === '进行中'"></span>
<span class="end" v-if="item.batch_state.trim()==='已结束'"></span>
<span class="started" v-else-if="item.batch_state.trim()==='进行中'"></span>
<span class="not-started" v-else></span>
</div>
<div class="test-box-site-item-end">
@ -140,38 +137,36 @@ export default {
<span>满分：{{ item.total_score }}分</span>
</div>
<div class="test-box-site-item-btn">
<div class="time" v-if="item.batch_state.trim() === '未开始'">
{{ getCountdown(item.start_time) }}
</div>
<span
v-if="item.state === 0"
:class="item.batch_state.trim() === '进行中' ? 'starting' : ''"
@click="enterExam(item)"
>
<div class="time" v-if="item.batch_state.trim()==='未开始'">{{getCountdown(item.start_time)}}</div>
<span v-if="item.state===0" :class="item.batch_state.trim()==='进行中'?'starting':''" @click="enterExam(item)">
进入考场
</span>
<span v-else> 已参加 </span>
<span v-else>
已参加
</span>
</div>
</div>
</div>
<div class="test-no-data" v-if="!testList.length"></div>
<div class="test-no-data" v-if="!testList.length">
</div>
<div class="test-box-pagination">
<span>共{{ total }}条</span>
<span>共{{total}}条</span>
<el-pagination
@current-change="currentChange"
:current-page="form.PageIndex"
layout="prev, pager, next"
:page-size="8"
:total="total"
>
:total="total">
</el-pagination>
</div>
</div>
</template>
<style lang="less" scoped>
.test-no-data {
background-image: url("../../assets/image/examSelect/not_data.png");
.test-no-data{
background-image: url('../../assets/image/examSelect/not_data.png');
width: 228px;
height: 244px;
background-size: 100% 100%;
@ -180,40 +175,39 @@ export default {
left: 0;
right: 0;
bottom: 0;
margin: auto;
margin:auto;
}
::v-deep .el-pager li {
::v-deep .el-pager li{
background-image: none;
background-color: transparent;
font-size: 14px;
font-weight: normal;
font-weight:normal;
width: 34px;
height: 34px;
line-height: 34px;
}
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev {
::v-deep .el-pagination .btn-next,::v-deep .el-pagination .btn-prev{
background-color: transparent;
width: 34px;
color: #ffffff;
color: #FFFFFF;
height: 34px;
line-height: 34px;
}
::v-deep .el-pagination button:disabled {
color: rgba(255, 255, 255, 0.3);
::v-deep .el-pagination button:disabled{
color:rgba(255, 255, 255, 0.30);
background-color: transparent;
}
::v-deep .el-pager li:hover {
color: #ffffff;
::v-deep .el-pager li:hover{
color: #FFFFFF;
}
::v-deep .el-pager li.active {
::v-deep .el-pager li.active{
background-color: rgba(255, 255, 255, 0.12);
color: #ffffff;
color: #FFFFFF;
}
.test-box {
width: 1773px;
height: 858px;
background-image: url("../../assets/image/examSelect/test-box.png");
background-image: url('../../assets/image/examSelect/test-box.png');
background-size: 100% 100%;
position: absolute;
padding: 0 68px;
@ -224,15 +218,15 @@ export default {
bottom: 0;
margin: auto;
//
&-pagination {
&-pagination{
position: absolute;
display: flex;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
align-items: center;
span {
color: #ffffff;
span{
color: #FFFFFF;
font-size: 14px;
}
}
@ -255,13 +249,13 @@ export default {
list-style: none;
.select {
background-image: url("../../assets/image/examSelect/select-status.png");
background-image: url('../../assets/image/examSelect/select-status.png');
color: rgba(255, 255, 255, 1);
}
li {
background-image: url("../../assets/image/examSelect/default-status.png");
color: rgba(255, 255, 255, 0.6);
background-image: url('../../assets/image/examSelect/default-status.png');
color: rgba(255, 255, 255, .6);
width: 136px;
height: 40px;
margin-right: 14px;
@ -281,7 +275,7 @@ export default {
height: 232px;
box-sizing: border-box;
padding: 0 18px;
background-image: url("../../assets/image/examSelect/exam-plate.png");
background-image: url('../../assets/image/examSelect/exam-plate.png');
background-size: 100% 100%;
// 理论考试名字
&-name {
@ -300,21 +294,21 @@ export default {
display: flex;
justify-content: space-between;
margin-top: 23px !important;
span:nth-child(2) {
span:nth-child(2){
text-align: center;
line-height: 22px;
width: 62px;
height: 22px;
background-size: 100% 100%;
}
.end {
background-image: url("../../assets/image/examSelect/end.png");
.end{
background-image: url('../../assets/image/examSelect/end.png');
}
.not-started {
background-image: url("../../assets/image/examSelect/not-started.png");
.not-started{
background-image: url('../../assets/image/examSelect/not-started.png');
}
.started {
background-image: url("../../assets/image/examSelect/started.png");
.started{
background-image: url('../../assets/image/examSelect/started.png');
}
}
@ -324,26 +318,26 @@ export default {
justify-content: flex-end;
position: relative;
margin-top: 5px !important;
.time {
color: rgba(101, 140, 246, 1);
.time{
color:rgba(101, 140, 246, 1);
font-size: 14px;
position: absolute;
top: -30px;
right: 0;
margin: 0;
}
span {
background-image: url("../../assets/image/examSelect/enter-not.png");
span{
background-image: url('../../assets/image/examSelect/enter-not.png');
font-size: 14px;
width: 101px;
line-height: 28px;
color: rgba(255, 255, 255, 0.5);
color: rgba(255,255,255,0.5);
text-align: center;
background-size: 100% 100%;
}
.starting {
background-image: url("../../assets/image/examSelect/enter.png");
color: rgba(255, 255, 255, 1);
.starting{
background-image: url('../../assets/image/examSelect/enter.png');
color: rgba(255,255,255,1);
}
}
}

511
src/views/examination/index.vue
View File

@ -1,299 +1,298 @@
<script>
import {
getTestTopic,
getTopicDetail,
savaTestAnswer,
getTestCache,
saveTestCache,
} from "@/api/user";
import { sortString } from "@/util/tools";
import {getTestTopic, getTopicDetail, savaTestAnswer, getTestCache, saveTestCache} from '@/api/user'
import {sortString} from "@/util/tools";
export default {
name: "examination",
name: 'examination',
data() {
return {
// 题目详情
testContent: {
testType: "多选题",
question:
"1、以社会主义核心价值观为引领，发展社会主义先进文化，弘扬革命文化，传承中华优秀传统文化，满足人民日益增长的精神文化需求，巩固全党全国各族人民团结奋斗的共同思想基础，不断提升（ ）。",
testType: '多选题',
question: "1、以社会主义核心价值观为引领，发展社会主义先进文化，弘扬革命文化，传承中华优秀传统文化，满足人民日益增长的精神文化需求，巩固全党全国各族人民团结奋斗的共同思想基础，不断提升（ ）。",
score: "10",
your_answer: "",
your_answer: '',
options: [
{
item_letter: "A",
item: "国家文化软实力和中华文化影响力",
item_letter: 'A',
item: '国家文化软实力和中华文化影响力'
},
{
item_letter: "B",
item: "国家文化硬实力和中华文化影响力",
item_letter: 'B',
item: '国家文化硬实力和中华文化影响力'
},
{
item_letter: "C",
item: "国家文化硬实力和中华传统文化影响力",
item_letter: 'C',
item: '国家文化硬实力和中华传统文化影响力'
},
{
item_letter: "D",
item: "国家文化硬实力和中华传统文化",
},
],
item_letter: 'D',
item: '国家文化硬实力和中华传统文化'
}
]
},
testList: [],
//题目数量
testTypeNum: [
{
type: "单选题",
children: [],
type: '单选题',
children: []
},
{
type: "多选题",
children: [],
type: '多选题',
children: []
},
{
type: "判断题",
children: [],
},
type: '判断题',
children: []
}
],
optionIndex: -1, // 选中的选项
optionIndex: -1,// 选中的选项
examDialogShow: false,
// 考试请求参数
params: {
id: "",
kind: "",
id: '',
kind: ''
},
// 题量总数
questionTotal: 0,
passScore: 0, //及格分
totalScore: 0, //总分
minute: 0, //剩余时间
minute: 0,//剩余时间
number: 0, //第几题
isCache: false, //是否获取完缓存
testTitle: "", //试卷名称
endTime: "",
countdown: "", //剩余时间
timer: "", //定时器
};
isCache: false,//是否获取完缓存
testTitle: '',//试卷名称
endTime: '',
countdown:'',//剩余时间
timer:''//定时器
}
},
methods: {
// 选项点击事件
optionClick(event, index, item) {
// 单选题
if (this.testContent.testType === "多选题") {
if (this.testContent.testType === '多选题') {
// 多选题
if (event.target.className.includes("optionSelect")) {
event.target.className = "exam-left-test-option";
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+',', '')
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 + ",";
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";
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 {
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.$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
}
},
//交卷按钮
handPaper() {
this.examDialogShow = true;
this.examDialogShow = true
},
//确定交卷按钮
submitTest() {
let list = this.testList.map((el) => {
let list = this.testList.map(el => {
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);
console.log(list);
data.list_item_answer = list;
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)
console.log(list)
data.list_item_answer = list
let formData = new FormData();
formData.append("data", JSON.stringify(data));
savaTestAnswer(formData).then((res) => {
this.$router.push("/successPage");
});
formData.append('data', JSON.stringify(data));
savaTestAnswer(formData).then(res => {
this.$router.push('/successPage')
})
},
//答题卡数据获取
getCardData() {
// 考试信息
let testMsg = sessionStorage.getItem("testMsg");
this.testTitle = JSON.parse(testMsg).testTitle; //考试名称
this.endTime = JSON.parse(testMsg).endTime; //结束时间
let testMsg = sessionStorage.getItem('testMsg')
this.testTitle = JSON.parse(testMsg).testTitle //考试名称
this.endTime = JSON.parse(testMsg).endTime //结束时间
// 试卷id
this.params.id = this.$route.query.id;
this.totalScore = this.$route.query.totalScore; //总分
this.minute = this.$route.query.minute; //剩余时间
this.passScore = this.$route.query.passScore; //及格分
getTestTopic(this.params).then((res) => {
this.totalScore = this.$route.query.totalScore;//总分
this.minute = this.$route.query.minute;//剩余时间
this.passScore = this.$route.query.passScore;//及格分
getTestTopic(this.params).then(res => {
// 总数
this.questionTotal = res.data.data.length;
res.data.data.forEach((el) => {
this.testTypeNum.forEach((item) => {
this.questionTotal = res.data.data.length
res.data.data.forEach(el => {
this.testTypeNum.forEach(item => {
if (el.question_kind === item.type) {
item.children.push(el);
item.children.push(el)
}
});
});
})
})
this.testTypeNum.forEach((item, index) => {
this.testList.push(...item.children);
item.children.forEach((el) => {
this.testList.push(...item.children)
item.children.forEach(el => {
// 回答的问题
el.your_answer = "";
if (el.question_kind === "单选题") {
el.number = el.no;
} else if (el.question_kind === "多选题") {
el.number = el.no + this.testTypeNum[0].children.length;
} else if (el.question_kind === "判断题") {
el.number =
el.no +
this.testTypeNum[0].children.length +
this.testTypeNum[1].children.length;
el.your_answer = ''
if (el.question_kind === '单选题') {
el.number = el.no
} else if (el.question_kind === '多选题') {
el.number = el.no + this.testTypeNum[0].children.length
} else if (el.question_kind === '判断题') {
el.number = el.no + this.testTypeNum[0].children.length + this.testTypeNum[1].children.length
}
});
});
})
})
// 获取缓存数据
this.getCacheData();
this.testClick(this.testList[0]);
});
this.getCacheData()
this.testClick(this.testList[0])
})
},
// 题目点击
testClick(item) {
// 保存缓存
this.saveCacheData();
this.testContent.options = [];
this.testContent.question = "";
this.saveCacheData()
this.testContent.options = []
this.testContent.question = ''
// 第几个题目
this.number = item.number;
this.number = item.number
// 分数赋值
this.testContent.score = item.per_score;
this.testContent.testType = item.question_kind;
this.testContent.score = item.per_score
this.testContent.testType = item.question_kind
getTopicDetail({ theoryBaseId: item.theory_base_id }).then((res) => {
this.testContent.question = res.data.data.question;
this.testContent.options = res.data.data.items;
});
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.your_answer = item.your_answer
},
// 获取缓存数据
getCacheData() {
let params = sessionStorage.getItem("params");
let data = JSON.parse(params);
let params = sessionStorage.getItem('params')
let data = JSON.parse(params)
// formData.append('user_id',JSON.stringify(data.user_id))
// formData.append('batch_id',JSON.stringify(data.batch_id))
let formData = {
user_id: data.user_id,
batch_id: data.batch_id,
};
getTestCache(formData).then((res) => {
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) => {
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);
this.$set(ele, 'your_answer', val.your_answer)
// ele.your_answer = val.your_answer
}
});
});
this.testContent.your_answer = this.testList[0].your_answer;
})
})
this.testContent.your_answer = this.testList[0].your_answer
} else {
}
this.isCache = true;
});
this.isCache = true
})
},
// 保存缓存数据
saveCacheData() {
let list = this.testList.map((el) => {
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;
});
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));
formData.append('data', JSON.stringify(data));
// 保存缓存
saveTestCache(formData);
saveTestCache(formData)
},
// 下一题点击
nextClick() {
if (this.number === this.questionTotal) {
return;
return
}
this.number++;
let data = this.testList[this.number - 1];
this.testClick(data);
this.number++
let data = this.testList[this.number - 1]
this.testClick(data)
},
// 上一题点击
preClick() {
if (this.number === 1 || this.number === 0) {
return;
if (this.number === 1) {
return
}
this.number--;
let data = this.testList[this.number - 1];
this.testClick(data);
this.number--
let data = this.testList[this.number - 1]
this.testClick(data)
},
// 获取距离考试结束还多久
getCountdown() {
let endTime = new Date(this.endTime).getTime();
let startTime = new Date().getTime();
let remainder = endTime - startTime;
let endTime = new Date(this.endTime).getTime()
let startTime = new Date().getTime()
let remainder = endTime - startTime
// let d = parseInt(remainder / 1000 / 60 / 60 / 24) //算出天数
let h = parseInt((remainder / 1000 / 60 / 60) % 24); //算出小时数
let m = parseInt((remainder / 1000 / 60) % 60); //算出分钟数
let s = parseInt((remainder / 1000) % 60); //算出秒数
if (h < 10) {
h = "0" + h;
let h = parseInt(remainder / 1000 / 60 / 60 % 24)//算出小时数
let m = parseInt(remainder / 1000 / 60 % 60)//算出分钟数
let s = parseInt(remainder / 1000 % 60)//算出秒数
if(h<10){
h='0'+h
}
if (m < 10) {
m = "0" + m;
if(m<10){
m='0'+m
}
if (s < 10) {
s = "0" + s;
if(s<10){
s='0'+s
}
this.countdown = h+':'+m+':'+s
this.timer = setTimeout(()=>{
this.getCountdown()
},1000)
}
this.countdown = h + ":" + m + ":" + s;
this.timer = setTimeout(() => {
this.getCountdown();
}, 1000);
},
},
mounted() {
this.getCardData();
this.getCardData()
// 获取剩余时间
this.getCountdown();
this.getCountdown()
},
computed: {},
watch: {
"testContent.options"(newVal, oldVal) {},
},
};
'testContent.options'(newVal, oldVal) {
}
}
}
</script>
<template>
@ -305,61 +304,37 @@ export default {
<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 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">
{{ testContent.question }}
</div>
<div v-if="testContent.testType === '多选题'" class="exam-left-test-content">
<div
v-for="(item, index) in testContent.options"
<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)"
>
: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>
<div v-else class="exam-left-test-content">
<div
v-for="(item, index) in testContent.options"
<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)"
>
: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>
<!-- 按钮 -->
<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 :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>
@ -372,47 +347,36 @@ export default {
<div class="exam-right-card-time">
<span>剩余时间：</span>
<span>{{ countdown }}</span>
</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 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.your_answer, border: s.number === number }"
@click="testClick(s)"
>{{ s.no }}</span
>
<span ref="answer" v-for="s in item.children" :class="{'selectQuestion':s.your_answer,'border':s.number===number}"
@click="testClick(s)">{{ s.no }}</span>
</div>
</div>
</div>
<!-- <div class="exam-right-card-lenged">-->
<!-- <div>-->
<!-- <span><i class="have"></i>已做</span>-->
<!-- <span><i class="notDone"></i>未做</span>-->
<!-- <span><i class="current"></i>当前</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="exam-right-card-lenged">-->
<!-- <div>-->
<!-- <span><i class="have"></i>已做</span>-->
<!-- <span><i class="notDone"></i>未做</span>-->
<!-- <span><i class="current"></i>当前</span>-->
<!-- </div>-->
<!-- </div>-->
<div class="submit" @click="handPaper"></div>
</div>
</div>
</div>
<div v-if="examDialogShow" class="exam-dialog">
<div class="exam-dialog-title">提示</div>
<div class="exam-dialog-content">确定要交卷吗？交卷之后将不能再继续答题。</div>
<div class="exam-dialog-content"> 确定要交卷吗？交卷之后将不能再继续答题。</div>
<div class="exam-dialog-btn">
<div
class="exam-dialog-btn-light"
style="margin-right: 82px"
@click="examDialogShow = false"
>
取消
</div>
<div class="exam-dialog-btn-light" style="margin-right: 82px;" @click="examDialogShow=false">取消</div>
<div class="exam-dialog-btn-light" @click="submitTest">确定</div>
</div>
</div>
@ -445,7 +409,7 @@ export default {
right: 0;
bottom: 0;
margin: auto;
background-image: url("../../assets/image/prompt.png");
background-image: url('../../assets/image/prompt.png');
background-size: 100% 100%;
&-title {
@ -478,13 +442,13 @@ export default {
&-light {
color: rgba(255, 255, 255, 1);
background-image: url("../../assets/image/highlight-btn.png");
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");
background-image: url('../../assets/image/dark-btn.png');
}
}
}
@ -494,6 +458,7 @@ export default {
display: flex;
align-items: center;
justify-content: space-evenly;
}
&-left::-webkit-scrollbar {
@ -505,7 +470,8 @@ export default {
width: 1325px;
height: 858px;
background-size: 100% 100%;
background-image: url("../../assets/image/test.png");
background-image: url('../../assets/image/test.png');
&-top {
margin-top: 32px;
@ -535,11 +501,12 @@ export default {
width: 114px;
height: 52px;
background-size: 100% 100%;
background-image: url("../../assets/image/test-num.png");
background-image: url('../../assets/image/test-num.png');
}
&-msc {
color: rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.60);
font-size: 18px;
}
@ -551,7 +518,7 @@ export default {
&-title {
font-size: 24px;
line-height: 44px;
color: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1)
}
&-content::-webkit-scrollbar {
@ -573,11 +540,11 @@ export default {
width: 100%;
height: 80px;
margin-bottom: 20px;
background-image: url("../../assets/image/test-option.png");
background-image: url('../../assets/image/test-option.png');
padding-left: 34px;
display: flex;
font-size: 22px;
color: #ffffff;
color: #FFFFFF;
align-items: center;
box-sizing: border-box;
}
@ -591,8 +558,7 @@ export default {
margin-left: -239px;
left: 50%;
&-pre,
&-next {
&-pre, &-next {
width: 157px;
height: 44px;
text-align: center;
@ -603,12 +569,12 @@ export default {
&-pre {
color: rgba(255, 255, 255, 0.5);
background-image: url("../../assets/image/dark-btn.png");
background-image: url('../../assets/image/dark-btn.png');
}
&-next {
color: rgba(255, 255, 255, 1);
background-image: url("../../assets/image/highlight-btn.png");
background-image: url('../../assets/image/highlight-btn.png');
}
}
}
@ -618,7 +584,7 @@ export default {
width: 441px;
height: 858px;
background-size: 100% 100%;
background-image: url("../../assets/image/test-card.png");
background-image: url('../../assets/image/test-card.png');
//答题卡名称
&-title {
@ -630,21 +596,21 @@ export default {
&-card {
font-size: 18px;
color: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1);;
padding: 46px;
//提交按钮
.submit {
width: 157px;
height: 44px;
margin: 20px auto;
height:44px;
margin:20px auto;
//left: 50%;
//margin-left: -78px;
//bottom: 50px;
background-image: url("../../assets/image/submit.png");
background-image: url('../../assets/image/submit.png');
}
&-lenged {
width: 400px;
height: 80px;
&-lenged{
width:400px;
height:80px;
background-color: rgba(149, 149, 149, 0.2);
position: absolute;
bottom: 10px;
@ -653,28 +619,29 @@ export default {
display: flex;
justify-content: center;
align-items: center;
div {
span {
div{
span{
font-size: 14px;
margin-right: 26px;
span:last-child {
span:last-child{
margin-right: 0;
}
i {
i{
width: 18px;
height: 10px;
margin-right: 10px;
display: inline-block;
box-sizing: border-box;
}
.current {
border: 2px solid rgba(101, 140, 246, 1);
.current{
border:2px solid rgba(101, 140, 246, 1);
}
.notDone {
background-color: rgba(0, 0, 0, 0.2);
.notDone{
background-color:rgba(0, 0, 0, 0.20);
}
.have {
background-color: rgba(64, 253, 137, 0.2);
.have{
background-color: rgba(64, 253, 137, 0.20);
}
}
}
@ -683,10 +650,11 @@ export default {
justify-content: space-between;
display: flex;
font-size: 18px;
}
&-line {
border: 1px solid rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.30);
margin: 22px 0;
}
@ -694,6 +662,7 @@ export default {
margin-top: 37px;
position: relative;
span:nth-child(2) {
color: rgba(255, 189, 34, 1);
font-size: 26px;
@ -712,7 +681,7 @@ export default {
position: absolute;
left: -50px;
width: 7px; //修改滚动条宽度
background-color: rgba(107, 126, 177, 0.2);
background-color: rgba(107, 126, 177, 0.20);
}
&-box::-webkit-scrollbar-thumb {
@ -740,12 +709,12 @@ export default {
&-item {
display: flex;
flex-wrap: wrap;
.border {
.border{
box-sizing: border-box;
border: 2px solid rgba(101, 140, 246, 1);
border:2px solid rgba(101, 140, 246, 1);
}
.selectQuestion {
background-color: rgba(64, 253, 137, 0.2);
background-color: rgba(64, 253, 137, 0.20);
}
span {
@ -755,7 +724,7 @@ export default {
line-height: 38px;
text-align: center;
color: #fff;
background-color: rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.10);
height: 38px;
}