542 lines
14 KiB
Vue
542 lines
14 KiB
Vue
<script>
|
|
import { GetSubjectType, GetPractice, getPracticeRecords } from "@/api/user";
|
|
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
typeOptions: [],
|
|
examIndex: 0,
|
|
// 获取考试数据参数
|
|
form: {
|
|
PageIndex: 1,
|
|
PageSize: 8,
|
|
state: "",
|
|
user_id: "",
|
|
SubjectType: "",
|
|
},
|
|
// 考试场次
|
|
testList: [],
|
|
total: 0, //总数
|
|
isVisible: false, //考试记录弹窗
|
|
examRecordsTable: [], //考试记录表格
|
|
};
|
|
},
|
|
methods: {
|
|
//根据科目查询
|
|
onQuery() {
|
|
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));
|
|
},
|
|
//练习记录
|
|
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();
|
|
},
|
|
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);
|
|
});
|
|
},
|
|
//表格样式
|
|
tableRowClassName({ row, rowIndex }) {
|
|
if (rowIndex % 2 == 1) {
|
|
return "warning-row";
|
|
} else {
|
|
return "success-row";
|
|
}
|
|
return "";
|
|
},
|
|
},
|
|
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"
|
|
v-show="item.ks_count > 0"
|
|
@click="enterExamRecords(item)"
|
|
/>
|
|
</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="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>
|
|
|
|
<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;
|
|
}
|
|
}
|
|
.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>
|