tnbapp/src/views/exam/ExamResultPage.vue

<template>
  <el-container>
    <el-header height="150">
      <el-card style="height: 150px">
        <span class="examName">{{ examRecord.examName }}</span>
        <span class="examTime">{{ examRecord.examTime }}</span>
        <el-row style="margin-top: 55px;">
          <el-tooltip class="item" effect="dark" content="包括选择题和判断题" placement="top-start">
            <span style="font-weight: 800;font-size: 17px">
              客观题得分: {{ examRecord.logicScore }}分</span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="简答题与逻辑题" placement="top-start">
            <span style="float: right;font-weight: 800;font-size: 17px">
              试卷总分: {{ examRecord.totalScore }}分</span>
          </el-tooltip>
        </el-row>
      </el-card>
    </el-header>

    <el-main>
      <el-card>
        <!--题目信息-->
        <div v-for="(item,index) in questionInfo" :key="index" style="margin-top: 15px">
          <div>
            <i class="num">{{ index + 1 }}</i>
            <span style="color: red;font-style: italic;font-weight: 400;">&nbsp;{{
              item.score
            }}分</span>
            <span v-if="item.questionType === 1">【单选题】</span>
            <span v-else-if="item.questionType === 2">【多选题】</span>
            <span v-else-if="item.questionType === 3">【不定项选择题】</span>
            <span v-else-if="item.questionType === 4">【判断题】</span>
            <span v-else-if="item.questionType === 5">【填空题】</span>
            <span v-else-if="item.questionType === 6">【问答题】</span>
            <span v-else-if="item.questionType === 7">【理解题】</span>
            <span v-else>【综合题】</span>
            <span v-html="item.questionContent" />
          </div>
          <!--题目中的配图-->
          <img
            v-for="url in item.images"
            :src="url"
            title="点击查看大图"
            alt="题目图片"
            style="width: 100px;height: 100px;cursor: pointer"
            @click="showBigImg(url)"
          >

          <!-- 单选和判断题候选答案列表 -->
          <div
            v-show="item.questionType === 1 || item.questionType === 4"
            style="margin-top: 25px"
          >
            <div class="el-radio-group">
              <label
                v-for="(i2,index2) in item.answer"
                :class="String(index2) === userAnswer[index] && i2.correct ?
                  'activeAndTrue' : String(index2) === userAnswer[index] ? 'active' :
                    i2.correct ? 'true' : ''"
              >
                <span>{{ optionName[index2] + '、' + i2.answer }}</span>
                <img
                  v-for="i3 in i2.images"
                  v-if="i2.images !== null"
                  style="position: absolute;left:100%;top:50%;transform: translateY(-50%);
                  width: 40px;height: 40px;float: right;cursor: pointer;"
                  title="点击查看大图"
                  :src="i3"
                  alt=""
                  @mouseover="showBigImg(i3)"
                >
              </label>
            </div>
          </div>

          <!-- 多选和不定项选择题的候选答案列表 -->
          <div
            v-show="item.questionType === 2 || item.questionType === 3"
            style="margin-top: 25px"
          >
            <div class="el-radio-group">
              <label
                v-for="(i2,index2) in item.answer"
                :class="(userAnswer[index]+'').indexOf(index2+'') !== -1 && i2.correct
                  ? 'activeAndTrue' : (userAnswer[index]+'').indexOf(index2+'') !== -1 ? 'active' :
                    i2.correct ? 'true' : ''"
              >
                <span>{{ optionName[index] + '、' + i2.answer }}</span>
                <img
                  v-for="i3 in i2.images"
                  v-if="i2.images !== null"
                  style="position: absolute;left:100%;top:50%;transform: translateY(-50%);
                  width: 40px;height: 40px;float: right;cursor: pointer;"
                  title="点击查看大图"
                  :src="i3"
                  alt=""
                  @mouseover="showBigImg(i3)"
                >
              </label>
            </div>
          </div>

          <!-- 填空题和问答题的回答区 -->
          <div
            v-show="item.questionType === 5 || item.questionType === 6"
            style="margin-top: 25px"
          >
            <div class="ques-analysis">
              <h3 style="font-weight: 400">我的回答：</h3>
              <p style="font-weight: 400;color: orange"> {{ userAnswer[index] }} </p>
            </div>
            <div v-if="markExam">
              <span>评分：</span>
              <el-input-number
                v-model="item.score"
                :min="0"
                :max="parseInt(item.score)"
              />
              <el-input
                v-model="markForm.review"
                type="textarea"
                :rows="3"
                placeholder="请输入评语"
              />
            </div>
          </div>
        </div>
      </el-card>
    </el-main>

    <!--图片回显-->
    <el-dialog :visible.sync="bigImgDialog" @close="bigImgDialog = false">
      <img style="width: 100%" :src="bigImgUrl">
    </el-dialog>
  </el-container>
</template>

<script>
import { getExamResult, getPaperQuestions } from '@/api/exam'

export default {
  name: 'ExamResult',
  data() {
    return {
      // 考试记录信息
      examRecord: {},
      // 考试的信息
      examInfo: {},
      // 当前考试的题目
      questionInfo: [],
      // 页面加载
      loading: {},
      // 答案的选项名abcd数据
      optionName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      // 图片回显的url
      bigImgUrl: '',
      // 图片回显的对话框是否显示
      bigImgDialog: false,
      // 用户回答的答案
      userAnswer: [],
      markExam: true,
      markForm: {
        review: null
      }
    }
  },
  created() {
    document.title = '考试结果'
    this.getExamRecord()
    // 页面数据加载的等待状态栏
    this.loading = this.$loading({
      body: true,
      lock: true,
      text: '数据拼命加载中,(*╹▽╹*)',
      spinner: 'el-icon-loading'
    })
  },
  methods: {
    renderByMathjax() {
      // tinymce 的 mathjax 插件生成的 latex 格式公式放在 className 为 math-tex 的 span 标签内
      const className = 'math-tex'
      this.$nextTick(function() {
        if (this.MathJax.isMathjaxConfig) {
          this.MathJax.initMathjaxConfig()
        }
        this.MathJax.MathQueue1(className)
      })
    },
    // 查询用户当时考试的信息
    async getExamRecord() {
      const examId = this.$route.params.examId
      await getExamResult(examId).then((resp) => {
        if (resp.code === 0) {
          this.examRecord = resp.data
          // this.userAnswer = resp.data.userAnswers.split('-')
          this.userAnswer = resp.data.userAnswers.split(',')
          const paperId = resp.data.examId
          this.getPaperQuestions(paperId)
          // 数据加载完毕
          this.loading.close()
          this.renderByMathjax()
        }
      })
    },
    async getPaperQuestions(paperId) {
      await getPaperQuestions(paperId).then((resp) => {
        if (resp.code === 0) {
          this.questionInfo = resp.data || []
          // 重置问题的顺序 单选 多选 判断 简答
          this.questionInfo = this.questionInfo.sort(function(a, b) {
            return a.questionType - b.questionType
          })
        }
      })
    },
    // 点击展示高清大图
    showBigImg(url) {
      this.bigImgUrl = url
      this.bigImgDialog = true
    },
    // 根据考试id查询考试中每一题的分数
    async getQuestionScore(examId) {
    }
  }
}
</script>

<style scoped lang="scss">

* {
  font-weight: 800;
}

.el-container {
  width: 100%;
  height: 100%;
}

.el-container {
  animation: leftMoveIn .7s ease-in;
}

@keyframes leftMoveIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.examName {
  color: #160f58;
  border-bottom: 4px solid #ffd550;
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 10px
}

.examTime {
  font-size: 16px;
  color: #cbcacf;
  margin-left: 20px;
  font-weight: 700;
}

.el-radio-group label {
  display: block;
  width: 400px;
  padding: 48px 20px 10px 20px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
  position: relative;

  span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
  }
}

.num {
  display: inline-block;
  background: url('../../assets/img/examTitle.png') no-repeat 100% 100%;
  background-size: contain;
  height: 37px;
  width: 37px;
  line-height: 30px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  margin-right: 15px;
}

/*选中的答案*/
.active {
  border: 1px solid #ff1f39 !important;
  opacity: .5;
}

/*  选中的答案且是正确答案*/
.activeAndTrue {
  border: 1px solid #1f90ff !important;
  opacity: .5;
  height: 15px;
  width: 15px;
  background-size: contain;
  background: url('../../assets/img/true.png') no-repeat 95%;
  position: absolute;
  top: 0;
  left: 0;
}

.true {
  height: 15px;
  width: 15px;
  background-size: contain;
  background: url('../../assets/img/true.png') no-repeat 95%;
  position: absolute;
  top: 0;
  left: 0;
}

.ques-analysis {
  padding: 30px 40px;
  background: #f6f6f8;
  margin-bottom: 70px;
}
</style>