student-client/src/features/OnlineExam/OnlineExamOverview.vue

<template>

  <div class="container" v-if="beforeExamRemark && startInfo && paperStruct">
    <div class="instructions">
      <h1 class="">考试说明</h1>
      <div class="" style="text-align: left;  padding-bottom: 20px">
        <p v-html="beforeExamRemark"></p>
        <!-- <p>{{"测试".repeat(500)}}</p> -->
      </div>
      <!-- data-ui-sref="exam.start({examRecordDataId: startInfo.id,examStudentId:stateParams.examStudentId,examMins:startInfo.paperMins,examId:examInfo.id,faceVerifyMinute:startInfo.faceVerifyMinute})" -->

      <Button class="qm-primary-button" :disabled="remainTime > 110" @click="goToPaper" style="display: inline-block; width: 100%;">
        {{ remainTime > 110 ? '强制阅读' : '开始答题'}}（倒计时：{{remainTimeFormatted}}）</Button>
    </div>

    <div class="exam-detail">
      <h3 class="">科目：{{startInfo.courseName}}</h3>
      <br>
      <h4 class="">试卷概览（总分：{{paperTotalScore}}）</h4>
      <br>
      <ul class="list-group">
        <li class="list-group-item" v-for="(questionsGroup, index) in paperStruct.defaultPaper.questionGroupList" :key="questionsGroup.gruopName">
          {{index+1}}、{{questionsGroup.groupName}}
          <small class="pull-right">
            （共{{questionsGroup.questionWrapperList.length}}题，</span>共{{questionsGroup.groupScore}}分）
          </small>
        </li>
      </ul>
      <div>
        <img style="width:100%; padding-top: 40px;" src="./good-wish.png" />
      </div>
    </div>

  </div>

  <div v-else>
    正在等待数据返回...
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      beforeExamRemark: null,
      startInfo: null,
      paperStruct: null,
      remainTime: 120
    };
  },
  async mounted() {
    this.intervalId = setInterval(() => {
      this.remainTime = this.remainTime - 1; // 为了界面更新，不能写 this.remainTime--
      if (this.remainTime === 0) {
        this.goToPaper();
      }
    }, 1000);

    const exam = await this.$http.get(
      "/api/ecs_exam_work/exam/examOrgProperty/" +
        this.$route.params.examId +
        `/BEFORE_EXAM_REMARK`
    );
    this.beforeExamRemark = exam.data || "";
    try {
      // await this.$http.get("/api/ecs_oe_student/examControl/endExam");
      const res = await this.$http.get(
        "/api/ecs_oe_student/examControl/startExam?examStudentId=" +
          this.$route.query.examStudentId
      );
      // var res = {
      //   data: {
      //     examRecordDataId: 7,
      //     courseCode: "W00001",
      //     courseName: "英语",
      //     studentCode: "20180613",
      //     studentName: "王章军",
      //     duration: 120,
      //     faceLivenessMinute: null
      //   }
      // };
      this.startInfo = res.data;
      this.examRecordDataId = res.data.examRecordDataId;
      // this.startInfo = {
      //   id: 101436,
      //   courseName: "计算机应用基础",
      //   studentCode: "20180613",
      //   studentName: "王章军",
      //   specialtyLevel: "ALL",
      //   paperMins: 60,
      //   invigilatorOperation: 0,
      //   retakeTypeId: null,
      //   retakeDetail: null,
      //   faceVerifyMinute: null
      // };
      // this.examRcordId = this.startInfo.id;
    } catch (error) {
      console.log(error);
      this.$Message.error(error.message);
    }
    const paperStruct = await this.$http.get(
      "/api/ecs_oe_student/examRecordPaperStruct/getExamRecordPaperStruct?examRecordDataId=" +
        this.examRecordDataId
    );
    this.paperStruct = paperStruct.data;

    // this.paperStruct = [
    //   {
    //     index: 1,
    //     questionType: null,
    //     title: "选择题",
    //     totalScore: 45,
    //     count: 36,
    //     questionCount: 36,
    //     score: null,
    //     succQuestionNum: 0,
    //     failQuestionNum: 0,
    //     notAnsweredCount: 0
    //   },
    //   {
    //     index: 2,
    //     questionType: null,
    //     title: "判断题",
    //     totalScore: 20,
    //     count: 20,
    //     questionCount: 20,
    //     score: null,
    //     succQuestionNum: 0,
    //     failQuestionNum: 0,
    //     notAnsweredCount: 0
    //   },
    //   {
    //     index: 3,
    //     questionType: null,
    //     title: "多项选择题",
    //     totalScore: 10,
    //     count: 5,
    //     questionCount: 5,
    //     score: null,
    //     succQuestionNum: 0,
    //     failQuestionNum: 0,
    //     notAnsweredCount: 0
    //   },
    //   {
    //     index: 4,
    //     questionType: null,
    //     title: "简答题",
    //     totalScore: 25,
    //     count: 3,
    //     questionCount: 3,
    //     score: null,
    //     succQuestionNum: 0,
    //     failQuestionNum: 0,
    //     notAnsweredCount: 0
    //   }
    // ];

    this.paperTotalScore = this.paperStruct.defaultPaper.questionGroupList
      .map(q => q.groupScore)
      .reduce((p, c) => p + c);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
  computed: {
    remainTimeFormatted: function() {
      return moment.utc(this.remainTime * 1000).format("HH:mm:ss");
    }
  },
  methods: {
    goToPaper: function() {
      this.$router.push(
        `/online-exam/exam/${this.$route.params.examId}/?examRecordDataId=${
          this.examRecordDataId
        }&examStudentId=${this.$route.query.examStudentId}`
      );
      window.clearInterval(this.intervalId);
    }
  }
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 1fr 300px;
  width: 100wh;
  height: 100vh;
}

.instructions {
  display: grid;
  grid-template-rows: 40px minmax(200px, auto) 1fr;
  padding: 40px 20px;
}

.exam-detail {
  padding: 40px 20px;
  background-color: #f5f5f5;

  text-align: left;
}

.list-group {
  list-style: none;
}

.list-group li {
  border-bottom: 1px solid #eeeeee;
  padding-top: 10px;
}
.pull-right {
  text-align: right;
  float: right;
}
</style>