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

<template>

  <div
    class="container"
    id="exam-overview"
    v-if="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>
      <Button
        class="qm-primary-button"
        :disabled="isForceRead"
        @click="goToPaper"
        style="display: inline-block; width: 100%;"
      >
        {{ isForceRead ? '强制阅读' : '开始答题'}}（倒计时：{{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}}题，共{{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";

const TOTAL_READ_TIME = 120;
const FORCE_READ_TIME = process.env.NODE_ENV === "production" ? 10 : 1;

export default {
  name: "OnlineExamOverview",
  data() {
    return {
      beforeExamRemark: null,
      startInfo: null,
      paperStruct: null,
      remainTime: TOTAL_READ_TIME,
      isForceRead: true
    };
  },
  async mounted() {
    window._hmt.push(["_trackEvent", "在线考试概览页面", "进入页面"]);
    this.intervalId = setInterval(() => {
      this.remainTime -= 1;
      this.isForceRead = TOTAL_READ_TIME - this.remainTime < FORCE_READ_TIME;
      if (this.remainTime === 0) {
        this.goToPaper();
      }
    }, 1000);

    try {
      const exam = await this.$http.get(
        "/api/ecs_exam_work/exam/examOrgProperty/" +
          this.$route.params.examId +
          `/BEFORE_EXAM_REMARK`
      );
      this.beforeExamRemark = exam.data || "";
      // 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
      );

      this.startInfo = res.data;
      this.examRecordDataId = res.data.examRecordDataId;

      const paperStruct = await this.$http.get(
        "/api/ecs_oe_student/examRecordPaperStruct/getExamRecordPaperStruct?examRecordDataId=" +
          this.examRecordDataId
      );
      this.paperStruct = paperStruct.data;

      this.paperTotalScore = this.paperStruct.defaultPaper.questionGroupList
        .map(q => q.groupScore)
        .reduce((p, c) => p + c);
    } catch (e) {
      this.$Message.error("获取考试概览信息异常");
      this.$router.back();
      return;
    }
    // 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;

    document.body.style = "";
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
  computed: {
    remainTimeFormatted: function() {
      return moment.utc(this.remainTime * 1000).format("HH:mm:ss");
    }
  },
  methods: {
    goToPaper: function() {
      this.$router.replace(
        `/online-exam/exam/${this.$route.params.examId}/examRecordData/${
          this.examRecordDataId
        }/order/1` +
          (this.startInfo.faceVerifyMinute
            ? `?faceVerifyMinute=${this.startInfo.faceVerifyMinute}`
            : "")
      );
    }
  }
};
</script>

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

.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>

<style>
#exam-overview img {
  max-width: 100%;
  height: auto !important;
}
</style>