student-client/src/features/OnlineExam/Examing/ExamingHome.vue

<template>
  <div v-if="exam && examQuestion()" :key="exam.id" class="container">
    <div class="header">
      <RemainTime></RemainTime>
      <OverallProgress :exam-question-list="examQuestionList"></OverallProgress>
      <div>
        {{ this.$store.state.user.displayName }} -&nbsp;
        {{ this.$store.state.user.studentCodeList.join(",") }}
      </div>
      <QuestionFilters :exam-question-list="examQuestionList"></QuestionFilters>
      <i-button class="qm-primary-button" @click="submitPaper">交卷</i-button>
    </div>
    <div id="examing-home-question" class="main">
      <QuestionView :exam-question="examQuestion()"></QuestionView>
      <ArrowNavView
        :previous-question-order="previousQuestionOrder"
        :next-question-order="nextQuestionOrder"
      ></ArrowNavView>
    </div>
    <div :class="['side']">
      <div :class="['question-nav']">
        <QuestionNavView :paper-struct="paperStruct" />
      </div>
      <div
        v-if="faceEnable && startVideoAfterDelay"
        class="camera"
        :style="{ display: showFaceMotion ? 'none' : 'block' }"
      >
        <FaceRecognition
          v-if="faceEnable"
          width="400"
          height="300"
          :show-recognize-button="false"
        />
      </div>
      <div v-if="faceEnable && !startVideoAfterDelay" class="camera">
        <div
          style="width: 400px; height: 300px; border: 1px solid lightgrey; display: flex; align-items: center; justify-content: center;"
        >
          <div>
            正在打开摄像头...
          </div>
        </div>
      </div>
    </div>
    <Modal
      v-model="showFaceId"
      :mask-closable="false"
      :closable="false"
      width="800"
      :styles="{ top: '10px' }"
    >
      <FaceId v-if="showFaceId" @closeFaceId="closeFaceId" />
      <p slot="footer"></p>
    </Modal>
    <Modal
      v-model="showFaceMotion"
      :mask-closable="false"
      :closable="false"
      width="800"
      :styles="{ top: '10px' }"
    >
      <FaceMotion v-if="showFaceMotion" @closeFaceMotion="closeFaceMotion" />
      <p slot="footer"></p>
    </Modal>
    <FaceTracking v-if="faceEnable && startVideoAfterDelay && PRODUCTION" />
  </div>
  <div v-else>
    正在等待数据返回...
    <i-button v-if="timeouted" class="qm-primary-button" @click="reloadPage">
      重试
    </i-button>
  </div>
</template>

<script>
import RemainTime from "./RemainTime.vue";
import OverallProgress from "./OverallProgress.vue";
import QuestionFilters from "./QuestionFilters.vue";
import QuestionView from "./QuestionView.vue";
import ArrowNavView from "./ArrowNavView.vue";
import QuestionNavView from "./QuestionNavView.vue";
import FaceTracking from "./FaceTracking.vue";
import FaceId from "./FaceId.vue";
import FaceMotion from "./FaceMotion/FaceMotion";
import FaceRecognition from "../../../components/FaceRecognition/FaceRecognition";
import { openWS, closeWsWithoutReconnect } from "./ws.js";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");

export default {
  name: "ExamingHome",
  components: {
    RemainTime,
    OverallProgress,
    QuestionFilters,
    QuestionView,
    ArrowNavView,
    QuestionNavView,
    FaceRecognition,
    FaceId,
    FaceMotion,
    FaceTracking,
  },
  data() {
    return {
      showFaceId: false,
      showFaceMotion: false,
      faceEnable: false,
      timeouted: false,
      startVideoAfterDelay: false,
      PRODUCTION: process.env.NODE_ENV === "production",
    };
  },
  computed: {
    ...mapState([
      "exam",
      "paperStruct",
      "examQuestionList",
      "snapNow",
      "snapProcessingCount",
      "shouldSubmitPaper",
      "remainTime",
      "questionAnswerFileUrl",
      "uploadModalVisible",
    ]),
    previousQuestionOrder: vm => {
      if (vm.examQuestion().order > 1) {
        return vm.examQuestion().order - 1;
      } else {
        return null;
      }
    },
    nextQuestionOrder: vm => {
      if (vm.examQuestion().order < vm.examQuestionList.length) {
        return vm.examQuestion().order + 1;
      } else {
        return null;
      }
    },
  },
  watch: {
    $route: function() {
      this.examQuestion();
    },
    shouldSubmitPaper() {
      this.realSubmitPaper();
    },
    questionAnswerFileUrl(value) {
      // console.log(this.examQuestion.studentAnswer);
      // console.log("watch", value);
      const examRecordDataId = this.$route.params.examRecordDataId;
      const that = this;
      for (const q of value) {
        if (!q.saved) {
          let acknowledgeStatus = "CONFIRMED";

          // 目前只针对音频题有丢弃的可能
          if (
            q.transferFileType === "PIC" &&
            (q.order != this.$route.params.order || !this.uploadModalVisible)
          ) {
            acknowledgeStatus = "DISCARDED";
          }
          this.$http
            .post(
              "/api/ecs_oe_student/examControl/saveUploadedFileAcknowledgeStatus",
              {
                examRecordDataId,
                filePath: q.fileUrl,
                order: q.order,
                acknowledgeStatus,
              }
            )
            .then(() => {
              if (q.transferFileType === "AUDIO") {
                that.updateExamQuestion({
                  order: q.order,
                  studentAnswer: q.fileUrl,
                });
              } else if (
                acknowledgeStatus === "CONFIRMED" &&
                q.transferFileType === "PIC"
              ) {
                that.updatePicture(q);
              }
              q.saved = true;
              if (acknowledgeStatus === "CONFIRMED")
                this.$Message.info({
                  content: "小程序作答已更新",
                  duration: 5,
                  closable: true,
                });
            })
            .catch(() => {
              this.$Message.error({
                content: "更新小程序答案失败！",
                duration: 15,
                closable: true,
              });
            });
        }
      }
    },
    // examQuestionList(val, oldVal) {
    //   // console.log(val, oldVal);
    // }
  },
  async created() {
    this.timeoutTimeout = setTimeout(() => (this.timeouted = true), 30 * 1000);

    try {
      await this.initData();
    } catch (error) {
      this.$Message.error({
        content: "获取考试和试卷信息失败，退出登录",
        duration: 15,
        closable: true,
      });
      this.logout("?LogoutReason=获取考试和试卷信息失败");
      return;
    }

    this.submitInterval = setInterval(
      () => this.answerAllQuestions(),
      5 * 1000 // 10秒检查是否有更改需要提交答案
    );
  },
  async mounted() {
    // iview bug: https://github.com/iview/iview/issues/4061
    // document.body.style = "";
    // 避免macos上下塘动。避免产生滚动条。
    document.body.classList.toggle("hide-body-scroll", true);

    // NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
    this.startVideoAfterDelayTimeout = setTimeout(() => {
      this.startVideoAfterDelay = true;
    }, 10 * 1000);

    window._hmt.push(["_trackEvent", "正在考试页面", "进入页面"]);

    if (typeof nodeRequire != "undefined") {
      try {
        var fs = window.nodeRequire("fs");
        if (fs.existsSync("multiCamera.exe")) {
          await new Promise((resolve, reject) => {
            window.nodeRequire("node-cmd").get("multiCamera.exe", () => {
              try {
                let cameraInfos = fs.readFileSync("CameraInfo.txt", "utf-8");
                if (cameraInfos && cameraInfos.trim()) {
                  cameraInfos = cameraInfos.trim();
                  cameraInfos = cameraInfos.replace(/\r\n/g, "");
                  cameraInfos = cameraInfos.replace(/\n/g, "");
                  console.log(cameraInfos);
                  this.serverLog("debug/S-001001", cameraInfos);
                }
                resolve();
              } catch (error) {
                reject("读取摄像头列表失败");
              }
            });
          });
        }
      } catch (error) {
        console.log(error);
      }
    }
  },
  beforeRouteUpdate(from, to, next) {
    window._hmt.push(["_trackEvent", "正在考试页面", "题目切换"]);
    if (process.env.NODE_ENV === "development") {
      console.log("beforeRouteUpdate from: " + this.$route.fullPath);
    }
    this.answerAllQuestions();
    next();
  },
  beforeDestroy() {
    clearTimeout(this.timeoutTimeout);
    clearInterval(this.submitInterval);
    clearInterval(this.initSnapInterval);
    clearInterval(this.snapInterval);
    clearTimeout(this.faceIdMsgTimeout);
    clearTimeout(this.faceIdDivTimeout);
    clearTimeout(this.startVideoAfterDelayTimeout);
    closeWsWithoutReconnect();
    this.updateExamState({
      exam: null,
      paperStruct: null,
      examQuestionList: null,
      questionAnswerFileUrl: [],
      pictureAnswer: {},
      snapNow: false,
      snapProcessingCount: 0,
    });
    this.$Modal.remove();
    // 避免macos上下塘动。避免产生滚动条。
    document.body.classList.toggle("hide-body-scroll", false);
  },
  // beforeRouteUpdate(to, from, next) {
  //   this.updateQuestion(next);
  // },
  methods: {
    ...mapMutations([
      "updateExamState",
      "updateExamQuestion",
      "toggleSnapNow",
      "updateExamResult",
      "resetExamQuestionDirty",
      "updatePicture",
    ]),
    async initData() {
      const [
        weixinAnswerEnabledData,
        faceCheckEnabledData,
        examPropData,
        examData,
        paperStructData,
        examQuestionListData,
      ] = await Promise.all([
        this.$http.get(
          "/api/ecs_exam_work/exam/weixinAnswerEnabled/" +
            this.$route.params.examId
        ),
        this.$http.get(
          "/api/ecs_exam_work/exam/faceCheckEnabled/" +
            this.$route.params.examId
        ),
        this.$http.get(
          "/api/ecs_exam_work/exam/getExamPropertyFromCacheByStudentSession/" +
            this.$route.params.examId +
            `/SNAPSHOT_INTERVAL,PRACTICE_TYPE,FREEZE_TIME`
        ),
        this.$http.get("/api/ecs_exam_work/exam/" + this.$route.params.examId),
        this.$http.get(
          "/api/ecs_oe_student/examRecordPaperStruct/getExamRecordPaperStruct?examRecordDataId=" +
            this.$route.params.examRecordDataId
        ),
        this.$http.get("/api/ecs_oe_student/examQuestion/findExamQuestionList"),
      ]);
      // console.log(weixinAnswerEnabledData, examPropData);

      const [
        weixinAnswerEnabled,
        faceCheckEnabled,
        examProp,
        exam,
        paperStruct,
      ] = [
        weixinAnswerEnabledData.data,
        faceCheckEnabledData.data,
        examPropData.data,
        examData.data,
        paperStructData.data,
      ];

      this.initFaceLiveness();

      let examQuestionList = examQuestionListData.data;

      if (
        weixinAnswerEnabled === undefined ||
        faceCheckEnabled === undefined ||
        examProp === undefined ||
        exam === undefined ||
        paperStruct === undefined ||
        examQuestionListData === undefined
      ) {
        this.$Message.error({
          content: "获取考试和试卷信息失败",
          duration: 15,
          closable: true,
        });
        this.logout("?LogoutReason=获取考试和试卷信息失败");
        return;
      }

      exam.WEIXIN_ANSWER_ENABLED = weixinAnswerEnabled;

      if (faceCheckEnabled) {
        this.faceEnable = true;

        // setTimeout(() => {
        //   this.serverLog("debug/S-002001", "进入考试后60秒内抓拍");
        //   this.toggleSnapNow(); // 开启抓拍才在进入考试时抓拍一张
        // }, 60 * 1000); // 60内秒钟后抓拍

        let initSnapshotTrialTimes = 0;
        this.initSnapInterval = setInterval(() => {
          const video = document.getElementById("video");
          const videoStartFailed =
            !video || video.readyState !== 4 || !video.srcObject.active;
          if (videoStartFailed && initSnapshotTrialTimes < 5) {
            initSnapshotTrialTimes++;
          } else {
            // 超过6次后，强行抓拍，如果抓拍不成功，则会因抓拍不成功而退出。
            clearInterval(this.initSnapInterval);

            if (videoStartFailed) {
              this.$Message.error({
                content: "摄像头没有正常启用",
                duration: 5,
                closable: true,
              });
              window._hmt.push([
                "_trackEvent",
                "摄像头框",
                "摄像头状态",
                "摄像头没有正常启用-进入考试抓拍",
              ]);

              this.logout("?LogoutReason=" + "摄像头没有正常启用-退出");
            } else {
              this.serverLog(
                "debug/S-002001",
                "进入考试后60秒内抓拍-" +
                  `(第${initSnapshotTrialTimes + 1}次尝试)`
              );
              this.toggleSnapNow(); // 开启抓拍才在进入考试时抓拍一张
            }
          }
        }, 10 * 1000);

        //       let initSnapshotTrialTimes = 0;
        // const initSnapshot = setTimeout(() => {
        //   if (this.exam || initSnapshotTrialTimes < 6) {
        //     this.serverLog("debug/S-002001", "进入考试后60秒内抓拍");
        //     this.toggleSnapNow(); // 开启抓拍才在进入考试时抓拍一张
        //   } else {
        //     setTimeout(() => initSnapshot(), 5 * 1000);
        //   }
        // }, 5 * 1000); // 60内秒钟后抓拍

        if (examProp.SNAPSHOT_INTERVAL) {
          const SNAPSHOT_INTERVAL = JSON.parse(examProp.SNAPSHOT_INTERVAL);
          // 考务设置抓拍间隔
          this.snapInterval = setInterval(() => {
            // this.serverLog(
            //   "debug/S-002001",
            //   "根据抓拍间隔抓拍：抓拍间隔=" + SNAPSHOT_INTERVAL + "分钟"
            // );
            this.toggleSnapNow();
          }, SNAPSHOT_INTERVAL * 60 * 1000);
        }
      }

      if (exam.examType === "PRACTICE") {
        this.practiceType = examProp.PRACTICE_TYPE; // IN_PRACTICE NO_ANSWER
        exam.practiceType = examProp.PRACTICE_TYPE;
      }

      exam.freezeTime =
        examProp.FREEZE_TIME && JSON.parse(examProp.FREEZE_TIME);

      // parentQuestionBody
      //     questionUnitWrapperList
      //         questionBody  => from examQuestionList
      //         questionUnitList =>
      //         studentAnswer
      //         rightAnswer

      // init subNumber
      let questionId = null;
      let i = 1;

      examQuestionList = examQuestionList.map(eq => {
        if (questionId == eq.questionId) {
          eq.subNumber = i++;
        } else {
          i = 1;
          questionId = eq.questionId;
          eq.subNumber = i++;
        }
        return eq;
      });

      let groupOrder = 1;
      let mainNumber = 0;
      examQuestionList = examQuestionList.map(eq => {
        if (mainNumber == eq.mainNumber) {
          eq.groupOrder = groupOrder++;
        } else {
          mainNumber = eq.mainNumber;
          groupOrder = 1;
          eq.groupOrder = groupOrder++;
        }

        const questionWrapperList =
          paperStruct.defaultPaper.questionGroupList[eq.mainNumber - 1]
            .questionWrapperList;
        const groupName =
          paperStruct.defaultPaper.questionGroupList[eq.mainNumber - 1]
            .groupName;
        const groupTotal = questionWrapperList.reduce(
          (accumulator, questionWrapper) =>
            accumulator + questionWrapper.questionUnitWrapperList.length,
          0
        );

        eq.groupName = groupName;
        eq.groupTotal = groupTotal;
        return eq;
      });

      examQuestionList = examQuestionList.map(eq => {
        const paperStructQuestion = paperStruct.defaultPaper.questionGroupList[
          eq.mainNumber - 1
        ].questionWrapperList.find(q => q.questionId === eq.questionId);
        return Object.assign(eq, {
          limitedPlayTimes: paperStructQuestion.limitedPlayTimes,
        });
      });

      this.updateExamState({
        exam: exam,
        paperStruct: paperStruct,
        examQuestionList: examQuestionList,
        allAudioPlayTimes: JSON.parse(examQuestionList[0].audioPlayTimes) || [],
        questionAnswerFileUrl: [],
        pictureAnswer: {},
      });
      // console.log(examQuestionList);
      // console.log(examQuestionList.find(v => v.answerType === "SINGLE_AUDIO"));

      const shouldOpenWS = exam.WEIXIN_ANSWER_ENABLED;

      if (shouldOpenWS) {
        // console.log("have single");
        const examRecordDataId = this.$route.params.examRecordDataId;
        openWS({ examRecordDataId });
      }
    },
    updateQuestion: async function(next) {
      // 初始化套题的答案，为回填部分选项做准备
      // for (let q of this.examQuestionList) {
      //   if (q.subQuestionList.length > 0) {
      //     q.studentAnswer = [];
      //     for (let sq of q.subQuestionList) {
      //       q.studentAnswer.push(sq.studentAnswer);
      //     }
      //   }
      // }

      next && next();
      if (!this.exam) return;
    },
    async initFaceLiveness() {
      let faceVerifyMinute = null;
      let identificationOfLivingBodyScheme = null;

      // 启用新活检
      {
        const examRecordDataId = this.$route.params.examRecordDataId;

        const faceBiopsyBaseInfoData = await this.$http.get(
          "/api/ecs_oe_student/faceBiopsy/getFaceBiopsyBaseInfo?examRecordDataId=" +
            examRecordDataId
        );
        console.log(faceBiopsyBaseInfoData.data);

        faceVerifyMinute = faceBiopsyBaseInfoData.data.faceVerifyMinute;
        identificationOfLivingBodyScheme =
          faceBiopsyBaseInfoData.data.identificationOfLivingBodyScheme;
      }

      // 仅在线上使用活体检测
      // if (process.env.NODE_ENV === "production" && faceVerifyMinute) {
      if (faceVerifyMinute) {
        const enoughTimeForFaceId = this.remainTime // 如果remainTime取到了的话
          ? this.remainTime / (60 * 1000) - 1 > faceVerifyMinute
          : true;
        if (!enoughTimeForFaceId) return;

        this.faceIdMsgTimeout = setTimeout(() => {
          // this.serverLog("debug/S-002001", "活体检测前抓拍");
          this.toggleSnapNow();
          this.$Message.info({
            content: "30秒后开始活体检测",
            duration: 15,
            closable: true,
          });
        }, faceVerifyMinute * 60 * 1000 - 30 * 1000); // 活体检测提醒
        this.faceIdDivTimeout = setTimeout(() => {
          // this.serverLog("debug/S-003001", "准备弹出活体检测框");
          if (identificationOfLivingBodyScheme === "S1") {
            this.showFaceId = true;
          } else if (identificationOfLivingBodyScheme === "S2") {
            this.showFaceMotion = true;
          }
        }, faceVerifyMinute * 60 * 1000); // 定时做活体检测
        // }, 1 * 1000); // 定时做活体检测
      }

      // for test
      // setTimeout(() => {
      //   this.showFaceId = true;
      //   // this.$Modal.remove();
      //   // }, this.$route.query.faceVerifyMinute * 60 * 1000); // 定时做活体检测
      // }, 5 * 1000); // 定时做活体检测
    },
    closeFaceId() {
      this.showFaceId = false;
    },
    closeFaceMotion(faceLiveResult) {
      this.showFaceMotion = false;
      console.log(faceLiveResult);
      if (faceLiveResult.endExam) {
        this.realSubmitPaper();
      } else if (faceLiveResult.needNextVerify) {
        this.initFaceLiveness();
      }
    },
    async answerAllQuestions(ignoreDirty) {
      const answers = this.examQuestionList
        .filter(eq => (ignoreDirty ? true : eq.dirty))
        .filter(eq => eq.getQuestionContent)
        .map(eq => {
          return Object.assign(
            {
              order: eq.order,
              studentAnswer: eq.studentAnswer,
            },
            eq.audioPlayTimes && { audioPlayTimes: eq.audioPlayTimes },
            eq.isSign && { isSign: eq.isSign }
          );
        });
      if (answers.length > 0) {
        try {
          await this.$http.post(
            "/api/ecs_oe_student/examQuestion/submitQuestionAnswer",
            answers
          );
          this.resetExamQuestionDirty();
          // 提交成功，返回true，供最后提交时判断。自动提交失败，不暂停。
          return true;
        } catch (error) {
          console.log(error);
          this.$Message.error({
            content: "提交答案失败",
            duration: 15,
            closable: true,
          });
          window._hmt.push([
            "_trackEvent",
            "正在考试页面",
            "提交答案失败",
            error.message +
              " |||| " +
              (((error.response || {}).data || {}).desc || ""),
          ]);
          this.serverLog(
            "debug/S-008001",
            `提交答案失败 => 考试剩余时间：${this.remainTime / 1000}`
          );
        }
      }
    },
    async submitPaper() {
      try {
        // 交卷前强制提交所有答案
        const ret = await this.answerAllQuestions(true);
        if (!ret) {
          // 提交答案失败，停止交卷逻辑。
          return;
        }
      } catch (error) {
        return;
      }

      if (
        this.exam.freezeTime &&
        this.remainTime >
          (this.exam.duration - this.exam.freezeTime) * 60 * 1000
      ) {
        this.$Message.info({
          content: `考试开始${this.exam.freezeTime}分钟后才允许交卷。`,
          duration: 5,
          closable: true,
        });
        return;
      }

      const answered = this.examQuestionList.filter(
        q => q.studentAnswer !== null
      ).length;
      const unanswered = this.examQuestionList.filter(
        q => q.studentAnswer === null
      ).length;
      const signed = this.examQuestionList.filter(q => q.isSign).length;
      const showConfirmTime = Date.now();
      this.$Modal.confirm({
        title: "确认交卷",
        content: `<p>已答题目：${answered}</p><p>未答题目：${unanswered}</p><p>标记题目：${signed}</p>`,
        onOk: () => {
          this.realSubmitPaper(showConfirmTime);
        },
      });
    },
    async realSubmitPaper(showConfirmTime = 0) {
      this.__submitPaperStartTime = Date.now();
      this.$Spin.show({
        render: () => {
          return <div style="font-size: 44px">正在交卷，请耐心等待...</div>;
        },
      });
      if (this.faceEnable) {
        this.serverLog("debug/S-002001", "交卷前抓拍");
        this.toggleSnapNow();
      }
      // 确保抓拍指令在交卷前执行，同时确保5秒间隔提交答案的指令执行了
      let delay = 5 - (Date.now() - showConfirmTime) / 1000;
      if (delay < 0) {
        // 如果用户已经看确认框超过5秒，或者不是由确认框进来的，不延迟
        delay = 0;
      }
      // 给抓拍照片多一秒处理时间
      delay = delay + 1;
      // 和下行注释的sleep语句不是一样的。sleep之后还可以执行。加上clearTimeout则可拒绝。
      // await new Promise(resolve => setTimeout(() => resolve(), delay * 1000));
      setTimeout(() => this.realSubmitPaperStep2(), delay * 1000);
      this.submitCount = 1;
    },
    async realSubmitPaperStep2() {
      if (this.snapProcessingCount > 0) {
        this.submitCount++;
        if (this.submitCount < 200) {
          // 一分钟后，强制交卷
          setTimeout(() => this.realSubmitPaperStep2(), 300);
          return;
        }
      }
      if (this.submitLock) {
        return;
      } else {
        this.submitLock = true;
      }

      if (this.$route.name !== "OnlineExamingHome") {
        // 非考试页，不在交卷
        this.$Spin.hide();
        return;
      }
      try {
        const examId = this.$route.params.examId;
        const examRecordDataId = this.$route.params.examRecordDataId;
        const res = await this.$http.get(
          "/api/ecs_oe_student/examControl/endExam"
        );
        if (res.status === 200) {
          this.$router.replace({
            path: `/online-exam/exam/${examId}/examRecordData/${examRecordDataId}/end`,
          });
          // 确保交卷成功后，不会再次交卷
          this.submitLock = true;
          this.$Spin.hide();
          this.__submitPaperEndTime = Date.now();
          window._hmt.push([
            "_trackEvent",
            "交卷耗时",
            Math.floor(
              (this.__submitPaperEndTime - this.__submitPaperStartTime) / 1000
            ) + "秒",
          ]);
          return;
        } else {
          this.$Message.error({
            content: "交卷失败",
            duration: 15,
            closable: true,
          });
        }
        this.submitLock = false;
      } catch (e) {
        this.$Message.error({
          content: "交卷失败",
          duration: 15,
          closable: true,
        });
        console.log(e);
      }
      this.submitLock = false;
      this.$Spin.hide();
    },
    examQuestion() {
      return (
        this.examQuestionList &&
        this.examQuestionList.find(
          eq => eq.order == this.$route.params.order // number == string
        )
      );
    },
    reloadPage() {
      window._hmt.push([
        "_trackEvent",
        "正在考试页面",
        "页面加载失败",
        "reload",
      ]);
      window.location.reload();
    },
  },
};
</script>

<style scoped>
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "main side";
  grid-template-rows: 80px minmax(0, 1fr);
  grid-template-columns: 1fr 400px;

  height: 100vh;
  width: 100vw;
}

.header {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 200px 280px 1fr 300px 100px;
  grid-area: header;
  height: 80px;
  background-color: #f5f5f5;
}

.main {
  display: grid;
  grid-area: main;
  grid-template-rows: 1fr 50px;
}

.side {
  display: grid;
  grid-area: side;
  grid-template-rows: 1fr;
  background-color: #f5f5f5;
}

.question-nav {
  overflow-y: scroll;
}

.camera {
  z-index: 100;
  height: 300px;
}

@media screen and (max-height: 768px) {
  .container {
    grid-template-rows: 50px minmax(0, 1fr);
  }
  .header {
    height: 50px;
  }
}

@media screen and (max-width: 960px) {
  .header {
    overflow-x: scroll;
  }
}
</style>

<style>
#examing-home-question img {
  max-width: 100%;
  height: auto !important;
}

.hide-body-scroll {
  overflow: hidden !important;
}
</style>