feat：统计新需求

龚焕茏

2024-05-23 38498783f5080482cc2f1f5493f28fec140154da

feat：统计新需求

 src/api/dashboard.js

@@ -3,6 +3,8 @@
export default {
  index: () => post('/api/admin/dashboard/index'),
  getData: query => post('/api/admin/examPaperAnswer/statistic', query),
  data: query => post('/api/admin/examPaperAnswer/data', query),
  queryCondition: query => get('/api/admin/exam/paper/queryCondition', query),
  examPaperList: query => get('/api/admin/exam/paper/list', query),
  page: query => post('/api/admin/examPaperAnswer/page', query)
}

 src/router.js

@@ -314,7 +314,13 @@
        path: 'sheetStatistics',
        component: () => import('@/views/answer/sheetStatistics.vue'),
        name: 'AnswerPageList',
        meta: { title: '答卷统计', noCache: true }
        meta: { title: '人数分布', noCache: true }
      },
      {
        path: 'dataStatistics',
        component: () => import('@/views/answer/dataStatistics.vue'),
        name: 'AnswerPageList',
        meta: { title: '分数统计', noCache: true }
      },
      {
        path: 'achievementStatistics',
@@ -570,7 +576,7 @@
        path: 'sheetStatistics',
        component: () => import('@/views/answer/sheetStatistics.vue'),
        name: 'AnswerPageList',
        meta: { title: '答卷统计', noCache: true }
        meta: { title: '人数分布', noCache: true }
      },
    ]
  },

 src/views/answer/dataStatistics.vue

New file
@@ -0,0 +1,257 @@
<template>
  <div style="padding: 10px" ref="pageContent">
    <el-form :model="queryParam" ref="queryForm" :inline="true" style="display: flex">
      <el-form-item label="试卷：">
        <el-select v-model="queryParam.id" filterable placeholder="试卷">
          <el-option v-for="item in examPaperList" :key="item.id" :value="item.id" :label="item.name" @change="getType(item.type)" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
      </el-form-item>

    </el-form>
    <el-row :gutter="20">
      <el-col :xl="12" class="echarts-row">
        <el-card>
          <div class="card-chart-container">
            <div id="ageChart" ref="ageChart" class="chart-style" v-loading="chartLoading1" />
          </div>
        </el-card>
      </el-col>

      <el-col :xl="12" class="echarts-row">
        <el-card>
          <div class="card-chart-container">
            <div id="scoreChart" ref="scoreChart" class="chart-style" v-loading="chartLoading2" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xl="24">
        <el-card>
          <div class="card-chart-container">
            <div id="peopleChart" ref="peopleChart" class="chart-style" v-loading="chartLoading3" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex';
import dashboardApi from '@/api/dashboard';

const colorList = ['#3498DB', '#E74C3C', '#F1C40F', '#95A5A6', '#8E44AD', '#F39C12', '#D35400'];


const ageLabel = {
  'age0To19': '0-19岁',
  'age20To29': '20-29岁',
  'age30To39': '30-39岁',
  'age40To49': '40-49岁',
  'ageOver50': '大于50岁',
};
const scoreLabel = {
  'score0To59': '小于60分',
  'score60To69': '60-69分',
  'score70To79': '70-79分',
  'score80To89': '80-89分',
  'score90To100': '90-100分'
};
const pieLabel = {
  'totalAttended': '参与考试',
  'totalAbsent': '未参与考试'
};
let ageChart = null;
let scroeChart = null;
let peopleChart = null;
let observer = null;
export default {
  data() {
    return {
      examPaperList: [],
      chartLoading1: false,
      chartLoading2: false,
      chartLoading3: false,
      queryParam: {
        id: '',
        type: 1
      },
      admin: true
    };
  },
  mounted() {
    if (sessionStorage.getItem('deptAdmin') == 1) {
      this.admin = false;
    }
    ageChart = echarts.init(this.$refs.ageChart);
    scroeChart = echarts.init(this.$refs.scoreChart);
    peopleChart = echarts.init(this.$refs.peopleChart);
    dashboardApi.queryCondition().then(res => {
      this.examPaperList = res.response;
      this.queryParam.id = this.examPaperList[0].id
      this.queryParam.type = this.examPaperList[0].paperType
      this.getChartData();
      this.observe();
    });
  },
  methods: {
    getType(type) {
      this.queryParam.type = type;
      this.getChartData();
    },
    getChartData() {
      this.chartLoading1 = true;
      this.chartLoading2 = true;
      this.chartLoading3 = true;
      dashboardApi.data(this.queryParam).then(re => {
        const { age, score, examPeopleNum } = re.response;

        const ageOption = this.barOption('年龄段统计', age, ageLabel);
        const scoreOption = this.barOption('分数段统计', score, scoreLabel);
        const peopleOption = this.pieOption('考试人数', examPeopleNum, pieLabel);

        ageChart.setOption(ageOption, true);
        scroeChart.setOption(scoreOption, true);
        peopleChart.setOption(peopleOption, true);

        this.chartLoading1 = false;
        this.chartLoading2 = false;
        this.chartLoading3 = false;
      });
    },
    barOption(title, data, labelList) {
      const dataKeys = data.map(item => labelList[Object.keys(item)[0]]);
      const dataValues = data.map(item => Object.values(item)[0]);
      return {
        title: {
          text: title,
          x: 'left'
        },
        color: colorList,
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 40,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: dataKeys
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              fontSize: 16
            },
            barMaxWidth: '40%',
            data: dataValues,
          }
        ]

      };

    },
    pieOption(title, data, labelList) {
      const pieData = data.map(item => {
        return {
          name: labelList[Object.keys(item)[0]],
          value: Object.values(item)[0]
        };
      });
      return {
        title: {
          text: title,
          x: 'left'
        },
        color: ['#E74C3C', '#3498DB',  '#F1C40F', '#95A5A6', '#8E44AD', '#F39C12', '#D35400'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]

      };

    },
    submitForm() {
      this.getChartData();
    },

    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver(entries => {
          this.handleResize();
        });
      }
      observer.observe(this.$refs.pageContent);
    },
    // 窗口变换
    handleResize() {
      if (ageChart) {
        ageChart.resize();
      }
      if (scroeChart) {
        scroeChart.resize();
      }
      if (peopleChart) {
        peopleChart.resize();
      }
    }
  },
  beforeDestroy() {
    observer.unobserve(this.$refs.pageContent);
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      levelEnum: state => state.user.levelEnum
    })
  }
};
</script>

<style scoped lang="scss">
.echarts-row {
  margin-bottom: 20px;
}

.card-chart-container {
  width: 100%;
  height: 400px;
}


.chart-style {
  width: 100%;
  height: 100%;
}
</style>