src/views/basic/askTestQuestion/components/askSummaryReport.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="_export" icon="el-icon-upload2" class="opration-btn">导出报表</el-button>
                <el-button type="primary" @click="_print" icon="el-icon-printer" class="opration-btn">打印报表</el-button>
            </div>
        </el-row>
        <div id="print-content">
            <div v-if="currentType == '题目作答表现汇总'">
                <el-row class="row-subfix" style="margin-top:10px">
                    <div class="row-line row-line">
                        <span class="line-subfix">班级：</span>
                        <span class="line-value">{{ detail.className }}</span>
                    </div>
                    <div class="row-line row-line">
                        <span class="line-subfix">科目：</span>
                        <span class="line-value">{{ detail.subjectName }}</span>
                    </div>
                    <div class="row-line row-line">
                        <span class="line-subfix">课时数：</span>
                        <span class="line-value">{{ $props.askReportIds.length }}</span>
                    </div>
                    <div class="row-line ">
                        <span class="line-subfix">上课时间：</span>
                        <span class="line-value">{{ detail.startTime }}</span>
                    </div>
                    <div class="row-line ">
                        <span class="line-subfix">下课时间：</span>
                        <span class="line-value">{{ detail.endTime }}</span>
                    </div>
                </el-row>
                <el-row class="row-subfix">
                    <div class="row-line row-line-5">
                        <span class="line-subfix">班级人数：</span>
                        <span class="line-value">{{ detail.classPersonNum }}</span>
                    </div>
                    <div class="row-line row-line-5">
                        <span class="line-subfix">签到人数：</span>
                        <span class="line-value">{{ detail.checkInCount }}</span>
                    </div>
                    <div class="row-line row-line-5">
                        <span class="line-subfix">题目总数：</span>
                        <span class="line-value">{{ detail.questionNum }}</span>
                    </div>
                    <div class="row-line row-line-5">
                        <span class="line-subfix">答题总数：</span>
                        <span class="line-value">{{ detail.totalAnswersNum }}</span>
                    </div>
                    <div class="row-line row-line-5">
                        <span class="line-subfix">课时时长：</span>
                        <span class="line-value">{{ setDuration(detail.consumingDuration) }}</span>
                    </div>
                </el-row>
                <el-row class="row-subfix">
                    <div class="row-line row-line-5">
                        <span class="line-subfix">答对总数：</span>
                        <span class="line-value">{{ detail.totalCorrectAnswersNum }}</span>
                    </div>
                    <div class="row-line row-line-5">
                        <span class="line-subfix">总参与度：</span>
                        <span class="line-value">{{ detail.participationRate ? detail.participationRate : 0 }}%</span>
                    </div>
                    <div class="row-line row-line-5">
                        <span class="line-subfix">班级正确率：</span>
                        <span class="line-value">{{ detail.classCorrectRate ? detail.classCorrectRate : 0 }}%</span>
                    </div>
                    <div class="row-line row-line-5">
                        <span class="line-subfix">已达正确率：</span>
                        <span class="line-value">{{ detail.answerCorrectRate ? detail.answerCorrectRate : 0 }}%</span>
                    </div>
                    <div class="row-line row-line-5">
                        <span class="line-subfix">反馈时长：</span>
                        <span class="line-value">{{ setDuration(detail.duration) }}</span>
                    </div>
                </el-row>
                <el-row class="row-table">
                    <el-table class="default-table" :data="singleSubjectSummary" border>
                        <el-table-column prop="title" label="课时-题号" />
                        <el-table-column label="题干" class-name="print-hidden" width="80">
                            <template slot-scope="scoped">
                                <el-button type="text" @click="openStem(scoped.row)">查看</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="questionType" label="题型" width="100">
                            <template slot-scope="scoped">{{ setSubPro(scoped.row.questionType) }}</template>
                        </el-table-column>
                        <el-table-column prop="answeredNum" label="答题人数" width="100" />
                        <el-table-column prop="correctAnswerNum" label="答对人数" width="100" />
                        <el-table-column prop="participationRate" label="班级参与度(单题)" width="170">
                            <template slot-scope="scoped">{{ scoped.row.participationRate }}%</template>
                        </el-table-column>
                        <el-table-column prop="classCorrectRate" label="班级正确率(单题)" width="170">
                            <template slot-scope="scoped">{{ scoped.row.classCorrectRate }}%</template>
                        </el-table-column>
                        <el-table-column prop="answerCorrectRate" label="已答正确率(单题)" width="170">
                            <template slot-scope="scoped">{{ scoped.row.answerCorrectRate }}%</template>
                        </el-table-column>
                        <el-table-column prop="knowledge" label="知识点(单题)" width="150">
                            <template slot-scope="scoped">
                                <el-tooltip effect="dark" :content="_knowledge(scoped.row.knowledge)"
                                    placement="bottom">
                                    <span class="overflowText">
                                        {{ _knowledge(scoped.row.knowledge) }}
                                    </span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column prop="correctAnswer" label="正确答案(单题)" width="150">
                            <template slot-scope="scoped">
                                {{
                scoped.row.questionType == 4 && scoped.row.correctAnswer == 1 ? "✓" :
                    scoped.row.questionType == 4 && scoped.row.correctAnswer == 2 ? "✗" :
                        scoped.row.correctAnswer
            }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="fallible" label="干扰选项(单题)" width="150">
                            <template slot-scope="scoped">
                                {{
                    scoped.row.questionType == 4 && scoped.row.fallible == 1 ? "✓" :
                        scoped.row.questionType == 4 && scoped.row.fallible == 2 ? "✗" :
                            scoped.row.fallible
                }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </div>
            <div v-if="currentType == '学生单科表现作答汇总表'">
                <el-row class="row-subfix" style="margin-top:10px">
                    <div class="row-line row-line-4">
                        <span class="line-subfix">班级：</span>
                        <span class="line-value">{{ detail.className }}</span>
                    </div>
                    <div class="row-line row-line-4">
                        <span class="line-subfix">科目：</span>
                        <span class="line-value">{{ detail.subjectName }}</span>
                    </div>
                    <div class="row-line row-line-4">
                        <span class="line-subfix">开始日期：</span>
                        <span class="line-value">{{ $props.queryParams.dateRange && $props.queryParams.dateRange.length
                > 1 ?
                $props.queryParams.dateRange[0] : "" }}</span>
                    </div>
                    <div class="row-line row-line-4">
                        <span class="line-subfix">截止日期：</span>
                        <span class="line-value">{{ $props.queryParams.dateRange && $props.queryParams.dateRange.length
                > 1 ?
                $props.queryParams.dateRange[1] : "" }}</span>
                    </div>
                    <!-- <div class="row-line">
                        <span class="line-subfix">下课时间：</span>
                        <span class="line-value">{{ detail.endTime }}</span>
                    </div> -->
                </el-row>
                <el-row class="row-subfix">
                    <div class="row-line row-line-4">
                        <span class="line-subfix">课时数：</span>
                        <span class="line-value">{{ $props.askReportIds.length }}</span>
                    </div>
                    <div class="row-line row-line-4">
                        <span class="line-subfix">总出题数：</span>
                        <span class="line-value">{{ detail.questionNum }}</span>
                    </div>
                    <div class="row-line row-line-4">
                        <span class="line-subfix">查询时间：</span>
                        <span class="line-value">{{ detail.selectDate }}</span>
                    </div>
                    <div class="row-line row-line-4">
                        <span class="line-subfix">查询老师：</span>
                        <span class="line-value">{{ this.$store.getters.info.name }}</span>
                    </div>
                    <!-- <div class="row-line row-line-5">
                        <span class="line-subfix">课时时长：</span>
                        <span class="line-value">{{ setDuration(detail.consumingDuration) }}</span>
                    </div> -->
                </el-row>
                <el-row class="row-table">
                    <el-table class="default-table" :data="studentPerformance">
                        <el-table-column prop="studentCode" label="学号" />
                        <el-table-column prop="studentName" label="姓名" width="160" />
                        <el-table-column prop="answerTimes" label="累计答题次数" width="160" />
                        <el-table-column prop="correctAnswerTimes" label="累计答对次数" width="160" />
                        <el-table-column prop="participationRate" label="总参与度" width="160">
                            <template slot-scope="scoped">{{ scoped.row.participationRate }}%</template>
                        </el-table-column>
                        <el-table-column prop="participationRateRank" label="总参与度排名" width="160" />
                        <el-table-column prop="correctRate" label="总正确率" width="120">
                            <template slot-scope="scoped">{{ scoped.row.correctRate }}%</template>
                        </el-table-column>
                        <el-table-column prop="correctRateRank" label="总正确率排名" width="140" />
                        <el-table-column prop="answerCorrectRate" label="已答正确率" width="120">
                            <template slot-scope="scoped">{{ scoped.row.answerCorrectRate }}%</template>
                        </el-table-column>
                        <el-table-column prop="correctAnswerNum" label="查看折线图" class-name="print-hidden" width="120">
                            <template slot-scope="scoped">
                                <el-button type="text" text @click="openLineChart(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="studentInteractive">
                        <el-table-column prop="studentCode" label="学号" />
                        <el-table-column prop="studentName" label="姓名" width="160" />
                        <el-table-column prop="interactionsNum" label="参与得分" width="210" />
                        <el-table-column prop="interactionsCorrectNum" label="对错得分" width="210" />
                        <el-table-column prop="rushAnswerTimes" label="抢答成功次数" width="210" />
                        <el-table-column prop="rushAnswerCorrectTimes" label="抢答答对次数" width="210" />
                        <el-table-column prop="checkAnswerTimes" label="被抽答次数" width="210" />
                        <el-table-column prop="checkAnswerCorrectTimes" label="抽答答对次数" width="210" />
                    </el-table>
                </el-row>
            </div>
        </div>
        <el-dialog :append-to-body="true" class="chart-dia" :visible.sync="lineChart.visible" :title="lineChart.title"
            width="800">
            <div class="chart-box">
                <LineChart id="askLineChart" :params="lineChart.data" :xAxis="lineChart.xAxis"
                    :tooltipFormatter="true" />
            </div>
        </el-dialog>
        <el-dialog :append-to-body="true" class="stem" :visible.sync="stem.visible" :title="'题干'" width="800">
            <Preview v-if="stem && stem.src" :src="stem.src" :key="stem.src" />
        </el-dialog>
        <ExportDia :exportStudent="exportStudent" :diaShow="diaShow" @cancel="cancel" @exportData="_exportData"
            :type="'折线图'" />
    </div>
</template>
<script>
import { formatDate, getKnowledge } from "utils";
import { downloadFile, tablePrint } from "@/utils";
import LineChart from "@/components/charts/lineChart";
import Preview from "@/components/preview";
export default {
    name: "askSummaryReport",
    components: {
        LineChart,
        Preview
    },
    props: {
        askReportIds: Array,
        queryParams: Object,
        role: "",
    },
    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: "题目作答表现汇总",
            detail: {},
            page: 1,
            exportStudent: [],
            diaShow: false,
            size: 10,
            total: 0,
            studentPerformance: [],
            singleSubjectSummary: [],
            studentInteractive: [],
            //折线图数据对象
            lineChart: {
                data: [],
                xAxis: [],
                title: "",
                visible: false
            },
            //题干数据对象
            stem: {
                type: "html",
                visible: false,
                src: null
            }
        };
    },
    async created() {
        await this._changeType();
        await this._detail();
    },
    methods: {
        _knowledge(knowledgeParam) {
            return getKnowledge(knowledgeParam)
        },
        _export() {
            this.diaShow = true;
        },
        _print() {
            let title = this.detail.title || this.subjectNames?.join();
            tablePrint({
                id: "print-content",
                title: title + "_" + this.currentType
            });
        },
        cancel() {
            this.diaShow = false;
        },
        async _exportData(arr) {
            let studentIds = arr;
            let query = {
                size: 9999
            };
            if (studentIds != null) {
                if (studentIds.length > 0) {
                    query.studentIds = studentIds;
                } else {
                    query.studentIds = [];
                }
            }
            let exportPeriodReport = "";
            query.periodIds = this.$props.askReportIds;
            query.classIds = [this.$props.queryParams.class];
            exportPeriodReport =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pExportPhaseAnswerReport
                    : this.$request.exportPhaseAnswerReport;
            const data = await exportPeriodReport({
                ...query,
            });
            if (data) {
                this.cancel();
                let blob = new Blob([data], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                });
                let name = `随堂问-${this.detail.className}-${this.detail.subjectName}汇总分析报表.xlsx`
                downloadFile(this.status ? "随堂问-已归档单课时报表.xlsx" : name, blob);
            } else {
                this.$message.error("下载失败");
            }
        },
        async refresh() {
            await this._changeType();
            await this._detail();
        },
        async _changeType() {
            this.detail.selectDate = formatDate(new Date(), "yyyy-MM-dd");
            switch (this.currentType) {
                case "题目作答表现汇总": { await this._singleSubjectSummary(); }; break;
                case "学生单科表现作答汇总表": { await this._studentPerformance(); }; break;
                case "学生单科互动表现排名表": { await this._studentInteractive(); }; 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) {
            if (!Number(times)) return "0分0秒";
            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) {
                    aTime = `${s}秒`;
                } else {
                    if (s == 0) {
                        aTime = `${m}分`;
                    }
                    else {
                        aTime = `${m}分${s}秒`;
                    }
                }
            }
            // c=(aTime);
            return aTime;
        },
        async _detail() {
            this.detail = {};
            if (!this.$props.askReportIds || this.$props.askReportIds.length < 1) return;
            const periodDetail =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPeriodDetail :
                    this.role == "ROLE_BANZHUREN" ?
                        this.$request.periodDetail
                        : this.$request.periodDetail;
            let detailReponse = await periodDetail({
                periodIds: this.$props.askReportIds
            });
            if (detailReponse.status != 0) {
                this.$message.error(detailReponse.info);
                return;
            }
            this.detail = detailReponse.data;
        },
        async _singleSubjectSummary() {
            this.singleSubjectSummary = [];
            if (!this.$props.askReportIds || this.$props.askReportIds.length < 1) return;
            const periodList =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPeriodQuestionReport
                    : this.$request.periodQuestionReport;
            let query = {
                periodIds: this.$props.askReportIds,
                classIds: [this.$props.queryParams.class],
                size: 9999
            };
            let periodListReponse = await periodList({
                ...query
            });
            if (periodListReponse.status != 0) {
                this.$message.error(periodListReponse.info);
                return;
            }
            this.singleSubjectSummary = periodListReponse.data.list;
            this.total = periodListReponse.data.count;
        },
        async _studentPerformance() {
            this.studentPerformance = [];
            if (!this.$props.askReportIds || this.$props.askReportIds.length < 1) return;
            const phaseAnswerList =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPhaseAnswerReport
                    : this.$request.phaseAnswerReport;
            let query = {
                periodIds: this.$props.askReportIds,
                classIds: [this.$props.queryParams.class],
            };
            let phaseAnswerReponse = await phaseAnswerList({
                ...query
            });
            if (phaseAnswerReponse.status != 0) {
                this.$message.error(phaseAnswerReponse.info);
                return;
            }
            this.studentPerformance = phaseAnswerReponse.data.list;
            this.total = phaseAnswerReponse.data.count;
        },
        async _studentInteractive() {
            this.studentInteractive = [];
            if (!this.$props.askReportIds || this.$props.askReportIds.length < 1) return;
            const interactiveList =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.phaseInteractiveReport
                    : this.$request.phaseInteractiveReport;
            let query = {
                periodIds: this.$props.askReportIds,
                classIds: [this.$props.queryParams.class],
            };
            let interactiveListReponse = await interactiveList({
                ...query
            });
            if (interactiveListReponse.status != 0) {
                this.$message.error(interactiveListReponse.info);
                return;
            }
            this.studentInteractive = interactiveListReponse.data.list;
            this.total = interactiveListReponse.data.count;
        },
        openLineChart(chartRow) {
            var subejct = this.$props.role == 'ROLE_BANZHUREN' ? this.$props.queryParams.subjects[0] : this.$props.queryParams.subject;
            this.lineChart.title = `${chartRow.studentName}-${subejct}-多课时作答表现图`;
            this.lineChart.visible = true;
            let participationRate = [];
            let correctRate = [];
            let answerCorrectRate = [];
            this.lineChart.xAxis = chartRow.dataList.map((item) => {
                participationRate.push(item.participationRate);
                correctRate.push(item.correctRate);
                answerCorrectRate.push(item.answerCorrectRate);
                return item.name;
            });
            this.lineChart.data = [
                {
                    name: "参与度",
                    value: participationRate,
                },
                {
                    name: "正确率",
                    value: correctRate,
                },
                {
                    name: "已答正确率",
                    value: answerCorrectRate,
                },
            ];
        },
        openStem(stemRow) {
            this.stem.src = stemRow.screenshot ?? "";
            console.log('stem', this.stem)
            this.stem.visible = true;
        },
        openExport() {
        }
    }
};
</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% - 4px);
    border: 1px solid #ebeef5;
    background: #f5f7fa;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    .line-subfix {
        margin-left: 10px;
    }
}
.row-line-4 {
    width: calc(25% - 4px);
    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>