From cdd84fbebfa92e3eacd1ca6147274dd2b5551519 Mon Sep 17 00:00:00 2001
From: bin <1178635798@qq.com>
Date: Thu, 13 Feb 2025 20:19:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E8=BF=9B=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/Home/AssignmentList.vue         |  1 -
 TeacherHomeWork-vite/package-lock.json        | 46 +++++++++++-
 TeacherHomeWork-vite/package.json             |  1 +
 .../src/components/Sidebar.vue                |  5 +-
 TeacherHomeWork-vite/src/router/index.js      |  6 ++
 .../views/GradeManager/GradeLMangerList.vue   |  6 +-
 .../src/views/LearningProgress/LearnCard.vue  | 58 ++++++++++++++
 .../src/views/LearningProgress/LearnList.vue  | 52 +++++++++++++
 .../src/views/LearningProgress/Lhead.vue      | 51 +++++++++++++
 .../src/views/LearningProgress/Piechart.vue   | 75 +++++++++++++++++++
 .../src/views/LearningProgress/index.vue      | 13 +++-
 TeacherHomeWork-vite/yarn.lock                | 20 ++++-
 12 files changed, 322 insertions(+), 12 deletions(-)
 create mode 100644 TeacherHomeWork-vite/src/views/LearningProgress/LearnCard.vue
 create mode 100644 TeacherHomeWork-vite/src/views/LearningProgress/LearnList.vue
 create mode 100644 TeacherHomeWork-vite/src/views/LearningProgress/Lhead.vue
 create mode 100644 TeacherHomeWork-vite/src/views/LearningProgress/Piechart.vue

diff --git a/HomeWork-vite/src/views/Home/AssignmentList.vue b/HomeWork-vite/src/views/Home/AssignmentList.vue
index c17320b..374de07 100644
--- a/HomeWork-vite/src/views/Home/AssignmentList.vue
+++ b/HomeWork-vite/src/views/Home/AssignmentList.vue
@@ -48,7 +48,6 @@ const tableRowClassName = ({ row, rowIndex }: { row: User; rowIndex: number }) =
   }
 };
 
-// 保存从后端获取的作业数据
 const tableData = ref<User[]>([]);
 
 onMounted(() => {
diff --git a/TeacherHomeWork-vite/package-lock.json b/TeacherHomeWork-vite/package-lock.json
index 79b5976..48f7493 100644
--- a/TeacherHomeWork-vite/package-lock.json
+++ b/TeacherHomeWork-vite/package-lock.json
@@ -15,6 +15,7 @@
         "lodash": "^4.17.21",
         "qs": "^6.11.2",
         "vue": "^3.3.11",
+        "vue-echarts": "^7.0.3",
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
@@ -1028,7 +1029,7 @@
     },
     "node_modules/echarts": {
       "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
       "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
       "dependencies": {
         "tslib": "2.3.0",
@@ -1684,6 +1685,49 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz",
+      "integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/runtime-core": "^3.0.0",
+        "echarts": "^5.5.1",
+        "vue": "^2.7.0 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz",
diff --git a/TeacherHomeWork-vite/package.json b/TeacherHomeWork-vite/package.json
index cb1387f..c384ba9 100644
--- a/TeacherHomeWork-vite/package.json
+++ b/TeacherHomeWork-vite/package.json
@@ -16,6 +16,7 @@
     "lodash": "^4.17.21",
     "qs": "^6.11.2",
     "vue": "^3.3.11",
+    "vue-echarts": "^7.0.3",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
diff --git a/TeacherHomeWork-vite/src/components/Sidebar.vue b/TeacherHomeWork-vite/src/components/Sidebar.vue
index 358aece..d5e0244 100644
--- a/TeacherHomeWork-vite/src/components/Sidebar.vue
+++ b/TeacherHomeWork-vite/src/components/Sidebar.vue
@@ -6,7 +6,7 @@
      >
         <el-menu-item index="1" @Click="HomeworkManager">作业管理</el-menu-item>
         <el-menu-item index="2" @Click="GradeManger">成绩管理</el-menu-item>
-        <el-menu-item index="3" @Click="">学习进度</el-menu-item>
+        <el-menu-item index="3" @Click="LearningProgress">学习进度</el-menu-item>
         <el-menu-item index="4" @Click="">学期作业统计</el-menu-item>
     </el-menu>
 </template>
@@ -23,6 +23,9 @@ const HomeworkManager = () => {
 const GradeManger = () => {
   router.push("/GradeManger")
 }
+const LearningProgress  = () => {
+  router.push("/LearningProgress")
+}
 </script>
 
 <style scoped>
diff --git a/TeacherHomeWork-vite/src/router/index.js b/TeacherHomeWork-vite/src/router/index.js
index c9fa97d..141afc7 100644
--- a/TeacherHomeWork-vite/src/router/index.js
+++ b/TeacherHomeWork-vite/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 import Home from '@/views/Home/index.vue';
 import HomeworkManager from '@/views/HomeworkManager/index.vue';
 import GradeManger from '../views/GradeManager/index.vue';
+import LearningProgress from '../views/LearningProgress/index.vue';
 
 const routes = [
   {
@@ -19,6 +20,11 @@ const routes = [
     name: 'GradeManger',
     component: GradeManger,
   },
+  {
+    path: '/LearningProgress',
+    name: 'LearningProgress',
+    component: LearningProgress,
+  }
   
   // {
   //   path: '/:pathMatch(.*)*',
diff --git a/TeacherHomeWork-vite/src/views/GradeManager/GradeLMangerList.vue b/TeacherHomeWork-vite/src/views/GradeManager/GradeLMangerList.vue
index 3b3a693..c6fe742 100644
--- a/TeacherHomeWork-vite/src/views/GradeManager/GradeLMangerList.vue
+++ b/TeacherHomeWork-vite/src/views/GradeManager/GradeLMangerList.vue
@@ -137,7 +137,7 @@ const unqualified = () => console.log('显示挂科学生');
 <style scoped>
 /* 自定义样式 */
 :deep(tr.el-table__row.excellent) {
-  --el-table-tr-bg-color: #67c23a !important;
+  --el-table-tr-bg-color: rgb(133, 206, 97) !important;
   color: black !important;
 }
 :deep(tr.el-table__row.good) {
@@ -145,11 +145,11 @@ const unqualified = () => console.log('显示挂科学生');
   color: black !important;
 }
 :deep(tr.el-table__row.pass) {
-  --el-table-tr-bg-color: #e6a23c !important;
+  --el-table-tr-bg-color: rgb(235, 180, 99) !important;
   color: black !important;
 }
 :deep(tr.el-table__row.fail) {
-  --el-table-tr-bg-color: #f56c6c !important;
+  --el-table-tr-bg-color: rgb(247, 137, 137) !important;
   color: black !important;
 }
 
diff --git a/TeacherHomeWork-vite/src/views/LearningProgress/LearnCard.vue b/TeacherHomeWork-vite/src/views/LearningProgress/LearnCard.vue
new file mode 100644
index 0000000..3dca009
--- /dev/null
+++ b/TeacherHomeWork-vite/src/views/LearningProgress/LearnCard.vue
@@ -0,0 +1,58 @@
+<template>
+    <el-card class="homework-card">
+      <el-row :gutter="24">
+        <el-col :span="13">
+          <div class="homework-info">
+            <h2 style="padding-bottom: 15px;">{{ student.name }}</h2>
+            <p>班级：{{ student.class }}</p>
+            <p>学号：{{ student.number }}</p>
+         
+          </div>
+       </el-col>
+       <el-col :span="10" :push="16">
+          <div class="chart-container">
+            <span>学习进度</span>
+            <PieChart :submitted="student.submitted" :total="student.total"/>
+          </div>
+       </el-col>
+      </el-row>
+    </el-card>
+</template>
+
+<script setup>
+import PieChart from './PieChart.vue';
+
+defineProps({
+  student: Object
+});
+</script>
+
+<style scoped>
+.homework-card {
+  height: 180px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+  padding: 20px;
+  
+}
+
+.homework-info {
+  flex: 1;
+  margin: 10px;
+  text-align: left;
+}
+
+.chart-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center; 
+  flex-direction: column;
+  width: 600px;
+  height: 200px;
+}
+
+span{
+  font-size: large;
+}
+</style>
\ No newline at end of file
diff --git a/TeacherHomeWork-vite/src/views/LearningProgress/LearnList.vue b/TeacherHomeWork-vite/src/views/LearningProgress/LearnList.vue
new file mode 100644
index 0000000..c334565
--- /dev/null
+++ b/TeacherHomeWork-vite/src/views/LearningProgress/LearnList.vue
@@ -0,0 +1,52 @@
+<template>
+    <div>
+      <LearnCard
+        v-for="(student, index) in learnList"
+        :key="index"
+        :student="student"
+      />
+    </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import LearnCard from "./LearnCard.vue";
+  
+const learnList = ref([
+  {
+    name:"张麻子",
+    class:"软件工程1班",
+    number:"202210098",
+    total:"10",
+    submitted:"5"
+
+  },
+  {
+    name:"张麻子",
+    class:"软件工程1班",
+    number:"202210098",
+    total:"10",
+    submitted:"6",
+  },
+  {
+    name:"张麻子",
+    class:"软件工程1班",
+    number:"202210098",
+    total:"10",
+    submitted:"6",
+  },
+  {
+    name:"张麻子",
+    class:"软件工程1班",
+    number:"202210098",
+    total:"10",
+    submitted:"2",
+  },
+  {
+    name:"张麻子",
+    class:"软件工程1班",
+    number:"202210098",
+    total:"10",
+    submitted:"3",
+  },
+]);
+</script>
\ No newline at end of file
diff --git a/TeacherHomeWork-vite/src/views/LearningProgress/Lhead.vue b/TeacherHomeWork-vite/src/views/LearningProgress/Lhead.vue
new file mode 100644
index 0000000..45f411c
--- /dev/null
+++ b/TeacherHomeWork-vite/src/views/LearningProgress/Lhead.vue
@@ -0,0 +1,51 @@
+<template>
+<div class="container">
+<div class="head">
+  <el-select
+    v-model="value"
+    class="m-2"
+    placeholder="选择章节"
+    size="large"
+    style="width: 200px"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</div>
+
+<div class="main">
+
+
+</div>
+</div>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+
+const value =ref('')
+
+const options =[
+  {
+    value:'1',
+    label:'第一章',
+  }
+]
+
+
+</script>
+
+<style scoped>
+.container{
+  height: 100%;
+}
+.head{
+  margin-top:10px ;
+  float: left;
+}
+
+</style>
\ No newline at end of file
diff --git a/TeacherHomeWork-vite/src/views/LearningProgress/Piechart.vue b/TeacherHomeWork-vite/src/views/LearningProgress/Piechart.vue
new file mode 100644
index 0000000..e9d13d6
--- /dev/null
+++ b/TeacherHomeWork-vite/src/views/LearningProgress/Piechart.vue
@@ -0,0 +1,75 @@
+<template>
+  <VChart :option="chartOptions" style="width: 100%; height: 400px;"></VChart>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import VChart from 'vue-echarts';
+
+// 从 echarts/core 导入所需的模块
+import { use } from 'echarts/core';
+import { PieChart } from 'echarts/charts';  // 导入饼图
+import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'; // 导入组件
+import { CanvasRenderer } from 'echarts/renderers'; // 导入渲染器
+
+// 注册使用的模块
+use([PieChart, TitleComponent, TooltipComponent, LegendComponent, CanvasRenderer]);
+
+// 定义接收的 props
+const props = defineProps({
+    submitted: Number,
+    total: Number
+});
+
+// 计算已提交和未提交的比例
+const chartOptions = ref({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  series: [
+    {
+      name: '作业状态',
+      type: 'pie',
+      radius: ['40%', '70%'], 
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: '30',
+          fontWeight: 'bold'
+        }
+      },
+      data: [
+        { value: props.submitted, name: '已完成' }, // 动态值
+        { value: props.total - props.submitted, name: '未完成' } // 动态值
+      ]
+    }
+  ]
+});
+
+// 监听 props 的变化，动态更新 chartOptions
+watch(
+  () => [props.submitted, props.total],
+  () => {
+    chartOptions.value.series[0].data = [
+      { value: props.submitted, name: '已完成' },
+      { value: props.total - props.submitted, name: '未完成' }
+    ];
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+/* 可选样式，用来控制图表容器的大小 */
+</style>
diff --git a/TeacherHomeWork-vite/src/views/LearningProgress/index.vue b/TeacherHomeWork-vite/src/views/LearningProgress/index.vue
index d4e1e6b..7945686 100644
--- a/TeacherHomeWork-vite/src/views/LearningProgress/index.vue
+++ b/TeacherHomeWork-vite/src/views/LearningProgress/index.vue
@@ -1,12 +1,21 @@
 <template>
 
+<div class="common-layout">
+    <el-container>
+      <el-header><Lhead/></el-header>
+      <el-main><LearnList/></el-main>
+    </el-container>
+  </div>
+
+
 </template>
 
 <script setup>
-
+import Lhead from './Lhead.vue';
+import LearnList from './LearnList.vue';
 
 </script>
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/TeacherHomeWork-vite/yarn.lock b/TeacherHomeWork-vite/yarn.lock
index dc570fc..a605530 100644
--- a/TeacherHomeWork-vite/yarn.lock
+++ b/TeacherHomeWork-vite/yarn.lock
@@ -144,7 +144,7 @@
   dependencies:
     "@vue/shared" "3.3.11"
 
-"@vue/runtime-core@3.3.11":
+"@vue/runtime-core@^3.0.0", "@vue/runtime-core@3.3.11":
   version "3.3.11"
   resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.11.tgz"
   integrity sha512-g9ztHGwEbS5RyWaOpXuyIVFTschclnwhqEbdy5AwGhYOgc7m/q3NFwr50MirZwTTzX55JY8pSkeib9BX04NIpw==
@@ -290,9 +290,9 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-echarts@^5.6.0:
+echarts@^5.5.1, echarts@^5.6.0:
   version "5.6.0"
-  resolved "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz"
   integrity sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==
   dependencies:
     tslib "2.3.0"
@@ -638,6 +638,18 @@ vue-demi@*:
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz"
   integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
 
+vue-demi@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
+vue-echarts@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz"
+  integrity sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==
+  dependencies:
+    vue-demi "^0.13.11"
+
 vue-router@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz"
@@ -645,7 +657,7 @@ vue-router@^4.5.0:
   dependencies:
     "@vue/devtools-api" "^6.6.4"
 
-"vue@^3.0.0-0 || ^2.6.0", vue@^3.2.0, vue@^3.2.25, vue@^3.3.11, vue@3.3.11:
+"vue@^2.7.0 || ^3.1.1", "vue@^3.0.0-0 || ^2.6.0", vue@^3.2.0, vue@^3.2.25, vue@^3.3.11, vue@3.3.11:
   version "3.3.11"
   resolved "https://registry.npmmirror.com/vue/-/vue-3.3.11.tgz"
   integrity sha512-d4oBctG92CRO1cQfVBZp6WJAs0n8AK4Xf5fNjQCBeKCvMI1efGQ5E3Alt1slFJS9fZuPcFoiAiqFvQlv1X7t/w==
-- 
Gitee