examcloud-admin-web/src/modules/oe/views/captureDetail.vue

<template>
  <el-container>
    <el-header id="capture-detail-header">
      <LinkTitlesCustom :current-paths="currentPaths" />
    </el-header>
    <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="上一条"
                @click="openNextAuditDetail('0')"
              ></el-button>
              <el-button
                size="small"
                type="success"
                icon="el-icon-success"
                title="通过"
                @click="auditPass"
                >通过</el-button
              >
              <el-button
                size="small"
                type="danger"
                icon="el-icon-error"
                title="不通过"
                @click="openAuditDialog"
                >不通过</el-button
              >
              <el-button
                circle
                size="small"
                type="primary"
                icon="el-icon-d-arrow-right"
                title="下一条"
                @click="openNextAuditDetail('1')"
              ></el-button>
            </el-col>
            <el-col v-if="showAudit" :span="8" style="text-align: right">
              <el-button
                size="small"
                icon="el-icon-arrow-left"
                type="primary"
                @click="back"
                >返回</el-button
              >
            </el-col>
            <el-col v-if="!showAudit" :span="16" style="text-align: right">
              <el-button
                size="small"
                icon="el-icon-arrow-left"
                type="primary"
                @click="back"
                >返回</el-button
              >
            </el-col>
          </el-row>
          <el-row class="margin-top-10">
            <el-col :span="24">
              <el-table :data="examAuditData" border>
                <el-table-column
                  sortable
                  label="学习中心"
                  prop="orgName"
                  min-width="110px"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="年级"
                  prop="grade"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="学号"
                  prop="studentCode"
                  min-width="110px"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="身份证号"
                  prop="identityNumber"
                  min-width="120px"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="姓名"
                  prop="studentName"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="课程代码"
                  prop="courseCode"
                  min-width="110px"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="课程名称"
                  prop="courseName"
                  min-width="110px"
                ></el-table-column>
                <el-table-column sortable label="课程层次" min-width="110px">
                  <template slot-scope="scope">
                    <span v-html="getLevel(scope.row.courseLevel)"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  sortable
                  label="客观题总分"
                  prop="objectiveTotalScore"
                  min-width="150px"
                ></el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row class="margin-top-20">
            <el-col :span="24">
              <el-table :data="examAuditData" border>
                <el-table-column
                  sortable
                  label="切屏次数"
                  prop="switchScreenCount"
                  width="110"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="校验(次)"
                  prop="faceTotalCount"
                  width="100"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="成功(次)"
                  prop="faceSuccessCount"
                  width="100"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="陌生人(次)"
                  prop="faceStrangerCount"
                  width="120"
                ></el-table-column>
                <el-table-column
                  width="140"
                  sortable
                  label="人脸比对(%)"
                  prop="faceSuccessPercent"
                ></el-table-column>
                <el-table-column
                  width="140"
                  sortable
                  label="人脸真实性(%)"
                  prop="baiduFaceLivenessSuccessPercent"
                ></el-table-column>
                <el-table-column
                  width="120"
                  sortable
                  label="虚拟设备"
                  prop="virtualCameraNames"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="违纪类型"
                  prop="disciplineType"
                  width="130"
                ></el-table-column>
                <el-table-column sortable label="违纪说明" width="260">
                  <template slot-scope="scope">
                    <span
                      v-html="disciplineTypeFilter(scope.row.disciplineDetail)"
                    ></span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="120"
                  sortable
                  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 capturesList"
              :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="examProcessRecordData" border>
                <el-table-column
                  sortable
                  label="考试过程"
                  prop="processName"
                  width="200"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="日期"
                  prop="recordTime"
                  width="200"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="客户端ip"
                  prop="sourceIp"
                ></el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-dialog title="审核" :visible.sync="dialogFormVisible">
        <el-form ref="auditForm" :model="auditForm">
          <el-form-item
            label="违纪类型"
            prop="illegallyTypeId"
            :rules="[
              { required: true, message: '请选择违纪类型', trigger: 'change' },
            ]"
          >
            <el-select
              v-model="auditForm.illegallyTypeId"
              filterable
              remote
              :remote-method="getDisciplineTypeList"
              clearable
              placeholder="请选择"
              size="small"
              @clear="getDisciplineTypeList"
            >
              <el-option
                v-for="item in disciplineTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详情描述" style="margin-top: 15px">
            <el-input
              v-model="auditForm.disciplineDetail"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 10 }"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <div class="dialog-footer margin-top-10 text-center">
            <el-button type="primary" @click="doAuditNoPass">确 定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import { mapState } from "vuex";
import LinkTitlesCustom from "@/components/LinkTitlesCustom.vue";
export default {
  components: { LinkTitlesCustom },
  data() {
    return {
      examRecordDataId: "",
      examAuditData: [],
      examRecordData: [],
      capturesList: [],
      studentBasePhotoPath: "",
      syncCapturePhotoPath: "",
      showAudit: false,
      dialogFormVisible: false,
      auditForm: {
        examRecordDataId: null,
        illegallyTypeId: null,
        disciplineDetail: "",
        isPass: null,
      },
      currentPaths: ["抓拍详情"],
      disciplineTypeList: [],
      pendingOperate: false,
      searchParam: {},
      orderDesc: true,
      first: false,
      last: false,
      examProcessRecordData: [],
    };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
  },
  created() {
    this.examRecordDataId = this.$route.params.examRecordDataId;
    this.pendingOperate = this.$route.query.pendingOperate;
    if (this.$route.query.searchParam) {
      this.searchParam = JSON.parse(this.$route.query.searchParam);
    }
    var fromPage = this.$route.params.from;
    var currentPathJson = {
      illegalityNameList: ["违纪名单", "抓拍详情"],
      awaitingAudit: ["监考待审", "抓拍详情"],
      alreadyAudited: ["监考已审", "抓拍详情"],
      examDetail: ["考试明细", "抓拍详情"],
    };
    this.currentPaths = currentPathJson[fromPage];
    this.getExamAuditData();
    this.listExamCapture();
    this.getDisciplineTypeList("");
    this.getExamProcessRecordData();
  },
  methods: {
    getDisciplineTypeList(name) {
      if (!name) {
        name = "";
      }
      this.$http
        .get("/api/ecs_oe_admin/illegallyType/queryByNameLike", {
          params: { name, queryScope: "audit" },
        })
        .then((response) => {
          this.disciplineTypeList = response.data;
        });
    },
    getExamAuditData() {
      var param = new URLSearchParams({
        examRecordDataId: this.examRecordDataId,
      });
      let isPendingAudit = this.pendingOperate;
      this.$http
        .post("/api/ecs_oe_admin/exam/capture/audit/detail", param)
        .then((response) => {
          if (response.data) {
            this.showAudit =
              isPendingAudit == "false" &&
              response.data.isWarn &&
              !response.data.isAudit;
            // if (response.data.virtualCameraNames === "") {
            //   response.data.virtualCameraNames = ";";
            // }
            this.examAuditData = new Array(response.data);
            var studentId = response.data.studentId;
            this.syncCapturePhotoPath = response.data.syncCaptureFileUrl;
            this.getStudentInfo(studentId);
          }
        });
    },
    getExamProcessRecordData() {
      // var param = new URLSearchParams({
      //   examRecordDataId: this.examRecordDataId,
      // });
      let url =
        "/api/ecs_oe_admin/exam/capture/getExamProcessRecords?examRecordDataId=" +
        this.examRecordDataId;
      this.$http.get(url).then((response) => {
        if (response.data) {
          this.examProcessRecordData = response.data;
        }
      });
    },
    listExamCapture() {
      var param = new URLSearchParams({
        examRecordDataId: this.examRecordDataId,
      });
      this.$http
        .post("/api/ecs_oe_admin/exam/capture/list", param)
        .then((response) => {
          this.capturesList = response.data;
        });
    },
    getStudentInfo(studentId) {
      this.$http
        .get("/api/ecs_core/student/getStudentInfo?studentId=" + studentId)
        .then((response) => {
          if (response.data.photoPath) {
            this.studentBasePhotoPath = response.data.photoPath;
          }
        });
    },
    /**
     * 审核通过
     */
    auditPass() {
      var auditParams = {
        examRecordDataId: this.examRecordDataId,
        isPass: true,
      };
      var param = new URLSearchParams(auditParams);
      this.$http
        .post("/api/ecs_oe_admin/exam/audit/single/audit", param)
        .then(() => {
          this.$notify({
            title: "成功",
            message: "操作成功",
            type: "success",
          });
          this.auditNext();
        });
    },
    auditNext() {
      var url =
        "/api/ecs_oe_admin/exam/record/waiting/audit/next?examRecordDataId=" +
        this.examRecordDataId +
        "&next=1";
      this.$http.post(url, this.searchParam).then((response) => {
        if (response.data) {
          this.examRecordDataId = response.data;
          this.getExamAuditData();
          this.listExamCapture();
          this.getDisciplineTypeList("");
          this.getExamProcessRecordData();
        } else {
          this.$notify({
            title: "成功",
            message: "审核完毕",
            type: "success",
          });
          this.back();
        }
      });
    },
    /**
     * 下一条
     */
    openNextAuditDetail(next) {
      var url =
        "/api/ecs_oe_admin/exam/record/waiting/audit/next?examRecordDataId=" +
        this.examRecordDataId +
        "&next=" +
        next;
      this.$http.post(url, this.searchParam).then((response) => {
        if (response.data) {
          this.examRecordDataId = response.data;
          this.getExamAuditData();
          this.listExamCapture();
          this.getDisciplineTypeList("");
          this.getExamProcessRecordData();
        } else {
          var msg = "最后";
          if (next === "0") {
            msg = "第";
          }
          this.$notify({
            title: "警告",
            message: "当前数据为" + msg + "一条",
            type: "warning",
          });
        }
      });
    },
    openAuditDialog() {
      this.dialogFormVisible = true;
      this.auditForm = {
        examRecordDataId: this.examRecordDataId,
        illegallyTypeId: null,
        disciplineDetail: "",
        isPass: false,
      };
    },
    doAuditNoPass() {
      this.$refs["auditForm"].validate((valid) => {
        if (valid) {
          var param = new URLSearchParams(this.auditForm);
          this.$http
            .post("/api/ecs_oe_admin/exam/audit/single/audit", param)
            .then(() => {
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
              this.dialogFormVisible = false;
              this.auditNext();
            });
        } else {
          return false;
        }
      });
    },
    back() {
      this.$router.back();
    },
    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;
      }
    },
    getLevel(level) {
      if (level == "ZSB") {
        return "专升本";
      } else if (level == "GQZ") {
        return "高起专";
      } else if (level == "GQB") {
        return "高起本";
      } else {
        return "不限";
      }
    },
  },
};
</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>