多个乐团

src/views/home/api.ts

@@ -2,13 +2,10 @@ import request from '@/helpers/request';
 
 /**
  * 根据合作单位获取所有乐团列表
- * @param cooperationId 合作单位
  * @returns 
  */
-export const api_musicGroupFindByCooperationId = (cooperationId: string) => {
-  return request.get('/api-web/musicGroup/findByCooperationId', {
-    params: { cooperationId }
-  });
+export const api_musicGroupFindByCooperationId = () => {
+  return request.get('/api-web/cooperationOrgan/musicGroupPage');
 };
 /**
  * 统计

src/views/home/component/Attendance.tsx

@@ -69,6 +69,7 @@ export default defineComponent({
   emits: ['change'],
   setup(props, { emit }) {
     const firstInit = ref(false);
+    const echratsRef = ref()
     const router = useRouter();
     const { data } = toRefs(props);
     watch(
@@ -173,7 +174,7 @@ export default defineComponent({
         <div
           style={{ display: data.value.attendanceRate ? '' : 'none' }}
           class={styles.attendanceContainer}>
-          <div class={styles.attendanceEcharts} id="attendanceEcharts"></div>
+          <div class={styles.attendanceEcharts} ref={echratsRef}></div>
           <div class={styles.tags}>
             {colors.map((item, index) => (
               <div class={styles.tag}>

src/views/home/component/CurrentStudent.tsx

@@ -48,6 +48,7 @@ export default defineComponent({
   },
   setup(props) {
     const firstInit = ref(false);
+    const echratsRef = ref()
     const { list } = toRefs(props);
     watch(
       () => list.value,
@@ -64,8 +65,7 @@ export default defineComponent({
       if (myChart) {
         myChart.dispose();
       }
-      const chartDom = document.getElementById('CurrentStudent')!;
-      myChart = echarts.init(chartDom, {}, { renderer: 'svg' });
+      myChart = echarts.init(echratsRef.value, {}, { renderer: 'svg' });
       const option: EChartsOption = {
         title: {
           text: list.value
@@ -159,7 +159,7 @@ export default defineComponent({
         <div
           style={{ display: list.value.length ? '' : 'none' }}
           class={styles.gradeContainer}>
-          <div class={styles.gradeEcharts} id="CurrentStudent"></div>
+          <div class={styles.gradeEcharts} ref={echratsRef}></div>
           <div class={styles.tags}>
             {list.value.map((item: IGradeDistribution, i: number) => (
               <div class={styles.tag}>

src/views/home/component/MusicGroup.tsx

@@ -47,6 +47,7 @@ export default defineComponent({
   },
   setup(props) {
     const activeSubject = ref('');
+    const echratsRef = ref()
     const { data } = toRefs(props);
 
     /** 根据声部 过滤数据源 */
@@ -139,8 +140,7 @@ export default defineComponent({
       if (myChart) {
         myChart.dispose();
       }
-      const chartDom = document.getElementById('musicGroupEcharts')!;
-      myChart = echarts.init(chartDom, {}, { renderer: 'svg' });
+      myChart = echarts.init(echratsRef.value, {}, { renderer: 'svg' });
       const option: EChartsOption = {
         grid: {
           left: 8,
@@ -227,7 +227,7 @@ export default defineComponent({
         <div
           style={{ display: data.value.length ? '' : 'none' }}
           class={styles.musicGroupContainer}>
-          <div class={styles.musicGroupEcharts} id="musicGroupEcharts"></div>
+          <div class={styles.musicGroupEcharts} ref={echratsRef}></div>
           <div class={styles.tags}>
             {Object.values(musicGroups.value).map(item => (
               <div class={styles.tag}>

src/views/home/component/Subjects.tsx

@@ -35,6 +35,7 @@ export default defineComponent({
   },
   setup(props) {
     const firstInit = ref(false);
+    const echratsRef = ref()
     const { list } = toRefs(props);
     watch(
       () => list.value,
@@ -52,8 +53,7 @@ export default defineComponent({
         myChart.dispose();
       }
 
-      const chartDom = document.getElementById('subjectEcharts')!;
-      myChart = echarts.init(chartDom, {}, { renderer: 'svg' });
+      myChart = echarts.init(echratsRef.value, {}, { renderer: 'svg' });
       const option: EChartsOption = {
         grid: {
           left: 8,
@@ -133,7 +133,7 @@ export default defineComponent({
         <div
           style={{ display: list.value.length ? '' : 'none' }}
           class={styles.subjectContainer}>
-          <div class={styles.subjectEcharts} id="subjectEcharts"></div>
+          <div class={styles.subjectEcharts} ref={echratsRef}></div>
         </div>
 
         {firstInit.value && !list.value.length && (

src/views/home/contentItem.tsx

@@ -43,7 +43,7 @@ export default defineComponent({
     const { musicGroupId } = toRefs(props);
     /** 统计 */
     const getSchool = async () => {
-      const res = await api_schoolIndexStat({});
+      const res = await api_schoolIndexStat({musicGroupId: musicGroupId.value});
       if (res.data) {
         const {
           gradeDistributions,

src/views/home/index.tsx

@@ -1,36 +1,46 @@
-import { Button, Tab, Tabs } from 'vant';
+import { Tab, Tabs } from 'vant';
 import { defineComponent, onMounted, reactive } from 'vue';
-import styles from './index.module.less'
+import styles from './index.module.less';
 
-import { api_musicGroupFindByCooperationId, api_schoolIndexStat } from './api';
-import { state } from '@/state';
+import { api_musicGroupFindByCooperationId } from './api';
 import ContentItem from './contentItem';
-
+import { IMusicGroup } from './type';
 
 export default defineComponent({
   name: 'home-page',
   setup() {
     const homeData = reactive({
-
-    })
+      /** 乐团列表 */
+      musicGroups: [] as IMusicGroup[]
+    });
     /** 获取学校乐团列表 */
     const getMusicGroup = async () => {
-      await api_musicGroupFindByCooperationId(state?.user?.data.schoolId)
-    }
+      const res = await api_musicGroupFindByCooperationId();
+      if (Array.isArray(res.data)) {
+        homeData.musicGroups = res.data;
+      }
+    };
 
-    
     onMounted(() => {
-      getMusicGroup()
-    })
+      getMusicGroup();
+    });
     return () => (
       <div class={styles.home}>
-        <Tabs class={styles.homeTab} animated swipeable lazyRender sticky>
+        <Tabs
+          class={styles.homeTab}
+          swipeThreshold={3}
+          animated
+          swipeable
+          lazyRender
+          sticky>
           <Tab title="数据汇总">
             <ContentItem />
           </Tab>
-          <Tab title="武汉小学乐团"></Tab>
-          <Tab title="武汉小学预备团"></Tab>
-          <Tab title="武汉小学标准团"></Tab>
+          {homeData.musicGroups.map(group => (
+            <Tab title={group.name} name={group.id}>
+              <ContentItem musicGroupId={group.id} />
+            </Tab>
+          ))}
         </Tabs>
       </div>
     );

src/views/home/type.ts

@@ -1,3 +1,9 @@
+export interface IMusicGroup {
+    /** 乐团名称 */
+    name: string
+    /** 乐团ID */
+    id: string
+}
 /** 年级分布 */
 export interface IGradeDistribution {
   /** 年级 */