完成教师端，页面顶部展示

luohairen

2024-11-08 cce9b105726750f1b76eef2fa250680ebf36d06c

完成教师端，页面顶部展示

 src/api/examPaperAnswer.js

@@ -4,5 +4,6 @@
  page: query => post('/api/admin/examPaperAnswer/page', query),
  pageExamPaper: query => post('/api/admin/examPaperAnswer/pageExamPaper', query),
  pageUser: query => post('/api/admin/examPaperAnswer/pageUser', query),
  read: id => post('/api/admin/examPaperAnswer/read/' + id)
  read: id => post('/api/admin/examPaperAnswer/read/' + id),
  queryMaxAndMinScore: id => post('/api/admin/examPaperAnswer/queryMaxAndMinScore/' + id),
}

 src/views/dashboard/index.vue

@@ -1,9 +1,9 @@
<template>
  <div class="dashboard-container">
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" >
        <div class="card-panel">
          <el-row class="panel-group">
          <el-row class="panel-group" :gutter="20">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="list" class-name="card-panel-icon"/>
            </div>
@@ -18,12 +18,44 @@
            <el-button type="primary" size="small" @click="getExamList">查询</el-button>
          </el-row>
          <el-row class="panel-group">
            <el-table :data="examList" style="width: 100%;" height="430">
            <el-table :data="examList" style="width: 100%;" height="430" @row-click="handleRowClick">
              <el-table-column label="考试名称" prop="examName"></el-table-column>
              <el-table-column label="考试状态" prop="status"></el-table-column>
            </el-table>
          </el-row>
        </div>
      </el-col>
      <el-col :span="18">
        <el-row>
          <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
            <div class="nameClass">
              <p class="examInfo-text">当前考试：{{examInfo.currentExamName}}</p>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
            <div class="nameClass">
              <p class="examInfo-text">应考人数：{{examInfo.toUserCount}}</p>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
            <div class="nameClass">
              <p class="examInfo-text">缺考人数：{{examInfo.missUserCount}}</p>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
            <div class="nameClass">
              <p class="examInfo-text">最高分：{{examInfo.maxScore}}</p>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
            <div class="nameClass">
              <p class="examInfo-text">最低分：{{examInfo.minScore}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>

        </el-row>
      </el-col>
    </el-row>
    <el-row class="echarts-line">
@@ -39,8 +71,11 @@
import resize from './components/mixins/resize'
import CountTo from 'vue-count-to'
import dashboardApi from '@/api/dashboard'
import {getExamList} from "@/api/exam";
import exam from "@/store/modules/exam";
import {getExamList} from "@/api/exam"
import exam from "@/store/modules/exam"
import examPaperAnswerApi from '@/api/examPaperAnswer'


export default {
  mixins: [resize],
  components: {
@@ -53,6 +88,18 @@
      // 考试查询条件
      query:{
        examName: '',
      },
      examInfo:{
        // 考试名称
        currentExamName: '',
        // 应到人数
        toUserCount: 0,
        // 缺考人数
        missUserCount: 0,
        // 最高分
        maxScore: 0,
        // 最低分
        minScore: 0,
      },
      examPaperCount: 0,
      questionCount: 0,
@@ -82,11 +129,34 @@
    })
  },
  methods: {
    // 获取考试列表
    getExamList() {
      let _this = this
      getExamList(this.query).then(res => {
        let response = res.data
        _this.examList = response.data
      })
    },
    // 点击考试列表更新考试数据
    handleRowClick(row){
      // 获取当前考试名称
      this.examInfo.currentExamName = row.examName
      // 获取应到实到人数
      examPaperAnswerApi.pageExamPaper({examId: row.id, pageIndex: 1, pageSize: 10}).then(res => {
        let response = res.data.list[0]
        this.examInfo.toUserCount = response.personTotalNum
        this.examInfo.missUserCount = this.examInfo.toUserCount - response.personAnswerNum
      })
      // 获取本场考试的最高分和最低分
      examPaperAnswerApi.queryMaxAndMinScore(row.id).then(res => {
        let data = res.data
        if (!data || data.length === 0) {
          this.examInfo.maxScore = 0
          this.examInfo.minScore = 0
        }else {
          this.examInfo.maxScore = data[0].totalScore
          this.examInfo.minScore = data[1].totalScore
        }
      })
    },
    option (title, formatter, label, vaule) {
@@ -172,10 +242,24 @@
}

.panel-group {
  margin-top: 8px;
  margin-top: 0px;

  .card-panel-col {
    padding: 10px;
    margin-bottom: 32px;
  }

  .card-panel2 {
    height: 100px;
    width: 100%;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
  }

  .card-panel {
@@ -284,4 +368,21 @@
  padding:16px 16px 0;
  margin-bottom:32px;
}

.examInfo-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  margin-bottom: 12px;
}

.nameClass {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70px;
  background-color: white;
}
</style>