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

This commit is contained in:
“zouyf” 2024-10-22 16:45:55 +08:00
parent ab127958f9
commit cca640e945
3 changed files with 72 additions and 13 deletions

View File

@ -261,6 +261,7 @@ const openDialog = (data) => {
}
classWorkAnalysis.quizlist = idres.rows
classWorkActiveData.quizlist = idres.rows // zdg: 使
processList(classWorkActiveData.quizlist);
//
// + , pageSize: 100

View File

@ -1,9 +1,9 @@
<template>
<el-row class="c-warp" :gutter="10">
<el-col class="left" :span="14">
<el-collapse class="c-item" v-model="activeTopic">
<el-col class="left" :span="10">
<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> -->
<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%;}
.right{padding-right: 0 !important;}
.left{
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{

View File

@ -248,6 +248,7 @@ const openDialog = (data) => {
}
classWorkAnalysis.quizlist = idres.rows
classWorkActiveData.quizlist = idres.rows // zdg: 使
processList(classWorkActiveData.quizlist);
//
// + , pageSize: 100