Skip to content

X
x-learn
提交 91ea0111 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 b0b6c0f4
隐藏空白字符变更
内嵌 并排
正在显示 包含 300 行增加 和 64 行删除
src/pages/exam/components/resultCard.vue
浏览文件 @ 91ea0111
...@@ -13,6 +13,14 @@ ...@@ -13,6 +13,14 @@
<div class="circle3"></div> <div class="circle3"></div>
<div class="txt">未答</div> <div class="txt">未答</div>
</li> </li>
<li>
<div class="circle4"></div>
<div class="txt">已评价</div>
</li>
<li>
<div class="circle5"></div>
<div class="txt">未评价</div>
</li>
</ul> </ul>
<div class="order-num"> <div class="order-num">
<template v-for="item in order"> <template v-for="item in order">
...@@ -20,7 +28,12 @@ ...@@ -20,7 +28,12 @@
<div class="tit">{{ item.title }}</div> <div class="tit">{{ item.title }}</div>
<ul> <ul>
<template v-for="(cItem, index) in item.question_list"> <template v-for="(cItem, index) in item.question_list">
<li @click="goQuestion(cItem.id)" :class="`stu${cItem.cardStust}`" :key="cItem.id">{{ index + 1 }}</li> <template v-if="cItem.question_options">
<li @click="goQuestion(cItem.id)" :class="`stu${cItem.cardStust}`" :key="cItem.id">{{ index + 1 }}</li>
</template>
<template v-else>
<li @click="goQuestion(cItem.id)" :class="`stu${cItem.cardStust}`" :key="cItem.id">{{ index + 1 }}</li>
</template>
</template> </template>
</ul> </ul>
</div> </div>
...@@ -42,48 +55,32 @@ export default { ...@@ -42,48 +55,32 @@ export default {
} }
}, },
computed: { computed: {
isClass() {
return (id, cId) => {
const findItems = this.data.answers[id]
const scoreItems = this.data.score_items
? this.data.score_items[id]
? this.data.score_items[id][cId]
? this.data.score_items[id][cId]
: []
: []
: []
return findItems
? findItems[cId]
? findItems[cId].answer
? findItems[cId].answer.length
? scoreItems.is_right
? 'stu1'
: 'stu2'
: 'stu3'
: 'stu3'
: 'stu3'
: 'stu3'
}
}
}, },
mounted() { mounted() {
// console.log(this.changeQuestion, '=123123123====')
this.changeQuestion = this.setData() this.changeQuestion = this.setData()
// console.log(this.ChangeQuestion)
}, },
methods: { methods: {
setData() { setData() {
const data = [] const data = []
console.log(this.data, '=datr')
this.data.questions.question_items.forEach(list => { this.data.questions.question_items.forEach(list => {
list.question_list = list.question_list.reduce((a, b) => { list.question_list = list.question_list.reduce((a, b) => {
return a.concat(b) return a.concat(b)
}, []) }, [])
list.question_list.map(item => { list.question_list.map(item => {
if (!this.data.answers[list.question_item_id][item.id].answer.length) { if (!item.question_options) {
item.cardStust = 3 this.data.score_items[list.question_item_id][item.id].checked_flag ? item.cardStust = 4 : item.cardStust = 5
return item return item
} else { } else {
this.data.score_items[list.question_item_id][item.id].is_right ? (item.cardStust = 1) : (item.cardStust = 2) const ans = this.data.answers[list.question_item_id][item.id].answer || this.data.answers[list.question_item_id][item.id].answers
return item if (!ans.length) {
item.cardStust = 3
return item
} else {
this.data.score_items[list.question_item_id][item.id].is_right ? (item.cardStust = 1) : (item.cardStust = 2)
return item
}
} }
}) })
data.push(list) data.push(list)
...@@ -102,15 +99,16 @@ export default { ...@@ -102,15 +99,16 @@ export default {
height: 100%; height: 100%;
.tips-box { .tips-box {
display: flex; display: flex;
justify-content: center; justify-content: space-around;
padding: 15px 0 10px; padding: 15px 0 10px;
background: #fff; background: #fff;
margin: 0; margin: 0;
list-style: none; list-style: none;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
li { li {
width: 36px;
&:nth-child(2) { &:nth-child(2) {
margin: 0 50px; // margin: 0 50px;
} }
.circle1 { .circle1 {
width: 24px; width: 24px;
...@@ -134,21 +132,18 @@ export default { ...@@ -134,21 +132,18 @@ export default {
border-radius: 50%; border-radius: 50%;
} }
.circle4 { .circle4 {
position: relative;
width: 24px; width: 24px;
height: 24px; height: 24px;
border: 1px solid #cccccc; background: blue;
border-radius: 50%; border-radius: 50%;
&::after { margin: 0 auto;
content: ''; }
position: absolute; .circle5 {
top: -1px; width: 24px;
right: -1px; height: 24px;
width: 4px; background: pink;
height: 4px; border-radius: 50%;
background: #c01540; margin: 0 auto;
border-radius: 50%;
}
} }
.txt { .txt {
margin-top: 5px; margin-top: 5px;
...@@ -209,6 +204,14 @@ export default { ...@@ -209,6 +204,14 @@ export default {
color: #fff; color: #fff;
background: #999999; background: #999999;
} }
&.stu4 {
border: 2px solid blue;
line-height: 22px;
}
&.stu5 {
border: 2px solid pink;
line-height: 22px;
}
} }
} }
} }
......
src/pages/exam/courseExam/chapter/result copy.vue 0 → 100644
浏览文件 @ 91ea0111
<template>
<div class="result-box">
<div class="card-left">
<div class="title">成绩报告</div>
<div class="chart-box">
<chart :accuracy="accuracy">
<template v-slot:tips>
<div class="num" v-if="data.sheet">{{ data.sheet.score }}</div>
<div class="t">分数</div>
</template>
</chart>
</div>
<!-- <div class="assess">测试评估</div>
<div class="assess-box">
<div class="prog">
<div class="line-box">
<div class="line" :style="setStyle"></div>
</div>
<div class="icon"></div>
</div>
<div class="text">{{ accuracy !== 100 ? '您离成功还有一段距离，继续努力！' : '成功近在眼前，再接再厉！' }}</div>
<div class="btn">全部考试服务</div>
</div> -->
</div>
<div class="card-right">
<card v-if="data.sheet" :data="data.sheet" @goQuestion="goPage">
<template v-slot:btnBox>
<div class="btn-box">
<div class="btn" @click="goPage('all')">全部解析</div>
<!-- <div class="btn" @click="goPage('err')">错题解析</div> -->
</div>
</template>
</card>
</div>
</div>
</template>
<script>
import chart from '../../components/pieChart.vue'
import card from '../../components/resultCard.vue'
import * as api from '@/api/exam.js'
export default {
components: {
chart,
card
},
data() {
return {
data: {},
accuracy: 0
}
},
created() {
this.getExamPapers()
},
computed: {
setStyle() {
return `width: ${this.accuracy}%`
}
},
mounted() {},
methods: {
goPage(param) {
const urlParam = this.$route.query
urlParam.id = param
urlParam.type = 2
this.$router.push({
path: '/course/exam/chapter',
query: urlParam
})
},
getExamPapers() {
const param = {
type: 1,
is_create: 0,
course_id: this.$route.query.course_id,
chapter_id: this.$route.query.chapter_id
}
api.getCourseQuestion(param).then(response => {
const data = JSON.parse(response.data)
this.data = data
this.accuracy = (parseInt(data.sheet.score) / parseInt(data.sheet.questions.total_score)) * 100
})
}
}
}
</script>
<style lang="scss" scoped>
.result-box {
width: 100%;
display: flex;
.card-left {
position: relative;
box-sizing: border-box;
padding: 10px 30px 20px;
flex: 1;
background: #fff;
margin-right: 10px;
height: 560px;
border-radius: 8px;
.title {
font-size: 18px;
color: #222222;
line-height: 45px;
border-bottom: 1px solid #ccc;
}
.chart-box {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 148px;
// margin: 26px auto 0;
}
.assess {
font-size: 18px;
color: #222222;
line-height: 45px;
border-bottom: 1px solid #ccc;
}
.assess-box {
padding-top: 27px;
.prog {
width: 350px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
.line-box {
width: 300px;
width: 300px;
height: 10px;
background: #f9f9f9;
border-radius: 5px;
.line {
width: 80%;
height: 10px;
background: linear-gradient(90deg, #f47c46 0%, #f22f48 100%);
border-radius: 5px;
}
}
.icon {
width: 41px;
height: 38px;
background: url(@/assets/images/res-icon.png);
background-size: 100% 100%;
}
}
.text {
font-size: 14px;
color: #222222;
line-height: 20px;
text-align: center;
margin: 50px 0 68px 0;
}
.btn {
cursor: pointer;
text-align: center;
line-height: 40px;
width: 144px;
height: 40px;
background: #c01540;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #ffffff;
margin: 0 auto;
}
}
}
.card-right {
box-sizing: border-box;
flex: 1;
background: #fff;
height: 560px;
border-radius: 8px;
margin-left: 10px;
padding: 10px 30px 0;
}
}
</style>
src/pages/exam/courseExam/chapter/result.vue
浏览文件 @ 91ea0111
<template> <template>
<div class="result-box"> <div class="result-box" v-if="data.sheet">
<div class="card-left"> <div class="card-left">
<div class="title">成绩报告</div> <div class="title">
<span>成绩报告</span>
<span class="time" v-if="data.sheet">
{{ data.sheet.created_time }}
</span>
</div>
<div class="chart-box"> <div class="chart-box">
<chart :accuracy="accuracy"> <chart :accuracy="accuracy" :accuracScore="accuracScore">
<template v-slot:tips> <template v-slot:tips>
<div class="num" v-if="data.sheet">{{ data.sheet.score }}</div> <div class="num">{{ accuracText }}%</div>
<div class="t">分数</div> <div class="t">正确率</div>
</template> </template>
</chart> </chart>
</div> </div>
<!-- <div class="assess">测试评估</div> <div class="assess">测试评估</div>
<div class="assess-box"> <div class="assess-box">
<div class="prog"> <div class="prog">
<div class="line-box"> <div class="line-box">
...@@ -18,12 +23,14 @@ ...@@ -18,12 +23,14 @@
</div> </div>
<div class="icon"></div> <div class="icon"></div>
</div> </div>
<div class="text">{{ accuracy !== 100 ? '您离成功还有一段距离，继续努力！' : '成功近在眼前，再接再厉！' }}</div> <div class="text" v-if="accuracText < 100">
<div class="btn">全部考试服务</div> {{ accuracText < 80 ? '您离成功还有一段距离，继续努力！' : '成功近在眼前，再接再厉！' }}
</div> --> </div>
<!-- <div class="btn">全部考试服务</div> -->
</div>
</div> </div>
<div class="card-right"> <div class="card-right">
<card v-if="data.sheet" :data="data.sheet" @goQuestion="goPage"> <card v-if="Object.keys(data.sheet).length" :data="data.sheet" @goQuestion="goPage">
<template v-slot:btnBox> <template v-slot:btnBox>
<div class="btn-box"> <div class="btn-box">
<div class="btn" @click="goPage('all')">全部解析</div> <div class="btn" @click="goPage('all')">全部解析</div>
...@@ -46,18 +53,22 @@ export default { ...@@ -46,18 +53,22 @@ export default {
data() { data() {
return { return {
data: {}, data: {},
accuracy: 0 accuracy: 0,
accuracScore: 0,
accuracText: 0
} }
}, },
created() { created() {
this.getExamPapers() this.getExamPapers()
}, },
computed: { computed: {
examId() {
return this.$route.query.exam_id
},
setStyle() { setStyle() {
return `width: ${this.accuracy}%` return `width: ${this.accuracText}%`
} }
}, },
mounted() {},
methods: { methods: {
goPage(param) { goPage(param) {
const urlParam = this.$route.query const urlParam = this.$route.query
...@@ -77,8 +88,33 @@ export default { ...@@ -77,8 +88,33 @@ export default {
} }
api.getCourseQuestion(param).then(response => { api.getCourseQuestion(param).then(response => {
const data = JSON.parse(response.data) const data = JSON.parse(response.data)
let numCount = 0
console.log(data)
for (const item in data.sheet.score_items) {
for (const cItem in data.sheet.score_items[item]) {
console.log(data.sheet.score_items[item][cItem].is_right, '=123isr')
if (data.sheet.score_items[item][cItem].is_right) {
numCount++
}
}
}
let countNum = 0
data.sheet.questions.question_items.forEach(list => {
list.question_list = list.question_list.reduce((a, b) => {
return a.concat(b)
}, [])
list.question_list.forEach(item => {
if (item.question_options) {
countNum++
}
console.log(item, 'list')
})
})
console.log(countNum)
this.accuracy = parseInt(data.sheet.score)
this.accuracText = parseInt((numCount / countNum) * 100)
this.data = data this.data = data
this.accuracy = (parseInt(data.sheet.score) / parseInt(data.sheet.questions.total_score)) * 100 this.accuracScore = parseInt(data.sheet.questions.total_score)
}) })
} }
} }
...@@ -89,7 +125,6 @@ export default { ...@@ -89,7 +125,6 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
.card-left { .card-left {
position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 30px 20px; padding: 10px 30px 20px;
flex: 1; flex: 1;
...@@ -102,14 +137,17 @@ export default { ...@@ -102,14 +137,17 @@ export default {
color: #222222; color: #222222;
line-height: 45px; line-height: 45px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
display: flex;
}
.time {
font-size: 14px;
color: #222222;
line-height: 45px;
margin-left: auto;
} }
.chart-box { .chart-box {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 148px; width: 148px;
// margin: 26px auto 0; margin: 26px auto 0;
} }
.assess { .assess {
font-size: 18px; font-size: 18px;
......
src/pages/exam/testExam/exam/result.vue
浏览文件 @ 91ea0111
...@@ -85,15 +85,30 @@ export default { ...@@ -85,15 +85,30 @@ export default {
api.getExamQuestion(param).then(response => { api.getExamQuestion(param).then(response => {
const data = JSON.parse(response.data) const data = JSON.parse(response.data)
let numCount = 0 let numCount = 0
console.log(data)
for (const item in data.sheet.score_items) { for (const item in data.sheet.score_items) {
for (const cItem in data.sheet.score_items[item]) { for (const cItem in data.sheet.score_items[item]) {
console.log(data.sheet.score_items[item][cItem].is_right, '=123isr')
if (data.sheet.score_items[item][cItem].is_right) { if (data.sheet.score_items[item][cItem].is_right) {
numCount++ numCount++
} }
} }
} }
let countNum = 0
data.sheet.questions.question_items.forEach(list => {
list.question_list = list.question_list.reduce((a, b) => {
return a.concat(b)
}, [])
list.question_list.forEach(item => {
if (item.question_options) {
countNum++
}
console.log(item, 'list')
})
})
console.log(countNum)
this.accuracy = parseInt(data.sheet.score) this.accuracy = parseInt(data.sheet.score)
this.accuracText = parseInt((numCount / data.sheet.questions.total_question_count) * 100) this.accuracText = parseInt((numCount / countNum) * 100)
this.data = data this.data = data
this.accuracScore = parseInt(data.sheet.questions.total_score) this.accuracScore = parseInt(data.sheet.questions.total_score)
}) })
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论