| | |
| | | <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 |
| | | }) |
| | | } |
| | |
| | | |
| | | <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> |