electron.vite.config.mjs

@@ -25,6 +25,7 @@ export default defineConfig({
       proxy: {
         '/dev-api': {
           target: 'http://27.128.240.72:7865',
+          // target: 'http://36.134.181.164:7863',
           // target: 'http://192.168.2.52:7863',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')

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

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+const overviewStore = defineStore(
+    'overview',
+    {
+        state: () => {
+            return {
+                tableList:[]
+            }
+        },
+        actions: {
+           getTableList(data){
+               this.tableList = [...data]
+           }
+        }
+    })
+export default overviewStore
+
+

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="common-layout" style="width: 100%; height: 73vh;">
+    <el-container>
+      <el-container>
+        <el-header style="height: auto">
+          <!--学情分布-->
+          <el-card>
+            <template #header>
+              <div style="font-size: 20px;font-weight: bold">
+                学情分布
+              </div>
+            </template>
+            <Distribution></Distribution>
+          </el-card>
+        </el-header>
+        <el-main>
+          <!--  时长分析-->
+          <el-card>
+            <template #header>
+              <div style="font-size: 20px;font-weight: bold">
+                时长分析
+              </div>
+            </template>
+            <TimeAnalyse></TimeAnalyse>
+          </el-card>
+        </el-main>
+        <el-footer style="height: auto;margin-bottom: 20px;">
+          <!--知识点概况-->
+          <el-card>
+            <template #header>
+              <div style="font-size: 20px;font-weight: bold">
+                知识点概览
+              </div>
+            </template>
+            <Konwledge></Konwledge>
+          </el-card>
+        </el-footer>
+      </el-container>
+    </el-container>
+  </div>
+
+
+</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 {defineProps,watch} from 'vue'
+import overviewStore from "@/store/modules/overview";
+// import {getBindlist} from "@/api/education/knowledgePoint";
+const useOverview = overviewStore()
+const props = defineProps({
+  tableList: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  // evalId:{
+  //   type: Number,
+  //   default: 0
+  // }
+})
+watch(() => props.tableList,() => {
+  useOverview.getTableList(props.tableList)
+},{deep:true})
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-aside width="400px">
+        <!--        柱状图学情分布-->
+        <Echarts></Echarts>
+      </el-aside>
+      <el-main>
+        <!--        列表分布的人员-->
+        <StuList></StuList>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script setup>
+import Echarts from '@/views/classTask/container/classOverview/distribution/echarts.vue'
+import StuList from "@/views/classTask/container/classOverview/distribution/stuList.vue";
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,109 @@
+<template>
+  <div className="chart-container">
+    <div ref="chartRef" className="chart"></div>
+  </div>
+</template>
+
+<script setup>
+import {ref,nextTick,watch} from 'vue';
+import * as echarts from 'echarts';
+import overviewStore from '@/store/modules/overview'
+const useOverview = overviewStore()
+
+// 获取图表容器的引用
+const chartRef = ref(null);
+
+// 数据源
+const dataList = ref([
+  {name: '优', value: 0,rating:1},
+  {name: '优-', value: 0,rating:2},
+  {name: '良', value: 0,rating:3},
+  {name: '良-', value: 0,rating:4},
+  {name: '差', value: 0,rating:5},
+]);
+
+// 根据数据生成不同的颜色
+function getColor(index) {
+  // 这里可以根据值生成不同的颜色
+  const colors = ['#d14a61','#675bba', '#e89110','#008c8c','#5793f3'];
+  return colors[index];
+}
+
+// 初始化图表
+function initChart() {
+  const myChart = echarts.init(chartRef.value);
+  const options = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    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);
+        }
+      },
+      // 显示柱子顶部的值
+      label: {
+        show: true,
+        position: 'top',
+        formatter: '{c}人',
+        color: '#333',
+        fontSize: 12
+      }
+    }]
+  };
+
+  myChart.setOption(options);
+}
+// 获取表的数据
+const showEcharts =() => {
+  useOverview.tableList.forEach(item => {
+    const index = dataList.value.findIndex(item1 => item1.rating === item.rating)
+    if(index !== -1)
+      dataList.value[index].value ++
+  })
+}
+watch(() => useOverview.tableList,() => {
+  showEcharts()
+  nextTick(() => {
+    initChart();
+  })
+})
+
+</script>
+
+<style scoped>
+.chart-container {
+  width: 100%;
+  height: 400px;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,115 @@
+<template>
+  <el-tabs :tab-position="tabPosition" style="height: 100%" class="demo-tabs" @tabChange="handelChange">
+    <template v-for="(item,index) in leftList" :key="index">
+      <el-tab-pane :label="item.label" style="text-align:left">
+        <template v-if="item.stuList.length > 0">
+          <template v-for="(stuItem,stuIndex) in item.stuList" :key="stuIndex">
+            <el-tag style="margin:5px 10px 0 0" type="primary">{{stuItem.studentname}}</el-tag>
+          </template>
+        </template>
+        <template v-else>
+          <el-empty description="该分段暂时没有学生" />
+        </template>
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+
+<script setup>
+import {nextTick, ref, watch} from 'vue'
+import overviewStore from '@/store/modules/overview'
+
+const useOverview = overviewStore()
+const tabPosition = ref('left')
+const leftList = ref([
+  {
+    label:'优',
+    stuList:[],
+    rating:1
+  },
+  {
+    label:'优-',
+    stuList:[],
+    rating:2
+  },
+  {
+    label:'良',
+    stuList:[],
+    rating:3
+  },
+  {
+    label:'良-',
+    stuList:[],
+    rating:4
+  },
+  {
+    label:'差',
+    stuList:[],
+    rating:5
+  },
+])
+//切换展示区域学生
+const handelChange = (item) => {
+  showStudents(item)
+}
+//取区域的学生
+const showStudents = (index) => {
+  console.log(useOverview.tableList,'lef')
+  leftList.value[index].stuList = useOverview.tableList.filter(item => {
+    if(item.rating == leftList.value[index].rating) return item
+  })
+}
+watch(() => useOverview.tableList,() => {
+  showStudents(0)
+})
+</script>
+
+<style scoped>
+:deep(.el-tabs__item) {
+  position: relative; /* 使 ::before 相对于自身定位 */
+  padding-left: 24px; /* 增加左边距以留出圆圈的位置 */
+}
+
+/* 圆圈样式 */
+:deep(.el-tabs__item::before) {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 2px solid #409eff; /* 创建空心圆圈 */
+  background-color: transparent; /* 设置背景颜色为透明 */
+  margin-left: 5px;
+}
+/* 根据索引设置不同的颜色 */
+:deep(.el-tabs__item:nth-child(1)::before) {
+  border-color: #5793f3;
+}
+:deep(.el-tabs__item:nth-child(2)::before) {
+  border-color: #d14a61;
+}
+:deep(.el-tabs__item:nth-child(3)::before) {
+  border-color: #675bba;
+}
+:deep(.el-tabs__item:nth-child(4)::before) {
+  border-color: #e89110;
+}
+:deep(.el-tabs__item:nth-child(5)::before) {
+  border-color: #008c8c;
+}
+/* 选中状态下的样式 */
+:deep(.el-tabs__item.is-active::before) {
+  background-color: transparent; /* 改变选中状态下的圆圈颜色 */
+}
+:deep(.el-tabs__item.is-active){
+  background-color: rgb(238, 241, 246);
+}
+:deep(.el-tabs--left .el-tabs__item.is-left){
+  text-align: left;
+  justify-content: flex-start;
+}
+
+</style>

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

@@ -0,0 +1,104 @@
+<template>
+  <el-table
+      :data="tableData"
+      style="width: 100%; margin-bottom: 20px;min-height: 300px;"
+      row-key="id"
+      border
+      default-expand-all
+  >
+    <el-table-column prop="title" label="知识点"/>
+    <el-table-column prop="allPoint" label="分值" sortable/>
+    <el-table-column prop="point" label="平均分" sortable/>
+    <el-table-column prop="scoingRate" label="得分率" sortable>
+      <template #default="scope">
+        <div>{{scope.row.scoingRate + '%'}}</div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup>
+import {ref, watch} from 'vue'
+import overviewStore from '@/store/modules/overview'
+import {listEntpcoursework} from '@/api/education/entpCourseWork'
+
+const useOverview = overviewStore()
+const tableData = ref([])
+//获取题目id
+const ids = ref('')
+//总分
+const allScore = ref(0)
+//用来获取所有知识点
+const konwledge = ref([])
+//所有题目的知识点
+const getKonwledge = () => {
+  useOverview.tableList.forEach(item => {
+    if(item.knowledgePoint){
+      konwledge.value.push({...JSON.parse(item.knowledgePoint),...{scoingRate:Number(item.scoingRate),point:item.point,allPoint:allScore.value}})
+    }
+  })
+  tableData.value = getTableList(konwledge.value)
+  tableData.value = tableData.value.map(item => {
+    return{
+      ...item,
+      allPoint: allScore.value
+    }
+  })
+  console.log(tableData.value,'tableData.value')
+}
+//获取总分
+const getScore = async () => {
+  const scoreId = useOverview.tableList[0].entpcourseworklist
+  const fixedJsonString = `[${scoreId}]`;
+  const objects = JSON.parse(fixedJsonString);
+  const id = objects.map(obj => obj.id);
+  ids.value = id.join(',')
+  const res = await listEntpcoursework({ids: ids.value, pageSize: 500})
+  if(res.code === 200){
+    allScore.value = res.rows.reduce((acc, cur) => acc + cur.workScore, 0);
+    getKonwledge()
+  }
+}
+//组装tableList表格
+const getTableList = (data) => {
+  const result = [];
+  data.forEach(item => {
+    const existingItem = result.find(i => i.id === item.id);
+    if (existingItem) {
+      // 累加point和scoingRate
+      existingItem.pointTotal += parseInt(item.point);
+      existingItem.scoingRateTotal += parseFloat(item.scoingRate);
+      existingItem.count++;
+    } else {
+      // 新的对象
+      result.push({
+        id: item.id,
+        title: item.title,
+        pointTotal: item.point,
+        scoingRateTotal: parseFloat(item.scoingRate),
+        count: 1
+      });
+    }
+  });
+
+  // 计算平均值
+  result.forEach(item => {
+    item.point = Math.round(item.pointTotal / item.count);
+    // item.scoingRate = Math.round((item.scoingRateTotal / item.count) * 100) / 100;
+    item.scoingRate = Math.round((item.point / allScore.value) * 100);
+    delete item.pointTotal;
+    delete item.scoingRateTotal;
+    delete item.count;
+  });
+
+  return result;
+}
+watch(() => useOverview.tableList,() => {
+  console.log(useOverview.tableList,'useOverview.tableList')
+  getScore()
+})
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,184 @@
+<template>
+  <div class="chart-container">
+    <div ref="chartRef" class="chart"></div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts';
+import {ref, nextTick, watch} from 'vue'
+import overviewStore from '@/store/modules/overview'
+
+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'
+        },
+        data: estimateTime.value.map(item => ({
+          name: item.name,
+          value: item.value
+        }))
+      },
+      {
+        name: `平均用时`,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 10,
+        lineStyle: {
+          color: '#d14a61'
+        },
+        data: avaterTime.value.map(item => ({
+          name: item.name,
+          value: item.value
+        }))
+      }
+    ]
+  };
+  myChart.setOption(options);
+}
+//获取平均时长
+const getAvaterTime = () => {
+  return useOverview.tableList.reduce((acc, cur) => acc + cur.finishtimelength, 0) / useOverview.tableList.length;
+}
+const getEstimateTime = () => {
+  return useOverview.tableList.reduce((acc, cur) => acc + cur.timelength, 0) / useOverview.tableList.length;
+}
+
+
+
+watch(() => useOverview.tableList,() => {
+  getyAxisData()
+  nextTick(() => {
+    initChart();
+  })
+})
+
+</script>
+
+<style scoped>
+.chart-container {
+  width: 100%;
+  height: 400px;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/renderer/src/views/classTask/container/item-dialog.vue

@@ -3,7 +3,7 @@
     v-model="classWorkAnalysis.open"
     :modal-append-to-body="false"
     class="clwk_dialog"
-    style="width: 90%; height: 85%"
+    style="width: 90%; height: 85vh"
     :show-close="false"
     top="8vh"
     append-to-body
@@ -63,7 +63,7 @@
       <div class="view_table">
         <el-radio-group
           v-model="tableRadio.value"
-          style="margin-bottom: 10px"
+          style="margin-bottom: 1px"
           @change="tableRadioChange"
         >
           <el-radio-button :value="1" :label="'已交' + '（' + tableRadio.num1 + '）'" />
@@ -143,6 +143,7 @@
     <!-- 作业报告-->
     <div v-else-if="classWorkAnalysis.view == 'report'" style="overflow-y: scroll">
       <!-- <ClassOverview :table-list="overviewData" :eval-id="courseObj.evalid"></ClassOverview> -->
+      <ClassOverview :table-list="overviewData"></ClassOverview>
     </div>
 
     <!-- <template #footer>
@@ -163,6 +164,7 @@ import { processList } from '@/hooks/useProcessList'
 import ItemDialogScore from '@/views/classTask/container/item-dialog-score.vue'
 // zdg: 组件导入
 import quizStats from '@/views/classTask/container/quizStats.vue'
+import ClassOverview from '@/views/classTask/container/classOverview.vue'
 
 const { proxy } = getCurrentInstance()
 const emit = defineEmits(['addSuccess'])
@@ -199,6 +201,9 @@ const classWorkAnalysisScore = reactive({
   quizlist: [] // 选择学生的题目list
 })
 
+ //查看学生概况数据
+ const overviewData = ref([])
+
 // watch(
 //   // () => props.currentNode,
 //   (newValue, oldValue) => {
@@ -551,9 +556,66 @@ const getWorkFeedList = async() =>{
   res.rows.forEach(o => { o.studentid = getStudentid(o.workdataid) })
   classWorkActiveData.workFeedList = res.rows
 }
+//#endregion
 
 
+//#regin 作业报告
+/*
+  author: yangws
+  time: 2024-8-06 16:35:33
+  function:作业报告的处理
+*/
+const handleClassOverviewOpen = (type) =>{
+  // 关闭右侧批阅ui
+  isopen_dtwk_table.value = false;
+  classWorkAnalysis.view = type
+  const data = classWorkAnalysis.row
+  //获取所有学生列表
+  listClassworkdata({classworkid: data.id, pageSize: 100}).then((response) => {
+    if(response.code === 200){
+      response.rows.forEach(item => {
+        let rightAnswer = 0
+        let answers = 0
+        if(!item.classworkevallist) return
+        // 使用正则表达式替换字符串值中的双引号为单引号
+        let replacedString = item.classworkevallist.replace(/""/g, "\"");
+        // 将标签中双引号改为转义, 测试数据: "{\"id\":172907, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":358520, \"feedcontent\":\"④①⑤③②\", \"score\":4, \"rightanswer\":\"④①⑤③②\"},{\"id\":172908, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":358521, \"feedcontent\":\"气壮山威，鲲鹏展翅楚云飞\", \"score\":4, \"rightanswer\":\"志远天高，春风杨柳麓山青\"},{\"id\":172909, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":363096, \"feedcontent\":\"《红烛》化用“蜡矩”这一古典意象，赋予它新的含义，赞美了红烛以“蜡炬成灰”来点亮世界的奉献精神。\", \"score\":4, \"rightanswer\":\"《立在地球边上放号》中，全诗采用间接抒情的方式，描绘了太平洋的浪潮，吟唱了一曲惊心动魄的力的颂歌，意在赞美摧毁旧世界、创造新生活的“五四”精神。\"},{\"id\":172910, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":363098, \"feedcontent\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\", \"score\":4, \"rightanswer\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\"},{\"id\":172911, \"rating\":0, \"teacherRating\":0, \"entpcourseworkid\":363100, \"feedcontent\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\", \"score\":4, \"rightanswer\":\"毛泽东重游橘子洲，面对如画的秋色和大好的革命形势，回忆过去战斗的岁月，不禁心潮起伏，<bdo class=\"mathjye-underpoint2\">浮想联翩</bdo>。\"}"
+        replacedString = escapeHtmlQuotes(item.classworkevallist);
+        let allTopic
+        try{
+          allTopic = JSON.parse(`[${item.classworkevallist}]`)
+        }catch{
+          allTopic = JSON.parse(`[${replacedString}]`)
+        }
+        if(item.classworkevallist != ''){
+          allTopic.forEach(itemTopic => {
+            if(itemTopic.feedcontent != ''){
+              answers ++
+              //正确答案，仅限单选题
+              if(itemTopic.feedcontent === itemTopic.rightanswer){
+                rightAnswer ++
+              }
+            }
+          })
+          rightAnswer > 0?item.scoingRate = (rightAnswer/answers * 100).toFixed(0):item.scoingRate = ''
+        }else{
+          item.scoingRate = ''
+        }
+        //获得总分
+        const point = allTopic.reduce((acc, cur) => {
+          if(cur.rating !== 0){
+            return acc + cur.teacherRating;
+          }
+        },0)
+        // item.chapter = this.courseObj.evalid
+        item.point = point || 0
+        item.rating = allTopic[0].rating
 
+      })
+      overviewData.value = [...response.rows]
+    }
+  })
+}
 
 //#endregion
 

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

@@ -210,7 +210,7 @@ watchEffect(() => { initData() })
 // 弹窗容器
 .c-warp{
   background: #F2F3F5;
-  height: 75vh;
+  height: 73vh;
   margin: 0 !important;
   .left{padding-left: 0 !important;}
   .right{padding-right: 0 !important;}
@@ -219,7 +219,7 @@ watchEffect(() => { initData() })
     background: #fff;
     border: none;
     overflow-y: auto;
-    height: 75vh;
+    height: 73vh;
   }
   .collapse-item{
     .item-title-o{