bigDataStudent/src/views/analysisReport/wrongQuestion/index.vue

<template>
    <div>
        <div class="select_box">
            <el-radio-group v-model="errorType" size="medium" @change="_queryStudentErrorQuestion">
                <el-radio-button :label="-1">全部试题（{{ allErrorCount }}）</el-radio-button>
                <el-radio-button :label="0">未掌握（{{ unMasterCount }}）</el-radio-button>
                <el-radio-button :label="1">已掌握（{{ masterCount }}）</el-radio-button>
                <el-radio-button :label="2">复习题（{{ reviewCount }}）</el-radio-button>
            </el-radio-group>
        </div>

        <div class="content">
            <div class="right_btn">
                <el-button size="medium" @click="downloadDialogVisible = true">下载错题本</el-button>
                <el-button type="primary" size="medium" @click="downloadDialogVisible = true">下载个性化提升手册</el-button>
            </div>

            <Download :visible.sync="downloadDialogVisible" :examId="examId" :subjectCode="subjectCode" />

            <template v-if="questionList.length > 0">
                <div v-for="(question, index) in questionList" :key="question.questionId">
                    <div class="question_card">
                        <div class="card_top">
                            <div class="card_top_info">
                                <div class="left">
                                    <span class="number">{{ index + 1 }}</span>
                                    <span class="gray">试题类型：</span>
                                    <span class="black">{{ question.questionType }}</span>
                                    <!-- TODO: 这个地方的字段后端未确认 -->
                                    <span class="tag" v-if="question.classScoreRate < 40">高频错题</span>
                                </div>
                            </div>

                            <div class="question_content" v-if="question.sourceType === 1"
                                v-html="question.questionData.questionStem"></div>

                            <div class="question_content" v-if="question.sourceType === 2">
                                <img :src="question.questionImg" alt="" width="100%">
                            </div>

                            <div class="card_footer">
                                <div class="footer_item">
                                    <span class="gray">满分：</span>
                                    <span class="blue">{{ question.fullScore }}</span>
                                    <span class="gray">分</span>
                                </div>
                                <div class="footer_item">
                                    <span class="gray">我的得分：</span>
                                    <span class="blue">{{ question.score }}</span>
                                    <span class="gray">分</span>
                                </div>
                                <div class="footer_item">
                                    <span class="gray">难度</span>
                                    <span :class="countDiffcutyClass(question.difficulty)">{{ question.difficulty }} </span>
                                </div>
                            </div>
                        </div>

                        <div class="card_buttom">
                            <div class="btn_box">
                                <span class="black" :class="{ blue: question.answerShow }" size="small"
                                    @click="ShowAnserAndParse(1, question);">
                                    <i class="iconfont icon_daan"></i>
                                    我的答案
                                    <i class="answerShow_content" v-if="question.answerShow && !question.parseShow"></i>
                                </span>

                                <span class="black" :class="{ blue: question.parseShow }" size="small"
                                    @click="ShowAnserAndParse(2, question);">
                                    <i class="iconfont icon_jiexi"></i>
                                    查看解析
                                    <i class="parseShow_content" v-if="question.parseShow && !question.answerShow"></i>
                                </span>

                                <template v-if="question.errorStatus === 0">
                                    <template v-if="errorType === -1 || errorType === 0">
                                        <span class="black" size="small"
                                            @click="_markStudentErrorQuestion(question, 1)">
                                            <i class="iconfont icon_biaojiyizhangwo"></i>
                                            标记为已掌握
                                        </span>
                                        <span class="black" size="small"
                                            @click="_markStudentErrorQuestion(question, 2)">
                                            <i class="iconfont icon_jiarufuxiben"></i>
                                            加入复习本
                                        </span>
                                    </template>
                                </template>

                                <template v-if="errorType === 1 || question.errorStatus === 1">
                                    <span class="black" size="small" @click="_markStudentErrorQuestion(question, 0)">
                                        <i class="iconfont icon_biaojiweizhangwo"></i>
                                        标记为未掌握
                                    </span>
                                </template>

                                <template v-if="errorType === 2 || question.errorStatus === 2">
                                    <span class="black" size="small" @click="_markStudentErrorQuestion(question, 0)">
                                        <i class="iconfont icon_yichufuxiben"></i>
                                        移除复习本
                                    </span>
                                </template>
                            </div>

                            <div class="content" v-if="question.parseShow && !question.answerShow">
                                <div class="flex" style="align-items: center;">
                                    <div class="flex_left">知识点：</div>
                                    <div class="flex_right">
                                        <template v-if="question.knowledgePoint && question.knowledgePoint.length > 0">
                                            <KnowledgePoint v-for="(know, index) in question.knowledgePoint"
                                                :key="index" :text="know" />
                                        </template>
                                    </div>
                                </div>

                                <div class="flex">
                                    <div class="flex_left">答&nbsp;&nbsp;&nbsp;案：</div>
                                    <div class="flex_right">
                                        <div v-if="question.sourceType === 1" v-html="question.questionData.answer">
                                        </div>
                                        <div v-if="question.sourceType === 2">
                                            <img :src="question.answerImg" alt="" width="100%" />
                                        </div>
                                    </div>
                                </div>

                                <div class="flex">
                                    <div class="flex_left">解&nbsp;&nbsp;&nbsp;析：</div>
                                    <div class="flex_right">
                                        <div style="line-height: 1.5;" v-show="question.sourceType === 1"
                                            v-html="question.questionData.analysis">
                                        </div>
                                        <div v-if="question.sourceType === 2">
                                            <img :src="question.parseImg" alt="" width="100%" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="content" v-if="question.answerShow && !question.parseShow">
                                <div class="content_inner" v-if="question.sourceType === 1"
                                    v-html="question.studentAnswer"></div>
                                <div class="content_inner" v-if="question.sourceType === 2">
                                    <img :src="question.studentAnswerImg" alt="" width="100%" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 变式题推送，无数据 -->
                    <div class="question_card" v-if="question.variationQuestion">
                        <div class="card_top">
                            <div class="card_top_info">
                                <div class="left">
                                    <span class="number"
                                        :class="countLevel(question.variationQuestion.questionLevel).color">
                                        {{ countLevel(question.variationQuestion.questionLevel).text }}
                                    </span>
                                    <span class="gray">试题类型：</span>
                                    <span class="black" style="margin-right: 20px;">
                                        {{ question.variationQuestion.questionType }}
                                    </span>
                                    <span class="gray">难度：</span>
                                    <span :class="countDiffcutyClass(question.variationQuestion.difficulty)">{{
                                        question.variationQuestion.difficulty }}</span>
                                </div>
                            </div>

                            <div class="question_content" v-html="question.variationQuestion.questionStem">这是题目内容</div>

                            <!-- <div class="yuwen">
                                <span class="btn_span active">1</span>
                                <span class="btn_span">2</span>

                                <div class="question_list"></div>
                            </div> -->

                            <div class="card_footer">
                                <div class="gray">知识点：</div>
                                <KnowledgePoint :text="question.variationQuestion.knowledgePoint" />
                            </div>
                        </div>
                    </div>
                </div>

                <div style="text-align: right;">
                    <el-pagination background layout="prev, pager, next" :total="pageParam.total"
                        :page-size="pageParam.pageSize" :current-page="pageParam.pageNum"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </template>

            <NoData v-else>暂无数据</NoData>
        </div>
    </div>
</template>

<script>
import {
    queryStudentErrorQuestion,
    markStudentErrorQuestion,
    downloadStudentErrorQuestion,
} from '../../../http/api/errorQuestion';
import Download from './Download.vue';
import loadImg from './loadImg.js'
import { Loading } from 'element-ui';
import NoData from './NoData/NoData.vue';
import KnowledgePoint from './KnowledgePoint.vue';
export default {
    components: {
        Download,
        NoData,
        KnowledgePoint,
    },

    data() {
        return {
            pageParam: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },
            questionList: [],
            allErrorCount: 0,
            unMasterCount: 0,
            masterCount: 0,
            reviewCount: 0,
            answerUrls: [],
            uploadPaperUrls: [],
            errorType: -1, // -1全部 0未掌握 1已掌握 2复习题

            examId: null,
            examType: null,
            gradeCode: null,

            downloadDialogVisible: false,
        };
    },

    computed: {
        subjectCode() {
            return this.$store.state.report.filterObject.subjectCode;
        }, //分析报告公共参数变量
    },

    watch: {
        subjectCode(newVal, oldVal) {
            if (newVal !== oldVal) {
                this._queryStudentErrorQuestion();
            }
        },
    },

    created() {
        const ExamInfoItem = JSON.parse(localStorage.getItem("ExamInfoItem") || "{}");
        const reportExamCourseItem = JSON.parse(localStorage.getItem("reportExamCourseItem") || "{}");
        this.examId = reportExamCourseItem.examId;
        this.gradeCode = ExamInfoItem.examData.gradeCode;
        this.examType = ExamInfoItem.examData.examType;
    },

    async mounted() {
        await this._queryStudentErrorQuestion();
    },

    methods: {
        countDiffcutyClass(difficulty) {
            console.log(difficulty);

            // 容易：#90CB75    较易：#FAC858  一般：#5470C6  较难：#EA7ACB  困难：#EE6666
            const classMap = {
                '容易': 'easy',
                '较易': 'medium_easy',
                '一般': 'medium',
                '较难': 'medium_hard',
                '困难': 'hard'
            }
            return classMap[difficulty] || ''
        },

        countLevel(num) {
            const arr = ['拔高题', '进阶题', '巩固题']
            const color = ['easy', 'medium', 'hard']
            return {
                text: arr[num - 1],
                color: color[num - 1],
            }
        },

        ShowAnserAndParse(type, question) {
            if (type === 1) {
                question.answerShow = !question.answerShow;
                question.parseShow = false
            }

            if (type === 2) {
                question.parseShow = !question.parseShow;
                question.answerShow = false
            }
        },

        async _queryStudentErrorQuestion() {
            const instance = Loading.service({ fullscreen: true });
            const { subjectCode, gradeCode, examType, examId, errorType, pageParam: { pageNum, pageSize } } = this
            const res = await queryStudentErrorQuestion({ subjectCode, gradeCode, examType, examId, errorType, pageNum, pageSize });

            if (res.code === 200) {
                const { allErrorCount, unMasterCount, masterCount, reviewCount, questionList, answerUrls, uploadPaperUrls } = res.data.records[0];

                this.allErrorCount = allErrorCount;
                this.masterCount = masterCount;
                this.unMasterCount = unMasterCount;
                this.reviewCount = reviewCount;
                this.answerUrls = answerUrls;
                this.uploadPaperUrls = uploadPaperUrls;
                this.pageParam.total = res.data.total * 1;

                for (let i = 0; i < questionList.length; i++) {
                    const { sourceType, titleCoordinates, answerCoordinates, parseCoordinates, paintingPosition } = questionList[i]
                    questionList[i].answerShow = false;
                    questionList[i].parseShow = false;
                    if (sourceType === 2) {
                        const questionImg = await loadImg(this.uploadPaperUrls, titleCoordinates);
                        questionList[i].questionImg = questionImg;

                        const answerImg = await loadImg(this.answerUrls, answerCoordinates);
                        questionList[i].answerImg = answerImg;

                        const parseImg = await loadImg(this.answerUrls, parseCoordinates);
                        questionList[i].parseImg = parseImg;

                        // TODO: 学生答案图片加载，由于
                        const studentAnswerImg = await loadImg(this.answerUrls, paintingPosition);
                        questionList[i].studentAnswerImg = studentAnswerImg;
                    }
                }

                this.questionList = questionList;
            }

            instance.close();
        },

        async _markStudentErrorQuestion(question, markStatus) {
            const res = await markStudentErrorQuestion({
                questionId: question.questionId,
                examId: this.examId,
                subjectCode: this.subjectCode,
                markStatus
            })

            if (res.code === 200) {
                this.$message.success('操作成功');
                await this._queryStudentErrorQuestion();
            } else {
                this.$message.error(res.message || '操作失败');
            }
        },

        async handleCurrentChange(page) {
            this.pageParam.pageNum = page;
            await this._queryStudentErrorQuestion();
        },
    },
}
</script>

<style scoped lang="scss">
.flex {
    display: flex;
    margin-bottom: 10px;

    .flex_left {
        width: 60px;
    }

    .flex_right {
        flex: 1;
    }
}

.select_box {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.content {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 10px;
}

.right_btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.question_card {
    margin-bottom: 10px;
    border: 1px solid #DCDFE6;
    border-radius: 10px;
    overflow: hidden;

    .card_top {
        padding: 20px;
    }

    .card_top_info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .left {
            display: flex;
            align-items: center;

            span {
                margin-right: 10px;
                font-size: 14px;
            }

            .tag {
                color: #ffffff;
                padding: 4px 5px;
                font-size: 12px;
                background-color: #F56C6C;
                border-radius: 2px;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 0;
                    height: 0;
                    border-top: 5px solid transparent;
                    border-bottom: 5px solid transparent;
                    border-right: 5px solid #EE6666;
                }
            }
        }
    }

    .number {
        color: #ffffff;
        font-size: 14px;
        padding: 5px 9px;
        background-color: #2E64FA;
        border-radius: 4px;
    }

    .btn_span {
        color: #2E64FA;
        font-size: 14px;
        padding: 5px 9px;
        border: 1px solid #2E64FA;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 10px;

        &.active {
            color: #ffffff;
            background-color: #2E64FA;
            border-radius: 4px;
        }
    }

    .gray {
        color: #999;
    }

    .black {
        color: #333;
    }

    .blue {
        color: #2E64FA;
    }

    .question_content {
        margin-bottom: 20px;
    }

    .yuwen {
        margin-top: 20px;

        .question_list {
            margin-top: 20px;
            height: 100px;
            padding-top: 20px;
            border-top: 1px solid #EBEEF5;
        }
    }

    .card_footer {
        display: flex;
        align-items: center;
        padding-top: 20px;
        border-top: 1px solid #EBEEF5;

        .footer_item {
            margin-right: 40px;

            span {
                margin-right: 5px;
            }
        }
    }

    .card_buttom {
        background-color: #F0F2F5;
        padding: 15px 20px;

        .btn_box {
            display: flex;
            justify-content: flex-end;

            span {
                margin-left: 20px;
                cursor: pointer;
            }
        }

        .content {
            padding: 20px;
            background-color: #ffffff;
            margin-top: 20px;
            border-radius: 10px;

            .content_inner {
                border: 2px dotted #DCDFE6;
                border-radius: 4px;
                padding: 10px;
            }
        }

        .parseShow_content {
            position: relative;

            &::before {
                content: '';
                position: absolute;
                right: 20px;
                /* 根据需要调整三角水平位置 */
                top: 24px;
                /* 三角放置在外部，超出上方 */
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 12px solid #ffffff;
                z-index: 2;
            }
        }

        .answerShow_content {
            position: relative;

            &::before {
                content: '';
                position: absolute;
                right: 20px;
                /* 根据需要调整三角水平位置 */
                top: 24px;
                /* 三角放置在外部，超出上方 */
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 12px solid #ffffff;
                z-index: 2;
            }
        }
    }


}
</style>