单次练习的成绩报告：报告的元信息

src/features/OnlineExam/OnlineExamResultList.vue

@@ -44,9 +44,8 @@ export default {
       "/api/ecs_oe_student/examScore/queryObjectiveScoreList?examStudentId=" +
         this.examStudentId
     )).data;
-    this.results = results
-      .sort((a, b) => a.examOrder > b.examOrder)
-      .reverse()
+    this.results = (results || [])
+      .sort((a, b) => b.examOrder - a.examOrder)
       .slice(0, 10);
     this.loading = false;
   }

src/features/OnlinePractice/OnlinePracticeRecordDetail.vue

@@ -0,0 +1,110 @@
+<template>
+  <main-layout>
+    <Breadcrumb style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px; background-color: #fafafa;">
+      当前所在位置：
+      <BreadcrumbItem>在线练习</BreadcrumbItem>
+      <BreadcrumbItem>练习详情</BreadcrumbItem>
+      <BreadcrumbItem>成绩报告</BreadcrumbItem>
+    </Breadcrumb>
+
+    <div class="home">
+      <div class="qm-title-text">练习情况概率(科目：{{examRecordResult.courseName}})</div>
+
+      <div style="display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; text-align: left">
+        <div>答题正确率: <span>{{examRecordResult.objectiveAccuracy}}%</span></div>
+      </div>
+
+      <div class="list">
+        <table>
+          <tbody class="list-row">
+            <tr class="list-header qm-primary-strong-text">
+              <td>题目分类</td>
+              <td>题量</td>
+              <td>正确</td>
+              <td>错误</td>
+              <td>未答</td>
+            </tr>
+
+            <tr v-for="record in examRecordResult.paperStructInfos" :key="record.index">
+              <td>{{ record.title }}</td>
+              <td>{{ record.questionCount }}</td>
+              <td>{{ record.succQuestionNum }}</td>
+              <td>{{ record.failQuestionNum }}</td>
+              <td>{{ record.notAnsweredCount }}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="info-text">
+          <h4 class="font-thin text-primary-lt m-t">报告提示:</h4>
+          <div class="scroll-y wrapper-sm" style="min-height: 80px;">
+            <p class="m-b-sm">1、若本练习卷中包含部分主观题型，则报告统计数据仅供参考，因为部分题型需考生根据参考答案判断正确和错误，报告仅对可统计的题型进行统计。</p>
+            <p class="m-b-sm">2、若单题存在多处作答，只要有一处出错，该题就判为错题。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main-layout>
+</template>
+
+<script>
+// import { createNamespacedHelpers } from "vuex";
+import moment from "moment";
+// import { mapState as globalMapState } from "vuex";
+// const { mapMutations } = createNamespacedHelpers("examHomeModule");
+
+export default {
+  name: "OnlinePracticeRecordDetail",
+  data() {
+    return { examRecordResult: [] };
+  },
+  async created() {
+    const res = await this.$http.get(
+      "/api/ecs_oe_student/practice/getPracticeDetailInfo?examRecordDataId=" +
+        this.$route.query.examRecordDataId
+    );
+    this.examRecordResult = res.data || [];
+  },
+  methods: {
+    async enterPracticeRecord(course) {
+      this.$router.push(
+        `/online-practice/exam/${course.examId}/detail?examStudentId=${
+          course.examStudentId
+        }`
+      );
+    },
+    formatTime(ms) {
+      return moment.utc(ms).format("HH:mm:ss") || "";
+    }
+  },
+  computed: {}
+};
+</script>
+
+<style scoped>
+.home {
+  margin: 20px;
+}
+
+.list {
+  border: 1px solid #eeeeee;
+  border-radius: 6px;
+}
+
+.list table {
+  width: 100%;
+  border-collapse: collapse !important;
+  border-spacing: 0;
+}
+.list td {
+  border: 1px solid #eeeeee;
+  border-radius: 6px;
+  border-collapse: separate !important;
+  padding: 10px;
+}
+
+.list .info-text {
+  text-align: left;
+  padding: 5px;
+}
+</style>

src/features/OnlinePractice/OnlinePracticeRecordList.vue

@@ -42,7 +42,7 @@
               <td>{{ record.notAnsweredCount }}</td>
               <td>{{ record.objectiveAccuracy }}%</td>
               <td style="min-width: 120px">
-                <i-button class="qm-primary-button" @click="() => enterPracticeRecord(record)">查看成绩报告</i-button>
+                <i-button class="qm-primary-button" @click="() => enterPracticeRecordDetail(record)">查看成绩报告</i-button>
               </td>
             </tr>
           </tbody>
@@ -71,14 +71,14 @@ export default {
       "/api/ecs_oe_student/practice/queryPracticeRecordList?examStudentId=" +
         this.$route.query.examStudentId
     );
-    this.recordList = res.data || [];
+    this.recordList = (res.data || []).reverse();
   },
   methods: {
-    async enterPracticeRecord(course) {
+    async enterPracticeRecordDetail(course) {
       this.$router.push(
-        `/online-practice/exam/${course.examId}/detail?examStudentId=${
-          course.examStudentId
-        }`
+        `/online-practice/exam/${
+          this.$route.params.examId
+        }/detail?examRecordDataId=${course.id}`
       );
     },
     formatTime(ms) {

src/router.js

@@ -9,6 +9,7 @@ import ExamingEnd from "./features/OnlineExam/Examing/ExamingEnd.vue";
 import OfflineExamHome from "./features/OfflineExam/OfflineExamHome.vue";
 import OnlinePracticeHome from "./features/OnlinePractice/OnlinePracticeHome.vue";
 import OnlinePracticeRecordList from "./features/OnlinePractice/OnlinePracticeRecordList.vue";
+import OnlinePracticeRecordDetail from "./features/OnlinePractice/OnlinePracticeRecordDetail.vue";
 import Login from "./features/Login/Login.vue";
 import Password from "./features/Password/Password.vue";
 
@@ -58,6 +59,11 @@ let router = new Router({
       name: "OnlinePracticeRecordList",
       component: OnlinePracticeRecordList
     },
+    {
+      path: "/online-practice/exam/:examId/detail",
+      name: "OnlinePracticeRecordDetail",
+      component: OnlinePracticeRecordDetail
+    },
     {
       path: "/offline-exam",
       name: "OfflineExamHome",