This commit is contained in:
白了个白 2024-10-22 17:30:00 +08:00
commit 758081d9e5
5 changed files with 155 additions and 112 deletions

View File

@ -16,8 +16,9 @@ export const isJson = (str) => {
/** /**
* @description processList 格式化试题 * @description processList 格式化试题
* @param {*} row * @param {*} row
* @param {*} aloneOption 选择题中选项是否为每行一个
*/ */
export const processList = (row) => { export const processList = (row, aloneOption=false) => {
for (var i = 0; i < row.length; i++) { for (var i = 0; i < row.length; i++) {
if (isJson(row[i].workanalysis)) { if (isJson(row[i].workanalysis)) {
//1、先默认格式化 格式化各项内容(待优化, 后续界面显示的为format的值) //1、先默认格式化 格式化各项内容(待优化, 后续界面显示的为format的值)
@ -55,19 +56,25 @@ export const processList = (row) => {
const workDescArr = element.split('#&') const workDescArr = element.split('#&')
let tmp = '' let tmp = ''
let j = 0 let j = 0
for (; j < workDescArr.length; j++) { for(; j<workDescArr.length; j++){
if (j % 2 == 0) { const char = String.fromCharCode(65+j);
tmp += `<div style='width:80%;display:flex;'>` if (aloneOption) {
tmp += `<div style='width:100%;display:flex;padding: 2px 0'>${char}.${workDescArr[j]}</div>`;
}
else {
if(j%2 == 0){
tmp += `<div style='width:100%;display:flex;'>`;
}
tmp += `<div style='padding-left:10px;width:50%;overflow:hidden;text-overflow:ellipsis;font-size:0.9em;'>${char}.${workDescArr[j]}</div>`;
if(j%2 == 1){
tmp += '</div>';
} }
const char = String.fromCharCode(65 + j)
tmp += `<div style='display:flex;margin-left:2%;width:35%;overflow:hidden;text-overflow:ellipsis;font-size:0.9em;'>${char}.${workDescArr[j]}</div>`
if (j % 2 == 1) {
tmp += '</div>'
} }
} }
// j此刻已自增1, 故当选项为单数时, 需要补充结束标签 // j此刻已自增1, 故当选项为单数时, 需要补充结束标签
if (j % 2 == 1) { if(!aloneOption && j%2 == 1){
tmp += '</div>' tmp += '</div>';
} }
// workDescArr为 [''] 表示为 判断题或者填空题,这里不需要选项 // workDescArr为 [''] 表示为 判断题或者填空题,这里不需要选项
@ -136,31 +143,36 @@ export const processList = (row) => {
* ] * ]
*/ */
let workDescArr = JSON.parse(row[i].workdesc) let workDescArr = JSON.parse(row[i].workdesc)
let workDescHtml = `<div style='width:80%;display:flex;>` let workDescHtml = `<div style='width:100%;display:flex;>`
workDescArr.map((item, index) => { workDescArr.map((item, index) => {
if (item.type == '单选题' || item.type == '多选题') { if (item.type == '单选题' || item.type == '多选题') {
workDescHtml += `<div style='width:80%;display:flex;'>${index + 1}. ${item.title}</div>` workDescHtml += `<div style='width:100%;display:flex;'>${index + 1}. ${item.title}</div>`
let tmp = '' let tmp = ''
let j = 0 let j = 0
let optionsArr = item.options let optionsArr = item.options
for (; j < optionsArr.length; j++) { for(; j<optionsArr.length; j++){
if (j % 2 == 0) { const char = String.fromCharCode(65+j);
tmp += `<div style='width:80%;display:flex;'>` if (aloneOption) {
tmp += `<div style='width:100%;display:flex;padding: 2px 0'>${char}.${optionsArr[j]}</div>`;
}
else {
if(j%2 == 0){
tmp += `<div style='width:100%;display:flex;'>`;
}
tmp += `<div style='padding-left: 10px; width: 50%'>${char}.${optionsArr[j]}</div>`;
if(j%2 == 1){
tmp += '</div>';
} }
const char = String.fromCharCode(65 + j)
tmp += `<div style='display:flex;margin-left: 2%; width: 36%'>${char}.${optionsArr[j]}</div>`
if (j % 2 == 1) {
tmp += '</div>'
} }
} }
// j此刻已自增1, 故当选项为单数时, 需要补充结束标签 // j此刻已自增1, 故当选项为单数时, 需要补充结束标签
if (j % 2 == 1) { if(!aloneOption && j%2 == 1){
tmp += '</div>' tmp += '</div>';
} }
workDescHtml += tmp workDescHtml += tmp
} else if (item.type == '填空题' || item.type == '判断题' || item.type == '主观题') { } else if (item.type == '填空题' || item.type == '判断题' || item.type == '主观题') {
workDescHtml += `<div style='width:80%;display:flex;'>${index + 1}. ${item.title}</div>` workDescHtml += `<div style='width:100%;display:flex;'>${index + 1}. ${item.title}</div>`
} }
}) })
workDescHtml += '</div>' workDescHtml += '</div>'
@ -265,18 +277,24 @@ export const processList = (row) => {
// 处理[选项显示] - 拼接ABCD首序号 // 处理[选项显示] - 拼接ABCD首序号
let tmp = '' let tmp = ''
let j = 0 let j = 0
for (; j < workDescArr.length; j++) { for(; j<workDescArr.length; j++){
if (j % 2 == 0) { const char = String.fromCharCode(65+j);
tmp += `<div style='width:80%;display:flex;'>` if (aloneOption) {
tmp += `<div style='width:100%;display:flex;padding: 2px 0'>${char}.${workDescArr[j]}</div>`;
} }
const char = String.fromCharCode(65 + j) else {
tmp += `<div style='display:flex;margin-left: 2%; width: 36%'>${char}.${workDescArr[j]}</div>` if(j%2 == 0){
if (j % 2 == 1) { tmp += `<div style='width:100%;display:flex;'>`;
tmp += '</div>' }
tmp += `<div style='padding-left: 10px; width: 50%'>${char}.${workDescArr[j]}</div>`;
if(j%2 == 1){
tmp += '</div>';
} }
} }
if (j % 2 == 0) { }
tmp += '</div>' if(!aloneOption && j%2== 0){
tmp += '</div>';
} }
row[i].workdescFormat = tmp row[i].workdescFormat = tmp

View File

@ -1,7 +1,7 @@
<template> <template>
<el-form ref="classWorkFormScoreRef" :model="classWorkFormScore" style="height: 100%"> <el-form ref="classWorkFormScoreRef" :model="classWorkFormScore" style="height: 100%">
<!-- <div class="teacher_content" :style="{ height: dialogProps.maxheight + 'px' }"> --> <!-- <div class="teacher_content" :style="{ height: dialogProps.maxheight + 'px' }"> -->
<div class="teacher_content" :style="{ height: '100%' }"> <div class="teacher_content" :style="{ height: '100%',fontSize: '18px' }">
<div style="font-size: 18px; width: 100%; padding: 5px 10px; flex: 0 0 auto;"> <div style="font-size: 18px; width: 100%; padding: 5px 10px; flex: 0 0 auto;">
{{ classWorkFormScore.name }} 答题详情 {{ classWorkFormScore.name }} 答题详情
</div> </div>
@ -284,59 +284,27 @@
<!-- 批改评价与评语 --> <!-- 批改评价与评语 -->
<div class="tacher_conten_foot"> <div class="tacher_conten_foot">
<el-row style="padding: 1% 4%; border: 2px dotted"> <el-row style=" padding: 1% 4%; border: 2px dotted;">
<el-col :span="24" style="display: flex; flex-direction: column"> <el-col :span="24" style="display: flex;flex-direction: column;">
<el-row> <el-row>
<el-col :span="14"> <el-col :span="24">
<div style="display: flex; margin: 10px auto"> <div class="greenLine" style="text-align: left;" v-if="dialogProps.studentObj.worktype == '习题训练'">
<span style="display: flex; align-items: center"> <span style="font-weight: bold;">老师点评</span>
<span v-if="dialogProps.studentObj.worktype == '习题训练'"> <span style="margin: 0;">{{ classWorkFormScore.teacherRating.reduce((a, b) => a + b.score, 0).toFixed(2)}}</span>
<span>得分 </span> </div>
<span style="margin: 0; color: red">{{ <div style="display: flex; margin: 10px auto;align-items: center;justify-content: space-between;">
classWorkFormScore.teacherRating.reduce((a, b) => a + b.score, 0).toFixed(2)
}}</span>
<span></span>
</span>
<span v-else>
<span>得分 </span>
<span v-if="classWorkFormScore.teacherRating.length > 0">
<el-input-number
v-model="classWorkFormScore.teacherRating[0].score"
:controls="false"
type="number"
:min="0"
:max="classWorkFormScore.teacherRating[0].maxScore"
size="small"
style="width: 60px"
@change="handleChange"
></el-input-number>
</span>
<span></span>
</span>
</span>
<div class="score-container"> <div class="score-container">
<div <div
v-for="(score, index) in teacherRatingList" v-for="(score, index) in teacherRatingList"
:key="index" :key="index"
style="white-space: nowrap;" style="white-space: nowrap;"
:class="[ :class="['score-circle', { 'active': classWorkFormScore.rating == score.ratingKey }]"
'score-circle',
{ active: classWorkFormScore.rating == score.ratingKey }
]"
@click="selectScore(score)" @click="selectScore(score)"
> >
{{ score.ratingValue }} <el-text :style="{fontWeight:'bold', color: classWorkFormScore.rating == score.ratingKey ? 'rgb(225,12,8)':'rgb(131,131,131)' }">{{ score.ratingValue }}</el-text>
</div> </div>
</div> </div>
</div> <el-select v-model="value" placeholder="常用评语" style="width: 240px" @change="onSelectOption">
</el-col>
<el-col :span="10" style="display: flex; align-items: center">
<el-select
v-model="value"
placeholder="常用评语"
style="width: 240px"
@change="onSelectOption"
>
<el-option <el-option
v-for="item in cities" v-for="item in cities"
:key="item.value" :key="item.value"
@ -354,23 +322,21 @@
placeholder="输入新的常用语" placeholder="输入新的常用语"
size="small" size="small"
/> />
<el-button type="primary" size="small" @click="onConfirm"> 确定 </el-button> <el-button type="primary" size="small" @click="onConfirm">
确定
</el-button>
<el-button size="small" @click="clear">取消</el-button> <el-button size="small" @click="clear">取消</el-button>
</template> </template>
</template> </template>
</el-select> </el-select>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="24" style="display: flex; flex-direction: column"> <el-col :span="24" style="display: flex;flex-direction: column;">
<el-form-item label="评语说明"> <el-form-item>
<el-col :span="15" style="padding: 0px"> <el-col :span="24" style="padding: 0px">
<el-input <el-input row="5" type="textarea" v-model="classWorkFormScore.teacherremark" rows="1" placeholder="输入评语" />
v-model="classWorkFormScore.teacherremark"
type="textarea"
rows="1"
placeholder="请输入评语说明"
/>
</el-col> </el-col>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -975,23 +941,23 @@ defineExpose({
} }
.score-circle { .score-circle {
width: 30px; border: 1px solid rgb(131,131,131,.5);
height: 30px; padding: 5px 0;
border-radius: 50%; background-color: #fff;
background-color: pink;
color: red;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
margin: 0 10px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; margin-right: 5px;
width: 60px;
text-align: center;
} }
.score-circle.active { .score-circle.active {
background-color: red; background-color: rgb(253, 236, 224);
color: white; color: white;
border: 1px solid rgb(253, 236, 224);
}
.greenLine{
border-left: 5px solid rgb(14, 209, 22);
padding-left: 5px
} }
.card-header{ .card-header{

View File

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

View File

@ -1,9 +1,9 @@
<template> <template>
<el-row class="c-warp" :gutter="10"> <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"> <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> <template #title>
<el-popover :width="500" placement="right"> <el-popover :width="500" placement="right">
<p>{{item.def?.titletext}}</p> <p>{{item.def?.titletext}}</p>
@ -54,13 +54,13 @@
</template> </template>
</el-collapse> </el-collapse>
</el-col> </el-col>
<el-col class="right" :span="10"> <el-col class="right" :span="14">
<div class="c-item"> <div class="c-item">
<div class="title">提交情况</div> <!-- <div class="title">提交情况</div>
<div class="respond"> <div class="respond">
<el-space wrap> <el-space wrap> -->
<!-- <template v-for="it in 11"> --> <!-- <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"> <el-card shadow="hover" class="card-warp">
<div class="card-body"> <div class="card-body">
<el-progress type="dashboard" :color="colorArr" :width="80" :percentage="ratio_2(item)" /> <el-progress type="dashboard" :color="colorArr" :width="80" :percentage="ratio_2(item)" />
@ -70,7 +70,41 @@
</el-card> </el-card>
</template> </template>
</el-space> </el-space>
</div> -->
<div class="title">试题详情</div>
<!-- 习题训练 -->
<el-card style="max-width: 100%; margin-bottom: 10px; text-align: left;">
<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;">
<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> </div>
</el-col>
</el-row>
</el-card>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -84,7 +118,9 @@ import { ref, defineExpose, onMounted, reactive, computed, watch, nextTick, watc
// import * as elementPlus from 'element-plus' // ElMessage ElMessageBox // import * as elementPlus from 'element-plus' // ElMessage ElMessageBox
let colorArr = [] // -- let colorArr = [] // --
// const attrs = useAttrs() // props // const attrs = useAttrs() // props
const activeTopic = ref(0) // const activeTopic = ref(1) //
const activeExam = ref({}) //
const activeExamFlag = ref(['1']) //
let dataList = ref([]) // let dataList = ref([]) //
let studentList = ref([]) // let studentList = ref([]) //
const props = defineProps({ // defineProps const props = defineProps({ // defineProps
@ -115,7 +151,10 @@ colorArr = [
// === === // === ===
onMounted(() => { 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) === // === (methods) ===
@ -285,6 +324,18 @@ const clickInfo = async ind => {
setTimeout(() => {scrollToElement('collapse-' + ind)}, 300); setTimeout(() => {scrollToElement('collapse-' + ind)}, 300);
// elementPlus.ElMessage.warning('!') // 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 => { const scrollToElement = id => {
@ -313,8 +364,14 @@ watchEffect(() => { initData() })
background: #F2F3F5; background: #F2F3F5;
height: 100%; height: 100%;
margin: 0 !important; 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{ .c-item{
padding: 10px; padding: 10px;
background: #fff; background: #fff;
@ -362,7 +419,7 @@ watchEffect(() => { initData() })
margin-bottom: 10px; margin-bottom: 10px;
} }
.respond{ .respond{
height: calc(100% - 65px); /* height: calc(100% - 65px);*/
overflow: auto; overflow: auto;
.el-space{padding: 5px;} .el-space{padding: 5px;}
.card-warp{ .card-warp{

View File

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