385 lines
8.8 KiB
Vue
385 lines
8.8 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div class="headers">
|
||
<div class="headerName">考试</div>
|
||
</div>
|
||
<div class="pageContent">
|
||
<div class="tips">交卷之前离开当前页面会导致本次考试作废！</div>
|
||
<div
|
||
class="blockBox"
|
||
v-for="(item, index) in courseDetail.questionList"
|
||
:key="index"
|
||
>
|
||
<div class="testTilte">
|
||
{{ index + 1 }}、{{ item.questionName }}（{{ item.questionScore }}分）
|
||
</div>
|
||
|
||
<el-checkbox-group
|
||
class="optionsBox"
|
||
v-if="item.questionType == 2"
|
||
v-model="radioList"
|
||
@change="
|
||
(e) => {
|
||
changeChecked(e, item.questionId, index)
|
||
}
|
||
"
|
||
>
|
||
<el-checkbox
|
||
v-for="(data, index) in item.optionList"
|
||
:label="data.optionId"
|
||
:key="index"
|
||
>{{ indexList[index] }}、{{ data.optionName }}</el-checkbox
|
||
>
|
||
</el-checkbox-group>
|
||
<!-- <label
|
||
class="optionItem"
|
||
v-for="(data, index2) in item.optionList"
|
||
:key="index2"
|
||
>
|
||
<checkbox class="checkbox" :value="data.optionId + ''" /><text
|
||
class="desc"
|
||
>{{ indexList[index2] }}、{{ data.optionName }}</text
|
||
>
|
||
</label> -->
|
||
<el-radio-group class="optionsBox" v-model="radio" v-else>
|
||
<!-- <label
|
||
class="optionItem"
|
||
v-for="(data, index2) in item.optionList"
|
||
:key="index2"
|
||
>
|
||
<radio
|
||
class="checkbox"
|
||
:value="data.optionId + ''"
|
||
:checked="data.optionId === item.optionId"
|
||
/><text class="desc"
|
||
>{{ indexList[index2] }}、{{ data.optionName }}</text
|
||
>
|
||
</label> -->
|
||
|
||
<el-radio
|
||
@change="
|
||
(e) => {
|
||
changeChecked(e, item.questionId, index)
|
||
}
|
||
"
|
||
v-for="(data, index2) in item.optionList"
|
||
:key="index2"
|
||
:label="data.optionId"
|
||
>{{ indexList[index2] }}、{{ data.optionName }}</el-radio
|
||
>
|
||
</el-radio-group>
|
||
</div>
|
||
<button type="primary" class="btn submitBtn big" @click="submitData()">
|
||
交卷
|
||
</button>
|
||
</div>
|
||
<dialogs ref="dialogs">
|
||
<!-- <template v-slot:title>
|
||
{{isAdd?'添加':'编辑'}}
|
||
</template> -->
|
||
<template v-slot:content>
|
||
<div class="formBox2">
|
||
<form @submit="submitData">
|
||
<div class="uni-form-item">
|
||
<div class="uni-form-label">
|
||
<text class="star">*</text>身份证号码
|
||
</div>
|
||
<div class="uni-form-input">
|
||
<input
|
||
class="uni-input"
|
||
placeholder-class="cl"
|
||
name="idCard"
|
||
v-model="idCard"
|
||
placeholder="请输入"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<button form-type="submit" type="primary" class="btn submitBtn">
|
||
提交
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
</dialogs>
|
||
<div class="testResultBox" v-if="showResult">
|
||
<img
|
||
v-if="isQualified == 1"
|
||
src="@/assets/images/Pass.png"
|
||
class="resultImg"
|
||
/>
|
||
<img v-else src="@/assets/images/noPass.png" class="resultImg" />
|
||
<div class="score">
|
||
<span>{{ score }}分</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import dialogs from '@/views/projectFront/examination/dialog.vue'
|
||
import {
|
||
getSelectSafeEducationQuestionInfoList,
|
||
addSafeEducationQuestionAnswer
|
||
} from '@/assets/js/api/safeManage.js'
|
||
|
||
export default {
|
||
components: { dialogs },
|
||
data() {
|
||
return {
|
||
radio: 3,
|
||
radioList: [],
|
||
indexList: [
|
||
'A',
|
||
'B',
|
||
'C',
|
||
'D',
|
||
'E',
|
||
'F',
|
||
'G',
|
||
'H',
|
||
'I',
|
||
'J',
|
||
'K',
|
||
'L',
|
||
'N',
|
||
'M',
|
||
'O',
|
||
'P',
|
||
'Q',
|
||
'R',
|
||
'S',
|
||
'T',
|
||
'U',
|
||
'V',
|
||
'W',
|
||
'X',
|
||
'Y',
|
||
'Z'
|
||
],
|
||
courseDetail: {
|
||
eduAddr: '',
|
||
eduClasshour: '',
|
||
eduContent: '',
|
||
eduCourseName: '',
|
||
eduPhoto: '',
|
||
eduTeacher: '',
|
||
eduTime: '',
|
||
eduType: '',
|
||
eduVideo: '',
|
||
passScore: '',
|
||
projectSn: '',
|
||
questionList: [],
|
||
totalScore: '',
|
||
videoType: 1
|
||
},
|
||
eduId: '',
|
||
selectList: [],
|
||
idCard: '',
|
||
workerId: '',
|
||
score: 0,
|
||
showResult: false,
|
||
isQualified: 1 //1合格，2不合格
|
||
}
|
||
},
|
||
created(options) {
|
||
console.log('获取课程详细数据1516', this.$route.query)
|
||
this.eduId = this.$route.query.eduId
|
||
this.workerId = this.$route.query.workerId
|
||
this.getDetailData()
|
||
},
|
||
beforeDestroy() {
|
||
// console.log('onUnload')
|
||
// uni.showModal({
|
||
// title:'提示',
|
||
// content:'离开页面本次考试将作废，确认离开吗？',
|
||
// success(res) {
|
||
// if(res.confirm){
|
||
// console.log('离开')
|
||
// }else{
|
||
// console.log('不离开')
|
||
// }
|
||
// }
|
||
// })
|
||
},
|
||
methods: {
|
||
changeChecked(e, questionId, index) {
|
||
console.log(e, questionId)
|
||
var arr = e
|
||
//清除之前该问题选中的选项
|
||
for (var i = 0; i < this.selectList.length; i++) {
|
||
if (this.selectList[i].questionId == questionId) {
|
||
this.selectList.splice(i--, 1)
|
||
}
|
||
}
|
||
//加上新选中的选项
|
||
if (Array.isArray(arr)) {
|
||
for (var i = 0; i < arr.length; i++) {
|
||
this.selectList.push({
|
||
questionId: questionId,
|
||
optionId: arr[i]
|
||
})
|
||
}
|
||
} else {
|
||
this.selectList.push({
|
||
questionId: questionId,
|
||
optionId: arr
|
||
})
|
||
this.courseDetail.questionList[index].optionId = arr
|
||
}
|
||
|
||
console.log(this.selectList)
|
||
},
|
||
//获取课程详细数据
|
||
getDetailData() {
|
||
var that = this
|
||
getSelectSafeEducationQuestionInfoList({ eduId: this.eduId }).then(
|
||
(result) => {
|
||
if (result.result) {
|
||
that.courseDetail = result.result.safeEducation
|
||
}
|
||
}
|
||
)
|
||
},
|
||
inputIdCard() {
|
||
this.$refs.dialogs.showFn()
|
||
},
|
||
submitData() {
|
||
// if(this.idCard==''){
|
||
// uni.showToast({
|
||
// title:'请输入身份证号码！'
|
||
// })
|
||
// return
|
||
// }
|
||
var json = {
|
||
eduId: this.eduId,
|
||
workerId: this.workerId,
|
||
// idCard:this.idCard,
|
||
list: this.selectList
|
||
}
|
||
addSafeEducationQuestionAnswer(json).then((result) => {
|
||
if (result.result) {
|
||
this.$message.success('考试成功！')
|
||
this.showResult = true
|
||
this.isQualified = result.result.isQualified
|
||
this.score = result.result.score
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.tips {
|
||
font-size: 7rem;
|
||
color: red;
|
||
margin: 5rem 5rem;
|
||
text-align: center;
|
||
}
|
||
.blockBox {
|
||
box-shadow: 0 2rem 12rem 0px rgba(212, 220, 236, 0.69);
|
||
border-radius: 4rem;
|
||
margin: 7.5rem;
|
||
padding: 5rem;
|
||
position: relative;
|
||
}
|
||
.optionItem {
|
||
/* padding-left: 20px; */
|
||
margin-top: 5rem;
|
||
font-size: 7rem;
|
||
display: block;
|
||
}
|
||
.desc {
|
||
margin-left: 2.5rem;
|
||
}
|
||
.checkbox {
|
||
transform: scale(0.8);
|
||
}
|
||
.submitBtn {
|
||
margin: -70rem 5rem;
|
||
position: fixed;
|
||
bottom: 10rem;
|
||
/* left: 20px; */
|
||
width: calc(100% - 10rem);
|
||
background: #4181fe;
|
||
height: 15rem;
|
||
border: none;
|
||
color: #fff;
|
||
font-size: 7.5rem;
|
||
border-radius: 10rem;
|
||
}
|
||
.testResultBox {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99999;
|
||
}
|
||
.resultImg {
|
||
width: 90%;
|
||
height: 180%;
|
||
margin: -30rem 6rem;
|
||
}
|
||
.score {
|
||
position: relative;
|
||
left: 50%;
|
||
top: -32%;
|
||
width: 55rem;
|
||
height: 55rem;
|
||
border-radius: 50%;
|
||
border: 4rem solid #fdcb05;
|
||
text-align: center;
|
||
line-height: 100rem;
|
||
transform: translate(-50%, -50%);
|
||
|
||
span {
|
||
width: 55rem;
|
||
position: absolute;
|
||
// display: inline-block;
|
||
color: #fdcb05;
|
||
font-size: 20rem;
|
||
margin-top: -22rem;
|
||
margin-left: -28rem;
|
||
}
|
||
}
|
||
.headers {
|
||
/* border-bottom: 0.5rem solid #f3f3f3; */
|
||
height: 8rem;
|
||
color: #3d4490;
|
||
font-size: 7.5rem;
|
||
text-align: center;
|
||
line-height: 6rem;
|
||
margin-top: -55%;
|
||
/* background-color: pink; */
|
||
}
|
||
.testTilte {
|
||
font-size: 6rem;
|
||
}
|
||
|
||
::v-deep .el-checkbox__label {
|
||
font-size: 4rem;
|
||
line-height: 10rem;
|
||
}
|
||
::v-deep .el-checkbox__inner {
|
||
margin-top: -2rem;
|
||
|
||
width: 4rem;
|
||
height: 4rem;
|
||
line-height: 10rem;
|
||
|
||
/* border: 0.5rem solid #fff; */
|
||
}
|
||
::v-deep .el-radio__inner {
|
||
margin-top: -2rem;
|
||
|
||
width: 4rem;
|
||
height: 4rem;
|
||
line-height: 10rem;
|
||
}
|
||
::v-deep .el-radio__label {
|
||
font-size: 4rem;
|
||
line-height: 10rem;
|
||
}
|
||
</style>
|