组件 ExamRecordDetail

src/modules/oe/component/ExamRecordDetail.vue

@@ -0,0 +1,386 @@
+<template>
+  <el-main style="overflow: unset; margin-left: 20px" class="el-main-padding">
+    <el-row>
+      <el-col :span="5">
+        <img :src="studentBasePhotoPath" alt width="180" />
+        <img :src="syncCapturePhotoPath" alt class="syncPhto" />
+      </el-col>
+
+      <el-col :span="19">
+        <el-row>
+          <el-col :span="8" class="capture-title">
+            <span>考试记录ID:{{ examRecordDataId }}</span>
+          </el-col>
+          <el-col v-if="showAudit" :span="8" style="text-align: center">
+            <el-button
+              circle
+              size="small"
+              type="primary"
+              icon="el-icon-d-arrow-left"
+              title="上一条"
+            ></el-button>
+            <el-button
+              size="small"
+              type="success"
+              icon="el-icon-success"
+              title="通过"
+              >通过</el-button
+            >
+            <el-button
+              size="small"
+              type="danger"
+              icon="el-icon-error"
+              title="不通过"
+              >不通过</el-button
+            >
+            <el-button
+              circle
+              size="small"
+              type="primary"
+              icon="el-icon-d-arrow-right"
+              title="下一条"
+            ></el-button>
+          </el-col>
+        </el-row>
+
+        <el-row class="margin-top-10">
+          <el-col :span="24">
+            <el-table :data="examRecordData" border>
+              <el-table-column
+                label="姓名"
+                prop="studentName"
+                min-width="90px"
+              ></el-table-column>
+              <el-table-column
+                label="学号"
+                prop="studentCode"
+                min-width="90px"
+              ></el-table-column>
+              <el-table-column
+                label="身份证号"
+                prop="identityNumber"
+                min-width="90px"
+              ></el-table-column>
+              <el-table-column
+                label="课程代码"
+                prop="courseCode"
+                min-width="90px"
+              ></el-table-column>
+              <el-table-column
+                label="课程名称"
+                prop="courseName"
+                min-width="90px"
+              ></el-table-column>
+              <el-table-column label="课程层次" width="80">
+                <template slot-scope="scope">
+                  <span v-html="getLevel(scope.row.courseLevel)"></span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="客观题总分"
+                prop="objectiveTotalScore"
+                width="95"
+              ></el-table-column>
+              <el-table-column
+                label="学习中心"
+                prop="orgName"
+                min-width="90px"
+              ></el-table-column>
+              <el-table-column
+                label="年级"
+                width="60"
+                prop="grade"
+              ></el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+
+        <el-row class="margin-top-20">
+          <el-col :span="24">
+            <el-table :data="examRecordData" border>
+              <el-table-column
+                label="切屏次数"
+                prop="switchScreenCount"
+                width="80"
+              ></el-table-column>
+              <el-table-column
+                label="校验(次)"
+                prop="faceTotalCount"
+                width="80"
+              ></el-table-column>
+              <el-table-column
+                label="成功(次)"
+                prop="faceSuccessCount"
+                width="80"
+              ></el-table-column>
+              <el-table-column
+                label="陌生人(次)"
+                prop="faceStrangerCount"
+                width="90"
+              ></el-table-column>
+              <el-table-column
+                width="100"
+                label="人脸比对(%)"
+                prop="faceSuccessPercent"
+              ></el-table-column>
+              <el-table-column
+                width="115"
+                label="人脸真实性(%)"
+                prop="baiduFaceLivenessSuccessPercent"
+              ></el-table-column>
+              <el-table-column
+                min-width="90px"
+                label="虚拟设备"
+                prop="virtualCameraNames"
+              ></el-table-column>
+              <el-table-column
+                label="违纪类型"
+                prop="disciplineType"
+                min-width="90px"
+              ></el-table-column>
+              <el-table-column label="违纪说明" min-width="90px">
+                <template slot-scope="scope">
+                  <span
+                    v-html="disciplineTypeFilter(scope.row.disciplineDetail)"
+                  ></span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                width="80"
+                label="审核结果"
+                prop="status"
+              ></el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+
+        <el-row class="margin-top-10 photorow">
+          <el-col
+            v-for="item in photoCaptures"
+            :key="item.id"
+            :span="6"
+            class="photocol"
+          >
+            <div v-show="item.pass" class="photo-pass">通过</div>
+            <div v-show="!item.pass" class="photo-nopass">不通过</div>
+            <img class="photo" :src="item.fileUrl" alt width="200" />
+            <div v-show="item.stranger" class="photo-stranger">陌生人</div>
+            <div
+              v-show="!item.isFacelivenessPass"
+              class="photo-facelivenessPass"
+            >
+              <i class="el-icon-warning" title="真实性不通过"></i>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-row class="margin-top-20">
+          <el-col :span="24">
+            <el-table :data="examProcessRecords" border>
+              <el-table-column
+                label="考试过程"
+                prop="processName"
+                width="180"
+              ></el-table-column>
+              <el-table-column
+                label="记录时间"
+                prop="recordTime"
+                width="180"
+              ></el-table-column>
+              <el-table-column
+                label="客户端IP"
+                prop="sourceIp"
+              ></el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </el-main>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "ExamRecordDetail",
+  props: {
+    examRecordDataId: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      showAudit: true,
+      examRecordData: [],
+      photoCaptures: [],
+      examProcessRecords: [],
+      studentBasePhotoPath: "",
+      syncCapturePhotoPath: "",
+    };
+  },
+  computed: {
+    ...mapState({ user: (state) => state.user }),
+  },
+  watch: {
+    examRecordDataId() {
+      this.initDetail();
+    },
+  },
+  created() {
+    this.initDetail();
+  },
+  methods: {
+    initDetail() {
+      console.log("examRecordDataId:" + this.examRecordDataId);
+      if (this.examRecordDataId) {
+        this.getExamRecordData();
+        this.getPhotoCaptures();
+        this.getExamProcessRecords();
+      } else {
+        this.examRecordData = [];
+        this.photoCaptures = [];
+        this.examProcessRecords = [];
+        this.studentBasePhotoPath = "";
+        this.syncCapturePhotoPath = "";
+      }
+    },
+    getExamRecordData() {
+      let param = new URLSearchParams({
+        examRecordDataId: this.examRecordDataId,
+      });
+      this.$http
+        .post("/api/ecs_oe_admin/exam/capture/audit/detail", param)
+        .then((response) => {
+          if (response.data) {
+            let result = response.data;
+            this.examRecordData = new Array(result);
+            if (result.syncCaptureFileUrl) {
+              this.syncCapturePhotoPath = result.syncCaptureFileUrl;
+            }
+            this.getStudentInfo(result.studentId);
+          }
+        });
+    },
+    getStudentInfo(studentId) {
+      this.$http
+        .get("/api/ecs_core/student/getStudentInfo?studentId=" + studentId)
+        .then((response) => {
+          if (response.data.photoPath) {
+            this.studentBasePhotoPath = response.data.photoPath;
+          }
+        });
+    },
+    getPhotoCaptures() {
+      let param = new URLSearchParams({
+        examRecordDataId: this.examRecordDataId,
+      });
+      this.$http
+        .post("/api/ecs_oe_admin/exam/capture/list", param)
+        .then((response) => {
+          this.photoCaptures = response.data;
+        });
+    },
+    getExamProcessRecords() {
+      let url =
+        "/api/ecs_oe_admin/exam/capture/getExamProcessRecords?examRecordDataId=" +
+        this.examRecordDataId;
+      this.$http.get(url).then((response) => {
+        if (response.data) {
+          this.examProcessRecords = response.data;
+        }
+      });
+    },
+    getLevel(level) {
+      if (level === "ZSB") {
+        return "专升本";
+      } else if (level === "GQZ") {
+        return "高起专";
+      } else if (level === "GQB") {
+        return "高起本";
+      } else {
+        return "不限";
+      }
+    },
+    disciplineTypeFilter: function (value) {
+      if (value && value.indexOf("&&") > -1) {
+        var arr = value.split("&&");
+        var detail = "";
+        for (var i = 0; i < arr.length; i++) {
+          detail += arr[i] + "<br>";
+        }
+        return detail;
+      } else {
+        return value;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+#capture-detail-header {
+  height: 15px !important;
+}
+.capture-title {
+  font-size: 20px;
+  font-weight: bold;
+}
+.photorow {
+  border: 1px solid #ebeef5;
+  text-align: center;
+}
+.photocol {
+  position: relative;
+  margin: 20px 10px 0 10px;
+}
+.photo {
+  display: block;
+  width: 208px;
+  height: 159px;
+  object-fit: contain;
+}
+.photo-pass {
+  position: absolute;
+  top: 2px;
+  width: 208px;
+  text-align: center;
+  color: white;
+  font-size: 12px;
+  background-color: rgba(10, 10, 10, 0.4);
+}
+.photo-nopass {
+  position: absolute;
+  top: 2px;
+  width: 208px;
+  text-align: center;
+  color: red;
+  font-size: 12px;
+  background-color: rgba(10, 10, 10, 0.4);
+}
+.photo-stranger {
+  position: absolute;
+  top: 140px;
+  width: 208px;
+  text-align: center;
+  color: red;
+  font-size: 12px;
+  background-color: rgba(10, 10, 10, 0.4);
+}
+.photo-facelivenessPass {
+  position: absolute;
+  top: 160px;
+  width: 208px;
+  font-size: 14px;
+  text-align: center;
+  color: red;
+}
+.syncPhto {
+  margin-top: 30px;
+  display: block;
+  width: 180px;
+  height: 159px;
+  object-fit: contain;
+}
+</style>
+<style scoped src="../style/common.css"></style>

src/modules/oe/views/awaitingAudit.vue

@@ -487,6 +487,17 @@
           </div>
         </el-form>
       </el-dialog>
+
+      <el-dialog
+        title="考试记录详情"
+        width="1250px"
+        :visible.sync="examRecordDataDialog"
+        @close="examRecordDataDialogClose"
+      >
+        <ExamRecordDetail
+          :exam-record-data-id="curSelectedExamRecordDataId"
+        ></ExamRecordDetail>
+      </el-dialog>
     </el-main>
   </el-container>
 </template>
@@ -521,6 +532,8 @@ export default {
   },
   data() {
     return {
+      curSelectedExamRecordDataId: null,
+      examRecordDataDialog: false,
       routeSelectedIds: [],
       total: 0,
       tableLoading: false,
@@ -843,6 +856,14 @@ export default {
           });
         });
     },
+    examRecordDataDialogClose() {
+      this.curSelectedExamRecordDataId = null;
+      this.examRecordDataDialog = false;
+    },
+    examRecordDataDialogOpen(row) {
+      this.curSelectedExamRecordDataId = row.dataId;
+      this.examRecordDataDialog = true;
+    },
     gotoCaptureDetail(row) {
       if (!this.form.examId) {
         this.$notify({
@@ -853,6 +874,10 @@ export default {
         });
         return false;
       }
+
+      // this.examRecordDataDialogOpen(row);
+      // if (true) return;
+
       let pendingOperate = !this.currentPagePrivileges.PENDING_OPERATE;
       let searchParam = JSON.stringify(this.form);