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