完成考试概览

src/features/OnlineExam/OnlineExamOverview.vue

@@ -0,0 +1,186 @@
+<template>
+
+  <div class="container" v-if="exam && startInfo && paperStruct">
+    <div class="instructions">
+      <h1 class="">考试说明</h1>
+      <div class="" style="text-align: left;  padding-bottom: 20px">
+        <p v-html="exam.beforeExamRemark"></p>
+        <!-- <p>{{"测试".repeat(500)}}</p> -->
+      </div>
+      <!-- data-ui-sref="exam.start({examRecordId: startInfo.id,stuExamInfoId:stateParams.stuExamInfoId,examMins:startInfo.paperMins,examId:examInfo.id,faceVerifyMinute:startInfo.faceVerifyMinute})" -->
+
+      <a class="qm-primary-button" v-show="remainTime > 110" disabled style="display: inline-block; width: 100%;">
+        强制阅读（倒计时：{{remainTime}}）</a>
+      <a class="qm-primary-button" v-show="remainTime < 110" style="display: inline-block; width: 100%;">
+        开始答题（倒计时：{{remainTime}}）</a>
+    </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 in paperStruct" :key="questionsGroup.index">
+          {{questionsGroup.index}}、{{questionsGroup.title}}
+          <small class="pull-right">
+            （共{{questionsGroup.questionCount}}题，</span>共{{questionsGroup.totalScore}}分）
+          </small>
+        </li>
+      </ul>
+      <div>
+        <img style="width:100%; padding-top: 40px;" src="./good-wish.png" />
+      </div>
+    </div>
+
+  </div>
+
+  <div v-else>
+    正在等待数据返回...
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      exam: null,
+      startInfo: null,
+      paperStruct: null,
+      remainTime: 120
+    };
+  },
+  async mounted() {
+    this.intervalId = setInterval(() => {
+      this.remainTime = --this.remainTime;
+    }, 1000);
+    const exam = await this.$http.get(
+      "/api/ecs_exam_work/exam/" + this.$route.params.examId
+    );
+    this.exam = exam.data;
+    try {
+      const res = await this.$http.get(
+        "/api/exam_control/start?stu_exam_info_id=" +
+          this.$route.query.stuExamInfoId
+      );
+      this.startInfo = res.data;
+      this.examRecordId = res.data.id;
+      // 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/exam_question/paper_struct?exam_record_id=" + this.examRecordId
+    );
+    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
+      .map(q => q.totalScore)
+      .reduce((p, c) => p + c);
+  },
+  beforeDestroy() {
+    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>
+
+

src/router.js

@@ -3,6 +3,7 @@ import Router from "vue-router";
 
 import NotFoundComponent from "./views/NotFoundComponent.vue";
 import OnlineExamHome from "./features/OnlineExam/OnlineExamHome.vue";
+import OnlineExamOverview from "./features/OnlineExam/OnlineExamOverview.vue";
 import OfflineExamHome from "./features/OfflineExam/OfflineExamHome.vue";
 import OnlinePracticeHome from "./features/OnlinePractice/OnlinePracticeHome.vue";
 import Login from "./features/Login/Login.vue";
@@ -27,6 +28,11 @@ let router = new Router({
       name: "OnlineExamHome",
       component: OnlineExamHome
     },
+    {
+      path: "/online-exam/exam/:examId/overview",
+      name: "OnlineExamOverview",
+      component: OnlineExamOverview
+    },
     {
       path: "/online-practice",
       name: "OnlinePracticeHome",

src/store.js

@@ -5,7 +5,7 @@ Vue.use(Vuex);
 
 const examHomeModule = {
   namespaced: true,
-  state: { faceCheckModalOpen: true },
+  state: { faceCheckModalOpen: false },
   mutations: {
     toggleFaceCheckModal(state, open) {
       if (open === undefined) {