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

<template>
    <div style="margin-right: 20px;width: 100%">
        <el-row class="row-type">
            <label>报表类型</label>
            <el-select class="opration-select" v-model="currentType">
                <el-option v-for="(item, index) in types" :lable="item" :key="index" :value="item" />
            </el-select>
            <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>
        <div id="print-content">
            <div v-if="currentType == '学生多科作答表现'">
                <el-row class="row-table">
                    <el-table class="default-table" :data="answersList">
                        <el-table-column prop="studentCode" label="学号"></el-table-column>
                        <el-table-column prop="studentName" label="姓名"></el-table-column>
                        <el-table-column v-for="(item, index) in answersSubjects" :key="index" :label="item">
                            <el-table-column :label="index == 0 ? '总课时数' : '课时数'" :prop="'periodCount' + item">
                                <template slot-scope="scoped">{{
                scoped.row["periodCount" + item] ||
                    Number(scoped.row["periodCount" + item]) === 0
                    ? scoped.row["periodCount" + item]
                    : "-"
            }}</template>
                            </el-table-column>
                            <el-table-column :label="index == 0 ? '总出题数' : '出题数'" :prop="'questionNum' + item">
                                <template slot-scope="scoped">{{
                scoped.row["questionNum" + item] ||
                    Number(scoped.row["questionNum" + item]) === 0
                    ? scoped.row["questionNum" + item]
                    : "-"
            }}</template>
                            </el-table-column>
                            <el-table-column :label="index == 0 ? '总参与度' : '参与度'"
                                :prop="'participationRate' + item"><template slot-scope="scoped">{{
                scoped.row["participationRate" + item] ||
                    Number(scoped.row["participationRate" + item]) === 0
                    ? scoped.row["participationRate" + item] + "%"
                    : "-"
            }}</template>
                            </el-table-column>
                            <el-table-column :label="index == 0 ? '总正确率' : '正确率'"
                                :prop="'answerCorrectRate' + item"><template slot-scope="scoped">{{
                scoped.row["answerCorrectRate" + item] ||
                    Number(scoped.row["answerCorrectRate" + item]) === 0
                    ? scoped.row["answerCorrectRate" + item] + "%"
                    : "-"
            }}</template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="查看雷达图" fixed="right" width="100" align="center"
                            class-name="print-hidden">
                            <template slot-scope="scoped">
                                <el-button type="text" @click="openRandarChart(scoped.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </div>
            <div v-if="currentType == '学生多科互动表现'">
                <el-row class="row-table">
                    <el-table class="default-table" :data="interactionList">
                        <el-table-column prop="studentCode" label="学号"></el-table-column>
                        <el-table-column prop="studentName" label="姓名"></el-table-column>
                        <el-table-column prop="interactionsNum全部科目" label="参与分"></el-table-column>
                        <el-table-column prop="interactionsCorrectNum全部科目" label="对错分"></el-table-column>
                        <el-table-column v-for="(item, index) in interactionOptions" :key="index" :label="item">
                            <el-table-column label="互动数" :prop="'answerTimes' + item">
                                <template slot-scope="scoped">{{
                scoped.row["answerTimes" + item] ||
                    Number(scoped.row["answerTimes" + item]) === 0
                    ? scoped.row["answerTimes" + item]
                    : "-"
            }}</template>
                            </el-table-column>
                            <el-table-column label="参与数" :prop="'interactionsNum' + item">
                                <template slot-scope="scoped">{{
                scoped.row["interactionsNum" + item] ||
                    Number(scoped.row["interactionsNum" + item]) === 0
                    ? scoped.row["interactionsNum" + item]
                    : "-"
                                    }}</template>
                            </el-table-column>
                            <el-table-column label="答对数" :prop="'interactionsCorrectNum' + item">
                                <template slot-scope="scoped">{{
                                    scoped.row["interactionsCorrectNum" + item] ||
                                    Number(scoped.row["interactionsCorrectNum" + item]) === 0
                                    ? scoped.row["interactionsCorrectNum" + item]
                                    : "-"
                                    }}</template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </el-row>
            </div>
        </div>
        <el-dialog :append-to-body="true" class="chart-dia" :visible.sync="redarVisible" :title="radarChart.title"
            width="800">
            <div class="chart-box">
                <RadarChart id="radarChart" :params="radarChart" :tooltipFormatter="true" />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { downloadFile, tablePrint, formatDate } from "@/utils";
import RadarChart from "@/components/charts/radarChart";
export default {
    name: "askbzrMutli",
    components: {
        RadarChart
    },
    props: {
        askReportIds: Array,
        queryParams: Object
    },
    watch: {
        currentType: {
            handler: async function (val) {
                await this._changeType();
            },
            deep: false,
        },
        $props: {
            handler: async function (val) {
                await this._changeType();
            },
            deep: false,
        }
    },
    data() {
        return {
            types: ["学生多科作答表现", "学生多科互动表现"],
            currentType: "学生多科作答表现",
            answersList: [],
            answersOptions: [],
            answersSubjects: [],
            interactionList: [],
            interactionOptions: [],
            interactionSubjects: [],
            redarVisible: false,
            radarChart: {
                title: "",
                indicator: [
                    {
                        name: "",
                        max: 100,
                        axisLabel: {
                            show: true,
                            showMaxLabel: true,
                            formatter: "{value}%",
                        },
                    },
                ],
                seriesData: []
            },
            //题干数据对象
            stem: {
                visible: false,
                src: null
            }
        };
    },
    async created() {
        await this._changeType();
    },
    methods: {
        async _import() {
            var importReport = this.currentType == '学生多科互动表现' ? this.$request.cTExportPhaseInteractiveReport : this.$request.cTExportPhaseAnswerReport;
            const data = await importReport({
                periodIds: this.$props.askReportIds,
                classIds: [this.$props.queryParams.class],
                subjectNames: [...this.$props.queryParams.subjects],
            });
            if (data) {
                let blob = new Blob([data], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                });
                downloadFile(`随堂问-多科汇总分析报表.xlsx`, blob);
            } else {
                this.$message.error("下载失败");
            }
        },
        _print() {
            var splitParam = 0;
            var diffNumber = 0;
            var diffStNumber = 0;
            if (this.currentType == '学生多科作答表现') {
                splitParam = 16;
                diffNumber = 2;
                diffStNumber = 15;
            }
            else if (this.currentType == '学生多科互动表现') {
                splitParam = 15;
                diffNumber = 4;
                diffStNumber = 14;
            }
            tablePrint({
                id: "print-content",
                title: this.currentType,
                lindex: 1,
                splitParam: splitParam,
                fixedColumn: 2,
                diffNumber: diffNumber,
                diffStNumber: diffStNumber
            });
        },
        async refresh() {
            await this._changeType();
        },
        async _changeType() {
            switch (this.currentType) {
                case "学生多科作答表现": { await this._multipleSubjectAnswers(); }; break;
                case "学生多科互动表现": { await this._multiDisciplinaryInteraction(); }; break;
            }
        },
        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;
        },
        async _multipleSubjectAnswers() {
            const answersRequest =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPhaseAnswerReport
                    : this.$request.cTPhaseAnswerReport;
            let query = {
                periodIds: this.$props.askReportIds,
                classIds: [this.$props.queryParams.class],
                subjectNames: [...this.$props.queryParams.subjects],
            };
            let answersResponse = await answersRequest({
                ...query
            });
            if (answersResponse.status != 0) {
                this.$message.error(answersResponse.info);
                return;
            }
            let optionsList = [];
            let subjectName = [];
            this.answersList = answersResponse.data?.list?.map((item) => {
                let params = {};
                item.dataList.map((items, index) => {
                    if (!subjectName.includes(items.subjectName)) {
                        subjectName.push(items.subjectName);
                    }
                    params["answerCorrectRate" + items.subjectName] =
                        items.answerCorrectRate;
                    params["correctRate" + items.subjectName] = items.correctRate;
                    params["participationRate" + items.subjectName] =
                        items.participationRate;
                    params["periodCount" + items.subjectName] = items.periodCount;
                    params["questionNum" + items.subjectName] = items.questionNum;
                });
                return {
                    ...item,
                    ...params,
                };
            });
            this.answersSubjects = [...subjectName];
            this.answersOptions = [...optionsList];
        },
        async _multiDisciplinaryInteraction() {
            this.studentPerformance = [];
            if (!this.$props.askReportIds || this.$props.askReportIds.length < 1) return;
            const interactionRequest =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPhaseInteractiveReport
                    : this.$request.cTPhaseInteractiveReport;
            let query = {
                periodIds: this.$props.askReportIds,
                classIds: [this.$props.queryParams.class],
                subjectNames: [...this.$props.queryParams.subjects],
            };
            let interactionReponse = await interactionRequest({
                ...query
            });
            if (interactionReponse.status != 0) {
                this.$message.error(interactionReponse.info);
                return;
            }
            let subjectName = [];
            this.interactionList = interactionReponse.data?.list?.map((item) => {
                let params = {};
                item.dataList?.filter((items, index) => {
                    if (!subjectName.includes(items.subjectName) && items.subjectName != '全部科目') {
                        subjectName.push(items.subjectName);
                    }
                    params["answerTimes" + items.subjectName] =
                        items.answerTimes;
                    params["interactionsNum" + items.subjectName] =
                        items.interactionsNum;
                    params["interactionsCorrectNum" + items.subjectName] =
                        items.interactionsCorrectNum;
                });
                return {
                    ...item,
                    ...params,
                };
            });
            console.log(this.interactionList)
            this.interactionOptions = [...subjectName];
        },
        openRandarChart(obj) {
            this.radarChart = {
                indicator: [
                    {
                        name: "",
                        max: 100,
                        axisLabel: {
                            show: true,
                            showMaxLabel: true,
                            formatter: "{value}%",
                        },
                    },
                ],
                seriesData: [],
            };
            this.radarChart.title = obj.studentName + "-多科阶段作答表现图";
            let dataList = obj.dataList.slice(1, obj.dataList.length);
            let subjectList = dataList.map((item) => item.subjectName);
            subjectList.map((item, index) => {
                if (index < 1) {
                    this.radarChart.indicator[index].name = item;
                } else {
                    this.radarChart.indicator.push({ name: item, max: 100 });
                }
            });
            // 为了美观
            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: 100 });
                    }
                }
            }
            let participationRate = dataList.map((item) => item.participationRate);
            let correctRate = dataList.map((item) => item.correctRate);
            this.radarChart.seriesData = [
                {
                    value: participationRate,
                    name: "参与度",
                },
                {
                    value: correctRate,
                    name: "正确率",
                },
            ];
            this.redarVisible = true;
        }
    }
};
</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>