add：用时分析改为柱状图;

2024-10-24 14:36:35 +08:00 · 2024-10-24 14:36:35 +08:00 · eba6727dc0
parent 8a759479bd
commit eba6727dc0
7 changed files with 144 additions and 172 deletions
--- a/src/renderer/src/store/modules/overview.js
+++ b/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
--- a/src/renderer/src/utils/tool.js
+++ b/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()}`,
--- a/src/renderer/src/views/classTask/container/classOverview.vue
+++ b/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
-  stuHasAnswers.value = [...data[0].hasAnswers]
+  useOverview.getAllData([...data])
 }
 // 百分比现在 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)
--- a/src/renderer/src/views/classTask/container/classOverview/distribution.vue
+++ b/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>
--- a/src/renderer/src/views/classTask/container/classOverview/distribution/echarts.vue
+++ b/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();
--- a/src/renderer/src/views/classTask/container/classOverview/distribution/stuList.vue
+++ b/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>
--- a/src/renderer/src/views/classTask/container/classOverview/timeAnalyse.vue
+++ b/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: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross'
-      }
-    },
-    legend: {
-      data: ['预估时长', '平均用时']
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      top: '10%',
-      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'
+      // 指定图表的配置项和数据
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: function(parms) {
+            let str =
+              parms[0].axisValue +
+              "</br>" +
+              parms[0].marker +
+              "平均用时：" +
+              parms[0].value + 's'
+            return str;
+          },
+  
        },
-        data: estimateTime.value.map(item => ({
-          name: item.name,
-          value: item.value
-        }))
-      },
-      {
-        name: `平均用时`,
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 10,
-        lineStyle: {
-          color: '#d14a61'
+        textStyle: {
+          color: "#333",
        },
-        data: avaterTime.value.map(item => ({
-          name: item.name,
-          value: item.value
-        }))
-      }
-    ]
-  };
-  myChart.setOption(options);
+        color: ["#7BA9FA", "#4690FA"],
+        grid: {
+          containLabel: true,
+          left: "10%",
+          top: "20%",
+          bottom: "10%",
+          right: "10%",
+        },
+        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 = () => {
-  return useOverview.tableList.reduce((acc, cur) => acc + cur.finishtimelength, 0) / useOverview.tableList.length;
+  //获取平均时长纵坐标
+const getYValue = () => {
+  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();
  })