src/views/basic/askTestQuestion/components/testBzrMulti.vue

<template>
    <div style="margin-right: 20px;width: 100%">
        <div v-if="status == 'select'">
            <el-row class="row-type">
                <div style="float: right;">
                    <el-button type="primary" :disabled="multipleSelection.length < 1" class="opration-btn"
                        @click="handlerTotal">查看汇总报表</el-button>
                </div>
            </el-row>
            <el-row class="row-table">
                <el-table class="default-table" :data="$props.list" @selection-change="_tableSelectedChange">
                    <el-table-column type="selection" width="48" :selectable="_checkboxDisabled" />
                    <el-table-column prop="subjectName" label="科目" width="100"></el-table-column>
                    <el-table-column prop="className" label="班级" width="100"></el-table-column>
                    <el-table-column prop="title" label="试卷名称"></el-table-column>
                    <el-table-column prop="examPaperScore" label="卷面分" width="100"></el-table-column>
                    <el-table-column label="测验人数/班级人数" width="200">
                        <template slot-scope="scoped">
                            {{ `${scoped.row.answeredNum}/${scoped.row.classPersonNum}` }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="examStartTime" label="测验时长"></el-table-column>
                </el-table>
            </el-row>
        </div>
        <div v-if="status == 'selected'">
            <el-container style="height: 100%;width: 100%;">
                <el-main id="print-content">
                    <el-row class="row-type">
                        <div style="float: right;">
                            <el-button type="primary" @click="_import" class="opration-btn"
                                icon="el-icon-upload2">导出报表</el-button>
                            <el-button type="primary" @click="_print" class="opration-btn"
                                icon="el-icon-printer">打印报表</el-button>
                        </div>
                    </el-row>
                    <el-row class="row-table">
                        <el-table :data="selectedList" style="width: 100%" class="default-table">
                            <el-table-column prop="studentCode" label="学号" fixed></el-table-column>
                            <el-table-column prop="studentName" label="姓名" fixed>
                                <template slot-scope="scoped"><span class="click-b" @click="toPortrait(scoped.row)">
                                        {{ scoped.row.studentName }}
                                    </span></template>
                            </el-table-column>
                            <el-table-column v-for="(item, index) in answerList" :key="index" :label="item">
                                <el-table-column :prop="'examCount' + item" label="测练数"
                                    :class-name="index % 2 == 0 ? 'bg' : ''">
                                    <template slot-scope="scoped">{{
            scoped.row["examCount" + item] ||
                Number(scoped.row["examCount" + item]) === 0
                ? scoped.row["examCount" + item]
                : "-"
        }}</template>
                                </el-table-column>
                                <el-table-column :prop="'participationCount' + item" label="参与数"
                                    :class-name="index % 2 == 0 ? 'bg' : ''">
                                    <template slot-scope="scoped">{{
            scoped.row["participationCount" + item] ||
                Number(scoped.row["participationCount" + item]) === 0
                ? scoped.row["participationCount" + item]
                : "-"
        }}</template>
                                </el-table-column>
                                <el-table-column :prop="'score' + item" label="总分"
                                    :class-name="index % 2 == 0 ? 'bg' : ''">
                                    <template slot-scope="scoped">{{
            scoped.row["score" + item] ||
                Number(scoped.row["score" + item]) === 0
                ? scoped.row["score" + item]
                : "-"
        }}</template>
                                </el-table-column>
                                <el-table-column :prop="'classRank' + item" label="班名"
                                    :class-name="index % 2 == 0 ? 'bg' : ''">
                                    <template slot-scope="scoped">{{
            scoped.row["classRank" + item] ||
                                        Number(scoped.row["classRank" + item]) === 0
                                        ? scoped.row["classRank" + item]
                                        : "-"
                                        }}</template>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column label="查看雷达图">
                                <template slot-scope="scoped">
                                    <el-button type="text" @click="openRandarChart(scoped.row)">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                </el-main>
                <el-footer>
                    <div style="float: right;margin-top: 10px;">
                        <el-button @click="_backa">返回</el-button>
                    </div>
                </el-footer>
            </el-container>
        </div>
        <el-dialog class="chart-dia" :visible.sync="redarVisible" :title="radarChart.title" width="800"
            :append-to-body="true">
            <div class="chart-box">
                <RadarChart id="testRadarChart" :params="radarChart"  />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { formatDate } from "utils";
import { downloadFile, tablePrint } from "@/utils";
import RadarChart from "@/components/charts/radarChart";
export default {
    name: "askbzrMutli",
    components: {
        RadarChart
    },
    props: {
        askReportIds: Array,
        queryParams: Object,
        list: Array
    },
    watch: {
        currentType: {
            handler: async function (val) {
            },
            deep: false,
        },
        $props: {
            handler: async function (val) {
            },
            deep: false,
        }
    },
    data() {
        return {
            selectedList: [],
            status: "select",
            checkedAll: 0,
            answerList: [],
            multipleSelection: [],
            multipleSelectionObj: {},
            redarVisible: false,
            radarChart: {
                title: "",
                indicator: [
                    {
                        name: "",
                        max: 100,
                        axisLabel: {
                            show: true,
                            showMaxLabel: true,
                            formatter: "{value}%",
                        },
                    },
                ],
                seriesData: []
            },
            //题干数据对象
            stem: {
                visible: false,
                src: null
            }
        };
    },
    async created() {
    },
    methods: {
        _print() {
            tablePrint("print-content", this.currentType);
        },
        _checkAll() {
            // this.multipleSelection = [...] 
        },
        _tableSelectedChange(values) {
            this.multipleSelection = values.map(items => items.id);
        },
        async _import() {
            var testReport = this.$request.cTExportPhaseExamReport;
            var classIds = [];
            var subjects = [];
            var ids = [];
            this.$props.list?.map((item) => {
                if (this.multipleSelection.includes(item.id)) {
                    subjects.push(item.subjectName);
                    classIds.push(item.classId);
                }
            });
            ids = [...this.multipleSelection];
            const data = await testReport({
                classIds: classIds,
                examIds: ids,
                subjectNames: subjects
            });
            if (data) {
                let blob = new Blob([data], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                });
                downloadFile(`即时测-多科汇总分析报表.xlsx`, blob);
            } else {
                this.$message.error("下载失败");
            }
        },
        _checkboxDisabled(obj) {
            if (obj.examStartTime) {
                return true;
            } else {
                return false;
            }
        },
        async refresh() {
        },
        async handlerTotal() {
            if (this.multipleSelection.length == 0) {
                this.$message.warning("请选择试卷！");
                return;
            }
            this.status = 'selected'
            await this._loadData();
        },
        setSubPro(type) {
            let tit;
            switch (type) {
                case 2:
                    tit = "单选题";
                    break;
                case 3:
                    tit = "多选题";
                    break;
                case 4:
                    tit = "判断题";
                    break;
                case 5:
                    tit = "主观题";
                    break;
                default:
                    tit = "其他";
            }
            return tit;
        },
        setDuration(times) {
            let m = parseInt(times / 1000 / 60);
            let s = parseInt((times / 1000) % 60);
            let ms = times;
            let aTime;
            if (times == 0) {
                aTime = `0`;
            } else {
                if (m == 0 && s == 0) {
                    aTime = `${ms}毫秒`;
                } else if (m == 0 && s != 0) {
                    aTime = `${s}秒`;
                } else if (m != 0 && s != 0) {
                    aTime = `${m}分${s}秒`;
                }
            }
            return aTime;
        },
        _backa() {
            this.status = 'select'
            this.answerList = [];
            this.exportStudent = [];
        },
        openRandarChart(obj) {
         
            let max = 0;
         
            const dataList = obj.dataList.slice(1, obj.dataList.length);
            let subjectList = dataList.map((item) => {
                let score = Number(item.highestScore || item.score);
                max = score > max ? score : max;
                return item.subjectName;
            });
            max += 10;
            max = max > 150 ? 150 : max;
            this.radarChart = {
                indicator: [
                    {
                        name: "",
                        max: max,
                        axisLabel: {
                            show: true,
                            showMaxLabel: true,
                        },
                    },
                ],
                seriesData: [],
            };
            subjectList.map((item, index) => {
                if (index < 1) {
                    this.radarChart.indicator[index].name = item;
                    this.radarChart.indicator[index].max = max;
                } else {
                    this.radarChart.indicator.push({ name: item, max: max });
                }
            });
            // 为了美观
            if (this.radarChart.indicator.length < 3) {
                let num = this.radarChart.indicator.length;
                for (let i = 0; i < 6; i++) {
                    if (i >= num) {
                        this.radarChart.indicator.push({ name: "", max: max });
                    }
                }
            }
            this.radarChart.seriesData = [
                {
                    value: dataList.map((item) => item.highestScore),
                    name: "班级最高分",
                },
                {
                    value: dataList.map((item) => item.avgScore),
                    name: "班平均分",
                },
                {
                    value: dataList.map((item) => item.score),
                    name: "本人得分",
                },
            ]; 
            this.radarChart.title = obj.studentName + "-多科阶段作答表现图";
            console.log(this.radarChart)
            this.redarVisible = true;
        },
        async _loadData() {
            var classIds = [];
            var subjects = [];
            var ids = [];
            this.$props.list?.map((item) => {
                if (this.multipleSelection.includes(item.id)) {
                    subjects.push(item.subjectName);
                    classIds.push(item.classId);
                }
            });
            ids = [...this.multipleSelection];
            const { data, status, info } = await this.$request.cTPhaseExamReport({
                classIds: classIds,
                examIds: ids,
                subjectNames: subjects
            });
            if (status != 0) {
                this.$message.error(info);
                return;
            }
            let subjectName = [];
            this.selectedList = data?.list.map((item) => {
                let params = {};
                item.dataList.map((items, index) => {
                    if (!subjectName.includes(items.subjectName)) {
                        subjectName.push(items.subjectName);
                    }
                    console.log(items)
                    params["examCount" + items.subjectName] = items.examCount;
                    params["participationCount" + items.subjectName] =
                        items.participationCount;
                    params["score" + items.subjectName] = items.score;
                    params["classRank" + items.subjectName] = items.classRank;
                });
                return {
                    ...item,
                    ...params,
                };
            });
            this.answerList = [...subjectName];
            this.exportStudent = [...this.selectedList];
        }
    }
};
</script>
<style scoped lang="scss">
.chart-dia {
    .chart-box {
        width: 100%;
        height: 300px;
    }
    :deep(.el-dialog__body) {
        padding: 0 0 20px 0;
    }
}
.opration-btn {
    margin-right: 10px;
}
.opration-select {
    margin-left: 10px;
}
.row-line {
    width: calc(20% - 2px);
    border: 1px solid #ebeef5;
    background: #f5f7fa;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    .line-subfix {
        margin-left: 10px;
    }
}
.row-table {
    margin-top: 20px;
}
</style>