/* * @Author: Morpheus * @Date: 2021-07-31 16:31:54 * @Last Modified by: liu *
|
@Last Modified time: 2021-12-13 14:37:49 * menu-name 考试管理 */
|
<template>
|
<!-- <div class="exam">
|
<button class="logout"
|
onmouseover="this.style.backgroundColor='red';"
|
onmouseout="this.style.backgroundColor='';"
|
@click="handleLogout">退出系统</button>
|
<avue-data-pay :option="option" v-if="pageDisable"></avue-data-pay>
|
<div class="no" v-if="!pageDisable">
|
<span>没有找到相应的考试信息</span>
|
</div>
|
</div> -->
|
<div class="startexam">
|
<div class="startexam_heard">
|
{{ option.data[0].title ? option.data[0].title : "保安员证考试" }}
|
</div>
|
<div class="startexam_main">
|
<div class="s_m_img">
|
<img src="/img/exam/startbg.jpg" alt="" />
|
</div>
|
<div class="s_m_value" v-if="option.data[0].list.length != 0">
|
<div v-for="(item, index) in option.data[0].list" :key="index">
|
<span class="s_m_v_title">{{ item.title }}</span>
|
<span>{{ item.value }}</span>
|
</div>
|
<div class="startButs">
|
<el-button :type="option.data[0].color" round @click="startExam">{{
|
option.data[0].subtext
|
}}</el-button>
|
<div class="time-remain startButsdown">
|
<div class="time-remain_title" v-show="option.data[0].isExam == 3">
|
剩余时间 :
|
</div>
|
|
<div class="time" v-show="option.data[0].isExam == 3">
|
<count-down
|
v-on:start_callback="countDownS_c(1)"
|
v-on:end_callback="countDownE_c(1)"
|
:current-time="currentTime"
|
:start-time="startTime"
|
:end-time="endTime"
|
:tip-text="'距离考试开始'"
|
:tip-text-end="'距离考试结束'"
|
:end-text="'考试结束'"
|
:hourTxt="':'"
|
:minutesTxt="':'"
|
:secondsTxt="''"
|
>
|
</count-down>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="s_m_value" v-else>没有找到相应的考试信息</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import CountDown from "vue2-countdown";
|
import { getCurrentTime } from "@/api/exam/examRecord";
|
import { mapState } from "vuex";
|
import {
|
getExamDetail,
|
getNowTime,
|
calculations
|
} from "@/api/examapi/examination";
|
import { updateApplyStatus } from "@/api/examapi/applyexam";
|
import moment from "moment";
|
import {
|
messageSuccess,
|
messageFail,
|
messageWarn,
|
isNotEmpty
|
} from "@/util/util";
|
export default {
|
components: {
|
CountDown
|
},
|
data() {
|
return {
|
scoreId: "",
|
//继续考试时间
|
currentTime: 0,
|
startTime: 0,
|
endTime: 0,
|
//继续考试时间
|
resData: null,
|
sex: "",
|
pageDisable: false,
|
isTime: 2,
|
option: {
|
span: 8,
|
data: [
|
{
|
list: []
|
}
|
]
|
}
|
};
|
},
|
computed: {
|
...mapState({
|
userInfo: state => state.user.userInfo
|
})
|
},
|
mounted() {
|
//获取数据
|
this.getUserInfoBYExam();
|
window.startExam = this.startExam;
|
},
|
methods: {
|
//继续考试时间
|
countDownS_c: function() {
|
// console.log(12112);
|
messageSuccess(this, "请继续考试");
|
// this.startTime = this.getCurrentTimes();
|
},
|
countDownE_c: function() {
|
messageWarn(this, "考试结束123");
|
this.overExam();
|
// this.disableSubmit = true;
|
// this.submitExam("over");
|
},
|
//退出登录
|
handleLogout() {
|
this.$confirm("是否退出系统, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$store.dispatch("LogOut").then(() => {
|
this.$router.push({ path: "/login" });
|
});
|
});
|
},
|
//开始考试跳转
|
startExam() {
|
var that = this;
|
if (that.option.data[0].isExam == 3) {
|
that.resData["examScoreId"] = that.scoreId;
|
console.log(that.resData);
|
that.$router.push({
|
path: `/startexam/${that.resData.scoreId}`,
|
query: that.resData
|
});
|
return;
|
}
|
//判断是否到了考试时间
|
if (this.isTime == 3) {
|
this.$message({
|
type: "warning",
|
message: "未到考试时间!"
|
});
|
return;
|
}
|
//已超过考试截止时间
|
if (this.isTime == 1) {
|
this.$message({
|
type: "warning",
|
message: "已过考试时间!"
|
});
|
return;
|
}
|
|
//去修改考试状态
|
var data = {
|
id: that.resData.applyId,
|
examType: this.resData.examType,
|
examId: this.resData.id,
|
userId: this.userInfo.user_id,
|
candidateNo: this.resData.candidateNo
|
};
|
// this.$notify({
|
// message:
|
// "考试期间切勿退出登入、关闭浏览器， 否则考试成绩无效， 如有问题及时联系管理人员！",
|
// duration: 6000,
|
// showClose: false,
|
// customClass: "beginS",
|
// // type: "warning",
|
// });
|
// return;
|
updateApplyStatus(data).then(res => {
|
that.resData["examScoreId"] = res.data.id;
|
this.$store.commit("SetScoreId", res.data.id);
|
// console.log(res.data.id, "ididididiidididididid");
|
window.name = "";
|
this.$notify({
|
message:
|
"考试期间切勿退出登入、关闭浏览器， 否则考试成绩无效， 如有问题及时联系管理人员！",
|
duration: 6000,
|
showClose: false,
|
customClass: "beginS"
|
// type: "warning",
|
});
|
that.$router.push({
|
path: `/startexam/${that.resData.id}`,
|
query: that.resData
|
});
|
});
|
},
|
getUserInfoBYExam() {
|
var that = this;
|
let setData = ({ color, subtext, isExam }) => {
|
that.option.data = [
|
{
|
title: that.resData.examName,
|
color: color,
|
isExam: isExam,
|
subtext: subtext,
|
click: function() {
|
window.parent.startExam();
|
},
|
list: [
|
{
|
title: "姓名： ",
|
value: that.resData.realName,
|
check: true
|
},
|
{
|
title: "准考证号： ",
|
value: that.resData.candidateNo,
|
check: true
|
},
|
{
|
title: "身份证号： ",
|
value: that.resData.idCardNo,
|
check: true
|
},
|
{
|
title: "性别： ",
|
value: that.sex,
|
check: true
|
}
|
]
|
}
|
];
|
that.$store.commit("SetexamUserData", that.option.data[0]);
|
};
|
var duibiTime = function(newTime, oldTime) {
|
var newYear = newTime.split(" ")[0],
|
newDat = newTime.split(" ")[1],
|
oldYear = oldTime.split(" ")[0],
|
oldDat = oldTime.split(" ")[1];
|
if (newYear !== oldYear) {
|
return false;
|
} else {
|
let newD = {
|
s: +newDat.split(":")[0],
|
f: +newDat.split(":")[1],
|
m: +newDat.split(":")[2]
|
};
|
let oldD = {
|
s: +oldDat.split(":")[0],
|
f: +oldDat.split(":")[1],
|
m: +oldDat.split(":")[2]
|
};
|
if (newD.s - oldD.s > 1) {
|
return false;
|
} else if (newD.s - oldD.s == 1) {
|
if (newD.f < oldD.f) {
|
return oldD.f - newD.f;
|
} else {
|
return false;
|
}
|
} else if (newD.s == oldD.s) {
|
return 60 - (newD.f - oldD.f);
|
}
|
// return [newD, oldD];
|
return false;
|
}
|
// return false;
|
};
|
|
var data = {
|
userId: this.userInfo.user_id
|
};
|
getExamDetail(data).then(
|
res => {
|
that.resData = res.data.data[0];
|
|
var data = res.data.data[0];
|
// console.log(data,333);
|
//当前时间
|
var nowD,
|
startD = new Date(data.startTime),
|
//考试截止时间
|
endD = new Date(data.endTime);
|
getNowTime().then(res => {
|
nowD = new Date(res.data.data);
|
//对比时间
|
//getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
|
if (nowD.getTime() > startD.getTime()) {
|
if (endD.getTime() < nowD.getTime()) {
|
that.isTime = 1;
|
} else {
|
that.isTime = 2;
|
}
|
} else {
|
that.isTime = 3;
|
}
|
if (res.data.data.length > 0) {
|
that.pageDisable = true;
|
if (data.sex == 1) {
|
that.sex = "男";
|
}
|
if (data.sex == 2) {
|
that.sex = "女";
|
}
|
}
|
// console.log(data, 123456);
|
if (data.isExam == 3) {
|
this.scoreId = data.scoreId;
|
setData({ color: "success", subtext: "继续考试", isExam: 3 });
|
const currentTimeSTART = moment(data.examStartTime);
|
const currentSTART = currentTimeSTART.valueOf();
|
getCurrentTime().then(response => {
|
that.currentTime = currentSTART;
|
that.startTime = currentSTART;
|
var listTime = duibiTime(
|
response.data.data,
|
currentTimeSTART._i
|
);
|
// console.log(listTime, 4564444);
|
if (listTime) {
|
that.endTime = currentSTART + listTime * 60 * 1000;
|
} else {
|
that.overExam();
|
}
|
return;
|
});
|
|
// if (FZtime(data.examStartTime) > 60) {
|
// that.overExam();
|
// }
|
// that.endTime =
|
// current + (60 - FZtime(data.examStartTime)) * 60 * 1000;
|
} else {
|
setData({ color: "primary", subtext: "开始考试" });
|
}
|
});
|
},
|
|
error => {
|
window.console.log(error);
|
}
|
);
|
},
|
overExam() {
|
let that = this;
|
let scoreId = window.localStorage.getItem("scoreId");
|
this.$alert("该考试已结束！", "提示", {
|
confirmButtonText: "确定",
|
callback: () => {
|
calculations(scoreId)
|
.then(response => {
|
messageSuccess(that, "提交成功");
|
if (response) {
|
that.$store.commit("DEL_TAG", that.$store.state.tags.tag);
|
var obj = {
|
userId: that.userInfo.user_id,
|
examId: that.$route.query.id
|
};
|
that.$router.push({
|
path: `/singleperformance/index`,
|
query: obj
|
});
|
}
|
})
|
.catch(() => {
|
that.disableSubmit = false;
|
messageFail(that, "提交题目失败");
|
});
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
.startButs {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
}
|
.startButsdown {
|
position: relative;
|
top: -25px;
|
left: 45px;
|
}
|
$fontSize3: 40px;
|
$fontSize2: 20px;
|
.time-remain_title {
|
font-size: $fontSize2;
|
}
|
.time-remain .time {
|
display: block;
|
font-size: $fontSize3;
|
line-height: $fontSize3;
|
color: #ff0000;
|
font-weight: 400;
|
position: relative;
|
// top: -20px;
|
}
|
.startexam {
|
//登入页面样式
|
// border: 1px solid red;
|
width: calc(100% - 100px);
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
.startexam_heard {
|
font-size: 34px;
|
color: rgb(240, 114, 29);
|
margin-bottom: 5%;
|
// position: absolute;
|
// top: 10%;
|
}
|
.startexam_main {
|
width: 960px;
|
height: 300px;
|
// border: 1px solid red;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background-color: #fff;
|
box-shadow: 0px 0px 5px 3px rgba($color: #797979, $alpha: 0.2);
|
.s_m_img {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
width: 90%;
|
height: 90%;
|
}
|
}
|
.s_m_value {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
div {
|
width: 90%;
|
height: 15%;
|
font-size: 17px;
|
.s_m_v_title {
|
display: inline-block;
|
width: 100px;
|
}
|
}
|
}
|
}
|
}
|
//最终
|
.startexamOld {
|
// width: 100%;
|
// height: 100%;
|
// border: 1px solid red;
|
width: calc(100% - 100px);
|
height: 89%;
|
margin: 2.5% 50px;
|
background-color: rgba($color: #fff, $alpha: 1);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
.startexam_heard {
|
font-size: 34px;
|
color: rgb(240, 114, 29);
|
position: absolute;
|
top: 10%;
|
}
|
.startexam_main {
|
width: 960px;
|
height: 300px;
|
// border: 1px solid red;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
box-shadow: 0px 0px 5px 3px rgba($color: #797979, $alpha: 0.2);
|
.s_m_img {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
width: 90%;
|
height: 90%;
|
}
|
}
|
.s_m_value {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
div {
|
width: 90%;
|
height: 15%;
|
font-size: 17px;
|
.s_m_v_title {
|
display: inline-block;
|
width: 100px;
|
}
|
}
|
}
|
}
|
}
|
|
.beginS {
|
height: 180px;
|
width: 500px;
|
}
|
.el-notification__content {
|
font-size: 90px !important;
|
line-height: 44px !important;
|
}
|
</style>
|
