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.name" :name="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" size="small" @click="delAllData">批量删除</el-button>
                    <el-button type="primary" size="small" @click="exportData">导出</el-button>
                </div>
            </div>
            <el-table :data="listData" class="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="100" label="序号" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + (page - 1) * pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="schoolName" label="学校" align="center">
                </el-table-column>
                <el-table-column prop="experimentalName" label="考核名称" align="center">
                    <template slot-scope="scope">
                        {{ experimentalName }}
                    </template>
                </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="submitTime" label="提交时间" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="220">
                    <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";

export default {
    data() {
        return {
            activeName: "", // 当前标签页
            classId: "", // 当前班级id
            classList: [], // 班级标签页列表
            permissions: this.$route.query.permissions,
            experimentalName: this.$route.query.projectName,
            assessmentId: this.$route.query.assessmentId,
            keyword: "",
            searchTimer: null,
            listData: [],
            multipleSelection: [],
            page: 1,
            pageSize: 10,
            total: 0,
            peopleNum: 0, // 总人数
            avgScore: 0, // 平均分
        };
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout(() => {
                this.initData();
            }, 500);
        }
    },
    created() {
        this.classList = JSON.parse(this.$route.query.classList);
        this.classId = this.classList[0].id;
        this.activeName = this.classList[0].id;
        // console.log(this.classList);
    },
    mounted() {
        this.getData();
    },
    methods: {
        handleClick(tab, event) { // 处理点击标签页
            if (this.classId === tab.name) return;
            this.classId = tab.name;
            this.getData();
        },
        getData() { // 获取表格数据
            this.$post(`${this.api.getAssessmentDetail}?pageNum=${this.page}&pageSize=${this.pageSize}&assessmentId=${this.assessmentId}&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(res.getFractionalSegmentNum);
            }).catch(err => {
            });
        },
        show(row) { // 查看成绩报告
            if (this.permissions) {
                this.$router.push(`show?id=${row.recordId}&projectId=${row.projectId}&reportId=${row.reportId}&studentId=${row.studentId}`);
            } else {
                this.$router.push(`show?id=${row.recordId}&type=1`);
            }
        },
        exportData() { // 导出(有勾选：就导勾选中的；没有勾选：就导全部)
            if (this.multipleSelection.length) {
                let ids = this.multipleSelection.map(item => {
                    return item.projectId;
                });
                location.href = `${this.api.exportAssessmentInfo}?ids=${ids.toString()}`;
            } else {
                location.href = `${this.api.exportAssessmentInfo}?ids=`;
            }
        },
        handleDelete(row) { // 删除
            this.$confirm("确定要删除吗？", "提示", {
                type: "warning"
            }).then(() => {
                this.$post(this.api.deleteExperimentalReport, [row.projectId]).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.projectId;
                    });
                    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(num) { // 初始化折线图
            let data = [num.num1, num.num2, num.num3, num.num4, num.num5, num.num6, num.num7, num.num8, num.num9, num.num10];
            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,
                    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>