优化

src/views/home/component/Attendance.tsx

@@ -85,12 +85,11 @@ export default defineComponent({
     );
     let myChart: echarts.ECharts;
     const handleInit = () => {
-      if (!data.value.attendanceRate) return;
+      if (!data.value.totalNum) return;
       if (myChart) {
         myChart.dispose();
       }
-      const chartDom = document.getElementById('attendanceEcharts')!;
-      myChart = echarts.init(chartDom, {}, { renderer: 'svg' });
+      myChart = echarts.init(echratsRef.value);
       const option: EChartsOption = {
         title: {
           text: `${data.value.attendanceRate}%`,
@@ -185,7 +184,7 @@ export default defineComponent({
           </div>
         </div>
         <div
-          style={{ display: data.value.attendanceRate ? '' : 'none' }}
+          style={{ display: data.value.totalNum ? '' : 'none' }}
           class={styles.attendanceContainer}>
           <div class={styles.attendanceEcharts} ref={echratsRef}></div>
           <div class={styles.tags}>
@@ -202,7 +201,7 @@ export default defineComponent({
           </div>
         </div>
 
-        {!data.value.attendanceRate && (
+        {!data.value.totalNum && (
           <div class={[styles.gradeContainer, styles.itemEmtry]}>
             <Image src={icon_4} />
           </div>

src/views/home/component/CurrentStudent.tsx

@@ -48,7 +48,7 @@ export default defineComponent({
   },
   setup(props) {
     const firstInit = ref(false);
-    const echratsRef = ref()
+    const echratsRef = ref();
     const { list } = toRefs(props);
     watch(
       () => list.value,
@@ -139,18 +139,27 @@ export default defineComponent({
         </div>
 
         {!firstInit.value && (
-          <Skeleton class={styles.itemEmtry}>
+          <Skeleton class={[styles.gradeContainer, styles.itemEmtry]}>
             {{
               template: () => (
-                <div style={{ display: 'flex', width: '100%' }}>
-                  <SkeletonImage />
+                <>
+                  <div
+                    class={styles.gradeEcharts}
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center'
+                    }}>
+                    <SkeletonImage style={{ width: '80%', height: '80%' }} />
+                  </div>
                   <div style={{ flex: 1, marginLeft: '16px' }}>
-                    <SkeletonParagraph row-width="60%" />
+                    <SkeletonParagraph />
+                    <SkeletonParagraph />
                     <SkeletonParagraph />
                     <SkeletonParagraph />
                     <SkeletonParagraph />
                   </div>
-                </div>
+                </>
               )
             }}
           </Skeleton>

src/views/home/component/MusicGroup.tsx

@@ -140,7 +140,7 @@ export default defineComponent({
       if (myChart) {
         myChart.dispose();
       }
-      myChart = echarts.init(echratsRef.value, {}, { renderer: 'svg' });
+      myChart = echarts.init(echratsRef.value);
       const option: EChartsOption = {
         grid: {
           left: 8,

src/views/home/component/Practice.tsx

@@ -1,4 +1,4 @@
-import { PropType, defineComponent, onMounted, toRefs, watch } from 'vue';
+import { PropType, defineComponent, onMounted, ref, toRefs, watch } from 'vue';
 import styles from '../index.module.less';
 import icons from '../icons.json';
 import { Badge, Grid, GridItem, Icon, Image, Progress, Tab, Tabs } from 'vant';
@@ -36,6 +36,7 @@ export default defineComponent({
   emits: ['change'],
   setup(props, { emit }) {
     const { data } = toRefs(props);
+    const tab = ref('week')
     return () => (
       <div class={styles.item}>
         <div class={styles.top}>
@@ -46,9 +47,9 @@ export default defineComponent({
         <div class={styles.tabsContainer}>
           <Tabs
             shrink
-            active={"week"}
+            v-model:active={tab.value}
             onChange={value => {
-              console.log(value);
+              console.log(value)
               emit('change', value);
             }}>
             <Tab name="week" title="本周"></Tab>

src/views/home/component/Subjects.tsx

@@ -35,7 +35,7 @@ export default defineComponent({
   },
   setup(props) {
     const firstInit = ref(false);
-    const echratsRef = ref()
+    const echratsRef = ref();
     const { list } = toRefs(props);
     watch(
       () => list.value,
@@ -53,7 +53,7 @@ export default defineComponent({
         myChart.dispose();
       }
 
-      myChart = echarts.init(echratsRef.value, {}, { renderer: 'svg' });
+      myChart = echarts.init(echratsRef.value);
       const option: EChartsOption = {
         grid: {
           left: 8,
@@ -117,13 +117,13 @@ export default defineComponent({
             <Skeleton loading={true}>
               {{
                 template: () => (
-                  <div style={{ display: 'flex', width: '100%' }}>
-                    <div style={{ width: '100%' }}>
-                      <SkeletonParagraph />
-                      <SkeletonParagraph />
-                      <SkeletonParagraph />
-                      <SkeletonParagraph />
-                    </div>
+                  <div class={styles.subjectEcharts}>
+                    <SkeletonParagraph />
+                    <SkeletonParagraph />
+                    <SkeletonParagraph />
+                    <SkeletonParagraph />
+                    <SkeletonParagraph />
+                    <SkeletonParagraph />
                   </div>
                 )
               }}

src/views/home/contentItem.tsx

@@ -73,9 +73,7 @@ export default defineComponent({
       const res = await api_schoolIndexAttendanceStat({
         period
       });
-      if (res.data) {
-        data.studentAttendance = res.data;
-      }
+      data.studentAttendance = res.data || {};
     };
 
     /** 练习统计 */
@@ -83,9 +81,7 @@ export default defineComponent({
       const res = await api_schoolIndexLessonStat({
         period
       });
-      if (res.data) {
-        data.studentLessons = res.data;
-      }
+      data.studentLessons = res.data || {};
     };
 
     const init = () => {
@@ -104,13 +100,13 @@ export default defineComponent({
         <DetailData data={data.subjectGradeDistributions} />
         <Attendance
           data={data.studentAttendance}
-          onChange={(value) => {
+          onChange={value => {
             getAttendanceStat(value);
           }}
         />
         <Practice
           data={data.studentLessons}
-          onChange={(value) => {
+          onChange={value => {
             getLessonStat(value);
           }}
         />

src/views/home/index.tsx

@@ -11,7 +11,8 @@ export default defineComponent({
   setup() {
     const homeData = reactive({
       /** 乐团列表 */
-      musicGroups: [] as IMusicGroup[]
+      musicGroups: [] as IMusicGroup[],
+      tab: 'home'
     });
     /** 获取学校乐团列表 */
     const getMusicGroup = async () => {
@@ -27,12 +28,13 @@ export default defineComponent({
     return () => (
       <div class={styles.home}>
         <Tabs
+          v-model:active={homeData.tab}
           class={styles.homeTab}
           swipeThreshold={3}
           animated
           swipeable
           sticky>
-          <Tab title="数据汇总">
+          <Tab title="数据汇总" name="home">
             <ContentItem />
           </Tab>
           {homeData.musicGroups.map(group => (