FE_occupationlab_server/src/pages/achievement/teach/index.vue

<template>
    <div>
        <el-card shadow="hover" class="m-b-20 head-card">
            <div class="flex-between m-b-20">
                <el-page-header @back="goBack" :content="experimentalName"></el-page-header>
            </div>

        </el-card>

        <el-card shadow="hover" class="m-b-20">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="(item) in classList" :label="item.className" :name="item.id" :key="item.id"></el-tab-pane>
            </el-tabs>
            <div class="stat">
                <div class="nums">
                    <div class="item">
                        <p class="name">实验总人数</p>
                        <p class="val">{{ peopleNum }}</p>
                    </div>
                    <div class="item">
                        <p class="name">实验平均分</p>
                        <p class="val">{{ avgScore }}</p>
                    </div>
                </div>
                <div class="chart" id="chart"></div>
            </div>
        </el-card>

        <el-card shadow="hover" class="m-b-20">
            <div class="flex-between m-b-20">
                <div>
                    <el-input
                        size="small"
                        placeholder="请输入学校/学生姓名"
                        prefix-icon="el-icon-search"
                        v-model="keyword" clearable
                        style="width: 300px"
                    ></el-input>
                </div>
                <div>
                    <el-button type="primary" @click="delAllData">批量删除</el-button>
                    <el-button type="primary" @click="exportData">导出</el-button>
                </div>
            </div>
            <el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="reportId">
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
                <el-table-column type="index" width="60" label="序号" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + (page - 1) * pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="schoolName" label="学校" min-width="150" align="center">
                </el-table-column>
                <el-table-column v-if="permissions" prop="experimentalName" label="考核名称" min-width="250" align="center">
                    <template slot-scope="scope">
                        {{ experimentalName }}
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="学生姓名" min-width="100" align="center"></el-table-column>
                <el-table-column prop="workNumber" label="学号" min-width="100" align="center"></el-table-column>
                <el-table-column prop="score" label="分数" width="90" align="center"></el-table-column>
                <el-table-column prop="timeSum" label="耗时" width="90" align="center"></el-table-column>
                <el-table-column prop="submitTime" label="提交时间" min-width="150" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="160">
                    <template slot-scope="scope">
                        <el-button type="text" @click="show(scope.row)">查看成绩报告</el-button>
                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import Setting from "@/setting";
import util from "@/libs/util";
import echarts from "echarts";
import axios from 'axios';
export default {
    data() {
        return {
            activeName: "", // 当前标签页
            classId: "", // 当前班级id
            classList: [], // 班级标签页列表
            permissions: Number(this.$route.query.permissions),
            experimentalName: this.$route.query.projectName,
            id: this.$route.query.id,
            keyword: "",
            searchTimer: null,
            listData: [],
            multipleSelection: [],
            page: 1,
            pageSize: 10,
            total: 0,
            peopleNum: 0, // 总人数
            avgScore: 0, // 平均分
            token: util.local.get(Setting.tokenKey),
        };
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout(() => {
                this.initData();
            }, 500);
        }
    },
    mounted() {
        this.permissions && this.getSpliceClass() // 考核才需要查询班级列表
        this.getData()
    },
    methods: {
        handleClick(tab, event) { // 处理点击标签页
            if (this.classId === tab.name) return;
            this.classId = tab.name;
            sessionStorage.setItem('activeName', tab.name)
            this.getData();
        },
        // 获取拼接班级
        getSpliceClass() {
            this.$post(`${this.api.spliceClass}?assessmentId=${this.id}`).then(res => {
                this.classList = res.list
                const activeName = sessionStorage.getItem('activeName')
                if(activeName && this.classList.some(item => item.id === activeName)) {
                    this.classId = activeName
                    this.activeName = activeName
                }else {
                    this.classId = this.classList[0].id;
                    this.activeName = this.classList[0].id;
                }
            }).catch(err => {})
        },
        // 获取表格数据
        getData() {
            // 考核
            if (this.permissions) {
                this.$post(`${this.api.getAssessmentDetail}?pageNum=${this.page}&pageSize=${this.pageSize}&assessmentId=${this.id}&classId=${this.classId}&keyword=${this.keyword}`).then(res => {
                    this.listData = res.page.records
                    this.total = res.page.total
                    this.avgScore = res.avgScore
                    this.peopleNum = res.peopleNum
                    this.getChart()
                }).catch(err => {})
            } else {
                // 练习
                this.$post(`${this.api.getPracticeDetail}?pageNum=${this.page}&pageSize=${this.pageSize}&projectId=${this.id}&keyword=${this.keyword}`).then(res => {
                    this.listData = res.page.records
                    this.total = res.page.total
                    let avgScore = +res.avgScore
                    this.avgScore = avgScore.toFixed(2)
                    this.peopleNum = res.peopleNum
                    this.getChart()
                }).catch(res => {})
            }
        },
        // 查看成绩报告
        show(row) {
            this.$router.push(`show?reportId=${row.reportId}`)
        },
        // 导出(有勾选：就导勾选中的；没有勾选：就导全部)
        exportData() {
          // 考核和练习的接口不一样
          let url = this.permissions
                      ? `${this.api.exportAssessmentInfo}?assessmentId=${this.id}&classId=${this.classId}`
                      : `${this.api.exportPracticeInfo}?projectId=${this.id}`
          // 有勾选，就带上勾选的id
          if (this.multipleSelection.length) {
            const ids = this.multipleSelection.map(e => e.reportId)
            url += `&ids=${ids.toString()}`
          }
          axios.get(url, {
            headers: {
              token: this.token
            },
            responseType: 'blob'
          }).then((res) => {
            util.downloadFileDirect(`学生${this.permissions ? '考核' : '练习'}成绩.xls`,new Blob([res.data]))
          }).catch(res => {})
        },
        handleDelete(row) { // 删除
            this.$confirm("确定要删除吗？", "提示", {
                type: "warning"
            }).then(() => {
                this.$post(this.api.deleteExperimentalReport, [row.reportId]).then(res => {
                    util.successMsg("删除成功");
                    this.getData();
                }).catch(res => {
                });
            }).catch(() => {
            });
        },
        delAllData() { // 批量删除
            if (this.multipleSelection.length) {
                this.$confirm("该项目下的所有成绩报告将会删除，是否继续？", "提示", {
                    type: "warning"
                }).then(() => {
                    let ids = this.multipleSelection.map(item => {
                        return item.reportId;
                    });
                    this.$post(this.api.deleteExperimentalReport, ids).then(res => {
                        this.multipleSelection = [];
                        this.$refs.table.clearSelection();
                        util.successMsg("删除成功");
                        this.getData();
                    }).catch(res => {
                    });
                }).catch(() => {
                });
            } else {
                util.errorMsg("请先选择数据 ！");
            }
        },
        handleSelectionChange(val) { // 多选
            this.multipleSelection = val;
        },
        handleCurrentChange(val) { // 切换分页
            this.page = val;
            this.handlePage();
        },
        getChart() { // 初始化折线图
            let data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            let list = this.listData
            list.map(n => {
                n.score;
                if (n.score >= 0 && n.score <= 10) {
                    data[0]++;
                } else if (n.score > 10 && n.score <= 20) {
                    data[1]++;
                } else if (n.score > 20 && n.score <= 30) {
                    data[2]++;
                } else if (n.score > 30 && n.score <= 40) {
                    data[3]++;
                } else if (n.score > 40 && n.score <= 50) {
                    data[4]++;
                } else if (n.score > 50 && n.score <= 60) {
                    data[5]++;
                } else if (n.score > 60 && n.score <= 70) {
                    data[6]++;
                } else if (n.score > 70 && n.score <= 80) {
                    data[7]++;
                } else if (n.score > 80 && n.score <= 90) {
                    data[8]++;
                } else if (n.score > 90 && n.score <= 100) {
                    data[9]++;
                }
            })
            // const datas = []
            // for (let i = 0; i <= 100; i++) {
            //     datas.push(list.filter(e => e.score === i).length)
            // }
            let myChart = echarts.init(document.getElementById("chart"));
            myChart.setOption({
                title: { text: "实验分数分布图" },
                tooltip: {},
                xAxis: {
                    name: "分数",
                    type: "category",
                    boundaryGap: false,
                    interval: 10,
                    // splitNumber: 10,
                    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",
                    interval: 1
                },
                series: [{
                    data,
                    type: "line",
                    areaStyle: {},
                    color: ["#8191fd"]
                }]
            });
        },
        goBack() {
            this.$router.push("/achievement/list?per=1");
        }
    }
};
</script>

<style lang="scss" scoped>

/deep/ .head-card {
    .el-card__body {
        padding-bottom: 0px;

        .el-tabs__header {
            margin-bottom: 1px;

            .el-tabs__nav-wrap::after {
                display: none;
            }

            .el-tabs__item {
                font-size: 18px;
            }
        }
    }
}

.stat {
    display: flex;

    .nums {
        display: flex;
        align-items: center;
        margin-right: 20px;

        .item:nth-child(1) {
            background-image: url('../../../assets/img/total.png');
        }

        .item:nth-child(2) {
            background-image: url('../../../assets/img/avg.png');
        }

        .item {
            width: 300px;
            padding: 30px 30px;
            margin: 0 10px;
            box-sizing: border-box;
            border-radius: 8px;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            p {
                font-size: 18px;
                color: #ffffff;
            }

            .val {
                margin-top: 10px;
                color: #ffffff;
                font-size: 36px;
            }
        }
    }

    .chart {
        flex: 1;
        height: 300px;
    }
}
</style>