查看练习列表

src/components/MainLayout/MainLayout.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="main-layout">
     <header class="header qm-primary-text">
+      <a style="float: left; padding-left: 20px" @click="goBack">
+        <Icon type="ios-arrow-back" />返回</a>
       <Poptip trigger="hover" width="300">
         <span class="name-arrow">{{user.displayName}} &nbsp;
           <i class="ivu-icon ivu-icon-md-arrow-dropdown" style="vertical-align: middle;"></i>
@@ -69,6 +71,9 @@ export default {
     },
     logout() {
       this.$router.push("/login/" + localStorage.getItem("domain"));
+    },
+    goBack() {
+      window.history.back();
     }
   },
   computed: {

src/features/OnlineExam/Examing/FaceId.vue

@@ -145,28 +145,44 @@ export default {
        */
       this.faceTestEnd = receivedMsg => {
         if (receivedMsg.verifyCount == 1) {
-          if (
-            receivedMsg.verifyResult == "VERIFY_FAILED" ||
-            receivedMsg.verifyResult == "TIME_OUT"
-          ) {
-            this.$Message.info("第一次人脸检测失败,系统退出,请重新登录", {
-              time: 5000
+          if (receivedMsg.verifyResult == "TIME_OUT") {
+            this.$Message.error({
+              content: "第一次人脸检测超时，检测失败,系统退出,请重新登录",
+              duration: 15000
+            });
+            this.logout();
+          } else if (receivedMsg.verifyResult == "VERIFY_FAILED") {
+            this.$Message.error({
+              content: "第一次人脸检测失败,系统退出,请重新登录",
+              duration: 15000
             });
             this.logout();
           } else if (receivedMsg.verifyResult == "NOT_ONESELF") {
-            this.$Message.info("人脸检测不合格,结束考试", { time: 5000 });
+            this.$Message.error({
+              content: "人脸检测不合格,结束考试",
+              duration: 15000
+            });
             this.faceTestEndHandle("FAILED");
           } else if (receivedMsg.verifyResult == "VERIFY_SUCCESS") {
-            this.$Message.info("人脸检测成功,请继续完成考试", { time: 5000 });
+            this.$Message.info({
+              content: "人脸检测成功,请继续完成考试",
+              duration: 15000
+            });
             this.faceTestEndHandle("SUCCESS");
           }
         } else if (receivedMsg.verifyCount >= 2) {
           if (receivedMsg.verifyResult == "VERIFY_SUCCESS") {
             // FIXME: 什么逻辑？
-            this.$Message.info("人脸检测成功,请继续完成考试", { time: 5000 });
+            this.$Message.info({
+              content: "人脸检测成功,请继续完成考试",
+              duration: 15000
+            });
             this.faceTestEndHandle("SUCCESS");
           } else {
-            this.$Message.info("人脸检测不合格,结束考试", { time: 5000 });
+            this.$Message.info({
+              content: "人脸检测不合格,结束考试",
+              duration: 15000
+            });
             this.faceTestEndHandle("FAILED");
           }
         }

src/features/OnlineExam/OnlineExamList.vue

@@ -18,7 +18,7 @@
           <td>{{ course.startTime }} <br> ~ <br> {{ course.endTime }}</td>
           <td>{{ course.allowExamCount }}</td>
           <td style="min-width: 180px">
-            <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px">
+            <div style="display: grid; grid-template-columns:  repeat( auto-fit, minmax(100px, 1fr) ); grid-gap: 10px">
               <i-button class="qm-primary-button" :disabled="!courseInBetween(course) || course.allowExamCount < 1" @click="enterExam(course)">进入考试</i-button>
               <i-poptip trigger="hover" placement="left" class="online-exam-list-override-poptip">
                 <i-button class="qm-primary-button" style="width: 100%">客观分</i-button>

src/features/OnlinePractice/OnlinePracticeHome.vue

@@ -33,17 +33,25 @@ export default {
     };
   },
   async mounted() {
+    if (this.$route.query.examId) {
+      this.examId = this.$route.query.examId - 0;
+      await this.fetchList(this.examId);
+    }
+
     const res = await this.$http.get(
       "/api/ecs_exam_work/exam/queryByNameLike?name=&examType=PRACTICE"
     );
     this.examList = (res.data || []).filter(e => e.enable);
-    if (this.examList[0]) {
-      this.examId = this.examList[0].id;
+    if (this.$route.query.examId === undefined && this.examList[0]) {
+      const examId = this.examList[0].id;
+      // this.$router.replace({ query: { examId } });
+      this.examId = examId;
       await this.fetchList(this.examId);
     }
   },
   methods: {
     async fetchList(examId) {
+      this.$router.replace({ query: { examId } });
       const res = await this.$http.get(
         "/api/ecs_oe_student/practice/queryPracticeCourseList?examId=" + examId
       );

src/features/OnlinePractice/OnlinePracticeList.vue

@@ -20,11 +20,9 @@
           <td>{{ course.aveObjectiveAccuracy }}%</td>
           <td>{{ course.maxObjectiveAccuracy }}%</td>
           <td style="min-width: 180px">
-            <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px">
+            <div style="display: grid; grid-template-columns:  repeat( auto-fit, minmax(100px, 1fr) ); grid-gap: 10px">
               <i-button class="qm-primary-button" :disabled="!courseInBetween(course)" @click="enterPractice(course)">进入练习</i-button>
-              <i-poptip trigger="hover" placement="left" class="online-exam-list-override-poptip">
-                <i-button class="qm-primary-button" style="width: 100%">查看详情</i-button>
-              </i-poptip>
+              <i-button class="qm-primary-button" @click="enterPracticeList(course)">查看详情</i-button>
             </div>
           </td>
         </tr>
@@ -72,6 +70,13 @@ export default {
           course.examStudentId
         }`
       );
+    },
+    async enterPracticeList(course) {
+      this.$router.push(
+        `/online-practice/exam/${course.examId}/list?examStudentId=${
+          course.examStudentId
+        }`
+      );
     }
   },
   computed: {

src/features/OnlinePractice/OnlinePracticeRecordList.vue

@@ -0,0 +1,109 @@
+<template>
+  <main-layout>
+    <Breadcrumb style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px; background-color: #fafafa;">
+      当前所在位置：
+      <BreadcrumbItem>在线练习</BreadcrumbItem>
+      <BreadcrumbItem>练习详情</BreadcrumbItem>
+    </Breadcrumb>
+
+    <div class="home">
+
+      <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>
+              <td>正确</td>
+              <td>错误</td>
+              <td>未答</td>
+              <td>正确率</td>
+              <td style="max-width: 200px">操作</td>
+            </tr>
+
+            <tr v-for="record in recordList" :key="record.examId">
+              <td>{{ record.id }}</td>
+              <td>{{ record.startTime }}</td>
+              <td>{{ record.endTime }}</td>
+              <td>{{ formatTime(record.usedExamTime) }}</td>
+              <td>{{ record.totalQuestionCount }}</td>
+              <td>{{ record.succQuestionNum }}</td>
+              <td>{{ record.failQuestionNum }}</td>
+              <td>{{ record.notAnsweredCount }}</td>
+              <td>{{ record.objectiveAccuracy }}%</td>
+              <td style="min-width: 120px">
+                <i-button class="qm-primary-button" @click="() => enterPracticeRecord(record)">查看成绩报告</i-button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+      </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: "OnlinePracticeRecordList",
+  data() {
+    return { recordList: [] };
+  },
+  async created() {
+    const res = await this.$http.get(
+      "/api/ecs_oe_student/practice/queryPracticeRecordList?examStudentId=" +
+        this.$route.query.examStudentId
+    );
+    this.recordList = 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") || "";
+    }
+  }
+};
+</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;
+}
+</style>
+

src/router.js

@@ -8,6 +8,7 @@ import ExamingHome from "./features/OnlineExam/Examing/ExamingHome.vue";
 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 Login from "./features/Login/Login.vue";
 import Password from "./features/Password/Password.vue";
 
@@ -52,6 +53,11 @@ let router = new Router({
       name: "OnlinePracticeHome",
       component: OnlinePracticeHome
     },
+    {
+      path: "/online-practice/exam/:examId/list",
+      name: "OnlinePracticeRecordList",
+      component: OnlinePracticeRecordList
+    },
     {
       path: "/offline-exam",
       name: "OfflineExamHome",