添加查看练习结果详情-部分接口调用

src/http/api/target.js

@@ -15,6 +15,11 @@ const targetImprove = {
     return post( base.prefix+ `/api/v1/studentTarge/exercise_result`, data)
   },
 
+  // 练习结果 _查看详情
+  getExerciseResultDetail(data){
+    return get( base.prefix+ `/api/v1/studentTarge/exercise_question`, data)
+  },
+
   
   //获取学生端错题本筛选信息接口
   getTargetErrorTopData(data) {

src/views/targetImprove/practice/practiceResults.vue

@@ -249,7 +249,7 @@ export default ({
             return dayjs().subtract(3, 'month').format("YYYY-MM-DD HH:mm:ss");
         },
 
-        // 获取练习结果列表 _接口传参 ———— 待完善
+        // 获取练习结果列表
         GetTargetExerciseResult(){
             let startDate = ''
             let endDate = ''
@@ -292,10 +292,17 @@ export default ({
                     this.totalNum = Number(res.data.total)
                     this.currentPage = Number( res.data.current)
                 }
-            })
+            }).catch()
         },
         // 跳转练习结果详情
         viewDetails(row){
+            let tmpStorage = {
+                practiceTime:row.submitTime,  //练习时间(提交时间)
+                frontRate:row.frontRate,   //练前得分率
+                afterRate:row.afterRate,   //练后得分率
+                difference:row.difference,   //提升情况
+            }
+            sessionStorage.setItem('practice_detail',JSON.stringify(tmpStorage))
             this.$router.push(`/targetImprove/praciceResultDetail?id=${row.exerciseId}`);
         },
      },

src/views/targetImprove/practice/practiceResults/answerAnalysis.vue

@@ -3,33 +3,20 @@
         <div class="knowledge_area">
             <div class="knowledge_title">【知识点】</div>
             <div class="knowledge_tags">
-                <span class="tag_item">作家作品</span>
-                <span class="tag_item">分析体裁特征和表现手法</span>
-                <span class="tag_item">阅读理解</span>
+                <span v-for="item in knowledgeList" :key="item.knowId" 
+                    class="tag_item">{{item.knowName}}
+                </span>
             </div>
         </div>
         <!-- 正确答案区域 -->
         <div class="answer_area block_area">
             <div class="title">【答案】</div>
-            <div class="desc">
-                <div class="answer_content">D</div>
-                <div class="answer_explain">
-                    <div>①提升消费能力——能消费<br/>推动经济高质量发展/发展经济/发展新质生产力/促进就业/增加居民收入；完善收入分配制度，推动中低收入群体增收减负/，增强居民消费能力/分配制度展开也可以。</div>
-                    <div>②提升消费意愿——愿消费、敢消费<br/>完善社会保障，稳定居民收入预期，增强居民消费信心；政府加强宏观调控，履行经济职能/减税降费，降低存贷利率/加强市场监管，规范市场秩序，优化消费环境/完善消费者权益维护机制，增强居民消费意愿。</div>
-                    <div>③提升消费层级——消费升级<br/>推进供给侧结构性改革，优化供给结构/提供优质产品和服务，创造消费需求/；发展新业态新模式，满足多样化需求/多元消费场景，促进文旅业发展/促进消费结构优化升级。</div>
-                </div>
-            </div>
+            <div  class="desc" v-html="answer"></div>
         </div>
-
         <!-- 详解区域 -->
         <div class="analysis_area block_area">
             <div class="title">【详解】</div>
-            <div class="detail_content desc">
-                <div>A: 房屋是婚后夫妻二人共同建造，属于夫妻共同财产，并非张三个人财产；且农村合法建造的宅基地房屋，自建造完成时即取得所有权，登记不是所有权取得的生效要件，错误。</div>
-                <div>B: 该借款用于夫妻共同所有的房屋装修，属于为家庭日常生活需要所负的债务，即使李四不知情，也属于夫妻共同债务，李四需要偿还，错误。</div>
-                <div>C: 宅基地所有权归村集体所有，村民只享有宅基地使用权（用益物权），该权利核心是对宅基地的占有、使用，对应物的使用价值；张三夫妻不享有宅基地所有权，因此无权处分该地块，正确。</div>
-                <div>D: 出租房屋获得的租金是按生产要素分配获得的收入，属于初次分配；再分配是国家通过税收、社会保障、转移支付等主导的分配，错误。</div>
-            </div>
+            <div class="detail_content desc" v-html="analysis"></div>
         </div>
     </div>
 </template>
@@ -40,6 +27,18 @@
 export default ({
     name:'AnswerAnalysis',
     components: {},
+    props:{
+        knowledgeList:{  //知识点
+            type:Array,
+
+        },
+        answer:{  //答案
+            type:String,
+        },
+        analysis:{  //解析
+            type:String,
+        }
+    },
     data(){
         return {
         }

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

@@ -3,7 +3,7 @@
     <div class="practice_result">
         <TopBackNav>
             <template #topRight>
-                <span class="header_title">2026.8.9 14:16:30 提交记录</span>
+                <span class="header_title">{{ localPracticeDetail.practiceTime }} 提交记录</span>
             </template>
         </TopBackNav>
 
@@ -18,32 +18,33 @@
                     </div>
                 </div>
                 <div class="desc">
-                    该知识点练习前您的得分率是<span class="scoring_average bold">68%</span>，练习后您的得分率是<span class="scoring_average bold">58%</span>，经过专项练习该知识点得分率<span class="up_light bold">提升了16%</span>。请继续保持练习，时常回顾错题。
-                </div>
-                <div class="desc">
-                    该知识点练习前您的得分率是<span class="scoring_average bold">68%</span>，练习后您的得分率是<span class="scoring_average bold">58%</span>，经过专项练习该知识点得分率<span class="down_light bold">下降了16%</span>。请继续保持练习，时常回顾错题。
+                    该知识点练习前您的得分率是<span class="scoring_average bold">{{localPracticeDetail.frontRate === '-' ? localPracticeDetail.frontRate : localPracticeDetail.frontRate + '%'}}</span>
+                    ，练习后您的得分率是<span class="scoring_average bold">{{ localPracticeDetail.afterRate === '-' ? localPracticeDetail.afterRate : localPracticeDetail.afterRate + '%'}}</span>
+                    ，经过专项练习该知识点得分率<span class="up_light bold">提升了16%</span>。请继续保持练习，时常回顾错题。
+                    经过专项练习该知识点得分率<span class="down_light bold">下降了16%</span>。请继续保持练习，时常回顾错题。
                 </div>
             </div>
 
             <ul class="question_detail_list">
-                <li v-for="(item,index) in questionList"  :key="item.id">
+                <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">选择题</span>
+                                <span class="question_type">{{item.questionType}}</span>
                             </div>
-                            <span class="question_difficulty">容易</span>
-                            <span class="question_source">福建省莆田第五中学2024-2025学年高一上学期期末考试数学试卷</span>
-                            <span class="question_score">得分率：86.92%</span>
+                            <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>
+                            <!-- 
                             <p class="question_desc">教材文言知识小题，完成下面1-2小题。</p>
-
                             <div class="sub_question_list">
-                                <!-- 第(1)题 -->
                                 <div class="sub_question">
                                     <p class="sub_question_title">(1) 下列各项中，不含通假字的一项是（ ）</p>
                                     <div class="option_list">
@@ -64,8 +65,6 @@
                                         <div>D. ③⑥⑧</div>
                                     </div>
                                 </div>
-
-                                <!-- 第(2)题 -->
                                 <div class="sub_question">
                                     <p class="sub_question_title">(2) 下列句子的句式特点不同于其他三项的一项是（ ）</p>
                                     <div class="choice_list">
@@ -76,6 +75,7 @@
                                     </div>
                                 </div>
                             </div>
+                             -->
 
                         </div>
                     </div>
@@ -97,9 +97,21 @@
                     </div>
                     
                     <!-- 答案解析区域 -->
-                    <AnswerAnalysis v-if="item?.operationType == 'analysis'"/>
+                    <AnswerAnalysis v-if="item?.operationType == 'analysis'" 
+                                    :knowledgeList="item.knowledgeList"
+                                    :answer="item.answer"
+                                    :analysis="item.parse"/>
+
                     <!-- 作答详情区域 -->
-                    <studentAnswerDetail v-if="item?.operationType == 'stuAnswerDetail'"/>
+                     <!-- isObjective :是否是客观题（1是 0否） -->
+                      <!-- isJudge ：是否是判断题 （1是 0否） -->
+                    <studentAnswerDetail v-if="item?.operationType == 'stuAnswerDetail'" 
+                        :studentAnswer="item.studentAnswer" 
+                        :answerType="item.isObjective ? (item.isJudge ? 'img' : 'online') : 'img'"
+                        :answerOptionNum="item.optionsNum"
+                        :rightAnswer="item.answer"
+                        :answerImg="{name:item.studentAnswer,url:item.studentAnswer}"
+                    />
                 </li>
             </ul>
         </div>
@@ -135,16 +147,8 @@ export default ({
             deteaiIcon:deteaiIcon,
             answerIconLight:answerIconLight,
             deteaiIconLight:deteaiIconLight,
-            questionList:[
-                {
-                    id:'1',
-                    operationType:''
-                },
-                {
-                    id:'2',
-                    operationType:''
-                }
-        ],
+            questionList:[],
+            localPracticeDetail:{}, //本地存储的数据  
         }
     },
     methods: {
@@ -152,18 +156,37 @@ export default ({
          * @param row 
          * @param type  'ai' 'analysis' 'stuAnswerDetail'
          */
-      questionOperationTrigger(row,type){
-        if(row.operationType == type){
-            row.operationType = ''
-        }else{
-            row.operationType = type
-        }
-      }
+        questionOperationTrigger(row,type){
+            if(row.operationType == type){
+                row.operationType = ''
+            }else{
+                row.operationType = type
+            }
+        },
+        GetExersiseDetail(){
+            let params = {
+                exerciseId:this.$route.query.id,
+                // type:this.$route.query.exerciseType
+                type:2
+            }
+            this.$api.target.getExerciseResultDetail(params).then(res=>{
+                if(res?.code == 200){
+                    this.questionList = res.data.map(itm=>{
+                        return {
+                            ...itm,
+                            operationType:''
+                        }
+                    })
+                }
+            }).catch()
+        },
     },
     computed:{},
     mounted() {
+        this.localPracticeDetail = JSON.parse(sessionStorage.getItem('practice_detail') || '{}')
+        console.log('页面加载中')
+        this.GetExersiseDetail()
     },
-
 })
 
 

src/views/targetImprove/practice/practiceResults/studentAnswerDetail.vue

@@ -8,27 +8,26 @@
                 @change="rightAnswerValue = defaultRightAnswerValue"
             >
               <el-radio 
-                v-for="radioItem in questionOption" 
-                    :key="radioItem.value" 
-                    :label="radioItem.value"
+                v-for="radioItem in optionList" 
+                    :key="radioItem" 
+                    :label="radioItem"
                     :class="{ 
-                         'is-correct-radio is-checked':  rightAnswerValue  === radioItem.value, 
-                        'is-wrong-radio is-checked': studentAnswerVal===radioItem.value && rightAnswerValue !== studentAnswerVal
+                         'is-correct-radio is-checked':  rightAnswerValue  === radioItem, 
+                        'is-wrong-radio is-checked': studentAnswer.split('').includes(radioItem) && rightAnswerValue !== studentAnswer
                     }"
-                >{{ radioItem.label }}</el-radio>
+                >{{ radioItem }}</el-radio>
             </el-radio-group>
 
 
             <ImageJumpPreview 
-                :fileMessage="fileMessage" height="400px"
+                v-if="answerType == 'img'"
+                :fileMessage="answerImg" height="400px"
                 :filePadding="{padding:`0 ${imgPreviewPadding}`}"
                 :navBarWidth="{width:`calc(100% - ${imgPreviewPadding} + 20px)`}"
                 :navBarLeft="{left: `calc(${imgPreviewPadding} / 2 - 10px)`}"
                 :navTotalPage="5"
                 v-model:currentNavPage="currentNavPage"
             ></ImageJumpPreview>
-
-
         </div>
     </div>
 </template>   
@@ -36,48 +35,55 @@
 
 <script>
 import ImageJumpPreview from '../../components/ImageJumpPreview.vue'
+import {numToCapitalLetter} from '../../utils/numberToExcelCapitalLetter.js'
 
 export default ({
     name:'StudentAnswerDetail',
     components: {
         ImageJumpPreview,
     },
+    props:{
+        studentAnswer:{   //学生的答案
+            type:String,
+        },
+        answerType:{     //答题方式  //线上答题（勾选选项）和上传图片的方式   online \ img
+            type:String
+        },
+
+        // 勾选选项 答题 用到的参数
+        answerOptionNum:{   // 选项数量（只有 props.answerType 为 online 的时候才会用到）
+            type:Number   
+        },
+        rightAnswer:{
+            type:String,
+        },
+        // 拍照答题用到的参数
+        answerImg:{
+            type:Object
+        }
+    },
     data(){
         return {
-            answerType:'photo',  //答题方式  //线上答题和上传图片 online \ photo
-            studentAnswerVal:'D',
             rightAnswerValue:'B',
             defaultRightAnswerValue:'B',
-            questionOption:[
-                {
-                    label:'A',
-                    value:'A'
-                },
-                {
-                    label:'B',
-                    value:'B'
-                },
-                {
-                    label:'C',
-                    value:'C'
-                },
-                {
-                    label:'D',
-                    value:'D'
-                },
-            ],
-            fileMessage:{
-                name:'24-b5fa-0ddc8797a6c0.png',
-                url:'https://jtzx001.oss-accelerate.aliyuncs.com/huijiaoyan_test/20260805_50007/05171802_60fcf6dd-4276-4d24-b5fa-0ddc8797a6c0.png'
-            },
             imgPreviewPadding:'70px',
-            currentNavPage:1
-
+            currentNavPage:1,
+        }
+    },
+    computed:{
+        // 答案的选项列表
+        optionList(){
+            // 选项数量转换成大写字母列表
+            let options = []
+            for(let i=0;i<this.answerOptionNum;i++){
+                options[i]  = numToCapitalLetter(i)
+            }
+            return options
         }
     },
     methods: {},
-    computed:{},
     mounted() {
+
     },
     
 })

src/views/targetImprove/utils/numberToExcelCapitalLetter.js

@@ -0,0 +1,10 @@
+// num 从0开始
+export function numToCapitalLetter(num) {
+    let column = '';
+    let temp = num;
+    while (temp >= 0) {
+        column = String.fromCharCode(65 + (temp % 26)) + column;
+        temp = Math.floor(temp / 26) - 1;
+    }
+    return column;
+}