创新实训-刷题册

<template>
    <el-col class="paper">
        <el-row :gutter="24">
            <!--  左侧   -->
            <el-col :span="4" :xs="24">
                <el-card class="type_list">
                    <div style="padding-bottom: 25px;">
                        <p class="type_name"> 数学刷题册 </p>
                        <el-divider></el-divider>
                        <el-row>
                            <el-tag v-for="(cp, index) in cpdata" :type="index === quIndex ? 'success' : ''"
                                @click="handleTag(index)" class="type_tag">
                                {{ index + 1 }}
                            </el-tag>
                        </el-row>
                    </div>
                </el-card>
            </el-col>

            <!-- 中间题目 -->

            <el-col :span="16" :xs="24">
                <el-card class="qu_list">
                    <div>
                        <template v-for="(cp, index) in cpdata">
                            <div :class="'index' + index">
                                <el-row :gutter="24">
                                    <el-col :span="20" style="text-align: left">
                                        <!-- 题目: 序号、类型、题干 -->
                                        <div>
                                            <div class="qu_num">{{ index + 1 }}</div>
                                            【 {{ cp.tag }} 】
                                            <div class="qu_content">
                                                <textBox :text="cp.text"></textBox>
                                            </div>

                                        </div>


                                        <!-- 题目解析 -->
                                        <div class="qu_analysis">
                                            <el-collapse v-model="activeName" accordion>
                                                <el-collapse-item title="扫描结果" :name="index + '1'">
                                                    <textBox :text="scan_texts[index]"></textBox>
                                                </el-collapse-item>
                                                <el-collapse-item title="AI老师" :name="index + '2'">
                                                    <textBox :text="p_answer_texts[index]"></textBox>
                                                </el-collapse-item>
                                                <el-collapse-item title="收藏" :name="index + '3'">
                                                    <el-button type="warning" icon="el-icon-star-off" circle
                                                        @click="save(index)"></el-button>
                                                </el-collapse-item>
                                            </el-collapse>

                                        </div>

                                    </el-col>

                                    <el-col :span="4">
                                        <div class="online-person">

                                            <input type="file" :ref="'fileInput' + index" style="display: none"
                                                @change="handleFileChange($event, index)">
                                            <div class="add-butt" @click="add_file(index)"><i
                                                    style="font-size: 15px;">上传答案</i>
                                            </div>
                                        </div>
                                        <div class="add-butt" @click="callModel(index)"><i style="font-size: 15px;">AI判题</i>
                                        </div>
                                    </el-col>

                                </el-row>
                                <el-row :gutter="24">



                                </el-row>
                            </div>
                        </template>
                    </div>
                    <el-divider />
                </el-card>
            </el-col>

            <!-- 右侧试卷信息 -->

            <el-col :span="4" :xs="24">
                <el-card class="paper_base">
                    <p class="paper_base_content">数学刷题册</p>
                    <!-- <p class="paper_base_content">这里还可以写一些东西</p> -->
                    <el-divider></el-divider>
                    <p class="paper_base_content">你已经收藏了</p>
                    <p class="paper_base_score">{{ this.cpdata.length }}道题</p>
                    <el-divider></el-divider>
                </el-card>

            </el-col>

        </el-row>
    </el-col>
</template>
  
<script>
import textBox from '@/components/FomulaText.vue'
import { upload_pic, ask_teacher } from "@/api/getData";
export default {
    name: 'ExamProcess',
    data() {
        return {
            quIndex: -1,
            cpdata: [{
                "text": "5*6=30",
                "tag": "乘法",
                "analysis": "5*6=30"
            }

            ],
            showSolutions: [],
            showAnswers: [],
            scan_texts: [],
            p_answer_texts: [],
            activeName: '1'
        }
    },
    components: {
        textBox
    },
    mounted() {
        let collection = JSON.parse(localStorage.getItem("collection"));
        for (let element of collection) {
            console.log(element);
            let p = {};
            p["tag"] = element["knowledge"];
            p["text"] = element["content"];
            p["analysis"] = element["analysis"];
            this.cpdata.push(p);
        }

    },
    created() {
        // 初始化 showSolutions 数组，每道题解初始状态都为隐藏
        this.showSolutions = new Array(this.cpdata.length).fill(false);
        this.scan_texts = new Array(this.cpdata.length).fill('');
        this.p_answer_texts = new Array(this.cpdata.length).fill('')
    },
    methods: {
        // 点击答题卡题号, 右侧题目滑动
        handleTag(index) {
            console.log("aaa");
            // 高亮选中的题目index标签
            this.quIndex = index;
            // 题目滑动到锚定点
            let page = document.querySelector(".index" + index);
            page.scrollIntoView();
        },
        add_file(index) {
            let refname = "fileInput" + index;
            this.$refs[refname][0].click();
        },
        scanSolution(event, index) {
            // 切换指定题目的题解显示状态
            console.log(event);
            handleFileChange(event, index);
            this.$set(this.showSolutions, index, !this.showSolutions[index]);
        },
        handleFileChange(event, index) {
            const file = event.target.files[0];
            if (!file) return;
            const fileName = file.name.toLowerCase();
            if (fileName.endsWith('.jpg') || fileName.endsWith('.png')) {
                const maxSizeMB = 3;
                const maxSizeBytes = maxSizeMB * 1024 * 1024;
                if (file.size > maxSizeBytes) {
                    this.$message(`文件大小超过 ${maxSizeMB} MB，请选择小于 ${maxSizeMB} MB 的文件`);
                    return;
                }
                this.isupload = true;
                let fileType;
                if (fileName.endsWith('.jpg')) {
                    fileType = 'jpg';
                } else if (fileName.endsWith('.png')) {
                    fileType = 'png';
                }
                let user_ID = localStorage.getItem("AIEDU_ID");
                let count = parseInt(localStorage.getItem("count"))
                upload_pic({ file, type: fileType, userID: user_ID, count: count }).then((res) => {
                    if (res.msg == "ok") {
                        // localStorage.setItem("count", count + 1)
                        this.scan_texts[index] = res.data;
                        this.$message("ok");
                        this.$set(this.showSolutions, index, !this.showSolutions[index]);
                        //this.isupload = false;
                        return;
                    } else {
                    }
                });
            } else {
                // 提示用户选择支持的文件类型
                this.$message("请选择jpg或png");
            }
        },
        callModel(index) {
            let problem_text = this.cpdata[index].text;
            let ans_text = this.scan_texts[index];
            ask_teacher({ question: problem_text, ans: ans_text }).then((res) => {
                if (res.msg == "ok") {
                    this.p_answer_texts[index] = res.data;
                    console.log(res.data);
                    this.$message("ok");
                    this.$set(this.showAnswers, index, !this.showAnswers[index]);
                    //this.isupload = false;
                    return;

                    return;
                } else {
                    console.log(res);

                }
            });

        },
        save(index) {
            if (localStorage.getItem("review_collection") != null) {
                let review_collection = JSON.parse(localStorage.getItem("review_collection"));
                let text = this.cpdata[index].text;
                let ans = this.cpdata[index].analysis;
                let tag= this.cpdata[index].tag;
                let p = { "text": text, "ans": ans,"tag":tag }
                review_collection.push(p)
                localStorage.setItem("review_collection", JSON.stringify(review_collection))
            } else {
                let review_collection = [];
                let text = this.cpdata[index].text;
                let ans = this.cpdata[index].analysis;
                let tag= this.cpdata[index].tag;
                let p = { "text": text, "ans": ans,"tag":tag }
                review_collection.push(p)
                localStorage.setItem("review_collection", JSON.stringify(review_collection))
            }
            this.$message("ok");
        }
    },
}
</script>
  
<style scoped lang="scss">
.el-collapse-item__wrap {
    overflow: auto !important;
}

.add-butt {
    width: 100px;
    height: 20px;
    border-radius: 10px;
    background-color: rgb(50, 54, 68);
    position: relative;
    text-align: center;
    padding: 7px 0px 12px 0;
    margin: 5px 5px;
    cursor: pointer;
    color: #fff;

    &:hover {
        background-color: #1d90f5;
    }
}

.paper {


    line-height: 25px;
    width: 100%;


    // 左侧题目总菜单
    .type_list {
        height: 600px;
        overflow: auto;
        text-align: left;
        line-height: 10px;

        .type_name {
            color: #1890ff;
            font-weight: bold;
        }

        .type_tag {
            margin-right: 10px;
            margin-top: 10px;
        }
    }

    // 试题内容样式
    .qu_list {

        height: 600px;
        overflow: auto;
        page-break-after: always;

        .qu_num {
            display: inline-block;
            background: url(~@/assets/btbj.jpg) no-repeat 100% 100%;
            background-size: contain;
            height: 30px;
            width: 30px;
            line-height: 25px;
            color: #040000;
            font-size: 14px;
            text-align: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .qu_content {
            overflow: auto;
            padding-left: 10px;
        }

        // 选项组
        .qu_choose_group {
            width: 100%;

            // 单个选项
            .qu_choose {
                display: block;
                margin: 10px;

                // 去除前面的radio
                ::v-deep .el-radio__input .el-radio__inner {
                    display: none;
                }

                // 单个选项内容样式
                .qu_choose_tag {
                    display: inline-flex;
                    width: 90%;

                    // 选项标签
                    .qu_choose_tag_type {
                        font-weight: bold;
                        color: #0a84ff;
                        width: 10px;
                    }

                    // 选项内容
                    .qu_choose_tag_content {
                        padding: 0 10px 10px 10px;
                    }

                    .qu_choose_tag_img {
                        height: auto;
                        display: block;
                        margin: 10px;
                    }

                    .qu_choose_tag_el_image {
                        clear: both;
                        padding-top: 10px;
                    }
                }

                // 选项答案
                .qu_choose_answer {
                    float: right;
                }
            }
        }


        // 试题解析
        .qu_analysis {
            padding: 10px;


            .qu_analysis_content {
                padding-top: 10px;

            }
        }

        // 试题赋分
        .qu_assign_score {
            background: #f5f5f5;
            height: 100px;
            padding-top: 35px;

            .qu_assign_score_content {
                width: 80px
            }
        }
    }

    // 右侧试卷基本信息
    .paper_base {
        height: 600px;
        overflow: auto;
        text-align: center;

        .paper_base_content {
            font-weight: bold;
        }

        .paper_base_score {
            font-weight: bold;
            color: #0a76a4;
        }
    }
}
</style>
  
  
  

代码如上，本页面将已经收藏到错题本的题目渲染出来，每个题目可以上传答案，进行AI判题，并将题目收藏到错题本。