|
|
@@ -7,59 +7,93 @@
|
|
|
:LoginNavIndex="2"
|
|
|
/>
|
|
|
<div class="navBar">
|
|
|
- <div class="navBar-left">
|
|
|
- <a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left">{{title}}</i></a>
|
|
|
- </div>
|
|
|
+ <div class="navBar-left">
|
|
|
+ <a class="goback" @click="$router.go(-1)"
|
|
|
+ ><i class="el-icon-arrow-left">{{ title }}</i></a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="content" v-if="question_list">
|
|
|
- <template v-if="progress==='answer'">
|
|
|
- <div class="content-top">
|
|
|
- <span class="chapter"> {{activeIndex+1}} / {{question_list.length}} </span>
|
|
|
- <span class="countdown">-{{realFormatSecond(time)}}</span>
|
|
|
- </div>
|
|
|
- <!-- <template v-for="(item,index) in evaluData"> -->
|
|
|
- <!-- <div class="content-center" :key="index" v-if="activeIndex===index"> -->
|
|
|
- <div class="content-center" v-if="questionDetailList[activeIndex]">
|
|
|
- <!-- <template v-if="item.type==='single'"> -->
|
|
|
- <div class="title-box">
|
|
|
- <b>{{activeIndex+1}}.</b>
|
|
|
- <h5>{{questionDetailList[activeIndex].content.content}}</h5>
|
|
|
- </div>
|
|
|
- <el-radio-group v-model="userSelect[activeIndex]">
|
|
|
- <el-radio :label="items.num" v-for="(items,indexs) in questionDetailList[activeIndex].option_list" :key="indexs">
|
|
|
- <b v-if="items.label">{{items.label}}.</b>
|
|
|
- <span>{{items.content}}</span>
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- <!-- </template> -->
|
|
|
- </div>
|
|
|
- <!-- </template> -->
|
|
|
- <div class="btn-box">
|
|
|
- <el-button size="small" @click="handlePrev">上一题</el-button>
|
|
|
- <el-button type="primary" size="small" @click="handleNext">下一题</el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-if="progress==='result'">
|
|
|
- <el-result icon="success" subTitle="您已经完成测试"></el-result>
|
|
|
- <div class="result-info">
|
|
|
- <div class="result-item">
|
|
|
- <p class="title">正确率</p>
|
|
|
- <span class="number">{{rightRate}}<span class="unit">%</span></span>
|
|
|
- </div>
|
|
|
- <div class="result-item">
|
|
|
- <p class="title">正确数量</p>
|
|
|
- <span class="number">{{rightNumber}}<span class="unit">题</span></span>
|
|
|
- </div>
|
|
|
- <div class="result-item">
|
|
|
- <p class="title">错误数量</p>
|
|
|
- <span class="number">{{errorNumber}}<span class="unit">题</span></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="btn-box result-box">
|
|
|
- <el-button size="small" @click="goBackList">返回列表</el-button>
|
|
|
- <el-button type="primary" size="small" @click="retest">重新测试</el-button>
|
|
|
+ <template v-if="progress === 'answer'">
|
|
|
+ <div class="content-top">
|
|
|
+ <span class="chapter">
|
|
|
+ {{ activeIndex + 1 }} / {{ question_list.length }}
|
|
|
+ </span>
|
|
|
+ <span class="countdown">-{{ realFormatSecond(time) }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <template v-for="(item,index) in evaluData"> -->
|
|
|
+ <!-- <div class="content-center" :key="index" v-if="activeIndex===index"> -->
|
|
|
+ <div class="content-center" v-if="questionDetailList[activeIndex]">
|
|
|
+ <!-- <template v-if="item.type==='single'"> -->
|
|
|
+ <div class="title-box">
|
|
|
+ <b>{{ activeIndex + 1 }}.</b>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="aduioLine-content aduioLine-box"
|
|
|
+ v-if="questionDetailList[activeIndex].content.file_url"
|
|
|
+ >
|
|
|
+ <AudioLine
|
|
|
+ audioId="artNormalAudio"
|
|
|
+ :mp3="questionDetailList[activeIndex].content.file_url"
|
|
|
+ :getCurTime="getCurTime"
|
|
|
+ ref="audioLine"
|
|
|
+ :mp3Source="'mp3'"
|
|
|
+ :colorObj="colorObj"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <h5>{{ questionDetailList[activeIndex].content.content }}</h5>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+ <el-radio-group v-model="userSelect[activeIndex]">
|
|
|
+ <el-radio
|
|
|
+ :label="items.num"
|
|
|
+ v-for="(items, indexs) in questionDetailList[activeIndex]
|
|
|
+ .option_list"
|
|
|
+ :key="indexs"
|
|
|
+ >
|
|
|
+ <b v-if="items.label">{{ items.label }}.</b>
|
|
|
+ <span>{{ items.content }}</span>
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <!-- </template> -->
|
|
|
+ </div>
|
|
|
+ <!-- </template> -->
|
|
|
+ <div class="btn-box">
|
|
|
+ <el-button size="small" @click="handlePrev">上一题</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="handleNext"
|
|
|
+ >下一题</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="progress === 'result'">
|
|
|
+ <el-result icon="success" subTitle="您已经完成测试"></el-result>
|
|
|
+ <div class="result-info">
|
|
|
+ <div class="result-item">
|
|
|
+ <p class="title">正确率</p>
|
|
|
+ <span class="number"
|
|
|
+ >{{ rightRate }}<span class="unit">%</span></span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="result-item">
|
|
|
+ <p class="title">正确数量</p>
|
|
|
+ <span class="number"
|
|
|
+ >{{ rightNumber }}<span class="unit">题</span></span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="result-item">
|
|
|
+ <p class="title">错误数量</p>
|
|
|
+ <span class="number"
|
|
|
+ >{{ errorNumber }}<span class="unit">题</span></span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn-box result-box">
|
|
|
+ <el-button size="small" @click="goBackList">返回列表</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="retest"
|
|
|
+ >重新测试</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -68,99 +102,100 @@
|
|
|
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
import Header from "../../components/Header.vue";
|
|
|
+import AudioLine from "@/components/common/AudioLine.vue";
|
|
|
import { getLogin } from "@/api/ajax";
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: { Header },
|
|
|
+ components: { Header, AudioLine },
|
|
|
props: {},
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
- title:this.$route.query.title?this.$route.query.title:'词汇测试',
|
|
|
- progress:'answer', // answer 答题， result 答题结果
|
|
|
- evaluData:[
|
|
|
+ title: this.$route.query.title ? this.$route.query.title : "词汇测试",
|
|
|
+ progress: "answer", // answer 答题， result 答题结果
|
|
|
+ evaluData: [
|
|
|
{
|
|
|
- number: '1',
|
|
|
- title: 'Everyone has different _____.',
|
|
|
- type: 'single',
|
|
|
- option: [
|
|
|
- {
|
|
|
- number: 'A',
|
|
|
- title: 'persons'
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'B',
|
|
|
- title: 'personals'
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'C',
|
|
|
- title: 'personalities'
|
|
|
- }
|
|
|
- ],
|
|
|
- correct: 2
|
|
|
+ number: "1",
|
|
|
+ title: "Everyone has different _____.",
|
|
|
+ type: "single",
|
|
|
+ option: [
|
|
|
+ {
|
|
|
+ number: "A",
|
|
|
+ title: "persons",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "B",
|
|
|
+ title: "personals",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "C",
|
|
|
+ title: "personalities",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ correct: 2,
|
|
|
},
|
|
|
{
|
|
|
- number: '2',
|
|
|
- title: "I would listen to others' opinions before making a _____.",
|
|
|
- type: 'single',
|
|
|
- option: [
|
|
|
- {
|
|
|
- number: 'A',
|
|
|
- title: 'decide'
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'B',
|
|
|
- title: 'decision'
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'C',
|
|
|
- title: 'deciding'
|
|
|
- }
|
|
|
- ],
|
|
|
- correct: 1
|
|
|
+ number: "2",
|
|
|
+ title: "I would listen to others' opinions before making a _____.",
|
|
|
+ type: "single",
|
|
|
+ option: [
|
|
|
+ {
|
|
|
+ number: "A",
|
|
|
+ title: "decide",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "B",
|
|
|
+ title: "decision",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "C",
|
|
|
+ title: "deciding",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ correct: 1,
|
|
|
},
|
|
|
{
|
|
|
- number: '3',
|
|
|
- title: 'The teacher gave me many _____ suggestions.',
|
|
|
- type: 'single',
|
|
|
- option: [
|
|
|
- {
|
|
|
- number: 'A',
|
|
|
- title: 'help'
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'B',
|
|
|
- title: 'helping'
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'C',
|
|
|
- title: 'helpful'
|
|
|
- }
|
|
|
- ],
|
|
|
- correct: 2
|
|
|
+ number: "3",
|
|
|
+ title: "The teacher gave me many _____ suggestions.",
|
|
|
+ type: "single",
|
|
|
+ option: [
|
|
|
+ {
|
|
|
+ number: "A",
|
|
|
+ title: "help",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "B",
|
|
|
+ title: "helping",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "C",
|
|
|
+ title: "helpful",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ correct: 2,
|
|
|
},
|
|
|
{
|
|
|
- number: '4',
|
|
|
- title: 'Their success was the _____ of years of hard work.',
|
|
|
- type: 'single',
|
|
|
- option: [
|
|
|
- {
|
|
|
- number: 'A',
|
|
|
- title: 'result'
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'B',
|
|
|
- title: 'change'
|
|
|
- },
|
|
|
- {
|
|
|
- number: 'C',
|
|
|
- title: 'serious'
|
|
|
- }
|
|
|
- ],
|
|
|
- correct: 0
|
|
|
- }
|
|
|
+ number: "4",
|
|
|
+ title: "Their success was the _____ of years of hard work.",
|
|
|
+ type: "single",
|
|
|
+ option: [
|
|
|
+ {
|
|
|
+ number: "A",
|
|
|
+ title: "result",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "B",
|
|
|
+ title: "change",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: "C",
|
|
|
+ title: "serious",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ correct: 0,
|
|
|
+ },
|
|
|
],
|
|
|
- userSelect:[],
|
|
|
+ userSelect: [],
|
|
|
activeIndex: 0,
|
|
|
rightNumber: 0,
|
|
|
errorNumber: 0,
|
|
|
@@ -169,8 +204,17 @@ export default {
|
|
|
timer: null,
|
|
|
question_list: null,
|
|
|
questionInfo: null,
|
|
|
- questionDetailList:[]
|
|
|
- }
|
|
|
+ questionDetailList: [],
|
|
|
+ curTime: 0,
|
|
|
+ colorObj: {
|
|
|
+ audiobg: "#FFFFFF",
|
|
|
+ audioBorder: "#EBEBEB",
|
|
|
+ audioBtnColor: "#175DFF",
|
|
|
+ audioBtnBg: "#EEF3FF",
|
|
|
+ audioTimeColor: "#2F3742",
|
|
|
+ audioSpeedColor: "#2F3742",
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
computed: {},
|
|
|
@@ -178,140 +222,135 @@ export default {
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- // 跳转开始测评
|
|
|
- handleStart(){
|
|
|
-
|
|
|
+ getCurTime(curTime) {
|
|
|
+ this.curTime = curTime * 1000;
|
|
|
},
|
|
|
// 返回列表
|
|
|
- goBackList(){
|
|
|
- this.$router.push({
|
|
|
- path: '/evaluation'
|
|
|
- });
|
|
|
+ goBackList() {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/evaluation",
|
|
|
+ });
|
|
|
},
|
|
|
// 重新测试
|
|
|
- retest(){
|
|
|
- getLogin('/TestServer/Client/ExamManager/RetestTestOrder', {
|
|
|
- test_order_id: this.$route.query.order
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if(res.status===1){
|
|
|
- this.progress = 'answer'
|
|
|
- this.activeIndex = 0
|
|
|
- this.handleUserSelect()
|
|
|
- this.handleTimer()
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
+ retest() {
|
|
|
+ getLogin("/TestServer/Client/ExamManager/RetestTestOrder", {
|
|
|
+ test_order_id: this.$route.query.order,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.progress = "answer";
|
|
|
+ this.activeIndex = 0;
|
|
|
+ this.handleUserSelect();
|
|
|
+ this.handleTimer();
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 上一题
|
|
|
- async handlePrev(){
|
|
|
- if(this.activeIndex!==0){
|
|
|
- await this.handleSubmit()
|
|
|
- this.activeIndex--
|
|
|
- this.handleGetQuestionDetail(this.activeIndex)
|
|
|
- }else{
|
|
|
- this.$message.warning('已经是第一题了')
|
|
|
- }
|
|
|
+ async handlePrev() {
|
|
|
+ if (this.activeIndex !== 0) {
|
|
|
+ await this.handleSubmit();
|
|
|
+ this.activeIndex--;
|
|
|
+ this.handleGetQuestionDetail(this.activeIndex);
|
|
|
+ } else {
|
|
|
+ this.$message.warning("已经是第一题了");
|
|
|
+ }
|
|
|
},
|
|
|
// 下一题
|
|
|
- async handleNext(){
|
|
|
- if(this.activeIndex!==this.question_list.length-1){
|
|
|
- await this.handleSubmit()
|
|
|
- this.activeIndex++
|
|
|
- this.handleGetQuestionDetail(this.activeIndex)
|
|
|
- }else{
|
|
|
- await this.handleSubmit()
|
|
|
- this.progress = 'result'
|
|
|
- this.handleCorrect()
|
|
|
- clearInterval(this.timer);
|
|
|
- this.time = 1800;
|
|
|
- this.questionDetailList = []
|
|
|
- this.handleGetQuestionDetail(0)
|
|
|
- }
|
|
|
+ async handleNext() {
|
|
|
+ if (this.activeIndex !== this.question_list.length - 1) {
|
|
|
+ await this.handleSubmit();
|
|
|
+ this.activeIndex++;
|
|
|
+ this.handleGetQuestionDetail(this.activeIndex);
|
|
|
+ } else {
|
|
|
+ await this.handleSubmit();
|
|
|
+ this.progress = "result";
|
|
|
+ this.handleCorrect();
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.time = 1800;
|
|
|
+ this.questionDetailList = [];
|
|
|
+ this.handleGetQuestionDetail(0);
|
|
|
+ }
|
|
|
},
|
|
|
// 提交答案
|
|
|
- handleSubmit(){
|
|
|
- getLogin('/TestServer/Client/ExamManager/SubmitTestOrderQuestionAnswer', {
|
|
|
- test_order_id: this.$route.query.order,
|
|
|
- question_id: this.question_list[this.activeIndex].question_id,
|
|
|
- answer_num: this.userSelect[this.activeIndex]
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if(res.status===1){
|
|
|
- }
|
|
|
- })
|
|
|
+ handleSubmit() {
|
|
|
+ getLogin("/TestServer/Client/ExamManager/SubmitTestOrderQuestionAnswer", {
|
|
|
+ test_order_id: this.$route.query.order,
|
|
|
+ question_id: this.question_list[this.activeIndex].question_id,
|
|
|
+ answer_num: this.userSelect[this.activeIndex],
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 给用户选项数组赋初始值
|
|
|
- handleUserSelect(){
|
|
|
- this.userSelect = []
|
|
|
- this.questionDetailList = []
|
|
|
- this.handleGetQuestionDetail(0)
|
|
|
- // this.evaluData.forEach(item => {
|
|
|
- // if(item.type==='single'){
|
|
|
- // this.userSelect.push(null)
|
|
|
- // }else{
|
|
|
- // let itemsOption = []
|
|
|
- // item.option.forEach(items=>{
|
|
|
- // itemsOption.push(null)
|
|
|
- // })
|
|
|
- // this.userSelect.push(itemsOption)
|
|
|
- // }
|
|
|
- // });
|
|
|
+ handleUserSelect() {
|
|
|
+ this.userSelect = [];
|
|
|
+ this.questionDetailList = [];
|
|
|
+ this.handleGetQuestionDetail(0);
|
|
|
+ // this.evaluData.forEach(item => {
|
|
|
+ // if(item.type==='single'){
|
|
|
+ // this.userSelect.push(null)
|
|
|
+ // }else{
|
|
|
+ // let itemsOption = []
|
|
|
+ // item.option.forEach(items=>{
|
|
|
+ // itemsOption.push(null)
|
|
|
+ // })
|
|
|
+ // this.userSelect.push(itemsOption)
|
|
|
+ // }
|
|
|
+ // });
|
|
|
},
|
|
|
// 计算对错
|
|
|
- handleCorrect(){
|
|
|
- // let total = 0
|
|
|
- // this.rightNumber=0
|
|
|
- // this.errorNumber=0
|
|
|
- // this.evaluData.forEach((item,index)=>{
|
|
|
- // if(item.type==='single'){
|
|
|
- // if(item.correct!==null){
|
|
|
- // if(item.correct===this.userSelect[index]){
|
|
|
- // this.rightNumber++
|
|
|
- // }else{
|
|
|
- // this.errorNumber++
|
|
|
- // }
|
|
|
- // total++
|
|
|
- // }
|
|
|
- // }else{
|
|
|
- // item.option.forEach((items,indexs)=>{
|
|
|
- // if(items.correct!==null){
|
|
|
- // if(items.correct===this.userSelect[index][indexs]){
|
|
|
- // this.rightNumber++
|
|
|
- // }else{
|
|
|
- // this.errorNumber++
|
|
|
- // }
|
|
|
- // total++
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // })
|
|
|
- // this.rightRate = Math.round(this.rightNumber/total *100 )
|
|
|
- getLogin('/TestServer/Client/ExamManager/GetTestOrderExamResult', {
|
|
|
- test_order_id: this.$route.query.order
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if(res.status===1){
|
|
|
- this.rightNumber = res.count_right
|
|
|
- this.errorNumber = res.count_wrong
|
|
|
- this.rightRate = res.percent_right
|
|
|
- }
|
|
|
- })
|
|
|
+ handleCorrect() {
|
|
|
+ // let total = 0
|
|
|
+ // this.rightNumber=0
|
|
|
+ // this.errorNumber=0
|
|
|
+ // this.evaluData.forEach((item,index)=>{
|
|
|
+ // if(item.type==='single'){
|
|
|
+ // if(item.correct!==null){
|
|
|
+ // if(item.correct===this.userSelect[index]){
|
|
|
+ // this.rightNumber++
|
|
|
+ // }else{
|
|
|
+ // this.errorNumber++
|
|
|
+ // }
|
|
|
+ // total++
|
|
|
+ // }
|
|
|
+ // }else{
|
|
|
+ // item.option.forEach((items,indexs)=>{
|
|
|
+ // if(items.correct!==null){
|
|
|
+ // if(items.correct===this.userSelect[index][indexs]){
|
|
|
+ // this.rightNumber++
|
|
|
+ // }else{
|
|
|
+ // this.errorNumber++
|
|
|
+ // }
|
|
|
+ // total++
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // this.rightRate = Math.round(this.rightNumber/total *100 )
|
|
|
+ getLogin("/TestServer/Client/ExamManager/GetTestOrderExamResult", {
|
|
|
+ test_order_id: this.$route.query.order,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.rightNumber = res.count_right;
|
|
|
+ this.errorNumber = res.count_wrong;
|
|
|
+ this.rightRate = res.percent_right;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 计时器
|
|
|
- handleTimer(){
|
|
|
- let this_ = this;
|
|
|
- this_.timer = null;
|
|
|
- this_.timer = setInterval(() => {
|
|
|
- this_.time--;
|
|
|
- if (this_.time === 0) {
|
|
|
- clearInterval(this_.timer);
|
|
|
- this_.timer = null;
|
|
|
- this_.time = 1800;
|
|
|
- this.progress = 'result'
|
|
|
- this.handleCorrect()
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
+ handleTimer() {
|
|
|
+ let this_ = this;
|
|
|
+ this_.timer = null;
|
|
|
+ this_.timer = setInterval(() => {
|
|
|
+ this_.time--;
|
|
|
+ if (this_.time === 0) {
|
|
|
+ clearInterval(this_.timer);
|
|
|
+ this_.timer = null;
|
|
|
+ this_.time = 1800;
|
|
|
+ this.progress = "result";
|
|
|
+ this.handleCorrect();
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
},
|
|
|
// 将整数转换成 时：分：秒的格式
|
|
|
realFormatSecond(value) {
|
|
|
@@ -349,222 +388,228 @@ export default {
|
|
|
return result;
|
|
|
},
|
|
|
// 获取试题列表
|
|
|
- handleGetList(){
|
|
|
- getLogin('/TestServer/Client/ExamManager/GetTestOrderQuestionList', {
|
|
|
- test_order_id: this.$route.query.order
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if(res.status===1){
|
|
|
- this.handleTimer()
|
|
|
- this.question_list = res.question_list
|
|
|
- if(this.question_list.length>0){
|
|
|
- this.handleGetQuestionDetail(0)
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+ handleGetList() {
|
|
|
+ getLogin("/TestServer/Client/ExamManager/GetTestOrderQuestionList", {
|
|
|
+ test_order_id: this.$route.query.order,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.handleTimer();
|
|
|
+ this.question_list = res.question_list;
|
|
|
+ if (this.question_list.length > 0) {
|
|
|
+ this.handleGetQuestionDetail(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 获取试题信息
|
|
|
- handleGetQuestionDetail(index){
|
|
|
- if(this.questionDetailList[index]){
|
|
|
- return
|
|
|
+ handleGetQuestionDetail(index) {
|
|
|
+ if (this.questionDetailList[index]) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.questionInfo = null;
|
|
|
+ getLogin("/TestServer/Client/QuestionManager/GetQuestionInfo", {
|
|
|
+ id: this.question_list[index].question_id,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.questionDetailList[index] = res;
|
|
|
+ this.questionInfo = res;
|
|
|
}
|
|
|
- this.questionInfo = null
|
|
|
- getLogin('/TestServer/Client/QuestionManager/GetQuestionInfo', {
|
|
|
- id: this.question_list[index].question_id
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- if(res.status===1){
|
|
|
- this.questionDetailList[index] = res
|
|
|
- this.questionInfo = res
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
- this.handleGetList()
|
|
|
+ this.handleGetList();
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
//生命周期-创建之前
|
|
|
- beforeCreated() { },
|
|
|
+ beforeCreated() {},
|
|
|
//生命周期-挂载之前
|
|
|
- beforeMount() { },
|
|
|
+ beforeMount() {},
|
|
|
//生命周期-更新之前
|
|
|
- beforUpdate() { },
|
|
|
+ beforUpdate() {},
|
|
|
//生命周期-更新之后
|
|
|
- updated() { },
|
|
|
+ updated() {},
|
|
|
//生命周期-销毁之前
|
|
|
- beforeDestory() {
|
|
|
+ beforeDestory() {
|
|
|
clearInterval(this.timer);
|
|
|
},
|
|
|
//生命周期-销毁完成
|
|
|
- destoryed() { },
|
|
|
+ destoryed() {},
|
|
|
//如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
- activated() { }
|
|
|
-}
|
|
|
+ activated() {},
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
/* @import url(); 引入css类 */
|
|
|
-.evaluDetail{
|
|
|
- min-height: calc(100vh - 144px);
|
|
|
+.evaluDetail {
|
|
|
+ min-height: calc(100vh - 144px);
|
|
|
}
|
|
|
-.content{
|
|
|
- width: 1200px;
|
|
|
- margin: 80px auto;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 16px;
|
|
|
- min-height: calc(100vh - 188px);
|
|
|
- &-top{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .chapter,.countdown{
|
|
|
- background: #F2F3F5 url('../../assets/evaluta-node.png') 8px center no-repeat;
|
|
|
- background-size: 16px;
|
|
|
- border-radius: 2px;
|
|
|
- padding: 8px 8px 8px 32px;
|
|
|
- color: #1D2129;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- .countdown{
|
|
|
- background: #F2F3F5 url('../../assets/countdown.png') 8px center no-repeat;
|
|
|
- background-size: 16px;
|
|
|
- min-width: 100px;
|
|
|
- }
|
|
|
+.content {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 80px auto;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 16px;
|
|
|
+ min-height: calc(100vh - 188px);
|
|
|
+ &-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .chapter,
|
|
|
+ .countdown {
|
|
|
+ background: #f2f3f5 url("../../assets/evaluta-node.png") 8px center
|
|
|
+ no-repeat;
|
|
|
+ background-size: 16px;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 8px 8px 8px 32px;
|
|
|
+ color: #1d2129;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
- &-center{
|
|
|
- height: calc(100vh - 350px);
|
|
|
- padding: 100px 200px;
|
|
|
- overflow: auto;
|
|
|
- .title-box{
|
|
|
- display: flex;
|
|
|
- margin-bottom: 24px;
|
|
|
- b{
|
|
|
- margin-right: 8px;
|
|
|
- color: #000;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 32px;
|
|
|
- }
|
|
|
- h5{
|
|
|
- margin: 0;
|
|
|
- color: #000;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 32px;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-radio-group{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .el-radio{
|
|
|
- width: 100%;
|
|
|
- padding: 8px 12px;
|
|
|
- border-radius: 4px;
|
|
|
- margin-bottom: 16px;
|
|
|
- color: #1D2129;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 24px;
|
|
|
- b{
|
|
|
- margin-right: 6px;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- &:hover{
|
|
|
- background: #E5E6EB;
|
|
|
- }
|
|
|
- &.is-checked{
|
|
|
- background: #E7EEFF;
|
|
|
- }
|
|
|
- }
|
|
|
+ .countdown {
|
|
|
+ background: #f2f3f5 url("../../assets/countdown.png") 8px center no-repeat;
|
|
|
+ background-size: 16px;
|
|
|
+ min-width: 100px;
|
|
|
}
|
|
|
- .btn-box{
|
|
|
- padding-top: 40px;
|
|
|
- text-align: right;
|
|
|
- .el-button{
|
|
|
- width: 124px;
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ &-center {
|
|
|
+ height: calc(100vh - 350px);
|
|
|
+ padding: 100px 200px;
|
|
|
+ overflow: auto;
|
|
|
+ .title-box {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ b {
|
|
|
+ margin-right: 8px;
|
|
|
+ color: #000;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ h5 {
|
|
|
+ margin: 0;
|
|
|
+ color: #000;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-radio-group {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-radio {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ color: #1d2129;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ b {
|
|
|
+ margin-right: 6px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background: #e5e6eb;
|
|
|
+ }
|
|
|
+ &.is-checked {
|
|
|
+ background: #e7eeff;
|
|
|
+ }
|
|
|
}
|
|
|
- .result-box{
|
|
|
- text-align: center;
|
|
|
+ }
|
|
|
+ .btn-box {
|
|
|
+ padding-top: 40px;
|
|
|
+ text-align: right;
|
|
|
+ .el-button {
|
|
|
+ width: 124px;
|
|
|
+ height: 32px;
|
|
|
}
|
|
|
- .result-info{
|
|
|
- background: #F2F3F5;
|
|
|
- border-radius: 8px;
|
|
|
- width: 572px;
|
|
|
- margin: 0 auto;
|
|
|
- padding: 64px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .result-item{
|
|
|
- width: 87px;
|
|
|
- text-align: right;
|
|
|
- .title{
|
|
|
- color: #1D2129;
|
|
|
- font-size: 20px;
|
|
|
- line-height: 28px;
|
|
|
- margin: 0 0 8px 0;
|
|
|
- }
|
|
|
- .number{
|
|
|
- color: #1D2129;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 36px;
|
|
|
- line-height: 44px;
|
|
|
- .unit{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: #4E5969;
|
|
|
- margin-left: 3px;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ .result-box {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .result-info {
|
|
|
+ background: #f2f3f5;
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 572px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 64px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .result-item {
|
|
|
+ width: 87px;
|
|
|
+ text-align: right;
|
|
|
+ .title {
|
|
|
+ color: #1d2129;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 28px;
|
|
|
+ margin: 0 0 8px 0;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ color: #1d2129;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 36px;
|
|
|
+ line-height: 44px;
|
|
|
+ .unit {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4e5969;
|
|
|
+ margin-left: 3px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
+.aduioLine-content {
|
|
|
+ width: 430px;
|
|
|
+ border: 1px solid #ebebeb;
|
|
|
+ border-radius: 30px;
|
|
|
+ padding: 8px 24px;
|
|
|
+ height: 48px;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
-.evaluDetail{
|
|
|
- .el-button--primary{
|
|
|
- background: #165DFF;
|
|
|
- border-color: #165DFF;
|
|
|
- border-radius: 2px;
|
|
|
- &:hover{
|
|
|
- background: #4080FF;
|
|
|
- border-color: #4080FF;
|
|
|
- }
|
|
|
- &:focus{
|
|
|
- background: #0E42D2;
|
|
|
- border-color: #0E42D2;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-button--default{
|
|
|
- background: #F2F3F5;
|
|
|
- border-radius: 2px;
|
|
|
- border: none;
|
|
|
- color: #4E5969;
|
|
|
- &:hover{
|
|
|
- background: #E5E6EB;
|
|
|
- }
|
|
|
- &:focus{
|
|
|
- background: #C9CDD4;
|
|
|
- }
|
|
|
+.evaluDetail {
|
|
|
+ .el-button--primary {
|
|
|
+ background: #165dff;
|
|
|
+ border-color: #165dff;
|
|
|
+ border-radius: 2px;
|
|
|
+ &:hover {
|
|
|
+ background: #4080ff;
|
|
|
+ border-color: #4080ff;
|
|
|
}
|
|
|
- .el-result__subtitle p{
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: #86909C;
|
|
|
+ &:focus {
|
|
|
+ background: #0e42d2;
|
|
|
+ border-color: #0e42d2;
|
|
|
}
|
|
|
- .el-radio__input.is-checked+.el-radio__label{
|
|
|
- color: #1D2129;
|
|
|
+ }
|
|
|
+ .el-button--default {
|
|
|
+ background: #f2f3f5;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: none;
|
|
|
+ color: #4e5969;
|
|
|
+ &:hover {
|
|
|
+ background: #e5e6eb;
|
|
|
}
|
|
|
- .el-radio__input.is-checked .el-radio__inner{
|
|
|
- border-color: #165DFF;
|
|
|
- background: #165DFF;
|
|
|
+ &:focus {
|
|
|
+ background: #c9cdd4;
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+ }
|
|
|
+ .el-result__subtitle p {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #86909c;
|
|
|
+ }
|
|
|
+ .el-radio__input.is-checked + .el-radio__label {
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+ .el-radio__input.is-checked .el-radio__inner {
|
|
|
+ border-color: #165dff;
|
|
|
+ background: #165dff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha
