Merge pull request 'add：用时分析改为柱状图;' (#359) from yangws into main

Reviewed-on: #359

src/renderer/src/store/modules/overview.js

@@ -4,13 +4,18 @@ const overviewStore = defineStore(
     {
         state: () => {
             return {
-                tableList:[]
+                tableList:[],
+                allData:[]
             }
         },
         actions: {
            getTableList(data){
                this.tableList = [...data]
-           }
+           },
+           //整理的所有列表
+           getAllData(data){
+            this.allData = [...data]
+        }
         }
     })
 export default overviewStore

src/renderer/src/utils/tool.js

@@ -370,7 +370,7 @@ const eventHandles = (type, win) => {
 export const toLinkWeb = (path) => {
   const config = baseConfig()
   // console.log(config)
-  const fullPath = config.url + path
+  const fullPath = ' https://localhost:7860/' + path
   // 通知主进程
   ipcRenderer.send('openWindow', {
     key: `win-${Date.now()}`,

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

@@ -10,7 +10,7 @@
                 等级分布
               </div>
             </template>
-            <Distribution :stuHasAnswers=stuHasAnswers></Distribution>
+            <Distribution></Distribution>
           </el-card>
         </el-header>
         <el-main>
@@ -72,7 +72,6 @@ const props = defineProps({
   },
 })
 let studentList = ref([])         // 学生数据
-const stuHasAnswers = ref([])      // 已经答过题的学生不管对错
 
 // 初始-数据处理
 const initData = () => {
@@ -81,6 +80,7 @@ const initData = () => {
   studentList.value = props.activeData.studentList || []
   const activeWorkFeedList = props.activeData.workFeedList || []
   const quizlist = props.activeData.quizlist || []
+  const timeArr = groupByField(props.activeData.workFeedList,'entpcourseworkid')
   // 习题特殊处理
   let data = quizlist.map(o => {
     // 解析题选项 
@@ -91,6 +91,13 @@ const initData = () => {
     let hasAnswers= []              // 答过题的学生
     let timeAnalyse = []            // 平均时长和编号
     const quizFeedList = activeWorkFeedList.filter(f => f.entpcourseworkid == o.id) // 做该题的列表
+    // 获取所有的做题时间
+    timeArr.forEach((item,index) => {
+      const arr = item.reduce((acc, cur) => {
+          return acc + (cur.timelength ? Number(cur.timelength) : 0);
+      },0)
+      timeAnalyse.push(arr)
+    })
     let children = []
     const allStudents = [];
     if (o.worktype == '单选题') { // '单选题','多选题'
@@ -215,12 +222,10 @@ const initData = () => {
     }
 
     // def: 原始题数据 type 类型 active: 选中 points: 得分率, accSum 题解答人数
-    return { def: o, id: o.id, type: o.worktype, active: [], points, accSum, rightSum, children,hasAnswers }
+    return { def: o, id: o.id, type: o.worktype, active: [], points, accSum, rightSum, children,hasAnswers,timeAnalyse }
   })
-  console.log('获取数据: ', data)
   if (data.length === 0) return
-  if (!data[0].hasAnswers[0]) return
+  useOverview.getAllData([...data])
-  stuHasAnswers.value = [...data[0].hasAnswers]
 }
 // 百分比现在 0-100
 const percent = v => v > 1 ? 1 : v < 0 ? 0 : Math.round(v * 100)
@@ -233,6 +238,20 @@ const isJson = str => {if(typeof str == 'string'){
     if(typeof res == 'object' && res) return true
   } catch (error) {}}return false
 }
+// 获取到学生的平均回答时间
+const groupByField = (array, field) => {
+  const groupedMap = {};
+  array.forEach(item => {
+    const key = item[field];
+    if (!groupedMap[key]) {
+      groupedMap[key] = [];
+    }
+    groupedMap[key].push(item);
+  });
+
+  // 将映射对象转换为二维数组
+  return Object.values(groupedMap);
+}
 
 watch(() => props.tableList,() => {
   useOverview.getTableList(props.tableList)

src/renderer/src/views/classTask/container/classOverview/distribution.vue

@@ -3,26 +3,19 @@
     <el-container>
       <el-aside width="400px">
         <!--        柱状图学情分布-->
-        <Echarts :stuHasAnswers=stuHasAnswers></Echarts>
+        <Echarts></Echarts>
       </el-aside>
       <el-main>
         <!--        列表分布的人员-->
-        <StuList :stuHasAnswers=stuHasAnswers></StuList>
+        <StuList></StuList>
       </el-main>
     </el-container>
   </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
 import Echarts from './distribution/echarts.vue'
 import StuList from "./distribution/stuList.vue";
-const props = defineProps({
-  stuHasAnswers: {
-    type: Array,
-    default: () => []
-  }
-})
 </script>
 
 <style scoped>

src/renderer/src/views/classTask/container/classOverview/distribution/echarts.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { ref, nextTick, watch, inject,watchEffect } from 'vue';
+import { ref, nextTick, watch } from 'vue';
 import * as echarts from 'echarts';
 import overviewStore from '@/store/modules/overview';
 const useOverview = overviewStore();
@@ -13,13 +13,6 @@ const useOverview = overviewStore();
 // 获取图表容器的引用
 const chartRef = ref(null);
 
-const props = defineProps({
-  stuHasAnswers: {
-    type: Array,
-    default: () => []
-  }
-})
-
 // 数据源
 const dataList = ref([
   { name: '完美', value: 0, rating: 1, max: 100, min: 100 },
@@ -111,7 +104,7 @@ const showEcharts = () => {
 }
 //执行
 watch(() => useOverview.tableList, () => {
-  hasStudents.value = useOverview.tableList.filter(item => props.stuHasAnswers.includes(item.studentid)).map(item => item);
+  hasStudents.value = useOverview.tableList.filter(item => useOverview.allData[0].hasAnswers.includes(item.studentid)).map(item => item);
   showEcharts();
   nextTick(() => {
     initChart();

src/renderer/src/views/classTask/container/classOverview/distribution/stuList.vue

@@ -22,12 +22,6 @@ import overviewStore from '@/store/modules/overview'
 const useOverview = overviewStore()
 const tabPosition = ref('left')
 
-const props = defineProps({
-  stuHasAnswers: {
-    type: Array,
-    default: () => []
-  }
-})
 //答过题的学生才进行统计
 const hasStudents = ref([])
 const leftList = ref([
@@ -87,7 +81,7 @@ const showStudents = (index) => {
   })
 }
 watch(() => useOverview.tableList, () => {
-  hasStudents.value = useOverview.tableList.filter(item => props.stuHasAnswers.includes(item.studentid)).map(item => item);
+  hasStudents.value = useOverview.tableList.filter(item => useOverview.allData[0].hasAnswers.includes(item.studentid)).map(item => item);
   showStudents(0)
 },{deep: true})
 </script>

src/renderer/src/views/classTask/container/classOverview/timeAnalyse.vue

@@ -14,156 +14,124 @@ const useOverview = overviewStore()
 // 获取图表容器的引用
 const chartRef = ref(null);
 
-const estimateTime = ref([]);
-
-const avaterTime = ref([]);
-// x轴
-const xAxisData = ref([]);
-
-// 获得 y 轴的数据
-const getyAxisData = () => {
-  estimateTime.value = [];
-  avaterTime.value = [];
-  useOverview.tableList.forEach(item => {
-    if (item.rating !== 0) {
-      estimateTime.value.push({
-        name: item.scoingRate ? item.scoingRate + '%' : 0 + '%',
-        value: Number(item.timelength)
-      });
-      avaterTime.value.push({
-        name: item.scoingRate ? item.scoingRate + '%' : 0 + '%',
-        value: Number(item.finishtimelength)
-      });
-    }
-  });
-
-  // x 轴排序
-  xAxisData.value.sort((a, b) => {
-    const aPercentage = parseInt(a.replace('%', ''));
-    const bPercentage = parseInt(b.replace('%', ''));
-    return aPercentage - bPercentage;
-  });
-
-  // 生成 x 轴数据
-  generateXAxisData();
-};
-
-// 生成 x 轴数据
-function generateXAxisData() {
-  // 超过8条开始计算x轴
-  if(estimateTime.value.length > 8){
-    const minScoreRate = 0;
-    const maxScoreRate = 100;
-    const numPoints = 6; // x 轴上的点数
-    const step = (maxScoreRate - minScoreRate) / (numPoints - 1);
-
-    xAxisData.value = [];
-    for (let i = 0; i < numPoints; i++) {
-      const scoreRate = minScoreRate + i * step;
-      xAxisData.value.push(scoreRate + '%');
-    }
-  }else{
-    let uniqueXAxisData = new Set();
-    estimateTime.value.forEach(item => {
-      // 添加元素到 Set 中，自动处理重复问题
-      uniqueXAxisData.add(item.name);
-    });
-    // 将 Set 转换成数组
-    xAxisData.value = Array.from(uniqueXAxisData);
-    // 对数组进行排序
-    xAxisData.value.sort((a, b) => {
-      const aPercentage = parseInt(a.replace('%', ''));
-      const bPercentage = parseInt(b.replace('%', ''));
-      return aPercentage - bPercentage;
-    });
-  }
-}
-
 // 初始化图表
 function initChart() {
   const myChart = echarts.init(chartRef.value);
-  const options = {
+      // 指定图表的配置项和数据
-    tooltip: {
+      let option = {
-      trigger: 'axis',
+        tooltip: {
-      axisPointer: {
+          trigger: "axis",
-        type: 'cross'
+          axisPointer: {
-      }
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-    },
+          },
-    legend: {
+          formatter: function(parms) {
-      data: ['预估时长', '平均用时']
+            let str =
-    },
+              parms[0].axisValue +
-    grid: {
+              "</br>" +
-      left: '3%',
+              parms[0].marker +
-      right: '4%',
+              "平均用时：" +
-      bottom: '3%',
+              parms[0].value + 's'
-      top: '10%',
+            return str;
-      containLabel: true
+          },
-    },
+  
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      name: '得分率',
-      nameTextStyle: {
-        color: '#999',
-        fontSize: 12,
-        padding: [0, 0, 10, 0]
-      },
-      data: xAxisData.value
-    },
-    yAxis: {
-      type: 'value',
-      name: '作业时长',
-      nameTextStyle: {
-        color: '#999',
-        fontSize: 12,
-        padding: [0, 0, 10, 0]
-      },
-    },
-    series: [
-      {
-        name: `预估时长`,
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 10,
-        lineStyle: {
-          color: '#5793f3'
         },
-        data: estimateTime.value.map(item => ({
+        textStyle: {
-          name: item.name,
+          color: "#333",
-          value: item.value
-        }))
-      },
-      {
-        name: `平均用时`,
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 10,
-        lineStyle: {
-          color: '#d14a61'
         },
-        data: avaterTime.value.map(item => ({
+        color: ["#7BA9FA", "#4690FA"],
-          name: item.name,
+        grid: {
-          value: item.value
+          containLabel: true,
-        }))
+          left: "10%",
-      }
+          top: "20%",
-    ]
+          bottom: "10%",
-  };
+          right: "10%",
-  myChart.setOption(options);
+        },
+        xAxis: {
+          type: "category",
+          data: getXValue(),
+          axisLine: {
+            lineStyle: {
+              color: "#333",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            margin: 20, //刻度标签与轴线之间的距离。
+            textStyle: {
+              color: "#000",
+            },
+          },
+          name:'题目编号'
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#B5B5B5",
+            },
+          },
+          name:'平均时长',
+          splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              color: ["#B5B5B5"],
+              type: "dashed",
+              opacity: 0.5,
+            },
+          },
+          axisLabel: {},
+        },
+        series: [{
+          data: getYValue(),
+          stack: "zs",
+          type: "bar",
+          barMaxWidth: "auto",
+          barWidth: 60,
+          itemStyle: {
+            color: {
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              type: "linear",
+              global: false,
+              colorStops: [{
+                offset: 0,
+                color: "#5EA1FF",
+              },
+                {
+                  offset: 1,
+                  color: "#90BEFF",
+                },
+              ],
+            },
+          },
+        },
+        ],
+      };
+  myChart.setOption(option);
 }
-//获取平均时长
+  //获取平均时长纵坐标
-const getAvaterTime = () => {
+const getYValue = () => {
-  return useOverview.tableList.reduce((acc, cur) => acc + cur.finishtimelength, 0) / useOverview.tableList.length;
+  const arr =  [...useOverview.allData[0].timeAnalyse]
+  const num = useOverview.allData[0].hasAnswers.length
+  
+  return arr.map(item => {
+    return item ? (item / num).toFixed(2) : 0
+  })
 }
-const getEstimateTime = () => {
+   // 获取横纵轴坐标数据
-  return useOverview.tableList.reduce((acc, cur) => acc + cur.timelength, 0) / useOverview.tableList.length;
+const getXValue = () => {
+  return useOverview.allData.map(item => item.id)
 }
 
 
 
 watch(() => useOverview.tableList,() => {
-  getyAxisData()
+  //获取横纵坐标
   nextTick(() => {
     initChart();
   })