fix：训练报告整体修改；
This commit is contained in:
小杨
parent
6b63235084
commit
46d5078cac
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="common-layout" style="width: 100%; height: 73vh;">
|
||||
<div class="common-layout" style="width: 100%">
|
||||
<el-container>
|
||||
<el-container>
|
||||
<el-header style="height: auto">
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<el-card>
|
||||
<template #header>
|
||||
<div style="font-size: 20px;font-weight: bold">
|
||||
学情分布
|
||||
等级分布
|
||||
</div>
|
||||
</template>
|
||||
<Distribution></Distribution>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<el-card>
|
||||
<template #header>
|
||||
<div style="font-size: 20px;font-weight: bold">
|
||||
时长分析
|
||||
用时分析
|
||||
</div>
|
||||
</template>
|
||||
<TimeAnalyse></TimeAnalyse>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<el-card>
|
||||
<template #header>
|
||||
<div style="font-size: 20px;font-weight: bold">
|
||||
知识点概览
|
||||
价值透析
|
||||
</div>
|
||||
</template>
|
||||
<Konwledge></Konwledge>
|
||||
|
|
@ -43,12 +43,12 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import Distribution from '@/views/classTask/container/classOverview/distribution.vue'
|
||||
import Konwledge from '@/views/classTask/container/classOverview/knowledge.vue'
|
||||
import TimeAnalyse from '@/views/classTask/container/classOverview/timeAnalyse.vue'
|
||||
import {ref,watchEffect,provide } from 'vue'
|
||||
import Distribution from './classOverview/distribution.vue'
|
||||
import Konwledge from './classOverview/knowledge.vue'
|
||||
import TimeAnalyse from './classOverview/timeAnalyse.vue'
|
||||
import {defineProps,watch} from 'vue'
|
||||
import overviewStore from "@/store/modules/overview";
|
||||
// import {getBindlist} from "@/api/education/knowledgePoint";
|
||||
const useOverview = overviewStore()
|
||||
const props = defineProps({
|
||||
tableList: {
|
||||
|
|
@ -57,12 +57,185 @@ const props = defineProps({
|
|||
return []
|
||||
}
|
||||
},
|
||||
// evalId:{
|
||||
// type: Number,
|
||||
// default: 0
|
||||
// }
|
||||
evalId:{
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
activeData: { // 数据
|
||||
type: Object,
|
||||
// required: true, // 必传
|
||||
default: () => ({
|
||||
quizlist: [], // 当前习题列表
|
||||
studentList: [], // 当前课程-所有学生
|
||||
workFeedList: [] // 当前课程-所有学生反馈数据
|
||||
})
|
||||
},
|
||||
})
|
||||
let studentList = ref([]) // 学生数据
|
||||
const stuHasAnswers = ref([]) // 已经答过题的学生不管对错
|
||||
|
||||
// 初始-数据处理
|
||||
const initData = () => {
|
||||
console.log('xxx', props)
|
||||
// window.test = activeCourse
|
||||
studentList.value = props.activeData.studentList || []
|
||||
const activeWorkFeedList = props.activeData.workFeedList || []
|
||||
const quizlist = props.activeData.quizlist || []
|
||||
// 习题特殊处理
|
||||
let data = quizlist.map(o => {
|
||||
// 解析题选项
|
||||
const workdesc = o.workdesc || ''
|
||||
let accSum = 0 // 该题总人数
|
||||
let activeIds = [] // 已做答学生
|
||||
let rightIds = [] // 正确学生
|
||||
let hasAnswers= [] // 答过题的学生
|
||||
let timeAnalyse = [] // 平均时长和编号
|
||||
const quizFeedList = activeWorkFeedList.filter(f => f.entpcourseworkid == o.id) // 做该题的列表
|
||||
let children = []
|
||||
const allStudents = [];
|
||||
if (o.worktype == '单选题') { // '单选题','多选题'
|
||||
const list = workdesc.includes('#&') ? workdesc.split('#&') : isJson(workdesc)?JSON.parse(workdesc):[];
|
||||
children = list.map((v,i) => {
|
||||
const code = toCode(i) // 转换 A-Z
|
||||
const isOk = (isJson(workdesc)?JSON.parse(o.workanswer):o.workanswer||'').includes(i+'') // 是否(包含)正确答案
|
||||
// 改选项的学生id
|
||||
const studentIds = quizFeedList.filter(f => f.feedcontent==v&&f.finishtimelength!='0').map(f => f.studentid)||[];
|
||||
accSum += studentIds.length;
|
||||
if (isOk) {
|
||||
activeIds.push(...studentIds)
|
||||
}
|
||||
hasAnswers.push(...studentIds)
|
||||
return { def: v, code, isOk, studentIds }
|
||||
})
|
||||
}
|
||||
else if (o.worktype == '多选题') {
|
||||
// 多选题的正确率单独处理
|
||||
rightIds = quizFeedList.filter(f => {
|
||||
const workanswer = (isJson(o.workanswer)) ? JSON.parse(o.workanswer) : o.workanswer || [];
|
||||
const res = isSame((f.feedcontent||'').split(','), workanswer);
|
||||
return f.entpcourseworkid == o.id && f.finishtimelength!='0' && res;
|
||||
});
|
||||
|
||||
const list = workdesc.includes('#&') ? workdesc.split('#&') : isJson(workdesc)?JSON.parse(workdesc):[];
|
||||
children = list.map((v,i) => {
|
||||
const isOne = o.worktype == '单选题'
|
||||
const code = toCode(i) // 转换 A-Z
|
||||
// const isOk = isOne ? i == o.workanswer : o.workanswer.includes(i) // 是否(包含)正确答案
|
||||
const isOk = (isJson(workdesc)?JSON.parse(o.workanswer):o.workanswer||'').includes(i+'') // 是否(包含)正确答案
|
||||
// 改选项的学生id
|
||||
const studentIds = quizFeedList.filter(f => f.feedcontent.includes(i)&&f.finishtimelength!='0').map(f => f.studentid)||[];
|
||||
accSum += studentIds.length;
|
||||
if (studentIds.length>0) {
|
||||
allStudents.push(...studentIds);
|
||||
}
|
||||
if(isOk) {
|
||||
activeIds=[...new Set(activeIds.concat(studentIds))] // 多选去重
|
||||
}
|
||||
hasAnswers=[...new Set(hasAnswers.concat(studentIds))]
|
||||
return { def: v, code, isOk, studentIds }
|
||||
})
|
||||
}
|
||||
else if (o.worktype == '填空题') { // 填空题
|
||||
const regex = /<!--BA-->(.*?)<!--EA-->/g // 定义正则表达式，匹配 <!--BA-->xxx<!--EA--> 格式的内容
|
||||
children = (o.title||'').match(regex).map((v,i) => {
|
||||
const def = `填空项 ${i+1}`
|
||||
//const code = '( )'
|
||||
const code = '(略)', txt=v
|
||||
// 改选项的学生id
|
||||
const studentIds = quizFeedList.filter(f => !!(f.feedcontent||'').replace(/#$/,'').split('#')[i] && f.finishtimelength!='0').map(f => f.studentid)||[]
|
||||
activeIds=[...new Set(activeIds.concat(studentIds))] // 多选去重
|
||||
hasAnswers=[...new Set(hasAnswers.concat(studentIds))]
|
||||
accSum = activeIds.length
|
||||
return { def, code, txt, isOk:true, studentIds }
|
||||
})
|
||||
} else if (o.worktype == '判断题') { // 判断题
|
||||
const list = ['正确', '错误'];
|
||||
children = list.map((v,i) => {
|
||||
const workanswer = o.workanswer
|
||||
.replace('×', '0')
|
||||
.replace('√', '1')
|
||||
.replace('错误', '0')
|
||||
.replace('正确', '1')
|
||||
.replace('正确。', '1')
|
||||
.replace('F', '0')
|
||||
.replace('T', '1')
|
||||
.replace('错', '0')
|
||||
.replace('对', '1');
|
||||
const workanswerFormat = isJson(workanswer) ? JSON.parse(workanswer) : workanswer||''
|
||||
const code = v=='正确' ? '1' : '0'
|
||||
let isOk = (workanswerFormat).includes(code)
|
||||
// warn: 看是否需要转为回答正常的显示， 当前为学生实际回答字面的正确和错误
|
||||
// if (workanswerFormat == '0') {
|
||||
// isOk = !isOk;
|
||||
// }
|
||||
// 改选项的学生id
|
||||
const studentIds = quizFeedList.filter(f => {
|
||||
const feedcontent = f.feedcontent
|
||||
.replace('×', '0')
|
||||
.replace('√', '1')
|
||||
.replace('错误', '0')
|
||||
.replace('正确', '1')
|
||||
.replace('正确。', '1')
|
||||
.replace('F', '0')
|
||||
.replace('T', '1')
|
||||
.replace('错', '0')
|
||||
.replace('对', '1');
|
||||
if(feedcontent == code&&f.finishtimelength!='0'){
|
||||
return f
|
||||
}
|
||||
}).map(f => f.studentid)||[];
|
||||
accSum += studentIds.length;
|
||||
if(isOk) activeIds.push(...studentIds)
|
||||
hasAnswers.push(...studentIds)
|
||||
return { def: v, code: v, isOk, studentIds }
|
||||
})
|
||||
} else { // 论述题
|
||||
// code = '( )'
|
||||
const code = '(略)', def = '解答内容'
|
||||
const studentIds = quizFeedList.filter(f => !!(f.feedcontent||'').replace(/#$/,'')&&f.finishtimelength!='0').map(f => f.studentid)||[]
|
||||
activeIds=[...new Set(activeIds.concat(studentIds))] // 多选去重
|
||||
hasAnswers=[...new Set(hasAnswers.concat(studentIds))]
|
||||
accSum = activeIds.length
|
||||
children = [{ def, code, isOk:true, studentIds }]
|
||||
}
|
||||
|
||||
const studentSum = studentList.value.length || 0 // 当前推送答题人数
|
||||
let points = percent((activeIds.length / (studentSum||1)).toFixed(2)) // 计算得分率
|
||||
let rightSum = activeIds.length; // 回答正确人数
|
||||
|
||||
// 多选题单独处理
|
||||
if (o.worktype == '多选题') {
|
||||
// 单独重新处理人数问题
|
||||
const uniqueTmpStuents = [...new Set(allStudents)];
|
||||
accSum = uniqueTmpStuents.length;
|
||||
// 单独处理得分率
|
||||
points = percent((rightIds.length / (studentSum||1)).toFixed(2)) // 计算得分率
|
||||
// 回答正确人数
|
||||
rightSum = rightIds.length;
|
||||
}
|
||||
|
||||
// def: 原始题数据 type 类型 active: 选中 points: 得分率, accSum 题解答人数
|
||||
return { def: o, id: o.id, type: o.worktype, active: [], points, accSum, rightSum, children,hasAnswers }
|
||||
})
|
||||
console.log('获取数据: ', data)
|
||||
stuHasAnswers.value = [...data[0].hasAnswers]
|
||||
provide('hasAnswer', stuHasAnswers.value)
|
||||
}
|
||||
// 百分比现在 0-100
|
||||
const percent = v => v > 1 ? 1 : v < 0 ? 0 : Math.round(v * 100)
|
||||
// Unicode 转 字符 差值65
|
||||
const toCode = (v, b) => b ? v.charCodeAt() - 65 : String.fromCharCode(v + 65)
|
||||
// 判断是否为json字符串
|
||||
const isJson = str => {if(typeof str == 'string'){
|
||||
try {
|
||||
const res = JSON.parse(str)
|
||||
if(typeof res == 'object' && res) return true
|
||||
} catch (error) {}}return false
|
||||
}
|
||||
|
||||
watch(() => props.tableList,() => {
|
||||
useOverview.getTableList(props.tableList)
|
||||
},{deep:true})
|
||||
// === 监听器 ===
|
||||
watchEffect(() => { initData() })
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,40 @@
|
|||
<template>
|
||||
<div className="chart-container">
|
||||
<div ref="chartRef" className="chart"></div>
|
||||
<div class="chart-container">
|
||||
<div ref="chartRef" class="chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref,nextTick,watch} from 'vue';
|
||||
import { ref, nextTick, watch, inject,watchEffect } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import overviewStore from '@/store/modules/overview'
|
||||
const useOverview = overviewStore()
|
||||
import overviewStore from '@/store/modules/overview';
|
||||
const useOverview = overviewStore();
|
||||
|
||||
// 获取图表容器的引用
|
||||
const chartRef = ref(null);
|
||||
|
||||
// 数据源
|
||||
const dataList = ref([
|
||||
{name: '完美', value: 0,rating:1,max:100,min:100,},
|
||||
{name: '优秀', value: 0,rating:2,max:99,min:80,},
|
||||
{name: '良好', value: 0,rating:3,max:79,min:70,},
|
||||
{name: '及格', value: 0,rating:4,max:69,min:60,},
|
||||
{name: '不及格', value: 0,rating:5,max:59,min:0,},
|
||||
{ name: '完美', value: 0, rating: 1, max: 100, min: 100 },
|
||||
{ name: '优秀', value: 0, rating: 2, max: 99, min: 80 },
|
||||
{ name: '良好', value: 0, rating: 3, max: 79, min: 70 },
|
||||
{ name: '及格', value: 0, rating: 4, max: 69, min: 60 },
|
||||
{ name: '不及格', value: 0, rating: 5, max: 59, min: 0 },
|
||||
]);
|
||||
// 答过题的学生才进行统计
|
||||
const hasAnswersData = ref([]);
|
||||
const hasStudents = ref([])
|
||||
|
||||
// 根据数据生成不同的颜色
|
||||
function getColor(index) {
|
||||
// 这里可以根据值生成不同的颜色
|
||||
const colors = ['#d14a61','#675bba', '#e89110','#008c8c','#5793f3'];
|
||||
return colors[index];
|
||||
function getColor(name) {
|
||||
const colorMap = {
|
||||
'完美': '#d14a61',
|
||||
'优秀': '#675bba',
|
||||
'良好': '#e89110',
|
||||
'及格': '#008c8c',
|
||||
'不及格': '#5793f3'
|
||||
};
|
||||
return colorMap[name];
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
|
|
@ -34,83 +42,81 @@ function initChart() {
|
|||
const myChart = echarts.init(chartRef.value);
|
||||
const total = dataList.value.reduce((acc, cur) => acc + cur.value, 0); // 计算总数
|
||||
|
||||
// 过滤掉值为0的数据项
|
||||
const filteredData = dataList.value.filter(item => item.value > 0);
|
||||
|
||||
const options = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
trigger: 'item',
|
||||
formatter: params => {
|
||||
const value = params.value;
|
||||
const percentage = value ? ((value / total) * 100).toFixed(2) : 0; // 计算百分比并保留两位小数
|
||||
return `${params.name}: ${value}人 (${percentage}%)`; // 显示为百分比形式
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dataList.value.map(item => item.name),
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
name: '数据',
|
||||
type: 'bar',
|
||||
barWidth: '30%',
|
||||
data: dataList.value.map(item => item.value),
|
||||
type: 'pie',
|
||||
radius: '50%', // 设置饼图的半径为实心
|
||||
data: filteredData.map(item => ({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
// 确保这里返回正确的颜色
|
||||
return getColor(params.dataIndex);
|
||||
color: getColor(item.name)
|
||||
}
|
||||
},
|
||||
// 显示柱子顶部的值
|
||||
})),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
position: 'inside', // 将标签显示在饼图内部
|
||||
formatter: params => {
|
||||
const value = dataList.value[params.dataIndex].value;
|
||||
const percentage = value ? ((value / total) * 100).toFixed() : 0; // 计算百分比并保留两位小数
|
||||
return `${value}人 ${percentage}%`; // 显示为百分比形式
|
||||
const value = params.value;
|
||||
const percentage = value ? ((value / total) * 100).toFixed(2) : 0; // 计算百分比并保留两位小数
|
||||
return `${params.name}\n${value}人 (${percentage}%)`; // 显示为百分比形式，换行显示
|
||||
},
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
},
|
||||
labelLine: {
|
||||
show: false // 不显示标签线
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
myChart.setOption(options);
|
||||
}
|
||||
|
||||
// 获取表的数据
|
||||
const showEcharts = () => {
|
||||
useOverview.tableList.forEach((item,index) => {
|
||||
hasStudents.value.forEach((item, index) => {
|
||||
if (item.rating === 0) {
|
||||
dataList.value.forEach((item1, index1) => {
|
||||
if (item1.min <= Number(item.scoingRate) && Number(item.scoingRate) <= item1.max) {
|
||||
item1.value ++
|
||||
item1.value++;
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
dataList.value.forEach((item1, index1) => {
|
||||
if(item1.rating == item.rating){
|
||||
item1.value ++
|
||||
if (item1.rating === item.rating) {
|
||||
item1.value++;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
}
|
||||
//执行
|
||||
watch(() => useOverview.tableList, () => {
|
||||
showEcharts()
|
||||
hasStudents.value = useOverview.tableList.filter(item => hasAnswersData.value.includes(item.studentid)).map(item => item);
|
||||
showEcharts();
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
})
|
||||
})
|
||||
|
||||
});
|
||||
},{deep: true})
|
||||
//监听
|
||||
watchEffect(() => {
|
||||
const stus = inject('hasAnswer');
|
||||
if (!stus) return;
|
||||
hasAnswersData.value = [...stus]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -16,11 +16,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import {nextTick, ref, watch} from 'vue'
|
||||
import {nextTick, ref, watch,inject,watchEffect} from 'vue'
|
||||
import overviewStore from '@/store/modules/overview'
|
||||
|
||||
const useOverview = overviewStore()
|
||||
const tabPosition = ref('left')
|
||||
//答过题的学生才进行统计
|
||||
const hasAnswersData = ref([])
|
||||
const hasStudents = ref([])
|
||||
const leftList = ref([
|
||||
{
|
||||
label:'完美',
|
||||
|
|
@ -65,9 +68,7 @@ const handelChange = (item) => {
|
|||
}
|
||||
//取区域的学生
|
||||
const showStudents = (index) => {
|
||||
console.log(useOverview.tableList,'useOverview.tableList');
|
||||
|
||||
leftList.value[index].stuList = useOverview.tableList.filter(item => {
|
||||
leftList.value[index].stuList = hasStudents.value.filter(item => {
|
||||
if(item.rating === 0){
|
||||
if(leftList.value[index].min <= Number(item.scoingRate || 0) && Number(item.scoingRate || 0) <= leftList.value[index].max ){
|
||||
return item
|
||||
|
|
@ -80,7 +81,13 @@ const showStudents = (index) => {
|
|||
})
|
||||
}
|
||||
watch(() => useOverview.tableList, () => {
|
||||
hasStudents.value = useOverview.tableList.filter(item => hasAnswersData.value.includes(item.studentid)).map(item => item);
|
||||
showStudents(0)
|
||||
},{deep: true})
|
||||
watchEffect(() => {
|
||||
const stus = inject('hasAnswer')
|
||||
if(!stus) return
|
||||
hasAnswersData.value = [...stus]
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -318,6 +318,7 @@
|
|||
<div
|
||||
v-for="(score, index) in teacherRatingList"
|
||||
:key="index"
|
||||
style="white-space: nowrap;"
|
||||
:class="[
|
||||
'score-circle',
|
||||
{ active: classWorkFormScore.rating == score.ratingKey }
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@
|
|||
<!-- 整体分析-->
|
||||
<div v-else-if="classWorkAnalysis.view == 'report'" style="width: 100%;overflow-y: scroll">
|
||||
<!-- <ClassOverview :table-list="overviewData" :eval-id="courseObj.evalid"></ClassOverview> -->
|
||||
<ClassOverview :table-list="overviewData" style="width: 100%;"></ClassOverview>
|
||||
<ClassOverview :active-data="classWorkActiveData" :table-list="overviewData" style="width: 100%;"></ClassOverview>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue