Skip to content

T
transport-show-h5
提交 aa3b775c authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

updata

上级 c9788355
隐藏空白字符变更
内嵌 并排
正在显示 包含 470 行增加 和 44 行删除
src/modules/exam-module/components/examEnd.vue
浏览文件 @ aa3b775c
......@@ -121,6 +121,9 @@ export default {
}
},
methods: {
go(id) {
this.$emit('cardChange', id)
},
scrollDom() {
const topViewH = document.getElementById('top-view3').offsetHeight
const clientHeight = document.documentElement.clientHeight
......
src/modules/exam-module/index.js
浏览文件 @ aa3b775c
import './index.scss'
import ExamTopic from './src/ExamTopic.vue'
import ExamRnd from './src/ExamEnd.vue'
const components = [
ExamTopic
ExamTopic,
ExamRnd
]
const install = function (Vue, opts = {}) {
......@@ -26,5 +28,6 @@ if (typeof window !== 'undefined' && window.Vue) {
export default {
install,
ExamTopic
ExamTopic,
ExamRnd
}
src/modules/exam-module/src/ExamEnd.vue 0 → 100644
浏览文件 @ aa3b775c
<template>
<div class="end_box">
<div id="bottom-view3">
<div class="end_con">
<div class="cs_type"><span>测试内容：</span>能力自测</div>
<div class="cs_time"><span>测试时间：</span>{{ questionsData.created_time }}</div>
<div class="charts">
<svg width="86%" height="86%" viewBox="0 0 100 100">
<circle r="25" cx="50" cy="50" fill="none" stroke="rgba(255,193,79,1)" stroke-width="50" stroke-dasharray="158 158" />
</svg>
<svg class="w_svg" width="100%" height="100%" viewBox="0 0 100 100">
<circle r="25" cx="50" cy="50" fill="none" stroke="#07cb78" stroke-width="50" :stroke-dasharray="ratio" />
</svg>
<div class="circle">
<p class="p1">正确率</p>
<p class="p2">{{ratioNum}}%</p>
</div>
</div>
<div class="assess">
<div class="tit">测试评估：</div>
<img v-show="ratioNum < 20" src="../assets/images/mountain0.png" alt="">
<img v-show="ratioNum >= 20 && ratioNum < 40" src="../assets/images/mountain1.png" alt="">
<img v-show="ratioNum >= 40 && ratioNum < 60" src="../assets/images/mountain2.png" alt="">
<img v-show="ratioNum >= 60 && ratioNum < 99" src="../assets/images/mountain3.png" alt="">
<img v-show="ratioNum == 100" src="../assets/images/mountain4.png" alt="">
<div v-if="ratioNum == 100" class="txt">成功近在眼前，再接再厉！</div>
<div v-else class="txt">您离成功还有一段距离，继续努力！</div>
</div>
<div class="card">
<div class="tit">答题卡：</div>
<div class="card_con">
<div class="flag">
<ul>
<li>
<div class="circle active1">1</div>
<div class="txt">正确</div>
</li>
<li>
<div class="circle active2">1</div>
<div class="txt">错误</div>
</li>
<li>
<div class="circle active3">1</div>
<div class="txt">未答</div>
</li>
</ul>
</div>
<div class="question">
<template v-for="(item, index) in questionsData.questions">
<div :key="index">
<div class="title">{{ questionType[item.type] }}</div>
<ul>
<template v-for="(cItem, cIndex) in item.question_list">
<template v-if="requestData[item.id]">
<template v-if="requestData[item.id][cItem.id]">
<!-- <template v-if="questionsData.score_items[item.id]">
{{ questionsData.score_items[item.id] }}
</template> -->
<template v-if="requestData[item.id][cItem.id].answer.length != 0">
<template v-if="questionsData.score_items[item.id]">
<li @click="go(cItem.id)" :data-id="cItem.id" :key="cIndex" :class="questionsData.score_items[item.id][cItem.id].is_right ? 'active1' : 'active2'">{{ cIndex+1 }}</li>
</template>
<template v-else>
<li @click="go(cItem.id)" :data-id="cItem.id" :key="cIndex" class="active3">{{ cIndex+1 }}</li>
</template>
</template>
<template v-else>
<li @click="go(cItem.id)" :data-id="cItem.id" :key="cIndex" class="active3">{{ cIndex+1 }}</li>
</template>
<!-- <li @click="go(cItem.id)" :data-id="cItem.id" v-else :key="cIndex" class="active3">{{ cIndex+1 }}</li> -->
</template>
<template v-else>
<li @click="go(cItem.id)" :data-id="cItem.id" :key="cIndex" class="active3">{{ cIndex+1 }}</li>
</template>
</template>
<template v-else>
<li @click="go(cItem.id)" :data-id="cItem.id" :key="cIndex" class="active3">{{ cIndex+1 }}</li>
</template>
</template>
</ul>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Exam from '../action'
export default {
name: 'ExamEnd',
data() {
return {
questionType: {
1: '单选题：',
2: '多选题：',
5: '案例题：',
6: '判断题：'
},
ratio: 0,
ratioNum: 0,
questionsData: {
questions: []
},
requestData: {}
}
},
created() {
},
mounted() {
this.initData()
},
methods: {
go(id) {
this.$emit('cardChange', id)
},
initData() {
const param = {
type: 1,
is_create: 0
}
Exam.getExam(param).then(res => {
this.questionsData = res
this.requestData = res.answers
const count = this.questionsData.score / this.questionsData.total_score
this.ratio = `${count * 158} 158`
this.ratioNum = parseInt(count * 100)
})
}
}
}
</script>
<style lang="scss" scoped>
.end_box{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9999999;
background: #fff;
}
.head{
color: #222;
display: flex;
padding: .4rem 0;
align-items: center;
i{
font-size: .35rem;
margin-left: .28rem;
}
.title{
margin-left: .03rem;
font-size: .3rem;
}
}
#bottom-view3{
overflow: scroll;
}
.end_con{
padding: 0 .4rem;
.cs_type{
font-size: .3rem;
color: #222;
line-height: 100%;
span{
font-weight: bold;
}
}
.cs_time{
font-size: .3rem;
color: #222;
line-height: 100%;
margin-top: .2rem;
span{
font-weight: bold;
}
}
.charts{
width: 3rem;
height: 3rem;
margin: .4rem auto;
position: relative;
svg{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
.w_svg{
-webkit-transform:rotate(-90deg) translate(50%,-50%);
}
.circle{
width: .96rem;
height: .96rem;
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
-webkit-transform: translate(-50%,-50%);
background: #FF8000;
border-radius: 50%;
text-align: center;
.p1{
font-size: .2rem;
color: #fff;
line-height: 100%;
margin: 0.18rem 0 0.15rem 0;
opacity: .7;
}
.p2{
font-size: .26rem;
color: #fff;
line-height: 100%;
font-weight: bold;
margin: 0;
}
}
}
.assess{
.tit{
font-size: .3rem;
color: #333;
font-weight: bold;
}
img{
width: 4rem;
height: 1.93rem;
display: block;
margin: 0 auto;
}
.txt{
font-weight: bold;
font-size: .3rem;
color: #333;
text-align: center;
margin-top: .18rem;
}
}
.card{
margin-top: .38rem;
.tit{
font-size: .3rem;
color: #333;
font-weight: bold;
}
.card_con{
overflow-y: scroll;
.flag{
border-bottom: 0.01rem solid #EEEEEE;
ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
li{
margin: 0 .4rem 0.1rem .4rem;
text-align: center;
.circle{
width: .6rem;
height: .6rem;
border-radius: 50%;
font-size: .26rem;
text-align: center;
line-height: .6rem;
color: #fff;
}
.active1{
background: #67C23A;
}
.active2{
background:#FA5555;
}
.active3{
background:rgba(204,204,204,1);
}
.txt{
color: #222222;
font-size: .26rem;
margin-top: 0.1rem;
}
}
}
}
.question{
.title{
font-size: .3rem;
color: #333333;
margin-top: .1rem;
margin-bottom: .4rem;
}
ul{
list-style: none;
margin: 0;
padding: 0 0.6rem;
border-bottom: 0.01rem solid #EEEEEE;
display: flex;
flex-wrap: wrap;
li{
width: .6rem;
height: .6rem;
border-radius: 50%;
font-size: .26rem;
text-align: center;
line-height: .6rem;
color: #fff;
margin-right: .6rem;
margin-bottom: .4rem;
}
:nth-child(5n+5){
margin: 0;
}
.active1{
background: #67C23A;
}
.active2{
background:#FA5555;
}
.active3{
background:rgba(204,204,204,1);
}
}
}
}
}
}
</style>
src/modules/exam-module/src/ExamTopic.vue
浏览文件 @ aa3b775c
<template>
<div>
<div id="top-view">
<div class="head">
<!-- <div class="head">
<i class="el-icon-arrow-left"></i>
<div class="title">答题</div>
</div>
</div> -->
<div class="tool-box">
<div class="time">{{ remainingTime }}</div>
<div class="tag-box">
<span @click="signQuestion">标记</span>
<span @click="showCard">答题卡</span>
<span @click="isExamSubPop = true">交卷</span>
<span @click="isExamSubPop = true" v-if="isExamEnd">交卷</span>
</div>
</div>
</div>
......@@ -23,8 +23,7 @@
<div class="type">{{ dItem.question_title }}</div>
<div class="count">{{ currentNum }}/{{ questionsData.sheet.question_count }}</div>
</div>
<div class="topic">
{{ dItem.question_content }}
<div class="topic" v-html="dItem.question_content">
</div>
<ul class="option" v-if="item.type === '1' || item.type === '6' || item.type === '5' && dItem.answer_count <= 1">
<template v-for="(opt, oIndex) in dItem.question_options">
......@@ -54,7 +53,7 @@
<div class="txt">您的答案：<span>{{ dItem.opaVal }}</span></div>
<div class="exp">
<p class="name">解析：</p>
<p class="nr">{{ dItem.question_analysis }}</p>
<p class="nr" v-html="dItem.question_analysis"></p>
</div>
</div>
</swiper-slide>
......@@ -70,14 +69,14 @@
</div>
</div>
<card v-if="isCard" @cardChange="cardChange" @showCard="showCard" :questionsData="questionsData" :requestData="requestData"></card>
<exam-end @examEndBack="examEndBack" v-if="examIsShow" :questionsData="questionsData" :requestData="requestData"></exam-end>
<!-- <exam-end @cardChange="cardChange;examIsShow = false;isExamSubPop = false" @examEndBack="examEndBack" v-if="examIsShow" :questionsData="questionsData" :requestData="requestData"></exam-end> -->
<div class="exam_submit" v-if="isExamSubPop">
<div class="pop">
<div class="tit">交卷</div>
<div class="txt">您确定提交吗？</div>
<div class="btn_box">
<div class="btn" @click="isExamSubPop = false">继续做题</div>
<div class="btn btn2" @click="examChangeShow;examSubmit(1, true)">交卷</div>
<div class="btn btn2" @click="goExamResult;examSubmit(1, true)">交卷</div>
</div>
</div>
</div>
......@@ -86,7 +85,7 @@
<div class="tit">提示</div>
<img src="../assets/images/time.png" alt="">
<div class="txt">考试时间到！答题结束</div>
<div class="btn" @click="examChangeShow">确定</div>
<div class="btn" @click="goExamResult">确定</div>
</div>
</div>
</div>
......@@ -132,7 +131,7 @@ export default {
requestData2: {},
clockCount: null,
isExamEnd: true,
examIsShow: false,
// examIsShow: false,
isExamSubPop: false,
timePopIsShow: false,
initTime: null
......@@ -153,28 +152,28 @@ export default {
}
},
mounted () {
this.swiper.slideTo(0, 1000, false)
this.initTime = setInterval(() => {
this.examSubmit(0)
}, 5000)
if (!this.$route.query.id) {
this.swiper.slideTo(0, 1000, false)
this.initTime = setInterval(() => {
this.examSubmit(0)
}, 5000)
this.initData(1)
} else {
this.examEnd()
this.initData(0)
}
this.scrollDom()
},
created() {
this.initData()
},
methods: {
// 答题结束禁止答题
examEnd() {
// lhh this.examIsShow = true
this.examIsShow = false
this.isExamEnd = false
},
examEndBack() {
this.examIsShow = false
},
// 答题卡点击跳题
cardChange(e) {
// const aa = null
console.log(this.swiper.slides, '=======')
for (let i = 0; i < this.questionsData.sheet.question_count; i++) {
if (this.swiper.slides[i].attributes['data-dId'].nodeValue === e) {
this.swiper.slideTo(i, 0, false)
......@@ -350,26 +349,32 @@ export default {
const bottomView = document.getElementById('bottom-view')
bottomView.style.height = (clientHeight - topViewH) + 'px'
},
initData() {
initData(n) {
const param = {
type: 1,
is_create: 1
is_create: n
}
Exam.getExam(param).then(res => {
if (res === 2) {
this.getPower()
return false
}
if (res.sheet.remainingTime > 0) {
this.setClock(res.sheet.remainingTime)
} else {
this.examEnd()
}
this.scrollDom()
this.questionsData = res
this.remainingTime = this.secondToDate(res.sheet.remainingTime)
if (n === 1) {
if (res.sheet.remainingTime > 0) {
this.setClock(res.sheet.remainingTime)
} else {
this.examEnd()
this.scrollDom()
}
}
setTimeout(() => {
this.examSubmit(0)
}, 1500)
}, 1000)
setTimeout(() => {
this.cardChange(this.$route.query.id)
}, 100)
if (res.answers !== null) {
const datas = res.answers
if (datas.length === 0) {
......@@ -393,16 +398,8 @@ export default {
s = Number(hour * 3600) + Number(min * 60) + Number(sec)
return s
},
examChangeShow(n) {
const param = {
type: 1,
is_create: 0
}
Exam.getExam(param).then(res => {
this.questionsData = res
this.requestData = res.answers
this.examIsShow = true
})
goExamResult(n) {
this.$emit('goExamResult')
},
getPower() {
Exam.getPower({ role: 1 }).then(res => {
......@@ -420,10 +417,9 @@ export default {
if (res.exm_status === 1) {
clearInterval(this.initTime)
clearInterval(this.clockCount)
console.log()
if (this.questionsData.sheet.remainingTime > 0) {
if (isSub) {
this.examChangeShow(1)
this.goExamResult()
}
return false
}
......@@ -437,6 +433,9 @@ export default {
</script>
<style lang="scss" scoped>
.swiper-wrapper .swiper-slide{
padding-bottom: 1rem;
}
.head{
color: #222;
display: flex;
......
src/pages/courseTest/answer.vue 0 → 100644
浏览文件 @ aa3b775c
<template>
<div>
<exam-topic @goExamResult="goExamResult"></exam-topic>
</div>
</template>
<script>
export default {
methods: {
goExamResult() {
this.$router.replace('/course/answer-result')
}
},
metaInfo () {
return {
title: '答题',
meta: [
// { vmid: 'description', name: 'description', content: this.description }
]
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/courseTest/answerResult.vue 0 → 100644
浏览文件 @ aa3b775c
<template>
<div>
<exam-end @cardChange="cardChange"></exam-end>
</div>
</template>
<script>
export default {
data() {
return {
questionsData: null,
requestData: null
}
},
metaInfo () {
return {
title: '成绩报告',
meta: [
// { vmid: 'description', name: 'description', content: this.description }
]
}
},
methods: {
cardChange(e) {
this.$router.push({
path: '/course/answer',
query: {
id: e
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/courseTest/courseTest.vue 0 → 100644
浏览文件 @ aa3b775c
<template>
<div>
<ul>
<li @click="go">测试btn</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
go() {
this.$router.push('/course/answer')
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/router/routes.js
浏览文件 @ aa3b775c
......@@ -3,6 +3,12 @@ export default [
{ path: '/', redirect: '/test' },
/* 测试页面 */
{ path: '/test', name: 'test', component: () => import('../pages/test.vue') },
/* 能力自测 */
{ path: '/course-test', name: 'course-test', component: () => import('../pages/courseTest/courseTest.vue') },
/* 答题页面 */
{ path: '/course/answer', name: 'course-answer', component: () => import('../pages/courseTest/answer.vue') },
/* 答题结果 */
{ path: '/course/answer-result', name: 'answer-result', component: () => import('../pages/courseTest/answerResult.vue') },
/* 如果所有页面都没找到 - 指向 */
{ path: '*', component: () => import('@/components/errorPages/404.vue') }
]
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论