FE_exam_server/src/pages/achievement/statistics/index.vue

<template>
    <div>
        <breadcrumb :data="'成绩管理/成绩统计'"></breadcrumb>
        <div class="box">
            <div class="page left">
                <div class="tabs">
                    <a class="item active">基本信息</a>
                </div>
                <div class="page-content">
                    <div class="info">
                        <div class="item">
                            <p class="key">考试名称：</p>
                            <p class="val">{{assessmentName}}</p>
                        </div>
                        <div class="item">
                            <p class="key">开始时间：</p>
                            <p class="val">{{info.startTime}}</p>
                        </div>
                        <div class="item">
                            <p class="key">总分：</p>
                            <p class="val">{{info.totalScore}}分</p>
                        </div>
                        <div class="item">
                            <p class="key">最高分：</p>
                            <p class="val">{{info.highestScore}}</p>
                        </div>
                        <div class="item">
                            <p class="key">应考人数：</p>
                            <p class="val">{{info.shouldPeople}}人</p>
                        </div>
                        <div class="item">
                            <p class="key">最低分：</p>
                            <p class="val">{{info.lowestScore}}</p>
                        </div>
                        <div class="item">
                            <p class="key">实考人数：</p>
                            <p class="val">{{info.actualPeople}}人</p>
                        </div>
                        <div class="item">
                            <p class="key">平均分：</p>
                            <p class="val">{{info.averageScore}}分</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="page right">
                <div class="tabs">
                    <a class="item active">成绩分布图</a>
                </div>
                <div class="page-content">
                    <div class="info">
                        <div class="chart" id="chart"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page">
            <div class="tabs">
                <a class="item active">考试成绩</a>
            </div>
            <div class="page-content">
                <div class="tool">
                    <ul class="filter"></ul>
                    <div>
                        <el-button type="primary" size="small" round @click="exportData">导出</el-button>
                    </div>
                </div>

                <el-table :data="listData" ref="table" row-key="id" class="table" stripe header-align="center">
                    <el-table-column type="index" width="100" label="序号" align="center">
                        <template
                            slot-scope="scope"
                        >{{scope.$index + (page - 1) * pageSize + 1}}</template>
                    </el-table-column>
                    <el-table-column prop="paperName" label="试卷名称" align="center"></el-table-column>
                    <el-table-column prop="userName" label="学生姓名" align="center"></el-table-column>
                    <el-table-column prop="workNumber" label="学号" align="center"></el-table-column>
                    <el-table-column prop="score" label="得分" align="center"></el-table-column>
                    <el-table-column prop="rank" label="名次" align="center"></el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="pageSize" layout="total,prev, pager, next" :total="total"></el-pagination>
                </div>
            </div>
        </div>
    </div>
    
</template>
<script>
import { mapState,mapGetters } from 'vuex'
import echarts from 'echarts'
import breadcrumb from '@/components/breadcrumb'
import util from '@/libs/util'
export default {
    data() {
        return {
            info: {
                id: '',
                actualPeople: '', 
                averageScore: '', 
                highestScore: '', 
                lowestScore: '', 
                paperName: '', 
                shouldPeople: '', 
                startTime: '', 
                totalScore: '', 
            },
            statData: [],
            listData: [],
            page: 1,
            pageSize: 10,
            total: 0,
        };
    },
    components: {
        breadcrumb
    },
    computed: {
        ...mapState('user', [
            'userId'
        ]),
        ...mapState('achievement', [
            'id','assessmentId','assessmentName','classId','stuId'
        ])
    },
    mounted() {
        this.getData()
        this.getList()
    },
    methods: {
        getData() {
            this.$post(`${this.api.achievementStatistics}?userId=${this.stuId}&assessmentId=${this.assessmentId}&paperId=${this.id}&classId=${this.classId}`)
            .then(res => {
                this.info = res.data.list
                let statData = []
                for(let i in this.info){
                    if(i.includes('get')) statData.push(this.info[i])
                }
                this.statData = statData
                this.getChart()
            }).catch(err => {})
        },
        getChart(){
            let myChart = echarts.init(document.getElementById('chart'))
            myChart.setOption({
                title: { text: '成绩分布图' },
                tooltip: {},
                xAxis: {
                    name: '分数',
                    type: 'category',
                    boundaryGap: false,
                    data: ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '61-70', '71-80','81-90','91-100']
                },
                yAxis: {
                    name: '人数',
                    type: 'value'
                },
                series: [{
                    data: this.statData,
                    type: 'line',
                    areaStyle: {}
                }]
            })
        },
        getList() {
            this.$get(`${this.api.getRanking}?pageNum=${this.page}&pageSize=${this.pageSize}&assessmentId=${this.assessmentId}`)
            .then(res => {
                let list = res.data.list.list
                let len = list.length - 1
                for(let i = 0; i < len; i++){
                    for(let j = 0; j < len; j++){
                        if(list[j].rank && list[j].rank > list[j + 1].rank){
                            let temp = list[j]
                            list[j] = list[j + 1]
                            list[j + 1] = temp
                        }
                    }
                }
                let hasRank = list.filter(n => n.rank)
                let notRank = list.filter(n => !n.rank)
                list = [...hasRank,...notRank]
                this.listData = list
                this.total = res.data.list.totalCount
            })
            .catch(err => {})
        },
        handleCurrentChange(val) {
            this.page = val
            this.getList()
        },
        exportData(){
            location.href = `${this.api.getRankingExport}?assessmentId=${this.assessmentId}`
        }
    },
};
</script>

<style lang="scss" scoped>
    .box{
        display: flex;
        margin-bottom: 24px;
        .left{
            width: 320px;
        }
        .right{
            width: calc(80% - 344px);
            margin-left: 24px;
        }
        .info{
            .item{
                display: flex;
                align-items: center;
                margin: 20px 0;
                font-size: 14px;
            }
            .key,.val{
                color: rgba(0, 0, 0, 0.65);
                font-size: 14px;
            }
            .key{
                width: 130px;
                text-align: right;
            }
        }
        .chart{
            height: 400px;
        }
    }
</style>