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 style="text-align: left;  padding-bottom: 20px">
        <p v-html="beforeExamRemark"></p>
        <!-- <p>{{"测试".repeat(500)}}</p> -->
      </div>
      <i-button
        class="qm-primary-button"
        :disabled="isForceRead"
        @click="goToPaper"
        style="display: inline-block; width: 100%;"
      >
        {{ isForceRead ? "强制阅读" : "开始答题" }} （倒计时：{{
          remainTimeFormatted
        }}）
      </i-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/examOrgPropertyFromCache4StudentSession/" +
          this.$route.params.examId +
          `/BEFORE_EXAM_REMARK`
      );
      this.beforeExamRemark = exam.data.BEFORE_EXAM_REMARK || "";
      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 * 1000, 0) / 1000;
    } catch (e) {
      window._hmt.push([
        "_trackEvent",
        "在线考试概览页面",
        "获取考试概览信息异常",
      ]);
      this.$router.back();
      return;
    }

    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>