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

<template>
  <el-container>
    <el-header> <LinkTitlesCustom :currentPaths="currentPaths" /> </el-header>
    <el-main>
      <el-row>
        <el-col :span="6">
          <img :src="studentBasePhotoPath" alt width="180" />
        </el-col>
        <el-col :span="18">
          <el-row>
            <el-col :span="16" class="capture-title">
              <span>监考数据ID:{{ examRecordDataId }}</span>
            </el-col>
            <el-col :span="8" style="text-align: right;">
              <el-button
                v-if="showAudit"
                type="success"
                icon="el-icon-success"
                circle
                title="通过"
                @click="auditPass"
              ></el-button>

              <el-button
                v-if="showAudit"
                type="danger"
                icon="el-icon-error"
                title="不通过"
                circle
                @click="openAuditDialog"
              ></el-button>
              <el-button
                size="small"
                icon="el-icon-back"
                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="studentCode"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="身份证号"
                  prop="identityNumber"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="姓名"
                  prop="studentName"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="课程代码"
                  prop="courseCode"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="课程名称"
                  prop="courseName"
                ></el-table-column>
              </el-table>
            </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="faceTotalCount"
                  width="110"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="成功次数"
                  prop="faceSuccessCount"
                  width="110"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="陌生人"
                  prop="faceStrangerCount"
                  width="110"
                ></el-table-column>
                <el-table-column
                  width="120"
                  sortable
                  label="成功率(%)"
                  prop="faceSuccessPercent"
                ></el-table-column>
                <el-table-column
                  sortable
                  label="违纪类型"
                  prop="disciplineType"
                ></el-table-column>
                <el-table-column sortable label="违纪说明">
                  <template slot-scope="scope">
                    <span
                      v-html="disciplineTypeFilter(scope.row.disciplineDetail)"
                    >
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="110"
                  sortable
                  label="审核结果"
                  prop="status"
                ></el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row class="margin-top-10 photorow">
            <el-col
              :span="6"
              :key="item.id"
              v-for="item in capturesList"
              class="photocol"
            >
              <div class="photo-nopass" v-show="item.pass">通过</div>
              <div class="photo-nopass" v-show="!item.pass">不通过</div>
              <img class="photo" :src="item.fileUrl" alt width="200" />
              <div class="photo-stranger" v-show="item.stranger">陌生人</div>
              <div
                class="photo-facelivenessPass"
                v-show="!item.isFacelivenessPass"
              >
                <i class="el-icon-warning"></i>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-dialog title="审核" :visible.sync="dialogFormVisible">
        <auditVue :auditForm="auditForm">
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="doAuditNoPass">确 定</el-button>
          </div>
        </auditVue>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import { mapState } from "vuex";
import auditVue from "../component/audit.vue";
import LinkTitlesCustom from "@/components/LinkTitlesCustom.vue";
export default {
  components: { auditVue, LinkTitlesCustom },
  data() {
    return {
      examRecordDataId: "",
      examAuditData: [],
      examRecordData: [],
      capturesList: [],
      studentBasePhotoPath: "",
      showAudit: false,
      dialogFormVisible: false,
      auditForm: {
        examRecordDataId: null,
        disciplineType: "",
        disciplineDetail: "",
        isPass: null
      },
      currentPaths: ["抓拍详情"]
    };
  },
  computed: {
    ...mapState({ user: state => state.user })
  },
  methods: {
    getExamAuditData() {
      var param = new URLSearchParams({
        examRecordDataId: this.examRecordDataId
      });
      this.$http
        .post("/api/ecs_oe_admin/exam/capture/audit/detail", param)
        .then(response => {
          if (response.data) {
            this.showAudit = response.data.isWarn && !response.data.isAudit;
            this.examAuditData.push(response.data);
            var studentId = response.data.studentId;
            this.getStudentInfo(studentId);
          }
        });
    },
    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.back();
        });
    },
    openAuditDialog() {
      this.dialogFormVisible = true;
      this.auditForm = {
        examRecordDataId: this.examRecordDataId,
        disciplineType: "",
        disciplineDetail: "",
        isPass: false
      };
    },
    doAuditNoPass() {
      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.back();
        });
    },
    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;
      }
    }
  },
  created() {
    this.examRecordDataId = this.$route.params.examRecordDataId;
    var fromPage = this.$route.params.from;
    var currentPathJson = {
      illegalityNameList: ["违纪名单", "抓拍详情"],
      awaitingAudit: ["监考待审", "抓拍详情"],
      alreadyAudited: ["监考已审", "抓拍详情"],
      examDetail: ["考试明细", "抓拍详情"]
    };
    this.currentPaths = currentPathJson[fromPage];
    this.getExamAuditData();
    this.listExamCapture();
  }
};
</script>
<style scoped>
.margin-top-10 {
  margin-top: 10px;
}
.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;
}
.photo-nopass {
  position: absolute;
  top: 2px;
  width: 208px;
  text-align: center;
  color: white;
  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;
}
</style>