prepare to render exam paper

src/features/OnlineExam/Examing/ExamPaper.vue

@@ -0,0 +1,223 @@
+<template>
+  <div v-if="exam" class="container" :key="exam.id">
+    <div class="header">
+    </div>
+    <div class="main">
+      <!-- <QuestionView :exam-question="examQuestion()"></QuestionView> -->
+      <div v-for="(qG, index) in questionGroupList" :key="index">
+        <div>{{index+1}}、{{qG.groupName}} ({{qG.length}})</div>
+      </div>
+    </div>
+  </div>
+  <div v-else>
+    正在等待数据返回...
+  </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 FaceRecognition from "../../../components/FaceRecognition/FaceRecognition";
+import { createNamespacedHelpers } from "vuex";
+const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
+
+export default {
+  name: "ExamPaper",
+  data() {
+    return {
+      exam: null,
+      paperStruct: null,
+      questionGroupList: null
+    };
+  },
+  props: {
+    examId: Number,
+    examRecordDataId: Number
+  },
+  async created() {
+    await this.initData();
+  },
+  methods: {
+    async initData() {
+      const [
+        examData,
+        paperStructData
+        // examQuestionListData
+      ] = await Promise.all([
+        this.$http.get("/api/ecs_exam_work/exam/" + this.examId),
+        this.$http.get(
+          "/api/ecs_oe_student/examRecordPaperStruct/getExamRecordPaperStruct?examRecordDataId=" +
+            this.examRecordDataId
+        )
+        // this.$http.get("/api/ecs_oe_student/examQuestion/findExamQuestionList")
+      ]);
+      const [exam, paperStruct] = [examData.data, paperStructData.data];
+
+      let examQuestionList = []; // examQuestionListData.data;
+
+      if (
+        exam === undefined ||
+        paperStruct === undefined
+        // ||examQuestionListData === undefined
+      ) {
+        this.$Message.error("获取试卷信息失败");
+        this.logout();
+        return;
+      }
+
+      if (exam.examType === "PRACTICE") {
+        const practiceType = (await this.$http.get(
+          "/api/ecs_exam_work/exam/examOrgProperty/" +
+            this.examId +
+            `/PRACTICE_TYPE`
+        )).data;
+        this.practiceType = practiceType; // IN_PRACTICE NO_ANSWER
+        exam.practiceType = practiceType;
+      }
+
+      // 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.exam = examData.data;
+      this.paperStructData = paperStructData.data;
+      // this.examQuestionList = examQuestionListData.data;
+    }
+  },
+  computed: {},
+  watch: {},
+  components: {
+    RemainTime,
+    OverallProgress,
+    QuestionFilters,
+    QuestionView,
+    ArrowNavView,
+    QuestionNavView,
+    FaceRecognition,
+    FaceId,
+    FaceTracking
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "main side";
+  grid-template-rows: 80px 1fr;
+  grid-template-columns: 1fr 400px;
+
+  height: 100vh;
+  width: 100vw;
+  overflow: auto;
+}
+
+.header {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  grid-template-columns: 200px 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 250px;
+  background-color: #f5f5f5;
+}
+
+.side-row-size {
+  grid-template-rows: 1fr;
+}
+
+.question-nav {
+  overflow-y: scroll;
+  max-height: calc(100vh - 300px);
+}
+
+.question-nav-long {
+  max-height: calc(100vh - 100px);
+}
+
+.camera {
+  align-self: flex-end;
+  justify-self: flex-end;
+}
+
+@media screen and (max-height: 768px) {
+  .container {
+    grid-template-rows: 50px 1fr;
+  }
+  .header {
+    height: 50px;
+  }
+  .side {
+    grid-template-rows: 1fr 200px;
+  }
+}
+</style>

src/features/OnlinePractice/OnlinePracticeRecordDetail.vue

@@ -44,6 +44,8 @@
         </div>
       </div>
     </div>
+
+    <ExamPaper :examId="examId" :examRecordDataId="examRecordDataId" />
   </main-layout>
 </template>
 
@@ -52,6 +54,7 @@
 import moment from "moment";
 // import { mapState as globalMapState } from "vuex";
 // const { mapMutations } = createNamespacedHelpers("examHomeModule");
+import ExamPaper from "../OnlineExam/Examing/ExamPaper.vue";
 
 export default {
   name: "OnlinePracticeRecordDetail",
@@ -81,7 +84,17 @@ export default {
       return moment.utc(ms).format("HH:mm:ss") || "";
     }
   },
-  computed: {}
+  computed: {
+    examRecordDataId() {
+      return this.$route.query.examRecordDataId - 0;
+    },
+    examId() {
+      return this.$route.params.examId - 0;
+    }
+  },
+  components: {
+    ExamPaper
+  }
 };
 </script>