master
parent
cef13a9d86
commit
f6f0231de4
27 changed files with 1012 additions and 85 deletions
@ -0,0 +1,286 @@ |
||||
<template> |
||||
<div class="box"> |
||||
<h1 class="title">{{paperName}}</h1> |
||||
<div class="metas"> |
||||
<div> |
||||
<span class="name">学生姓名：</span> |
||||
<span class="val">{{userName}}</span> |
||||
</div> |
||||
<div> |
||||
<span class="name">学生得分：</span> |
||||
<span class="val">{{(reviewStatus == 2 || reviewStatus == 3) ? this_score : '--'}}</span> |
||||
</div> |
||||
<div> |
||||
<span class="name">试卷总分：</span> |
||||
<span class="val">100</span> |
||||
</div> |
||||
<div> |
||||
<span class="name">练习时长：</span> |
||||
<span class="val">{{duration}}</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="wrap"> |
||||
<div class="select"> |
||||
<el-radio v-model="look" label="1">查看全部</el-radio> |
||||
<el-radio v-model="look" label="2" v-if="reviewStatus == 2 || reviewStatus == 3">只看错题</el-radio> |
||||
</div> |
||||
|
||||
<div class="item" v-for="(item,index) in list" :key="index"> |
||||
<div class="status" :class="{done: item.isCorrecting}">{{item.isSub ? '简答题' : '客观题'}}：{{getCorrectingName(item.isCorrecting)}}</div> |
||||
<div class="name" v-html="item.question_stem"></div> |
||||
<div class="answer"> |
||||
<div class="info" v-if="!item.isSub"> |
||||
<p class="key">正确答案：</p> |
||||
<p class="val">{{item.answer}}</p> |
||||
</div> |
||||
<div class="info"> |
||||
<p class="key">学生答案：</p> |
||||
<p class="val">{{item.user_answer}}</p> |
||||
</div> |
||||
</div> |
||||
<div class="meta"> |
||||
<span class="key">知识点：</span> |
||||
<span class="val">{{item.knowledge_points}}</span> |
||||
</div> |
||||
<div class="meta"> |
||||
<span class="key">答案解析：</span> |
||||
<span class="val">{{item.answer_analysis}}</span> |
||||
</div> |
||||
<div class="flex a-center point"> |
||||
<div class="meta"> |
||||
<span class="key">题目分数：</span> |
||||
<div class="val">{{item.question_points}} 分</div> |
||||
</div> |
||||
<div class="meta"> |
||||
<span class="key">考试得分：</span> |
||||
<div class="val"> |
||||
<input type="text" v-model.number="item.question_score" :disabled="!isReview || !item.isSub"> 分 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="btns" v-if="isReview"> |
||||
<button type="button" class="submit" @click="save(1)">提交</button> |
||||
<button type="button" @click="save(0)">保存</button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import mixins from '@/mixins/setBackground' |
||||
import { mapState,mapGetters,mapActions } from 'vuex' |
||||
export default { |
||||
mixins: [ mixins ], |
||||
data() { |
||||
return { |
||||
paperName: '', |
||||
userName: '', |
||||
this_score: '', |
||||
duration: '', |
||||
list: [], |
||||
look: '1', |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState('user', [ |
||||
'userId','clientId' |
||||
]), |
||||
...mapState('assessment', [ |
||||
'reviewId','paperId','isReview','reviewStatus','stuId' |
||||
]), |
||||
...mapGetters('assessment', [ |
||||
'getCorrectingName' |
||||
]) |
||||
}, |
||||
watch: { |
||||
look(val,oldVal){ |
||||
val == 1 ? this.getData() : this.getWrong() |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(`${this.api.correcting}?assessmentId=${this.reviewId}&userId=${this.stuId}&paperId=${this.paperId}`) |
||||
.then(res => { |
||||
let list = res.data.list |
||||
list.forEach(n => { |
||||
n.isCorrecting == 0 && (n.question_score = '') |
||||
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.user_answer = n.user_answer.replace(/<>/g,'|') |
||||
} |
||||
}) |
||||
this.list = list |
||||
this.paperName = list[0].name |
||||
this.userName = list[0].userName |
||||
this.this_score = list[0].this_score |
||||
this.duration = list[0].duration |
||||
}) |
||||
.catch(err => {}) |
||||
}, |
||||
getWrong(){ |
||||
this.$post(`${this.api.getWrong}?assessmentId=${this.reviewId}&userId=${this.stuId}&paperId=${this.paperId}`) |
||||
.then(res => { |
||||
this.list = res.data.list |
||||
}) |
||||
.catch(err => {}) |
||||
}, |
||||
save(status) { |
||||
let isEmpty = false |
||||
let isNotNum = false |
||||
let invalid = false |
||||
this.list.map(n => { |
||||
if(n.question_score === '') isEmpty = true |
||||
if(isNaN(n.question_score)) isNotNum = true |
||||
if(Number(n.question_score) > Number(n.question_points)) invalid = true |
||||
}) |
||||
if(status){ |
||||
if(isEmpty) return this.$message.warning('请批阅完所有题目') |
||||
if(isNotNum) return this.$message.warning('考试得分请输入数字') |
||||
} |
||||
if(invalid) return this.$message.warning('考试得分不得大于题目分数') |
||||
let data = { |
||||
review: [], |
||||
assessmentId: this.reviewId, |
||||
userId: this.stuId, |
||||
paperId: this.paperId, |
||||
teacherId: this.userId, |
||||
} |
||||
let totalScore = 0 |
||||
this.list.map(n => { |
||||
n.question_score !== '' && n.isSub && data.review.push({ |
||||
detailId: Number(n.detailId) , |
||||
score: Number(n.question_score) |
||||
}) |
||||
totalScore += Number(n.question_score) |
||||
}) |
||||
if(!data.review.length) return this.$message.warning('请至少批阅一道题目') |
||||
|
||||
if(status || this.list.filter(n => n.isSub).length == data.review.length){ |
||||
data.totalScore = totalScore |
||||
} |
||||
this.$post(this.api.reviewByid,data).then(res => { |
||||
this.$message.success(status ? '提交成功' : '保存成功') |
||||
this.$router.back() |
||||
}).catch(err => {}) |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.title{ |
||||
text-align: center; |
||||
font-size: 18px; |
||||
font-weight: 600; |
||||
} |
||||
.metas{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 20px 0 30px; |
||||
.name{ |
||||
font-size: 12px; |
||||
color: #717171; |
||||
} |
||||
.val{ |
||||
font-size: 12px; |
||||
color: #929292; |
||||
} |
||||
} |
||||
.wrap{ |
||||
padding: 20px; |
||||
background-color: #fbfbfb; |
||||
|
||||
.select{ |
||||
padding: 10px; |
||||
margin-bottom: 20px; |
||||
border-bottom: 1px solid #f4f4f4; |
||||
} |
||||
|
||||
.item{ |
||||
padding-bottom: 30px; |
||||
margin-bottom: 30px; |
||||
border-bottom: 1px dashed #d2d2d2; |
||||
&:last-child{ |
||||
border-bottom: 0; |
||||
} |
||||
|
||||
.status{ |
||||
color: #cb221c; |
||||
&.done{ |
||||
color: #56d5bf; |
||||
} |
||||
} |
||||
.name{ |
||||
margin-top: 15px; |
||||
font-size: 14px; |
||||
color: #555555; |
||||
} |
||||
.key{ |
||||
font-weight: bold; |
||||
color: #333; |
||||
} |
||||
.val{ |
||||
color: #757575; |
||||
} |
||||
.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{ |
||||
display: flex; |
||||
align-items: center; |
||||
padding-left: 10px; |
||||
margin: 10px 0; |
||||
font-size: 12px; |
||||
.key{ |
||||
width: 80px; |
||||
margin-right: 10px; |
||||
text-align: right; |
||||
white-space: nowrap; |
||||
} |
||||
input{ |
||||
width: 60px; |
||||
height: 28px; |
||||
padding: 0 5px; |
||||
margin-right: 5px; |
||||
color: #444; |
||||
background-color: #fff; |
||||
border: 1px solid #ebebeb; |
||||
box-sizing: border-box; |
||||
&:focus{ |
||||
outline: none; |
||||
} |
||||
&:disabled{ |
||||
background-color: #e8e8e8; |
||||
cursor: not-allowed; |
||||
} |
||||
} |
||||
} |
||||
.point{ |
||||
.meta{ |
||||
margin: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,320 @@ |
||||
<template> |
||||
<div class="box"> |
||||
<h1 class="title">{{paperName}}</h1> |
||||
<div class="metas"> |
||||
<div style="margin-right: 20px;"> |
||||
<span class="name">总分：</span> |
||||
<span class="val">100分</span> |
||||
</div> |
||||
<div> |
||||
<span class="name">考试时长：</span> |
||||
<span class="val">{{totalDuration}}分钟</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<ul class="tab"> |
||||
<!-- <template v-for="(item,index) in tabs"> --> |
||||
<li v-for="(item,index) in tabs" :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> |
||||
<div class="meta"> |
||||
<p class="key">题干：</p> |
||||
<p class="val" v-html="item.questionStem"></p> |
||||
<div class="media" :id="item.mediaEleId"></div> |
||||
</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> |
||||
<div class="meta"> |
||||
<p class="key">答案解析：</p> |
||||
<p class="val" v-html="item.answerAnalysis"></p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import mixins from '@/mixins/setBackground' |
||||
import { mapState } from 'vuex' |
||||
export default { |
||||
props: ['data'], |
||||
mixins: [ mixins ], |
||||
data() { |
||||
return { |
||||
assPaperName: '', |
||||
assTotalDuration: 0, |
||||
selectVisible: false, |
||||
tabs: [ |
||||
{ |
||||
id: 1, |
||||
name: '单选题', |
||||
show: true |
||||
},{ |
||||
id: 2, |
||||
name: '多选题', |
||||
show: true |
||||
},{ |
||||
id: 3, |
||||
name: '填空题', |
||||
show: true |
||||
},{ |
||||
id: 4, |
||||
name: '判断题', |
||||
show: true |
||||
},{ |
||||
id: 5, |
||||
name: '简答题', |
||||
show: true |
||||
} |
||||
], |
||||
active: 1, |
||||
allData: {}, |
||||
curType: [] |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState('user', [ |
||||
'userId' |
||||
]), |
||||
...mapState('assessment', [ |
||||
'id','paperName','totalDuration' |
||||
]) |
||||
}, |
||||
mounted() { |
||||
this.insertScript() |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
if(this.data){ |
||||
this.initData(this.data) |
||||
}else{ |
||||
this.$post(`${this.api.previewtestPaper}?id=${this.id}`) |
||||
.then(res => { |
||||
this.initData(res.data) |
||||
}).catch(err => {}) |
||||
} |
||||
}, |
||||
initData(data){ |
||||
let index = 0 |
||||
for(let i in data){ |
||||
data[i].map(n => { |
||||
index++ |
||||
n.mediaEleId = `player${index}` |
||||
}) |
||||
} |
||||
this.allData = data |
||||
let tabs = this.tabs |
||||
data.list1.length || (tabs[0].show = false) |
||||
data.list2.length || (tabs[1].show = false) |
||||
data.list3.length || (tabs[2].show = false) |
||||
data.list4.length || (tabs[3].show = false) |
||||
data.list5.length || (tabs[4].show = false) |
||||
this.curType = this.allData.list1 |
||||
this.handleOptions() |
||||
}, |
||||
initMedia(item){ |
||||
if(item.videoAudio && !item.player){ |
||||
this.$get(`${this.api.getPlayAuth}/${item.videoAudio}`).then(res => { |
||||
let playAuth = res.data.playAuth |
||||
this.$nextTick(() => { |
||||
item.player = new Aliplayer({ |
||||
id: item.mediaEleId, |
||||
width: '100%', |
||||
autoplay: false, |
||||
vid : item.videoAudio, |
||||
playauth : playAuth, |
||||
encryptType:1, //当播放私有加密流时需要设置。 |
||||
}) |
||||
}) |
||||
}).catch(res => {}) |
||||
} |
||||
}, |
||||
tabChange(id){ |
||||
this.active = id |
||||
this.curType = this.allData[`list${id}`] |
||||
|
||||
this.handleOptions() |
||||
}, |
||||
handleOptions(){ |
||||
let curType = this.curType |
||||
curType.forEach(n => { |
||||
this.initMedia(n) |
||||
if(!n.options){ |
||||
let options = {} |
||||
for(let i in n){ |
||||
if(i.includes('option') && n[i]){ |
||||
options[i.replace('option','')] = n[i] |
||||
} |
||||
} |
||||
n.options = options |
||||
} |
||||
}) |
||||
this.curType = curType |
||||
}, |
||||
insertScript(){ |
||||
const linkTag = document.createElement('link') |
||||
linkTag.id = 'aliplayerLink' |
||||
linkTag.rel = 'stylesheet' |
||||
linkTag.href = 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css' |
||||
document.body.appendChild(linkTag) |
||||
|
||||
const scriptTag = document.createElement('script') |
||||
scriptTag.id = 'aliplayerScript' |
||||
scriptTag.type = 'text/javascript' |
||||
scriptTag.src = 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js' |
||||
document.body.appendChild(scriptTag) |
||||
this.$once('hook:beforeDestroy', function () { |
||||
document.body.removeChild(document.querySelector('#aliplayerLink')) |
||||
document.body.removeChild(document.querySelector('#aliplayerScript')) |
||||
}) |
||||
}, |
||||
}, |
||||
}; |
||||
</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{ |
||||
line-height: 1.6; |
||||
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; |
||||
align-items: center; |
||||
.info{ |
||||
margin-right: 20px; |
||||
} |
||||
} |
||||
.key{ |
||||
margin-bottom: 5px; |
||||
} |
||||
.media{ |
||||
margin-top: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.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> |
||||
Loading…
Reference in new issue