fuliqi
2024-06-17 0a5557a65304d3c5f8fc35200cfbb38f85778970
src/views/exam/exam/MarkPaper.vue
@@ -1,36 +1,113 @@
<template>
  <div>
    <div>
      <div></div>
      <div></div>
    </div>
    <div></div>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="nameClass">
          <div class="bottom5">考试名称</div>
          <div class="title">{{examInfo.examName}}</div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="nameClass">
          <div class="bottom5">试卷名称</div>
          <div class="title">{{examInfo.examPaperName}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="staticNum">
          <div class="bottom5">应考人数</div>
          <div class="title">{{examInfo.shouldJoinNum}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="staticNum">
          <div class="bottom5">缺考人数</div>
          <div class="title">{{examInfo.missJoinNum}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="staticNum">
          <div class="bottom5">参加但未完成人数</div>
          <div class="title">{{examInfo.joinButNotFinishNum}}</div>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="examInfo.studentExamInfoVOList"
      border
      style="width: 100%;margin-top: 20px"
    >
      <el-table-column
        align="center"
        prop="id"
        label="学号"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="realName"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="phone"
        label="电话"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="phone"
        label="系统自动估分(选择题型)"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="300px"
      >
        <template slot-scope="scope">
          <el-button @click="markPaper(scope.row)" type="warning">阅卷</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getExamInfo } from '@/api/exam'
import { getExamMarkPaperInfo } from '@/api/exam'
export default {
  name: 'MarkPaper',
  mounted () {
    this.examInfo.examName = this.$route.query.examName
    this.examInfo.id = this.$route.query.examId
    this.getExamInfo()
    this.examInfo.examId = this.$route.query.examId
    if (this.examInfo.examId) {
      this.getExamInfo()
    }
  },
  data () {
    return {
      examInfo: {
        examName: '',
        id: null,
        paperList: []
        examPaperName: '',
        suggestTime: 0,
        shouldJoinNum: 0,
        joinNum: 0,
        missJoinNum: 0,
        joinButNotFinishNum: 0,
        examId: null,
        studentExamInfoVOList: []
      }
    }
  },
  methods: {
    markPaper (row) {
      // todo打开阅卷页面
    },
    getExamInfo () {
      getExamInfo(this.examInfo.id).then(res => {
      getExamMarkPaperInfo(this.examInfo.examId).then(res => {
        this.examInfo = res.data.data
      })
    }
@@ -40,4 +117,33 @@
<style scoped>
.title {
  font-size: 18px;
}
.bottom5 {
  margin-bottom: 5px;
}
.nameInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.nameClass {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70px;
  background-color: #cb5858;
}
.staticNum {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0a76a4;
  height: 70px;
}
</style>