ieplus-app/src/pagesStudy/pages/study-history/components/knowledge-history-teacher.vue

<template>
  <view class="mt-40 flex items-center justify-end gap-x-10">
    <text class="text-24 text-fore-light">平均正确率</text>
    <text class="text-30 text-fore-title font-bold">{{ averageRate.toFixed(1) }}%</text>
  </view>
  <view class="mt-10">
    <progress :percent="averageRate" stroke-width="12" activeColor="#68D119" backgroundColor="#F2F2F2"
      :border-radius="8" class="custom-progress" />
  </view>
  <view class="mt-76">
    <student-stat-table :teach-class="teachClass" :data="studentStatData" @rowClick="handleRowClick" />
  </view>
</template>
<script lang="ts" setup>
import { OPEN_KNOWLEDGE_DETAIL } from '@/types/injectionSymbols';
import studentStatTable from './student-stat-table.vue';
import { StudentPlanStudyRecord, TeachClass } from '@/types/study';
import { getClassKnowledgeRecord } from '@/api/modules/study';
const openKnowledgeDetail = inject(OPEN_KNOWLEDGE_DETAIL);
const props = defineProps({
  teachClass: {
    type: Object as PropType<TeachClass>,
    default: () => ({})
  }
});
const studentStatData = ref<StudentPlanStudyRecord[]>([]);
const averageRate = ref(0);

const loadData = async () => {
  getClassKnowledgeRecord({
    classId: props.teachClass.classId,
  }).then(res => {
    studentStatData.value = res.data.list;
    averageRate.value = res.data.rate;
  })
}

const handleRowClick = (row: StudentPlanStudyRecord) => {
  openKnowledgeDetail?.(row.id, row.name);
}

watch(() => props.teachClass, (newVal) => {
  if (newVal.classId) {
    loadData();
  }
}, {
  deep: true,
  immediate: true
});
</script>
<style lang="scss" scoped></style>