Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
fan
commit
df83fbb904
@ -124,6 +124,7 @@ const StudentManage = () => import('@/views/studentManage');
|
||||
const CompetitionDetail = () => import('@/views/jsxt/competition/examDetail');
|
||||
const CompetitionManage = () => import('@/views/jsxt/competition/index');
|
||||
const CompetitionHome = () => import('@/views/jsxt/competition/home');
|
||||
const Refereedetail = () => import('@/views/jsxt/competition/theory/quiz/index');
|
||||
const theoryManage = () => import('@/views/jsxt/competition/theory/index');
|
||||
const RefereeList = () => import('@/views/jsxt/refereeList/index');
|
||||
const homeJsxt = () => import('@/views/jsxt/home/index');
|
||||
@ -1038,6 +1039,13 @@ export const JSXT = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/jsxt/theory/detail/:id',
|
||||
component: Refereedetail,
|
||||
meta: {
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/refereeJsxt',
|
||||
component: Layout,
|
||||
|
||||
@ -5,7 +5,6 @@ import TurnbackBar from '@/components/TurnbackBar';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Dictionary from '@/scripts/DictionaryData';
|
||||
import Theme from '@/jmapNew/theme/factory';
|
||||
import store from './../store/index_Common';
|
||||
|
||||
// 全局组件
|
||||
Vue.component('DataForm', DataForm);
|
||||
@ -115,3 +114,24 @@ Vue.prototype.$copyClone = function(obj1, obj2 = {}) {
|
||||
}
|
||||
return obj1;
|
||||
};
|
||||
|
||||
Vue.prototype.$escapeHTML = function (context) {
|
||||
const pattern = /<\w*>(.*)<\/\w*>/;
|
||||
|
||||
if (pattern.test(context)) {
|
||||
context = pattern.exec(context)[1];
|
||||
}
|
||||
|
||||
context = context.replace(/</g, '<');
|
||||
context = context.replace(/>/g, '>');
|
||||
|
||||
return `${context}`;
|
||||
};
|
||||
|
||||
Vue.prototype.$str2number = function(str) {
|
||||
return parseInt(str);
|
||||
};
|
||||
|
||||
Vue.prototype.$asc2chart = function(ascii) {
|
||||
return String.fromCharCode(ascii);
|
||||
};
|
||||
|
||||
@ -192,7 +192,11 @@ export default {
|
||||
}
|
||||
},
|
||||
async exmaStart() {
|
||||
this.disabled = true;
|
||||
if (this.$route.query.type == 'theory') {
|
||||
this.$router.push(`/jsxt/theory/detail/${this.$route.query.mapId}`);
|
||||
} else {
|
||||
this.disabled = true;
|
||||
}
|
||||
},
|
||||
back() {
|
||||
this.$router.go(-1);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="">
|
||||
理论首页
|
||||
<el-button @click="startExam">开始考试</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -9,8 +10,16 @@ export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {
|
||||
|
||||
mapId: ''
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.mapId = this.$route.params.id;
|
||||
},
|
||||
methods: {
|
||||
startExam() {
|
||||
this.$router.push(`/jsxt/theory/detail/${this.mapId}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
243
src/views/jsxt/competition/theory/quiz/index.vue
Normal file
243
src/views/jsxt/competition/theory/quiz/index.vue
Normal file
@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<el-container class="quiz">
|
||||
<el-container class="quiz__container">
|
||||
<el-header class="quiz__container-header layer-center">
|
||||
<div class="title">{{ formModel.name }}</div>
|
||||
<div class="notes">{{ formModel.description }}</div>
|
||||
</el-header>
|
||||
<el-main class="quiz__container-main layer-center">
|
||||
<div v-for="(el,i) in sortedList" :id="'anchor__lst-'+i" :key="i" class="section">
|
||||
<template v-if="el.children.length">
|
||||
<div class="caption">{{ index2UnicodeList[i] }}、{{ el.title }} </div>
|
||||
<question v-for="(item,j) in el.children" :id="'anchor__lst-'+item.type+'-'+item.index" :key="j" v-model="item.answer" class="context" :option="item" @save="onSave" />
|
||||
</template>
|
||||
</div>
|
||||
</el-main>
|
||||
<el-footer class="quiz__container-footer layer-center" @click="returnTop">
|
||||
<el-button-group class="buttons">
|
||||
<el-button v-loading="loading" type="primary" @click="commit">提 交</el-button>
|
||||
</el-button-group>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { commitExam, getExamInfo, getUserExam, saveExamAnswer } from '@/api/exam.js';
|
||||
// import WindowResizeHandler from '@/mixin/WindowResizeHandler';
|
||||
import Question from './question';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Question
|
||||
},
|
||||
mixins: [
|
||||
// WindowResizeHandler
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
height: 0,
|
||||
loading: false,
|
||||
formModel: {
|
||||
description: '',
|
||||
duration: 10,
|
||||
name: '',
|
||||
status: '',
|
||||
totalScore: 0,
|
||||
passScore: 10
|
||||
},
|
||||
examQuestions: [
|
||||
{
|
||||
topic: 'PH玻璃电极只能在5~60℃范围内使用，而且还应通过温度校正装置来消除影响。',
|
||||
type: 'judge',
|
||||
optionList: [
|
||||
{id: '160', content: '√', correct: true},
|
||||
{id: '161', content: '×', correct: false}
|
||||
]
|
||||
},
|
||||
{
|
||||
topic: '调度工作是（ ___ ）工作中的一个重要组成部分。',
|
||||
type: 'select',
|
||||
optionList: [
|
||||
{id: '40', content: '<span style="color: windowtext;">煤矿管理</span>', correct: false},
|
||||
{id: '41', content: '<span style="color: windowtext;">企业管理</span>', correct: true},
|
||||
{id: '42', content: '<span style="color: windowtext;">安全生产</span>', correct: false},
|
||||
{id: '43', content: '<span style="color: windowtext;">生产组织</span>', correct: false}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
examId() {
|
||||
return this.$route.params.examId;
|
||||
},
|
||||
userExamId() {
|
||||
return this.$route.params.userExamId;
|
||||
},
|
||||
question() {
|
||||
return this.examQuestions[this.index] || {};
|
||||
},
|
||||
index2UnicodeList() {
|
||||
return ['一', '二', '三', '四'];
|
||||
},
|
||||
sortedList() {
|
||||
return [
|
||||
{
|
||||
title: '判断题',
|
||||
children: this.examQuestions.filter(el => { return el.type === 'judge'; })
|
||||
},
|
||||
{
|
||||
title: '选择题',
|
||||
children: this.examQuestions.filter(el => { return el.type === 'select'; })
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$router': function() {
|
||||
this.loadInitData();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
loadInitData() {
|
||||
console.log('获取试题详情');
|
||||
// getExamInfo(this.examId).then(resp => {
|
||||
// this.formModel = resp.data;
|
||||
// getUserExam(this.userExamId).then(rest => {
|
||||
// this.examQuestions = rest.data.map((el, i) => {
|
||||
// el.index = i;
|
||||
// return el;
|
||||
// });
|
||||
// });
|
||||
// }).catch(error => {
|
||||
// this.$message.error(`加载考试详情失败：${error.message}`);
|
||||
// });
|
||||
},
|
||||
resizeHandler() {
|
||||
this.height = this._clientHeight;
|
||||
},
|
||||
appendIndex(str, index) {
|
||||
return `${index + 1}. ${str}`;
|
||||
},
|
||||
goAnchor(selector) {
|
||||
const anchor = this.$el.querySelector(selector);
|
||||
const el = this.$el.querySelector('.el-main');
|
||||
if (anchor && el) {
|
||||
el.scrollTop = anchor.offsetTop;
|
||||
}
|
||||
},
|
||||
returnTop() {
|
||||
document.querySelector('.el-header').scrollIntoView(true);
|
||||
},
|
||||
commit() {
|
||||
let isFinish = true;
|
||||
this.examQuestions.forEach(el => {
|
||||
if (!el.answer) { isFinish = false; }
|
||||
});
|
||||
|
||||
if (isFinish) {
|
||||
this.doEnd();
|
||||
} else {
|
||||
this.$confirm('存在试题未完成，是否继续？', '提 示', {
|
||||
confirmButtonText: '确 定',
|
||||
cancelButtonText: '取 消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.doEnd();
|
||||
}).catch( () => { });
|
||||
}
|
||||
},
|
||||
doEnd() {
|
||||
// console.log('考试成绩');
|
||||
this.$router.push({ path: `/jsxt/home`});
|
||||
},
|
||||
onSave(data) {
|
||||
console.log(data, '问答题');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.layer-center {
|
||||
width: 900px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.quiz {
|
||||
background: #eee;
|
||||
height: 100%;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display:none
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: 100%;
|
||||
.dir-item {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.dir-caption {
|
||||
padding-left: 10px;
|
||||
line-height: 26px;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__container {
|
||||
height: 100%;
|
||||
|
||||
&-header {
|
||||
height: auto !important;
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
line-height: 60px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notes {
|
||||
color:#606266;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
.section {
|
||||
padding: 5px 20px;
|
||||
.caption {
|
||||
line-height: 26px;
|
||||
}
|
||||
.context {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
text-align: right;
|
||||
position: sticky;
|
||||
bottom: 0px;
|
||||
padding: 40px ;
|
||||
.buttons {
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
91
src/views/jsxt/competition/theory/quiz/question.vue
Normal file
91
src/views/jsxt/competition/theory/quiz/question.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="question">
|
||||
<div class="ql-editor" v-html="appendIndex($escapeHTML(`${option.topic}`), $vnode.key)" />
|
||||
<template v-if="checkType(option, 'judge')">
|
||||
<el-radio-group v-model="answer" @change="onChnage">
|
||||
<el-radio v-for="(el,i) in option.optionList" :key="i" :label="$str2number(el.id)" style="display: inline">
|
||||
<span>{{ el.content }}</span>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template v-else-if="checkType(option, 'select')">
|
||||
<el-radio-group v-model="answer" @change="onChnage">
|
||||
<el-radio v-for="(el,i) in option.optionList" :key="i" :label="$str2number(el.id)" style="display: block">
|
||||
<span>{{ $asc2chart(i+65) }}. </span>
|
||||
<div class="ql-editor" style="display: inline; padding: 0" v-html="$escapeHTML(el.content)" />
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
option: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
answer: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.changeValue();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.changeValue();
|
||||
},
|
||||
methods: {
|
||||
changeValue() {
|
||||
this.answer = parseInt(this.value);
|
||||
},
|
||||
checkType(option, type) {
|
||||
return option.type == type;
|
||||
},
|
||||
appendIndex(str, index) {
|
||||
return `${index + 1}. ${str}`;
|
||||
},
|
||||
onChnage(e) {
|
||||
const answer = `${e}`;
|
||||
this.$emit('input', answer);
|
||||
this.$emit('save', {userExamQuestionId: this.option.id, answer: answer});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.rich-text {
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.question {
|
||||
/deep/ {
|
||||
.ql-editor {
|
||||
line-height: 26px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.el-radio__label {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user