Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c0d2c3bf 1 parent 41db0921

refactor(teacher): 调整班级页面统计布局并优化数据展示 

将出勤率和任务完成的列宽调整为各占一半，移除学习进度统计
添加计算属性格式化统计数据显示，从接口获取实际数据计算百分比
Inline Side-by-side
Showing 1 changed file with 17 additions and 9 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2025-01-20 10:00:00 3 * @Date: 2025-01-20 10:00:00
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2025-06-28 21:42:55 5 + * @LastEditTime: 2025-06-30 13:24:15
6 * @FilePath: /mlaj/src/views/teacher/myClassPage.vue 6 * @FilePath: /mlaj/src/views/teacher/myClassPage.vue
7 * @Description: 我的班级页面 7 * @Description: 我的班级页面
8 --> 8 -->
...@@ -44,27 +44,27 @@ ...@@ -44,27 +44,27 @@
44 <div> 44 <div>
45 <van-row> 45 <van-row>
46 <!-- 出勤率 --> 46 <!-- 出勤率 -->
47 - <van-col span="8"> 47 + <van-col span="12">
48 <div class="bg-white p-4 text-center"> 48 <div class="bg-white p-4 text-center">
49 <div class="relative w-16 h-16 mx-auto mb-2"> 49 <div class="relative w-16 h-16 mx-auto mb-2">
50 - <van-circle v-model:current-rate="attendanceRate" :rate="attendanceRate" 50 + <van-circle v-model:current-rate="checkinCount" :rate="checkinCount"
51 - :text="attendanceRate + '%'" stroke-width="70" color="#10b981" size="64" layer-color="#eee" /> 51 + :text="checkinCountText" stroke-width="70" color="#10b981" size="64" layer-color="#eee" />
52 </div> 52 </div>
53 <div class="text-sm text-gray-600">出勤率</div> 53 <div class="text-sm text-gray-600">出勤率</div>
54 </div> 54 </div>
55 </van-col> 55 </van-col>
56 <!-- 任务完成 --> 56 <!-- 任务完成 -->
57 - <van-col span="8"> 57 + <van-col span="12">
58 <div class="bg-white p-4 text-center"> 58 <div class="bg-white p-4 text-center">
59 <div class="relative w-16 h-16 mx-auto mb-2"> 59 <div class="relative w-16 h-16 mx-auto mb-2">
60 - <van-circle v-model:current-rate="taskCompletionRate" :rate="taskCompletionRate" layer-color="#eee" 60 + <van-circle v-model:current-rate="uploadCount" :rate="uploadCount" layer-color="#eee"
61 - :text="taskCompletionRate + '%'" stroke-width="70" color="#3b82f6" size="64" /> 61 + :text="uploadCountText" stroke-width="70" color="#3b82f6" size="64" />
62 </div> 62 </div>
63 <div class="text-sm text-gray-600">任务完成</div> 63 <div class="text-sm text-gray-600">任务完成</div>
64 </div> 64 </div>
65 </van-col> 65 </van-col>
66 <!-- 学习进度 --> 66 <!-- 学习进度 -->
67 - <van-col span="8"> 67 + <!-- <van-col span="8">
68 <div class="bg-white p-4 text-center"> 68 <div class="bg-white p-4 text-center">
69 <div class="relative w-16 h-16 mx-auto mb-2"> 69 <div class="relative w-16 h-16 mx-auto mb-2">
70 <van-circle v-model:current-rate="learningProgress" :rate="learningProgress" layer-color="#eee" 70 <van-circle v-model:current-rate="learningProgress" :rate="learningProgress" layer-color="#eee"
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
72 </div> 72 </div>
73 <div class="text-sm text-gray-600">学习进度</div> 73 <div class="text-sm text-gray-600">学习进度</div>
74 </div> 74 </div>
75 - </van-col> 75 + </van-col> -->
76 </van-row> 76 </van-row>
77 </div> 77 </div>
78 78
...@@ -344,6 +344,12 @@ const handleStudentClick = (student) => { ...@@ -344,6 +344,12 @@ const handleStudentClick = (student) => {
344 }) 344 })
345 } 345 }
346 346
347 +// 统计数据
348 +const checkinCount = ref(0);
349 +const checkinCountText = computed(() => checkinCount.value.toFixed(1) + '%');
350 +const uploadCount = ref(0);
351 +const uploadCountText = computed(() => uploadCount.value.toFixed(1) + '%');
352 +
347 /** 353 /**
348 * 加载更多数据 354 * 加载更多数据
349 */ 355 */
...@@ -374,6 +380,8 @@ const onLoad = async () => { ...@@ -374,6 +380,8 @@ const onLoad = async () => {
374 finished.value = res.data.user_list.length < limit.value; 380 finished.value = res.data.user_list.length < limit.value;
375 page.value = nextPage + 1; 381 page.value = nextPage + 1;
376 studentCount.value = res.data.count; 382 studentCount.value = res.data.count;
383 + checkinCount.value = res.data.real_checkin_count/res.data.need_checkin_count * 100;
384 + uploadCount.value = res.data.real_upload_count/res.data.need_upload_count * 100;
377 } 385 }
378 } catch (error) { 386 } catch (error) {
379 // 如果是取消请求的错误，不需要处理 387 // 如果是取消请求的错误，不需要处理
......