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

<template>

  <div class="container" id="exam-end" v-if="afterExamRemark !== null">
    <div class="instructions">
      <h1 class="">考试已结束</h1>
      <div><img class="user-avatar" :src="user.photoPath" alt="无底照" /></div>
      <div class="qm-big-text score-text" v-if="!examResult">答案获取中...</div>
      <div class="qm-big-text score-text" v-if="!examResult && getResultTimes > 30">后台繁忙，请稍后在待考列表中查看客观题得分。</div>
      <div class="qm-big-text score-text" v-if="showObjectScore && !examResult.isWarn">客观题得分: <span style="color: red">{{examResult.objectiveScore}}</span></div>
      <div class="qm-big-text score-text" v-if="exam.examType !== 'ONLINE' && showObjectScore && !examResult.isWarn">客观题正确率: <span style="color: red">{{examResult.objectiveAccuracy}}%</span></div>
      <div class="qm-big-text score-text" v-if="examResult.isWarn">客观题得分: 成绩待审核</div>
      <h1 v-if="examResult.isWarn" class="" style="text-align: left;">违纪提示: </h1>
      <div v-if="examResult.isWarn" class="" style="text-align: left;  padding-bottom: 20px">
        <p v-html="cheatingRemark"></p>
      </div>
      <h1 class="" style="text-align: left;">考后说明: </h1>
      <div class="" style="text-align: left;  padding-bottom: 20px">
        <p v-html="afterExamRemark"></p>
      </div>

      <router-link class="qm-primary-button" to="/online-exam" style="display: inline-block; width: 100%;">
        返回主页</router-link>

    </div>

  </div>

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

<script>
import { mapState as globalMapState } from "vuex";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");

export default {
  data() {
    return {
      afterExamRemark: null,
      showObjectScore: null,
      paperTotalScore: null,
      cheatingRemark: null,
      examResult: null,
      getResultTimes: 0
    };
  },
  async mounted() {
    const examRecordDataId = this.$route.params.examRecordDataId;
    const f = async () => {
      try {
        this.getResultTimes = this.getResultTimes + 1;
        const examResult = (await this.$http.get(
          "/api/ecs_oe_student/examControl/getEndExamInfo?examRecordDataId=" +
            examRecordDataId
        )).data;

        if (examResult === undefined || examResult === null) {
          setTimeout(() => f(), 3000);
          return;
        }
        this.examResult = examResult;
      } catch (error) {
        setTimeout(() => f(), 3000);
      }
    };
    await f();

    const afterExamRemark = await this.$http.get(
      "/api/ecs_exam_work/exam/examOrgProperty/" +
        this.$route.params.examId +
        `/AFTER_EXAM_REMARK`
    );
    this.afterExamRemark = afterExamRemark.data || "";
    const showObjectScore = await this.$http.get(
      "/api/ecs_exam_work/exam/examOrgProperty/" +
        this.$route.params.examId +
        `/IS_OBJ_SCORE_VIEW`
    );
    this.showObjectScore = showObjectScore.data || false;

    if (this.examResult.isWarn) {
      const cheatingRemark = await this.$http.get(
        "/api/ecs_exam_work/exam/examOrgProperty/" +
          this.$route.params.examId +
          `/CHEATING_REMARK`
      );
      this.cheatingRemark = cheatingRemark.data || "";
    }

    document.body.style = "";
    // this.paperTotalScore = this.paperStruct.defaultPaper.questionGroupList
    //   .map(q => q.groupScore)
    //   .reduce((p, c) => p + c);
  },
  beforeDestroy() {
    this.updateExamState({
      exam: null,
      paperStruct: null,
      examQuestionList: null
    });
    // this.updateExamResult({
    //   examResult: null
    // });
  },
  computed: {
    ...globalMapState(["user"]),
    ...mapState(["exam", "paperStruct"])
  },
  methods: {
    ...mapMutations(["updateExamState", "updateExamResult"])
  }
};
</script>

<style scoped>
.container {
  margin: 0 auto;
  width: 80vw;
  overflow: auto;
}

.instructions {
  /* display: grid; */
  /* grid-template-rows: 40px 300px min(100px) 30px minmax(200px, auto) min(100px) min(
      100px
    ) min(100px); */
  padding: 40px 20px;
}

.instructions > h1,
.instructions > div {
  padding-bottom: 30px;
}

.user-avatar {
  display: inline-block;
  width: 140px;
  height: 140px;
  object-fit: contain;
}

.score-text {
  font-size: 40px;
}

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

  text-align: left;
} */
</style>

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