From 6c472dfd39e90d1d479c2c0ced8ce317fc4a2bfe Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期三, 26 六月 2024 15:23:47 +0800
Subject: [PATCH] 页面优化
---
src/views/answer/detail.vue | 419 +++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 320 insertions(+), 99 deletions(-)
diff --git a/src/views/answer/detail.vue b/src/views/answer/detail.vue
index 39df00e..84773ca 100644
--- a/src/views/answer/detail.vue
+++ b/src/views/answer/detail.vue
@@ -1,124 +1,345 @@
<template>
- <div style="background-color: #FFFFFF; padding-top: 50px;min-height: 900px;">
- <el-row class="do-exam-title" style="background-color: #F5F5DC">
- <el-col :span="24">
+ <div style="background-color: #FFFFFF; padding-top: 50px;min-height: 900px;">
+ <el-row class="do-exam-title" style="background-color: #F5F5DC">
+ <el-col :span="24">
<span :key="item.itemOrder" v-for="item in answer.answerItems">
<el-tag :type="questionDoRightTag(item.doRight)" class="do-exam-title-tag"
- @click="goAnchor('#question-' + item.itemOrder)">{{ item.itemOrder }}</el-tag>
+ @click="goAnchor('#question-' + item.itemOrder)">{{ item.itemOrder }}</el-tag>
</span>
- </el-col>
- </el-row>
- <el-container class="app-item-contain">
- <el-header class="align-center">
- <h1>{{ form.name }}</h1>
- <div>
- <span class="question-title-padding">璇曞嵎寰楀垎锛歿{ answer.score }}</span>
- <span class="question-title-padding">璇曞嵎鑰楁椂锛歿{ formatSeconds(answer.doTime) }}</span>
- </div>
- </el-header>
- <el-main>
- <el-form :model="form" ref="form" v-loading="formLoading" label-width="100px">
- <el-row :key="index" v-for="(titleItem, index) in form.titleItems">
- <h3>{{ titleItem.name }}</h3>
- <el-card class="exampaper-item-box" v-if="titleItem.questionItems.length !== 0">
- <el-form-item :key="questionItem.itemOrder" :label="questionItem.itemOrder + '.'"
- v-for="questionItem in titleItem.questionItems" class="exam-question-item"
- label-width="50px" :id="'question-' + questionItem.itemOrder">
- <QuestionAnswerShow :qType="questionItem.questionType" :question="questionItem"
- :answer="answer.answerItems[questionItem.itemOrder - 1]" />
- </el-form-item>
- </el-card>
- </el-row>
- </el-form>
- </el-main>
- </el-container>
- </div>
+ </el-col>
+ </el-row>
+ <el-container class="app-item-contain">
+ <el-header class="align-center">
+ <h1>{{ form.name }}</h1>
+ <div>
+ <span class="question-title-padding">璇曞嵎寰楀垎锛歿{ answer.score }}</span>
+ <span class="question-title-padding">璇曞嵎鑰楁椂锛歿{ formatSeconds(answer.doTime) }}</span>
+ </div>
+ </el-header>
+ <el-main>
+ <el-form :model="form" ref="form" v-loading="formLoading" label-width="100px">
+ <el-row :key="index" v-for="(titleItem, index) in form.titleItems">
+ <h3>{{ titleItem.name }}</h3>
+ <el-card class="exampaper-item-box" v-if="titleItem.questionItems.length !== 0">
+ <el-form-item :key="questionItem.itemOrder" :label="questionItem.itemOrder + '.'"
+ v-for="questionItem in titleItem.questionItems" class="exam-question-item"
+ label-width="50px" :id="'question-' + questionItem.itemOrder">
+ <QuestionAnswerShow :qType="questionItem.questionType" :question="questionItem"
+ :answer="answer.answerItems[questionItem.itemOrder - 1]"/>
+ </el-form-item>
+ </el-card>
+ </el-row>
+ </el-form>
+ </el-main>
+ </el-container>
+ </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import QuestionAnswerShow from './components/QuestionAnswerShow'
import examPaperAnswerApi from '@/api/examPaperAnswer'
+
export default {
- components: { QuestionAnswerShow },
- data() {
- return {
- form: {},
- formLoading: false,
- answer: {
- id: null,
- score: 0,
- doTime: 0,
- answerItems: [],
- doRight: false
- }
- }
- },
- created() {
- let id = this.$route.query.id
- let _this = this
- if (id && parseInt(id) !== 0) {
- _this.formLoading = true
- examPaperAnswerApi.read(id).then(re => {
- re = {"code":1,"message":"鎴愬姛","data":{"paper":{"id":30,"level":1,"subjectId":4,"paperType":7,"name":"杩欐槸涓�涓祴璇曡瘯鍗�","suggestTime":12,"limitDateTime":null,"titleItems":[{"name":"鍗曢�夐","questionItems":[{"id":25,"questionType":1,"subjectId":4,"title":"涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�","gradeLevel":1,"items":[{"prefix":"A","content":"绾㈡ゼ姊�","score":null,"itemUuid":null},{"prefix":"B","content":"鐧芥ゼ姊�","score":null,"itemUuid":null},{"prefix":"C","content":"闈掓ゼ姊�","score":null,"itemUuid":null},{"prefix":"D","content":"缁挎ゼ姊�","score":null,"itemUuid":null}],"analyze":"棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽","correctArray":null,"correct":"A","score":"2.5","difficult":3,"itemOrder":1,"knowledgeIdList":[8,9]},{"id":30,"questionType":1,"subjectId":4,"title":"涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�","gradeLevel":1,"items":[{"prefix":"A","content":"绾㈡ゼ姊�","score":null,"itemUuid":null},{"prefix":"B","content":"鐧芥ゼ姊�","score":null,"itemUuid":null},{"prefix":"C","content":"闈掓ゼ姊�","score":null,"itemUuid":null},{"prefix":"D","content":"缁挎ゼ姊�","score":null,"itemUuid":null}],"analyze":"棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽","correctArray":null,"correct":"A","score":"2.5","difficult":3,"itemOrder":2,"knowledgeIdList":[8,9]}]},{"name":"澶氶�夐","questionItems":[{"id":26,"questionType":2,"subjectId":4,"title":"涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�","gradeLevel":1,"items":[{"prefix":"A","content":"绾㈡ゼ姊�","score":null,"itemUuid":null},{"prefix":"B","content":"鐧芥ゼ姊�","score":null,"itemUuid":null},{"prefix":"C","content":"闈掓ゼ姊�","score":null,"itemUuid":null},{"prefix":"D","content":"缁挎ゼ姊�","score":null,"itemUuid":null}],"analyze":"棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽","correctArray":["A","C"],"correct":"A,C","score":"2.5","difficult":3,"itemOrder":3,"knowledgeIdList":[8,9]},{"id":31,"questionType":2,"subjectId":4,"title":"涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�","gradeLevel":1,"items":[{"prefix":"A","content":"绾㈡ゼ姊�","score":null,"itemUuid":null},{"prefix":"B","content":"鐧芥ゼ姊�","score":null,"itemUuid":null},{"prefix":"C","content":"闈掓ゼ姊�","score":null,"itemUuid":null},{"prefix":"D","content":"缁挎ゼ姊�","score":null,"itemUuid":null}],"analyze":"棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽","correctArray":["A","C"],"correct":"A,C","score":"2.5","difficult":3,"itemOrder":4,"knowledgeIdList":[8,9]}]},{"name":"鍒ゆ柇棰�","questionItems":[{"id":27,"questionType":3,"subjectId":4,"title":"涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楄鏄庢纭悧","gradeLevel":1,"items":[{"prefix":"A","content":"姝ｇ‘","score":null,"itemUuid":null},{"prefix":"B","content":"閿欒","score":null,"itemUuid":null}],"analyze":"棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽","correctArray":null,"correct":"A","score":"2.5","difficult":3,"itemOrder":5,"knowledgeIdList":[8,9]},{"id":32,"questionType":3,"subjectId":4,"title":"涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楄鏄庢纭悧","gradeLevel":1,"items":[{"prefix":"A","content":"姝ｇ‘","score":null,"itemUuid":null},{"prefix":"B","content":"閿欒","score":null,"itemUuid":null}],"analyze":"棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽","correctArray":null,"correct":"A","score":"2.5","difficult":3,"itemOrder":6,"knowledgeIdList":[8,9]}]}],"score":"15","classes":null},"answer":{"id":9,"doTime":26,"score":"100","createUser":null,"answerItems":[{"id":25,"questionId":25,"doRight":true,"content":"A","itemOrder":1,"contentArray":null,"score":"2.5","questionScore":"2.5"},{"id":26,"questionId":30,"doRight":false,"content":"C","itemOrder":2,"contentArray":null,"score":"0","questionScore":"2.5"},{"id":27,"questionId":26,"doRight":false,"content":"","itemOrder":3,"contentArray":[""],"score":"0","questionScore":"2.5"},{"id":28,"questionId":31,"doRight":false,"content":"C,D","itemOrder":4,"contentArray":["C","D"],"score":"0","questionScore":"2.5"},{"id":29,"questionId":27,"doRight":true,"content":"A","itemOrder":5,"contentArray":null,"score":"2.5","questionScore":"2.5"},{"id":30,"questionId":32,"doRight":true,"content":"A","itemOrder":6,"contentArray":null,"score":"2.5","questionScore":"2.5"}],"doTimeStr":"26绉�"}}}
- _this.form = re.data.paper
- _this.answer = re.data.answer
- _this.formLoading = false
- })
- }
- },
- methods: {
- formatSeconds(theTime) {
- let theTime1 = 0
- let theTime2 = 0
- if (theTime > 60) {
- theTime1 = parseInt(theTime / 60)
- theTime = parseInt(theTime % 60)
- if (theTime1 > 60) {
- theTime2 = parseInt(theTime1 / 60)
- theTime1 = parseInt(theTime1 % 60)
- }
- }
- let result = '' + parseInt(theTime) + '绉�'
- if (theTime1 > 0) {
- result = '' + parseInt(theTime1) + '鍒�' + result
- }
- if (theTime2 > 0) {
- result = '' + parseInt(theTime2) + '灏忔椂' + result
- }
- return result
- },
- questionDoRightTag(status) {
- return this.enumFormat(this.doRightTag, status)
- },
- goAnchor(selector) {
- this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
- }
- },
- computed: {
- ...mapGetters('enumItem', ['enumFormat']),
- ...mapState('enumItem', {
- doRightTag: state => state.exam.question.answer.doRightTag
- })
+ components: { QuestionAnswerShow },
+ data () {
+ return {
+ form: {},
+ formLoading: false,
+ answer: {
+ id: null,
+ score: 0,
+ doTime: 0,
+ answerItems: [],
+ doRight: false
+ }
}
+ },
+ created () {
+ let id = this.$route.query.id
+ let _this = this
+ if (id && parseInt(id) !== 0) {
+ _this.formLoading = true
+ examPaperAnswerApi.read(id).then(re => {
+ re = {
+ 'code': 1, 'message': '鎴愬姛', 'data': {
+ 'paper': {
+ 'id': 30,
+ 'level': 1,
+ 'subjectId': 4,
+ 'paperType': 7,
+ 'name': '杩欐槸涓�涓祴璇曡瘯鍗�',
+ 'suggestTime': 12,
+ 'limitDateTime': null,
+ 'titleItems': [{
+ 'name': '鍗曢�夐',
+ 'questionItems': [{
+ 'id': 25,
+ 'questionType': 1,
+ 'subjectId': 4,
+ 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�',
+ 'gradeLevel': 1,
+ 'items': [{ 'prefix': 'A', 'content': '绾㈡ゼ姊�', 'score': null, 'itemUuid': null }, {
+ 'prefix': 'B',
+ 'content': '鐧芥ゼ姊�',
+ 'score': null,
+ 'itemUuid': null
+ }, { 'prefix': 'C', 'content': '闈掓ゼ姊�', 'score': null, 'itemUuid': null }, {
+ 'prefix': 'D',
+ 'content': '缁挎ゼ姊�',
+ 'score': null,
+ 'itemUuid': null
+ }],
+ 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽',
+ 'correctArray': null,
+ 'correct': 'A',
+ 'score': '2.5',
+ 'difficult': 3,
+ 'itemOrder': 1,
+ 'knowledgeIdList': [8, 9]
+ }, {
+ 'id': 30,
+ 'questionType': 1,
+ 'subjectId': 4,
+ 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�',
+ 'gradeLevel': 1,
+ 'items': [{ 'prefix': 'A', 'content': '绾㈡ゼ姊�', 'score': null, 'itemUuid': null }, {
+ 'prefix': 'B',
+ 'content': '鐧芥ゼ姊�',
+ 'score': null,
+ 'itemUuid': null
+ }, { 'prefix': 'C', 'content': '闈掓ゼ姊�', 'score': null, 'itemUuid': null }, {
+ 'prefix': 'D',
+ 'content': '缁挎ゼ姊�',
+ 'score': null,
+ 'itemUuid': null
+ }],
+ 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽',
+ 'correctArray': null,
+ 'correct': 'A',
+ 'score': '2.5',
+ 'difficult': 3,
+ 'itemOrder': 2,
+ 'knowledgeIdList': [8, 9]
+ }]
+ }, {
+ 'name': '澶氶�夐',
+ 'questionItems': [{
+ 'id': 26,
+ 'questionType': 2,
+ 'subjectId': 4,
+ 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�',
+ 'gradeLevel': 1,
+ 'items': [{ 'prefix': 'A', 'content': '绾㈡ゼ姊�', 'score': null, 'itemUuid': null }, {
+ 'prefix': 'B',
+ 'content': '鐧芥ゼ姊�',
+ 'score': null,
+ 'itemUuid': null
+ }, { 'prefix': 'C', 'content': '闈掓ゼ姊�', 'score': null, 'itemUuid': null }, {
+ 'prefix': 'D',
+ 'content': '缁挎ゼ姊�',
+ 'score': null,
+ 'itemUuid': null
+ }],
+ 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽',
+ 'correctArray': ['A', 'C'],
+ 'correct': 'A,C',
+ 'score': '2.5',
+ 'difficult': 3,
+ 'itemOrder': 3,
+ 'knowledgeIdList': [8, 9]
+ }, {
+ 'id': 31,
+ 'questionType': 2,
+ 'subjectId': 4,
+ 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楁纭殑鏄�',
+ 'gradeLevel': 1,
+ 'items': [{ 'prefix': 'A', 'content': '绾㈡ゼ姊�', 'score': null, 'itemUuid': null }, {
+ 'prefix': 'B',
+ 'content': '鐧芥ゼ姊�',
+ 'score': null,
+ 'itemUuid': null
+ }, { 'prefix': 'C', 'content': '闈掓ゼ姊�', 'score': null, 'itemUuid': null }, {
+ 'prefix': 'D',
+ 'content': '缁挎ゼ姊�',
+ 'score': null,
+ 'itemUuid': null
+ }],
+ 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽',
+ 'correctArray': ['A', 'C'],
+ 'correct': 'A,C',
+ 'score': '2.5',
+ 'difficult': 3,
+ 'itemOrder': 4,
+ 'knowledgeIdList': [8, 9]
+ }]
+ }, {
+ 'name': '鍒ゆ柇棰�',
+ 'questionItems': [{
+ 'id': 27,
+ 'questionType': 3,
+ 'subjectId': 4,
+ 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楄鏄庢纭悧',
+ 'gradeLevel': 1,
+ 'items': [{ 'prefix': 'A', 'content': '姝ｇ‘', 'score': null, 'itemUuid': null }, {
+ 'prefix': 'B',
+ 'content': '閿欒',
+ 'score': null,
+ 'itemUuid': null
+ }],
+ 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽',
+ 'correctArray': null,
+ 'correct': 'A',
+ 'score': '2.5',
+ 'difficult': 3,
+ 'itemOrder': 5,
+ 'knowledgeIdList': [8, 9]
+ }, {
+ 'id': 32,
+ 'questionType': 3,
+ 'subjectId': 4,
+ 'title': '涓崕鍥涘ぇ鍚嶈憲閮芥湁鍝簺锛屼笅鍒楄鏄庢纭悧',
+ 'gradeLevel': 1,
+ 'items': [{ 'prefix': 'A', 'content': '姝ｇ‘', 'score': null, 'itemUuid': null }, {
+ 'prefix': 'B',
+ 'content': '閿欒',
+ 'score': null,
+ 'itemUuid': null
+ }],
+ 'analyze': '棰樼洰姣旇緝绠�鍗曪紝鑷鍒嗘瀽',
+ 'correctArray': null,
+ 'correct': 'A',
+ 'score': '2.5',
+ 'difficult': 3,
+ 'itemOrder': 6,
+ 'knowledgeIdList': [8, 9]
+ }]
+ }],
+ 'score': '15',
+ 'classes': null
+ },
+ 'answer': {
+ 'id': 9,
+ 'doTime': 26,
+ 'score': '100',
+ 'createUser': null,
+ 'answerItems': [{
+ 'id': 25,
+ 'questionId': 25,
+ 'doRight': true,
+ 'content': 'A',
+ 'itemOrder': 1,
+ 'contentArray': null,
+ 'score': '2.5',
+ 'questionScore': '2.5'
+ }, {
+ 'id': 26,
+ 'questionId': 30,
+ 'doRight': false,
+ 'content': 'C',
+ 'itemOrder': 2,
+ 'contentArray': null,
+ 'score': '0',
+ 'questionScore': '2.5'
+ }, {
+ 'id': 27,
+ 'questionId': 26,
+ 'doRight': false,
+ 'content': '',
+ 'itemOrder': 3,
+ 'contentArray': [''],
+ 'score': '0',
+ 'questionScore': '2.5'
+ }, {
+ 'id': 28,
+ 'questionId': 31,
+ 'doRight': false,
+ 'content': 'C,D',
+ 'itemOrder': 4,
+ 'contentArray': ['C', 'D'],
+ 'score': '0',
+ 'questionScore': '2.5'
+ }, {
+ 'id': 29,
+ 'questionId': 27,
+ 'doRight': true,
+ 'content': 'A',
+ 'itemOrder': 5,
+ 'contentArray': null,
+ 'score': '2.5',
+ 'questionScore': '2.5'
+ }, {
+ 'id': 30,
+ 'questionId': 32,
+ 'doRight': true,
+ 'content': 'A',
+ 'itemOrder': 6,
+ 'contentArray': null,
+ 'score': '2.5',
+ 'questionScore': '2.5'
+ }],
+ 'doTimeStr': '26绉�'
+ }
+ }
+ }
+ _this.form = re.data.paper
+ _this.answer = re.data.answer
+ _this.formLoading = false
+ })
+ }
+ },
+ methods: {
+ formatSeconds (theTime) {
+ let theTime1 = 0
+ let theTime2 = 0
+ if (theTime > 60) {
+ theTime1 = parseInt(theTime / 60)
+ theTime = parseInt(theTime % 60)
+ if (theTime1 > 60) {
+ theTime2 = parseInt(theTime1 / 60)
+ theTime1 = parseInt(theTime1 % 60)
+ }
+ }
+ let result = '' + parseInt(theTime) + '绉�'
+ if (theTime1 > 0) {
+ result = '' + parseInt(theTime1) + '鍒�' + result
+ }
+ if (theTime2 > 0) {
+ result = '' + parseInt(theTime2) + '灏忔椂' + result
+ }
+ return result
+ },
+ questionDoRightTag (status) {
+ return this.enumFormat(this.doRightTag, status)
+ },
+ goAnchor (selector) {
+ this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
+ }
+ },
+ computed: {
+ ...mapGetters('enumItem', ['enumFormat']),
+ ...mapState('enumItem', {
+ doRightTag: state => state.exam.question.answer.doRightTag
+ })
+ }
}
</script>
<style lang="scss" scoped>
.align-center {
- text-align: center
+ text-align: center
}
.exam-question-item {
- padding: 10px;
+ padding: 10px;
- .el-form-item__label {
- font-size: 15px !important;
- }
+ .el-form-item__label {
+ font-size: 15px !important;
+ }
}
.question-title-padding {
- padding-left: 25px;
- padding-right: 25px;
+ padding-left: 25px;
+ padding-right: 25px;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0