mschool/src/views/home/component/Practice.tsx

import { PropType, defineComponent, onMounted, 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';
import { IStudentLessons } from '../type';
const colors = [
  {
    name: '正常',
    background: 'linear-gradient(180deg, #02E2DB 0%, #01C1B5 100%)'
  },
  {
    text: '迟到',
    background:
      'linear-gradient(180deg, rgba(148, 194, 253, 0.85) 0%, rgba(91, 143, 249, 0.85) 100%)'
  },
  {
    text: '请假',
    background:
      'linear-gradient(180deg, rgba(251,224,49,0.85) 0%, rgba(246,189,22,0.85) 100%)'
  },
  {
    text: '旷课',
    background:
      'linear-gradient(180deg, rgba(245,161,129,0.85) 0%, rgba(232,104,74,0.85) 100%)'
  }
];

export default defineComponent({
  name: 'Practice',
  props: {
    data: {
      type: Object as PropType<IStudentLessons>,
      default: () => ({})
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const { data } = toRefs(props);
    return () => (
      <div class={styles.item}>
        <div class={styles.top}>
          <Image class={styles.iconRight} src={icons.right} />
          <span>学员练习</span>
          <Image class={styles.iconLeft} src={icons.left} />
        </div>
        <div class={styles.tabsContainer}>
          <Tabs
            shrink
            active={"本周"}
            onChange={value => {
              console.log(value);
              emit('change', value);
            }}>
            <Tab name="本周" title="本周"></Tab>
            <Tab name="本月" title="本月"></Tab>
            <Tab name="本学期" title="本学期"></Tab>
          </Tabs>
        </div>
        <div class={styles.practiceContainer}>
          <Grid border={false}>
            <GridItem>
              {{
                icon: () => (
                  <div>
                    <span class={styles.tagNum}>{data.value.commitRate || 0}</span>%
                  </div>
                ),
                text: () => <div>提交率</div>
              }}
            </GridItem>
            <GridItem>
              {{
                icon: () => (
                  <div>
                    <span class={styles.tagNum}>{data.value.passRate || 0}</span>%
                  </div>
                ),
                text: () => <div>合格率</div>
              }}
            </GridItem>
          </Grid>
          <div class={styles.progressItem}>
            <Progress
              percentage={data.value.expectNum || 1}
              strokeWidth={8}
              trackColor="transparent"
              showPivot={false}
              color="linear-gradient(to right, #9AC6FF, #8DB2FF)"></Progress>
            <div>
              应提交{' '}
              <span style={{ color: '#8DB2FF' }} class={styles.tagNum}>
                {data.value.expectNum || 0}
              </span>
              人
            </div>
          </div>
          <div class={styles.progressItem}>
            <Progress
              percentage={data.value.actualNum || 1}
              strokeWidth={8}
              trackColor="transparent"
              showPivot={false}
              color="linear-gradient(to right, #91F4DA, #85DFCF)"></Progress>
            <div>
              实际提交{' '}
              <span style={{ color: '#85DFCF' }} class={styles.tagNum}>
                {data.value.actualNum || 0}
              </span>
              人
            </div>
          </div>
          <div class={styles.progressItem}>
            <Progress
              percentage={data.value.passNum || 1}
              strokeWidth={8}
              trackColor="transparent"
              showPivot={false}
              color="linear-gradient(to right, #FFDCAC, #FFD378)"></Progress>
            <div>
              合格提交{' '}
              <span style={{ color: '#FFD378' }} class={styles.tagNum}>
                {data.value.passNum || 0}
              </span>
              人
            </div>
          </div>
        </div>
      </div>
    );
  }
});