hookehuyr

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

将出勤率和任务完成的列宽调整为各占一半,移除学习进度统计
添加计算属性格式化统计数据显示,从接口获取实际数据计算百分比
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2025-01-20 10:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-28 21:42:55
* @LastEditTime: 2025-06-30 13:24:15
* @FilePath: /mlaj/src/views/teacher/myClassPage.vue
* @Description: 我的班级页面
-->
......@@ -44,27 +44,27 @@
<div>
<van-row>
<!-- 出勤率 -->
<van-col span="8">
<van-col span="12">
<div class="bg-white p-4 text-center">
<div class="relative w-16 h-16 mx-auto mb-2">
<van-circle v-model:current-rate="attendanceRate" :rate="attendanceRate"
:text="attendanceRate + '%'" stroke-width="70" color="#10b981" size="64" layer-color="#eee" />
<van-circle v-model:current-rate="checkinCount" :rate="checkinCount"
:text="checkinCountText" stroke-width="70" color="#10b981" size="64" layer-color="#eee" />
</div>
<div class="text-sm text-gray-600">出勤率</div>
</div>
</van-col>
<!-- 任务完成 -->
<van-col span="8">
<van-col span="12">
<div class="bg-white p-4 text-center">
<div class="relative w-16 h-16 mx-auto mb-2">
<van-circle v-model:current-rate="taskCompletionRate" :rate="taskCompletionRate" layer-color="#eee"
:text="taskCompletionRate + '%'" stroke-width="70" color="#3b82f6" size="64" />
<van-circle v-model:current-rate="uploadCount" :rate="uploadCount" layer-color="#eee"
:text="uploadCountText" stroke-width="70" color="#3b82f6" size="64" />
</div>
<div class="text-sm text-gray-600">任务完成</div>
</div>
</van-col>
<!-- 学习进度 -->
<van-col span="8">
<!-- <van-col span="8">
<div class="bg-white p-4 text-center">
<div class="relative w-16 h-16 mx-auto mb-2">
<van-circle v-model:current-rate="learningProgress" :rate="learningProgress" layer-color="#eee"
......@@ -72,7 +72,7 @@
</div>
<div class="text-sm text-gray-600">学习进度</div>
</div>
</van-col>
</van-col> -->
</van-row>
</div>
......@@ -344,6 +344,12 @@ const handleStudentClick = (student) => {
})
}
// 统计数据
const checkinCount = ref(0);
const checkinCountText = computed(() => checkinCount.value.toFixed(1) + '%');
const uploadCount = ref(0);
const uploadCountText = computed(() => uploadCount.value.toFixed(1) + '%');
/**
* 加载更多数据
*/
......@@ -374,6 +380,8 @@ const onLoad = async () => {
finished.value = res.data.user_list.length < limit.value;
page.value = nextPage + 1;
studentCount.value = res.data.count;
checkinCount.value = res.data.real_checkin_count/res.data.need_checkin_count * 100;
uploadCount.value = res.data.real_upload_count/res.data.need_upload_count * 100;
}
} catch (error) {
// 如果是取消请求的错误,不需要处理
......