班级成绩图表分析

luohairen

2024-11-14 458a16314b4ffee596490ba5c44878570287b21b

班级成绩图表分析

 src/api/examPaperAnswer.js

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

 src/views/dashboard/index.vue

@@ -34,27 +34,27 @@
          </el-col>
          <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
            <div class="nameClass">
              <p class="examInfo-text">应考人数：{{examInfo.toUserCount}}</p>
              <p class="examInfo-text">应考人数：{{examInfo.totalUserCount}}</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>
              <p class="examInfo-text">缺考人数：{{examInfo.lackUserCount}}</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>
              <p class="examInfo-text">最高分：{{examInfo.highestScore}}</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>
              <p class="examInfo-text">最低分：{{examInfo.lowestScore}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>

        <el-row :xs="12" :sm="12" :lg="20" class="echarts-line" style="height: 490px;">
          <div id="echarts-moth-exam" style="width: 100%;height:400px;" v-loading="loading"/>
        </el-row>
      </el-col>
    </el-row>
@@ -93,24 +93,30 @@
        // 考试名称
        currentExamName: '',
        // 应到人数
        toUserCount: 0,
        totalUserCount: 0,
        // 缺考人数
        missUserCount: 0,
        lackUserCount: 0,
        // 最高分
        maxScore: 0,
        highestScore: 0,
        // 最低分
        minScore: 0,
        lowestScore: 0,
        // 学生姓名
        userNames: [],
        // 学生考试成绩
        userScores: [],
      },
      examPaperCount: 0,
      questionCount: 0,
      doExamPaperCount: 0,
      doQuestionCount: 0,
      echartsExam: null,
      echartsUserAction: null,
      echartsQuestion: null,
      loading: false
    }
  },
  mounted () {
    this.echartsExam = echarts.init(document.getElementById('echarts-moth-exam'), 'macarons')
    // eslint-disable-next-line no-undef
    this.echartsUserAction = echarts.init(document.getElementById('echarts-moth-user'), 'macarons')
    // eslint-disable-next-line no-undef
@@ -123,6 +129,7 @@
      _this.questionCount = response.questionCount
      _this.doExamPaperCount = response.doExamPaperCount
      _this.doQuestionCount = response.doQuestionCount
      // _this.echartsExam.setOption(this.option('班级考试成绩', '{b}日{c}场', response.mothDayText, response.mothDayExamPaperValue))
      _this.echartsUserAction.setOption(this.option('用户活跃度', '{b}日{c}度', response.mothDayText, response.mothDayUserActionValue))
      _this.echartsQuestion.setOption(this.option('题目月数量', '{b}日{c}题', response.mothDayText, response.mothDayDoExamQuestionValue))
      this.loading = false
@@ -135,42 +142,36 @@
      getExamList(this.query).then(res => {
        let response = res.data
        _this.examList = response.data
        _this.handleRowClick(_this.examList[0])
      })
    },
    // 点击考试列表更新考试数据
    handleRowClick(row){
      // 清空旧的考试数据
      this.examInfo = {
        // 考试名称
        currentExamName: '',
          // 应到人数
          toUserCount: 0,
          // 缺考人数
          missUserCount: 0,
          // 最高分
          maxScore: 0,
          // 最低分
          minScore: 0,
        totalUserCount: 0,
        lackUserCount: 0,
        highestScore: 0,
        lowestScore: 0,
        userNames: [],
        userScores: [],
      }
      // 获取当前考试名称
      // 更新当前考试名称
      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.getExamPaperInfo(row.id).then(res => {
        this.examInfo.totalUserCount = res.data.totalUserCount
        this.examInfo.lackUserCount = res.data.lackUserCount
        this.examInfo.highestScore = res.data.highestScore
        this.examInfo.lowestScore = res.data.lowestScore
        this.examInfo.userNames = res.data.userNames
        this.examInfo.userScores = res.data.userScores
        // 重新渲染图表
        this.echartsExam.setOption(this.option('班级考试成绩', '{b}:{c}分', this.examInfo.userNames, this.examInfo.userScores))
      })
      // 获取本场考试的最高分和最低分
      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) {
      return {