mschool/src/views/home/contentItem.tsx

import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import CurrentStudent from './component/CurrentStudent';
import Subjects from './component/Subjects';
import MusicGroup from './component/MusicGroup';
import DetailData from './component/DetailData';
import Attendance from './component/Attendance';
import Practice from './component/Practice';
import {
  api_schoolIndexAttendanceStat,
  api_schoolIndexLessonStat,
  api_schoolIndexStat
} from './api';
import {
  IGradeDistribution,
  IMusicGradeDistribution,
  IStudentAttendance,
  IStudentLessons,
  ISubjectDistribution,
  ISubjectGradeDistribution
} from './type';

export default defineComponent({
  name: 'content',
  props: {
    musicGroupId: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const data = reactive({
      gradeDistributions: [] as IGradeDistribution[],
      /** 声部分布 */
      subjectDistributions: [] as ISubjectDistribution[],
      /** 年级分布 */
      musicGradeDistributions: [] as IMusicGradeDistribution[],
      subjectGradeDistributions: [] as ISubjectGradeDistribution[],
      /** 出勤 */
      studentAttendance: {} as IStudentAttendance,
      /** 练习 */
      studentLessons: {} as IStudentLessons
    });
    const { musicGroupId } = toRefs(props);
    /** 统计 */
    const getSchool = async () => {
      const res = await api_schoolIndexStat({
        musicGroupId: musicGroupId.value
      });
      if (res.data) {
        const {
          gradeDistributions,
          subjectDistributions,
          musicGradeDistributions,
          subjectGradeDistributions
        } = res.data;
        if (gradeDistributions) {
          data.gradeDistributions = gradeDistributions;
        }
        if (subjectDistributions) {
          data.subjectDistributions = subjectDistributions;
        }
        if (musicGradeDistributions) {
          data.musicGradeDistributions = musicGradeDistributions;
        }
        if (subjectGradeDistributions) {
          data.subjectGradeDistributions = subjectGradeDistributions;
        }
      }
    };

    /** 出勤统计 */
    const getAttendanceStat = async (period: string) => {
      const res = await api_schoolIndexAttendanceStat({
        period
      });
      if (res.data) {
        data.studentAttendance = res.data;
      }
    };

    /** 练习统计 */
    const getLessonStat = async (period: string) => {
      const res = await api_schoolIndexLessonStat({
        period
      });
      if (res.data) {
        data.studentLessons = res.data;
      }
    };

    const init = () => {
      getSchool();
      getAttendanceStat('week');
      getLessonStat('week');
    };
    onMounted(() => {
      init();
    });
    return () => (
      <div>
        <CurrentStudent list={data.gradeDistributions} />
        <Subjects list={data.subjectDistributions} />
        <MusicGroup data={data.musicGradeDistributions} />
        <DetailData data={data.subjectGradeDistributions} />
        <Attendance
          data={data.studentAttendance}
          onChange={(value) => {
            getAttendanceStat(value);
          }}
        />
        <Practice
          data={data.studentLessons}
          onChange={(value) => {
            getLessonStat(value);
          }}
        />
      </div>
    );
  }
});