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

import {
  PropType,
  computed,
  defineComponent,
  onMounted,
  toRefs,
  watch
} from 'vue';
import styles from '../index.module.less';
import icons from '../icons.json';
import { Badge, Image } from 'vant';
import { ISubjectGradeDistribution } from '../type';

const colors = [
  '#21B3D7',
  '#DF8010',
  '#17BDA6',
  
  '#21B3D7',
  '#DF8010',
  '#17BDA6',

  '#21B3D7',
  '#DF8010',
  '#17BDA6',

  '#21B3D7',
  '#DF8010',
  '#17BDA6',

  '#21B3D7',
  '#DF8010',
  '#17BDA6',
];

export default defineComponent({
  name: 'DetailData',
  props: {
    data: {
      type: Array as PropType<ISubjectGradeDistribution[]>,
      default: () => []
    }
  },
  setup(props) {
    const { data } = toRefs(props);

    /** 声部列表 */
    const subjects = computed(() => {
      let list = data.value.reduce((list: any[], item) => {
        const _itemIndex = list.findIndex(
          _item => _item.subjectName === item.subjectName
        );
        if (_itemIndex > -1) {
          const listItem = list[_itemIndex];
          listItem[item.grade] = item.studentNum;
        } else {
          list.push({
            subjectName: item.subjectName,
            [item.grade]: item.studentNum
          });
        }
        return list;
      }, []);
      if (!list.length) {
        list = ['长笛', '单簧管', '萨克斯', '小号', '圆号', '长号', '上低音号'].map((n, i) => {
          return {
            subjectName: n,
            '总人数': 0,
            '一年级': 0,
            '二年级': 0,
            '三年级': 0,
            '四年级': 0,
            '五年级': 0,
            '六年级': 0,
          };
        })
        
      }
      return list;
    });

    /** 年级列表 */
    const gradeList = computed(() => {
      let index = -1;
      let _list = Array.from(new Set(data.value.map(item => item.grade)))
        .filter(item => item !== '总人数')
        .map(item => {
          if (index >= colors.length - 1) index = 0;
          else ++index;
          return {
            name: item,
            color: colors[index]
          };
        });
      if (!_list.length) {
        _list = ['一', '二', '三', '四', '五', '六'].map((n, i) => {
          if (index >= colors.length - 1) index = 0;
          else ++index;
          return {
            name: n + '年级',
            color: colors[index]
          };
        });
      }
      return _list;
    });

    return () => (
      <div class={styles.item}>
        <div class={[styles.itemTop, styles.detailDataContainerTop]}>
          <Image class={styles.icon} src={icons[4]} />
          <div class={styles.title}>详细数据</div>
          <div class={styles.des}>(单位：人)</div>
        </div>
        <div class={styles.detailDataContainer}>
          <div class={styles.detailLeft}>
            <div>
              <div style={{background: '#F8F8F8'}} class={[styles.tableTitle, styles.totalTableTitle]}>声部</div>
              {subjects.value.map(item => (
                <div class={styles.tableTr}>{item.subjectName}</div>
              ))}
            </div>
            <div class={styles.center}>
              <div style={{background: '#F2F2F2'}} class={[styles.tableTitle]}>总人数</div>
              {subjects.value.map(item => (
                <div class={styles.tableTr}>{item['总人数']}</div>
              ))}
            </div>
          </div>
          <div
            class={[styles.detailRight, styles.center]}
            onTouchmove={(e: Event) => e.stopPropagation()}
            onMousemove={(e: Event) => e.stopPropagation()}>
            {gradeList.value.map(item => (
              <div style={{ color: item.color }}>
                <div class={styles.tableTitle}>
                  <div style={{ background: item.color }}></div>
                  <div>{item.name}</div>
                </div>
                {subjects.value.map((_n, _index) => (
                  <div class={styles.tableTr}>{_n[item.name] || 0}</div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
});