bigDataStudent/src/views/targetImprove/practice/practiceResults/practiceDetail.vue

<!-- 自主练习——查看练习结果 -->
<template>
    <div class="practice_result">
        <TopBackNav @goBack="$emit('CloseDialog')">
            <template #topRight>
                <span class="header_title">{{ localPracticeDetail.practiceTime }} 提交记录</span>
            </template>
        </TopBackNav>


        <div class="main_content">

            <!-- 练习结果概览 -->
            <div class="overview">
                <div class="page_search">
                    <div class="search_content">
                        <div class="content_left">
                            <div class="grade_title">{{localPracticeDetail.knowledgeName}}</div>
                        </div>
                    </div>
                </div>
                <div class="desc">
                    该知识点练习前您的得分率是<span class="scoring_average bold">{{localPracticeDetail.frontRate === '-' ? localPracticeDetail.frontRate : localPracticeDetail.frontRate + '%'}}</span>
                    ，练习后您的得分率是<span class="scoring_average bold">{{ [3,4].includes(localPracticeDetail.exerciseStatus)
                                                                               && localPracticeDetail.afterRate !== null 
                                                                               && localPracticeDetail.afterRate !== '-'
                                                                            ? localPracticeDetail.afterRate + '%' 
                                                                            : '-'
                                                                        }}</span>
                    <span v-if="[3,4].includes(localPracticeDetail.exerciseStatus)
                                  && localPracticeDetail.afterRate !== null 
                                  && localPracticeDetail.afterRate !== '-' 
                                  && localPracticeDetail.frontRate !== '-'">
                        ，经过专项练习该知识点得分率
                        <span v-if="Number(localPracticeDetail.afterRate) === Number(localPracticeDetail.frontRate)" class="bold">保持稳定</span>
                        <span v-else :class="['bold',Number(localPracticeDetail.afterRate) > Number(localPracticeDetail.frontRate) ? 'up_light' : 'down_light']">{{Number(localPracticeDetail.afterRate) > Number(localPracticeDetail.frontRate) ? '提升了'  : '下降了' }}{{Math.abs(localPracticeDetail.difference)}}%</span>
                    </span>
                    。请继续保持练习，时常回顾错题。
                </div>
            </div>

            <!-- 试题列表 -->
            <ul class="question_detail_list">
                <li v-for="(item,index) in questionList"  :key="item.questionId">
                    <!-- 题目区域 -->
                    <div class="question_area">
                        <div class="question_header">
                            <div>
                                <span class="question_num">{{index + 1}}</span>
                                <span class="question_type">{{item.questionType}}</span>
                            </div>
                            <span class="question_difficulty">{{ item.questionLevel }}</span>
                            <span class="question_source">{{ item.fromPaper }}</span>
                            <!-- markStatus  0 未批阅  1 已完成 -->
                            <span v-if="item.markStatus" class="question_score">得分率：{{ item.rate }}%</span>
                        </div>

                        <!-- 问题内容——题干 -->
                        <div class="question_content">
                            <div v-html="item.title"></div>
                        </div>
                    </div>

                    <!-- 功能按钮 -->
                    <div class="action_buttons" :class="{border_bottom_radius:item.operationType == 'ai'}">
                        <span class="action_btn" :class="{'ai_lecture_btn':item.operationType=='ai'}" @click="questionOperationTrigger(item,'ai')">
                            <img :src="aiIcon" alt="">
                            AI讲题
                        </span>
                        <span class="action_btn" :class="{'analysis_btn':item.operationType=='analysis'}" @click="questionOperationTrigger(item,'analysis')">
                            <img :src="item.operationType=='analysis' ? answerIconLight :answerIcon" alt="">
                            解析答案
                        </span>
                        <span class="action_btn" :class="{'answer_detail_btn':item.operationType=='stuAnswerDetail'}" @click="questionOperationTrigger(item,'stuAnswerDetail')">
                            <img :src="item.operationType=='stuAnswerDetail' ? deteaiIconLight :deteaiIcon" alt="">
                            作答详情
                        </span>
                    </div>
                    
                    <!-- 答案解析区域 -->
                    <AnswerAnalysis v-if="item?.operationType == 'analysis'" 
                                    :knowledgeList="item.knowledgeList"
                                    :answer="item.answer"
                                    :analysis="item.parse"/>

                    <!-- 作答详情区域 -->
                    <StudentAnswerDetail v-if="item?.operationType == 'stuAnswerDetail'" 
                        :studentAnswerInfo="item"
                        :answerImg="(item.studentAnswer?.split(/,(?=http)/)?.map(img=>({name:img,url:img})) || [])"
                    />
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
import { mapState } from "vuex";

import TopBackNav from '../../components/TopBackNav.vue';

import aiIcon from '@/assets/knowledgeGraph/aiIcon.png'
import answerIcon from '@/assets/practiceResult/broken_line.svg'
import deteaiIcon from '@/assets/practiceResult/todo_list.png'

import answerIconLight from '@/assets/practiceResult/broken_line_light.png'
import deteaiIconLight from '@/assets/practiceResult/todo_list_light.svg'


import AnswerAnalysis from './answerAnalysis.vue'
import StudentAnswerDetail from '@/views/targetImprove/components/StudentAnswerDetail.vue'//学生作答组件

export default ({
    name:'PracticeDetail',
    components: {
        TopBackNav,
        AnswerAnalysis,
        StudentAnswerDetail
    },
    inject: ['openAiRobot'],//注入Ai机器人组件调用方法
    props:{
        localPracticeDetail:{
            type:Object,
        }
    },
    data(){
        return {
            // 图标数据
            aiIcon:aiIcon,
            answerIcon:answerIcon,
            deteaiIcon:deteaiIcon,
            answerIconLight:answerIconLight,
            deteaiIconLight:deteaiIconLight,
            
            questionList:[], // 试题列表
        }
    },
    methods: {
        /**
         * @param row 
         * @param type  'ai' 'analysis' 'stuAnswerDetail'
         */
        questionOperationTrigger(row,type){
            if(row.operationType == type){
                row.operationType = ''
            }else{
                row.operationType = type
            }
            if(type == 'ai'){
                console.log("打开AI解读");
                let content = "科目："+this.subjectName+"，知识点："+row.knowledgeList.map(kno=>{return '【'+kno.knowName+'】'}).join('');
                this.openAiRobot(content);
            }
        },
        GetExersiseDetail(){
            let params = {
                exerciseId:this.localPracticeDetail.id,
                type:2
            }
            this.$api.target.getExerciseResultDetail(params).then(res=>{
                if(res?.code == 200){
                    this.questionList = res.data.map(itm=>{
                        return {
                            ...itm,
                            operationType:''
                        }
                    })
                }
            }).catch()
        },
    },
    computed: {
        ...mapState("target", ["subjectName"]),
    },
    mounted() {
        this.GetExersiseDetail()
    },
})


</script>


<style lang="scss" scoped>

.practice_result{
    width: 100%;
    background-color: #f0f4fb;

    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap:10px;
}
::v-deep .top_header{
    .top_right{
        align-self: center;
        .header_title{
            font-weight: 600;
            font-size: 20px;
            color: #333333;
            line-height: 28px;
            text-align: left;
        }
    }
}

.main_content{
    flex: 1 1;
    background-color: white;
    padding:20px;
    overflow: auto;
    border-radius:10px;

    .overview{
        .desc{
            margin-top: 10px;
            line-height: 20px;
            font-weight: 400;
            font-size: 14px;
            color: #999999;

            .bold{
                font-weight: 600;
            }
            .scoring_average{
                color:#2E64FA;
            }
            .up_light{
                color:#3BA272;
            }
            .down_light{
                color:#F56C6C;
            }
        }
    }

    .question_detail_list {
        margin-top: 20px;
        position: relative;
        width: 100%;
        // border:solid red 1px;
        display: flex;
        flex-direction: column;
        gap:20px;

        font-size: 14px;
        color: #333;
        line-height: 20px;

        li{
            border-radius: 10px;
            border: 1px solid #DCDFE6;
          
            // 题目区域
            .question_area {
                padding: 16px;
                .question_header {
                    display: flex;
                    align-items: flex-start;
                    gap: 16px;
                    font-weight: 600;
                    margin-bottom: 16px;
                    > *{
                        flex-shrink: 0;
                    }

                    .question_num {
                        padding: 0 6px;
                        margin-right: 8px;
                        background: #F3F3F3;
                        border-radius: 2px;
                        text-align: center;
                    }

                    .question_difficulty {
                        color: #90CB75;
                        font-size: 14px;
                    }

                    .question_source {
                        flex-shrink: 1 !important;
                        font-weight: 400;
                        color: #999999;
                    }

                    .question_score {
                        color: #2E64FA;
                        margin-left: auto;
                    }
                }
                .question_content {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    
                    .sub_question_list{
                        display: flex;
                        flex-direction: column;
                        gap:24px;
                        .sub_question {
                            display: flex;
                            flex-direction: column;
                            gap:16px;
                        
                            .option_list {
                                display: grid;
                                grid-template-columns: repeat(3, 1fr);
                                gap: 10px;
                            }

                            .choice_list {
                                display: flex;
                                gap: 40px;
                            }
                        }
                    }
                }
            }

            .action_buttons {
                box-sizing: border-box;
                height: 48px;
                background: #F8F8F9;
                padding:14px 16px;

                border-top: 1px solid #DCDFE6;

                display: flex;
                justify-content: flex-end;
                gap: 20px;

                &.border_bottom_radius{
                    border-radius: 0 0 10px 10px;
                }

                .action_btn {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    gap:8px;
                    line-height: 16px;
                    img{
                        width: 16px;
                        height: 16px;
                    }
                    &.ai_lecture_btn {
                        color: #4F3EFF;
                    }
                    &.answer_detail_btn,
                    &.analysis_btn {
                        color:#2E64FA;
                    }
                }
            }
        }
    }
}


 
</style>