[逐题讲评] - 增加右侧试题显示

src/renderer/src/views/classTask/container/item-dialog.vue

@@ -261,6 +261,7 @@ const openDialog = (data) => {
     }
     classWorkAnalysis.quizlist = idres.rows
     classWorkActiveData.quizlist = idres.rows // zdg: 作业概览组件使用
+    processList(classWorkActiveData.quizlist);
 
     // 统计每个题目的正误率
     // 这个学习任务所有题目+所有学生的答题数据 , pageSize: 100

src/renderer/src/views/classTask/container/quizStats.vue

@@ -1,9 +1,9 @@
 <template>
   <el-row class="c-warp" :gutter="10">
-    <el-col class="left" :span="14">
+    <el-col class="left" :span="10">
-      <el-collapse class="c-item" v-model="activeTopic">
+      <el-collapse class="c-item" v-model="activeTopic" accordion>
         <template v-for="(item, index) in dataList">
-          <el-collapse-item class="collapse-item" :name="index+1" :id="'collapse-'+(index+1)">
+          <el-collapse-item class="collapse-item" :name="index+1" :id="'collapse-'+(index+1)" @click="clickItem(index)">
             <template #title>
               <el-popover :width="500" placement="right">
                 <p>{{item.def?.titletext}}</p>
@@ -54,13 +54,13 @@
         </template>
       </el-collapse>
     </el-col>
-    <el-col class="right" :span="10">
+    <el-col class="right" :span="14">
       <div class="c-item">
-        <div class="title">提交情况</div>
+        <!-- <div class="title">提交情况</div>
         <div class="respond">
-          <el-space wrap>
+          <el-space wrap> -->
             <!-- <template v-for="it in 11"> -->
-            <template v-for="(item, index) in dataList">
+            <!-- <template v-for="(item, index) in dataList">
               <el-card shadow="hover" class="card-warp">
                 <div class="card-body">
                   <el-progress type="dashboard" :color="colorArr" :width="80" :percentage="ratio_2(item)" />
@@ -70,7 +70,41 @@
               </el-card>
             </template>
           </el-space>
+        </div> -->
+
+        <div class="title">试题详情</div>
+        <!-- 习题训练 -->
+        <el-card style="max-width: 100%; margin-bottom: 10px;">
+          <el-row>
+            <el-col :span="24" style="padding: 10px">
+              <!-- 题源、题目标题、题目选项 -->
+              <span>{{ activeExam.worktag }}</span>
+              <span style="margin-left: 4px" v-html="activeExam.titleFormat"></span>
+              <div :span="24" style="padding: 6px" v-html="activeExam.workdescFormat"></div>
+              <!-- 折叠： 详情分析解答 -->
+              <div class="demo-collapse">
+                <el-collapse v-model="activeExamFlag">
+                  <el-collapse-item title="详情分析解答" name="1">
+                    <el-row style=" padding: 6px 10px; border: 2px dotted; text-align: left;">
+                      <template #default="scope">
+                        <el-col :span="2" style="padding: 6px 0px"><em>【答案】</em></el-col>
+                        <el-col :span="21" style="padding: 6px 0px" v-html="activeExam.workanswerFormat"></el-col>
+                        <el-col :span="2" style="padding: 6px 0px"><em>【分析】</em></el-col>
+                        <el-col :span="21" style="padding: 6px 0px"  v-html="activeExam.method"></el-col>
+                        <el-col :span="2" style="padding: 6px 0px"><em>【解答】</em></el-col>
+                        <el-col :span="21" style="padding: 6px 0px" v-html="activeExam.analyse"></el-col>
+                        <el-col :span="2" style="padding: 6px 0px"><em>【点评】</em></el-col>
+                        <el-col :span="21" style="padding: 6px 0px" v-html="activeExam.discuss"></el-col>
+                        <!-- <el-col :span="21" style="padding: 6px 0px" v-html="dataList[activeTopic-1].def.discuss"></el-col> -->
+                      </template>
+                    </el-row>
+                  </el-collapse-item>
+                </el-collapse>
               </div>
+            </el-col>
+          </el-row>
+        </el-card>
+        
       </div>
     </el-col>
   </el-row>
@@ -84,7 +118,9 @@ import { ref, defineExpose, onMounted, reactive, computed, watch, nextTick, watc
 // import * as elementPlus from 'element-plus' // ElMessage ElMessageBox
 let colorArr = []                 // 进度颜色值         -- 静态数据
 // const attrs = useAttrs()          // props中未定义属性
-const activeTopic = ref(0)        // 展开的题
+const activeTopic = ref(1)        // 展开的题
+const activeExam = ref({})     // 展开的试题
+const activeExamFlag = ref(['1'])     // 展开的试题
 let dataList = ref([])            // 左侧数据
 let studentList = ref([])         // 学生数据
 const props = defineProps({       // 参数 defineProps
@@ -115,7 +151,10 @@ colorArr = [
 
 // === 初始加载完 ===
 onMounted(() => {
-  activeTopic.value = dataList.value.map((_, index) => index + 1);
+  //activeTopic.value = dataList.value.map((_, index) => index + 1);
+  if (dataList.value[activeTopic.value-1].def != null && dataList.value[activeTopic.value-1].def != undefined) {
+    activeExam.value = dataList.value[activeTopic.value-1].def;
+  }
 })
 
 // === 方法(methods) ===
@@ -285,6 +324,18 @@ const clickInfo = async ind => {
   setTimeout(() => {scrollToElement('collapse-' + ind)}, 300);
   // elementPlus.ElMessage.warning('功能未开放!')
 }
+
+// 点击试题
+const clickItem = async (index) => {
+  if (index > dataList.length-1 ) {
+    return
+  }
+  if (dataList.value[index].def == null || dataList.value[index].def == undefined) {
+    return;
+  }
+  activeExam.value = dataList.value[index].def;
+}
+
 // === 通用工具 ===
 // 滚动到指定位置
 const scrollToElement = id => {
@@ -313,8 +364,14 @@ watchEffect(() => { initData() })
   background: #F2F3F5;
   height: 100%;
   margin: 0 !important;
-  .left{padding-left: 0 !important; height: 100%;}
+  .left{
-  .right{padding-right: 0 !important;}
+    padding-left: 0 !important; 
+    height: 100%;
+  }
+  .right{
+    padding-right: 0 !important; 
+    height: 100%;
+  }
   .c-item{
     padding: 10px;
     background: #fff;
@@ -362,7 +419,7 @@ watchEffect(() => { initData() })
       margin-bottom: 10px;
     }
     .respond{
-      height: calc(100% - 65px);
+      /* height: calc(100% - 65px);*/
       overflow: auto;
       .el-space{padding: 5px;}
       .card-warp{

src/renderer/src/views/classTask/teachClassTask.vue

@@ -248,6 +248,7 @@ const openDialog = (data) => {
     }
     classWorkAnalysis.quizlist = idres.rows
     classWorkActiveData.quizlist = idres.rows // zdg: 作业概览组件使用
+    processList(classWorkActiveData.quizlist);
 
     // 统计每个题目的正误率
     // 这个学习任务所有题目+所有学生的答题数据 , pageSize: 100