2024-10-20 01:36:44 +08:00
5 changed files with 273 additions and 86 deletions
--- a/src/renderer/src/views/classTask/container/classOverview.vue
+++ b/src/renderer/src/views/classTask/container/classOverview.vue
@ -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 = '(&emsp;)'
+        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 = '(&emsp;)'
+      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>
--- a/src/renderer/src/views/classTask/container/classOverview/distribution/echarts.vue
+++ b/src/renderer/src/views/classTask/container/classOverview/distribution/echarts.vue
@ -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),
-      itemStyle: {
-        color: function (params) {
-          // 确保这里返回正确的颜色
-          return getColor(params.dataIndex);
+      type: 'pie',
+      radius: '50%', // 设置饼图的半径为实心
+      data: filteredData.map(item => ({
+        name: item.name,
+        value: item.value,
+        itemStyle: {
+          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 
+        fontSize: 12
+      },
+      labelLine: {
+        show: false // 不显示标签线
      }
    }]
  };

  myChart.setOption(options);
 }
+
 // 获取表的数据
-const showEcharts =() => {
-  useOverview.tableList.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 ++
+const showEcharts = () => {
+  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++;
        }
-      })
-    }else{
-      dataList.value.forEach((item1,index1) => {
-        if(item1.rating == item.rating){
-          item1.value ++
+      });
+    } else {
+      dataList.value.forEach((item1, index1) => {
+        if (item1.rating === item.rating) {
+          item1.value++;
        }
-      })
+      });
    }
-    
-  })
+  });
 }
-watch(() => useOverview.tableList,() => {
-  showEcharts()
+//执行
+watch(() => useOverview.tableList, () => {
+  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>
@ -123,4 +129,4 @@ watch(() => useOverview.tableList,() => {
  width: 100%;
  height: 100%;
 }
-</style>
+</style>
--- a/src/renderer/src/views/classTask/container/classOverview/distribution/stuList.vue
+++ b/src/renderer/src/views/classTask/container/classOverview/distribution/stuList.vue
@ -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
@ -79,9 +80,15 @@ const showStudents = (index) => {
    }
  })
 }
-watch(() => useOverview.tableList,() => {
+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>

 <style scoped>
--- a/src/renderer/src/views/classTask/container/classTask/item-dialog-score.vue
+++ b/src/renderer/src/views/classTask/container/classTask/item-dialog-score.vue
@ -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 }
--- a/src/renderer/src/views/classTask/teachClassTask.vue
+++ b/src/renderer/src/views/classTask/teachClassTask.vue
@ -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>