You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
331 lines
11 KiB
331 lines
11 KiB
<template> |
|
<div class="box"> |
|
<h1 class="title">{{paperName }}</h1> |
|
<div class="metas"> |
|
<div class="m-r-20"> |
|
<span class="name">总分：</span> |
|
<span class="val">100分</span> |
|
</div> |
|
<div class="m-r-20" v-if="score != null"> |
|
<span class="name">得分：</span> |
|
<span class="val">{{score}}分</span> |
|
</div> |
|
<div> |
|
<span class="name">考试时长：</span> |
|
<span class="val">{{duration}}分钟</span> |
|
</div> |
|
</div> |
|
|
|
<ul class="tab"> |
|
<template v-for="(item,index) in tabs"> |
|
<li v-if="item.show" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li> |
|
</template> |
|
</ul> |
|
|
|
<div class="wrap"> |
|
<div class="item" v-for="(item,index) in curType" :key="index"> |
|
<div class="answer"> |
|
<div class="info"> |
|
<p class="key">序号：</p> |
|
<p class="val">{{index+1}}</p> |
|
</div> |
|
<div class="info"> |
|
<p class="key">得分：</p> |
|
<p class="val">{{item.questionScore}}</p> |
|
</div> |
|
</div> |
|
<div class="meta"> |
|
<p class="key">题干：</p> |
|
<p class="val" v-html="item.questionStem"></p> |
|
</div> |
|
<div class="meta"> |
|
<p class="key">选项：</p> |
|
<div class="val"> |
|
<p v-for="(option,i) in item.options" :key="i">{{i}}.{{item.options[i]}}</p> |
|
</div> |
|
</div> |
|
<div class="meta ans"> |
|
<div class="info"> |
|
<p class="key">正确答案：</p> |
|
<p class="val">{{item.answer}}</p> |
|
</div> |
|
<div class="info"> |
|
<p class="key">学生答案：</p> |
|
<p class="val">{{item.userAnswer}}</p> |
|
</div> |
|
</div> |
|
<div class="meta" v-if="active == 4"> |
|
<p class="key">附件：</p> |
|
<div class="val"> |
|
<el-button v-if="item.fileUrl || item.videoAudio" type="text" @click="preview(item)">{{item.fileName}}</el-button> |
|
<el-button v-if="item.fileUrl" type="primary" size="mini" @click="download(item)">下载</el-button> |
|
</div> |
|
</div> |
|
<div class="meta"> |
|
<p class="key">答案解析：</p> |
|
<p class="val" v-html="item.answerAnalysis"></p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div v-show="playAuth" class="el-image-viewer__wrapper" :class="{active: playAuth}" style="z-index: 2000"> |
|
<div class="el-image-viewer__mask"></div> |
|
<span class="el-image-viewer__btn el-image-viewer__close" @click="closePlayer"><i class="el-icon-circle-close" style="color: #fff"></i></span> |
|
<div class="player" id="player"></div> |
|
</div> |
|
<pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf> |
|
</div> |
|
</template> |
|
<script> |
|
import setBackground from '@/mixins/setBackground' |
|
import file from '@/mixins/file' |
|
import { mapState } from 'vuex' |
|
import pdf from '@/components/pdf' |
|
export default { |
|
mixins: [ setBackground,file ], |
|
data() { |
|
return { |
|
paperName: '', |
|
duration: 0, |
|
selectVisible: false, |
|
tabs: [ |
|
{ |
|
id: 1, |
|
name: '单选题', |
|
show: false |
|
},{ |
|
id: 2, |
|
name: '多选题', |
|
show: false |
|
},{ |
|
id: 3, |
|
name: '判断题', |
|
show: false |
|
},{ |
|
id: 4, |
|
name: '简答题', |
|
show: false |
|
},{ |
|
id: 5, |
|
name: '填空题', |
|
show: false |
|
} |
|
], |
|
typeNameList: ['单项选择','多项选择','判断题','简答题','填空题'], |
|
active: 1, |
|
list: [], |
|
curType: [] |
|
}; |
|
}, |
|
components: { pdf }, |
|
computed: { |
|
...mapState('user', [ |
|
'userId' |
|
]), |
|
...mapState('achievement', [ |
|
'practiseId','stuId','score' |
|
]) |
|
}, |
|
mounted() { |
|
this.getData() |
|
}, |
|
methods: { |
|
getData() { |
|
this.$post(`${this.api.reviewDetail}?id=${this.practiseId}`) |
|
.then(res => { |
|
let data = res.data |
|
data.list.forEach(n => { |
|
n.isCorrecting == 0 && (n.questionScore = '') |
|
n.isSub = n.typeName == '简答题' |
|
if(n.typeName == '填空题'){ |
|
let answer = [] |
|
for(let i in n){ |
|
if(i.includes('option')) answer.push(n[i]) |
|
} |
|
n.answer = answer.join('|') |
|
n.userAnswer = n.userAnswer ? n.userAnswer.replace(/<>/g,'|') : '' |
|
} |
|
if(n.typeName == '简答题'){ |
|
if(n.fileUrl){ |
|
let file = n.fileUrl.split(',') |
|
n.fileName = file[0] |
|
n.fileurl = file[1] |
|
} |
|
if(n.videoAudio){ |
|
let file = n.videoAudio.split(',') |
|
n.fileName = file[0] |
|
n.fileurl = file[1] |
|
} |
|
} |
|
}) |
|
this.list = data.list |
|
let tabs = this.tabs |
|
data.list.find(n => n.typeName == '单项选择') && (tabs[0].show = true) |
|
data.list.find(n => n.typeName == '多项选择') && (tabs[1].show = true) |
|
data.list.find(n => n.typeName == '判断题') && (tabs[2].show = true) |
|
data.list.find(n => n.typeName == '简答题') && (tabs[3].show = true) |
|
data.list.find(n => n.typeName == '填空题') && (tabs[4].show = true) |
|
for(let n of tabs){ |
|
if(n.show){ |
|
this.active = n.id |
|
break |
|
} |
|
} |
|
this.handleOptions() |
|
this.paperName = data.paperName |
|
this.userName = data.stuName |
|
this.this_score = data.score |
|
this.duration = data.timeCost |
|
}) |
|
.catch(err => {}) |
|
}, |
|
tabChange(id){ |
|
this.active = id |
|
this.handleOptions() |
|
}, |
|
handleOptions(){ |
|
let list = this.list |
|
let typeName = this.typeNameList[this.active-1] |
|
list = list.filter(n => n.typeName == typeName) |
|
list.forEach(n => { |
|
if(!n.options){ |
|
let options = {} |
|
let answer = [] |
|
for(let i in n){ |
|
if(i.includes('option') && n[i]){ |
|
options[i.replace('option','')] = n[i] |
|
if(n.typeName == '填空题') answer.push(n[i]) |
|
} |
|
} |
|
if(n.typeName == '填空题') n.answer = answer.join('|') |
|
n.options = options |
|
} |
|
}) |
|
this.curType = list |
|
} |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.box{ |
|
width: 90%; |
|
margin: 0 auto; |
|
} |
|
.title{ |
|
text-align: center; |
|
font-size: 18px; |
|
font-weight: 600; |
|
} |
|
.metas{ |
|
display: flex; |
|
justify-content: center; |
|
margin: 20px 0 30px; |
|
.name{ |
|
font-size: 12px; |
|
color: #717171; |
|
} |
|
.val{ |
|
font-size: 12px; |
|
color: #929292; |
|
} |
|
} |
|
.tab{ |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 10px; |
|
li{ |
|
position: relative; |
|
padding: 0 44px; |
|
margin-right: 7px; |
|
font-size: 13px; |
|
line-height: 46px; |
|
text-align: center; |
|
color: #444; |
|
border: 1px solid #ececec; |
|
cursor: pointer; |
|
&:hover{ |
|
opacity: .8; |
|
} |
|
&.active:after{ |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 4px; |
|
background-color: $main-color; |
|
} |
|
} |
|
} |
|
.wrap{ |
|
.item{ |
|
padding-bottom: 30px; |
|
margin-bottom: 30px; |
|
border-bottom: 1px dashed #f4f4f4; |
|
|
|
.key{ |
|
font-weight: bold; |
|
color: #333; |
|
font-size: 14px; |
|
} |
|
.val{ |
|
color: #757575; |
|
font-size: 14px; |
|
} |
|
.answer{ |
|
display: flex; |
|
align-items: center; |
|
padding: 15px; |
|
margin: 15px 0; |
|
font-size: 12px; |
|
border: 1px solid #e8e8e8; |
|
background-color: #f3f2f2; |
|
.info{ |
|
display: inline-flex; |
|
align-items: center; |
|
margin-right: 30px; |
|
} |
|
} |
|
.meta{ |
|
padding-left: 10px; |
|
margin: 20px 0; |
|
font-size: 12px; |
|
&.ans{ |
|
display: flex; |
|
.info{ |
|
margin-right: 20px; |
|
} |
|
} |
|
.key{ |
|
margin-bottom: 5px; |
|
} |
|
} |
|
} |
|
} |
|
.btns{ |
|
display: flex; |
|
justify-content: center; |
|
margin-top: 20px; |
|
button{ |
|
height: 30px; |
|
padding: 0 30px; |
|
margin: 0 15px; |
|
font-size: 14px; |
|
color: #333; |
|
line-height: 30px; |
|
background-color: #fff; |
|
border: 1px solid #ededed; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
&.submit{ |
|
color: #fff; |
|
background-color: $main-color; |
|
border-color: $main-color; |
|
} |
|
&:hover{ |
|
opacity: .8; |
|
} |
|
} |
|
} |
|
</style> |